Magang-2025/Kasir
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[update EditSales,Sales,CreateSales, Kategori,EditKategori, CreateKategori]

Browse Source
This commit is contained in:
timotiabbauftech 2025-09-02 14:10:43 +07:00
parent 3f654c6c7a
commit 11954568ae
6 changed files with 36 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
resources/js/components/CreateKategori.vue
View File

@ -1,4 +1,5 @@
<template> <template>
<div v-if="isOpen" class="fixed inset-0 flex items-center justify-center bg-black/75 z-50"> <div v-if="isOpen" class="fixed inset-0 flex items-center justify-center bg-black/75 z-50">
<div class="bg-white rounded-lg shadow-lg w-96 p-6 relative"> <div class="bg-white rounded-lg shadow-lg w-96 p-6 relative">
<!-- Header --> <!-- Header -->
@ -31,7 +32,7 @@
<button <button
@click="saveKategori" @click="saveKategori"
:disabled="!form.nama" :disabled="!form.nama"
class="px-4 py-2 bg-C text-white rounded hover:bg-B disabled:opacity-50" class="px-4 py-2 bg-C text-black rounded hover:bg-B"
> >
Simpan Simpan
</button> </button>

4
resources/js/components/CreateSales.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div <div
v-if="isOpen" v-if="isOpen"
class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" class="fixed inset-0 bg-black/65 flex items-center justify-center z-50"
> >
<div class="bg-white rounded-lg shadow-lg w-full max-w-lg p-6 relative"> <div class="bg-white rounded-lg shadow-lg w-full max-w-lg p-6 relative">
<h2 class="text-xl font-bold mb-4">Tambah Sales</h2> <h2 class="text-xl font-bold mb-4">Tambah Sales</h2>
@ -24,7 +24,7 @@
<div class="flex justify-end gap-2 mt-6"> <div class="flex justify-end gap-2 mt-6">
<button type="button" @click="$emit('close')" class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400">Batal</button> <button type="button" @click="$emit('close')" class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400">Batal</button>
<button type="submit" class="px-4 py-2 bg-[#c6a77d] text-white rounded hover:bg-[#b09065]">Simpan</button> <button type="submit" class="px-4 py-2 bg-C text-D rounded hover:bg-C/80">Simpan</button>
</div> </div>
</form> </form>
</div> </div>

6
resources/js/components/EditKategori.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-40 z-50"> <div class="fixed inset-0 flex items-center justify-center bg-black/65 z-50">
<div class="bg-white rounded-lg shadow-lg w-[400px] p-6 relative"> <div class="bg-white rounded-lg shadow-lg w-[400px] p-6 relative">
<!-- Tombol close --> <!-- Tombol close -->
@ -27,8 +27,8 @@
<button @click="$emit('close')" class="px-4 py-2 bg-gray-300 rounded-md hover:bg-gray-400"> <button @click="$emit('close')" class="px-4 py-2 bg-gray-300 rounded-md hover:bg-gray-400">
Batal Batal
</button> </button>
<button @click="updateKategori" class="px-4 py-2 bg-B text-white rounded-md hover:bg-A"> <button @click="updateKategori" class="px-4 py-2 bg-B text-D rounded-md hover:bg-A">
Update Ubah
</button> </button>
</div> </div>
</div> </div>

9
resources/js/components/EditSales.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div <div
v-if="isOpen" v-if="isOpen"
class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" class="fixed inset-0 bg-black/65 flex items-center justify-center z-50"
> >
<div class="bg-white rounded-lg shadow-lg w-full max-w-lg p-6 relative"> <div class="bg-white rounded-lg shadow-lg w-full max-w-lg p-6 relative">
<h2 class="text-xl font-bold mb-4">Ubah Sales</h2> <h2 class="text-xl font-bold mb-4">Ubah Sales</h2>
@ -24,7 +24,7 @@
<div class="flex justify-end gap-2 mt-6"> <div class="flex justify-end gap-2 mt-6">
<button type="button" @click="$emit('close')" class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400">Batal</button> <button type="button" @click="$emit('close')" class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400">Batal</button>
<button type="submit" class="px-4 py-2 bg-[#c6a77d] text-white rounded hover:bg-[#b09065]">Update</button> <button type="submit" class="px-4 py-2 bg-C text-D rounded hover:bg-C">Ubah</button>
</div> </div>
</form> </form>
</div> </div>
@ -37,7 +37,7 @@
const props = defineProps({ const props = defineProps({
isOpen: Boolean, isOpen: Boolean,
sales: Object, // data sales yang akan di-edit sales: Object,
}); });
const emit = defineEmits(["close"]); const emit = defineEmits(["close"]);
@ -48,7 +48,6 @@
alamat: "", alamat: "",
}); });
// isi form dengan data props.sales
watch( watch(
() => props.sales, () => props.sales,
(val) => { (val) => {
@ -62,11 +61,9 @@
const handleSubmit = async () => { const handleSubmit = async () => {
try { try {
await axios.put(`/api/sales/${props.sales.id}`, form.value); await axios.put(`/api/sales/${props.sales.id}`, form.value);
alert("Sales berhasil diubah!");
emit("close"); emit("close");
} catch (error) { } catch (error) {
console.error("Error updating sales:", error); console.error("Error updating sales:", error);
alert("Gagal mengubah sales");
} }
}; };
</script> </script>

10
resources/js/pages/Kategori.vue
View File

@ -4,7 +4,7 @@
<ConfirmDeleteModal :isOpen="confirmDeleteOpen" :item="kategoriToDelete" title="Hapus Kategori" <ConfirmDeleteModal :isOpen="confirmDeleteOpen" :item="kategoriToDelete" title="Hapus Kategori"
message="Apakah Anda yakin ingin menghapus kategori ini?" @confirm="confirmDelete" @cancel="closeDeleteModal" /> message="Apakah Anda yakin ingin menghapus kategori ini?" @confirm="confirmDelete" @cancel="closeDeleteModal" />
<div class="p-6"> <div class="p-6 min-h-[75vh]" >
<!-- Header Section --> <!-- Header Section -->
<div class="flex justify-between items-center mb-6"> <div class="flex justify-between items-center mb-6">
<h1 class="text-2xl font-bold text-gray-800">Kategori</h1> <h1 class="text-2xl font-bold text-gray-800">Kategori</h1>
@ -22,10 +22,10 @@
<table class="w-full"> <table class="w-full">
<thead> <thead>
<tr class="bg-C text-black"> <tr class="bg-C text-black">
<th class="px-6 py-4 text-left font-semibold border-r border-C"> <th class="px-6 py-4 text-center font-semibold border-r border-C">
No No
</th> </th>
<th class="px-6 py-4 text-left font-semibold border-r border-C"> <th class="px-6 py-4 text-center font-semibold border-r border-C">
Nama Kategori Nama Kategori
</th> </th>
<th class="px-6 py-4 text-center font-semibold"> <th class="px-6 py-4 text-center font-semibold">
@ -37,10 +37,10 @@
<tr v-for="(item, index) in kategori" :key="item.id" <tr v-for="(item, index) in kategori" :key="item.id"
class="border-b border-gray-200 hover:bg-A transition duration-150" class="border-b border-gray-200 hover:bg-A transition duration-150"
:class="{ 'bg-gray-50': index % 2 === 1 }"> :class="{ 'bg-gray-50': index % 2 === 1 }">
<td class="px-6 py-4 border-r border-gray-200 font-medium text-gray-900"> <td class="px-6 py-4 border-r border-gray-200 font-medium text-center text-gray-900">
{{ index + 1 }} {{ index + 1 }}
</td> </td>
<td class="px-6 py-4 border-r border-gray-200 text-gray-800"> <td class="px-6 py-4 border-r border-gray-200 text-center text-gray-800">
{{ item.nama }} {{ item.nama }}
</td> </td>
<td class="px-6 py-4 text-center"> <td class="px-6 py-4 text-center">

37
resources/js/pages/Sales.vue
View File

@ -12,7 +12,7 @@
v-if="editingSales" v-if="editingSales"
:isOpen="editingSales" :isOpen="editingSales"
:sales="detail" :sales="detail"
@close="closeSales" @close="closeEditSales"
/> />
<!-- Modal Delete --> <!-- Modal Delete -->
@ -21,16 +21,16 @@
title="Hapus Sales" title="Hapus Sales"
message="Apakah Anda yakin ingin menghapus sales ini?" message="Apakah Anda yakin ingin menghapus sales ini?"
@confirm="confirmDelete" @confirm="confirmDelete"
@close="closeDeleteModal" @cancel="closeDeleteModal"
/> />
<div class="p-6"> <div class="p-6 min-h-[75vh]">
<!-- Header Section --> <!-- Header Section -->
<div class="flex justify-between items-center mb-6"> <div class="flex justify-between items-center mb-6">
<h1 class="text-2xl font-bold text-gray-800">Sales</h1> <h1 class="text-2xl font-bold text-D">Sales</h1>
<button <button
@click="tambahSales" @click="tambahSales"
class="px-4 py-2 bg-[#c6a77d] text-white rounded-md hover:bg-[#b09065] transition duration-200 flex items-center gap-2" class="px-4 py-2 bg-C text-D rounded-md hover:bg-C/80 transition duration-200 flex items-center gap-2"
> >
<svg <svg
class="w-4 h-4" class="w-4 h-4"
@ -54,29 +54,29 @@
class="bg-white rounded-lg shadow-md border border-gray-200 overflow-hidden" class="bg-white rounded-lg shadow-md border border-gray-200 overflow-hidden"
> >
<table class="w-full"> <table class="w-full">
<thead> <thead class="">
<tr class="bg-[#c6a77d] text-white"> <tr class="bg-C text-white">
<th <th
class="px-6 py-4 text-left font-semibold border-r border-[#b09065]" class="px-6 py-4 text-center text-D border-r border-[#b09065]"
> >
No No
</th> </th>
<th <th
class="px-6 py-4 text-left font-semibold border-r border-[#b09065]" class="px-6 py-4 text-center text-D border-r border-[#b09065]"
> >
Nama Sales Nama Sales
</th> </th>
<th <th
class="px-6 py-4 text-left font-semibold border-r border-[#b09065]" class="px-6 py-4 text-center text-D border-r border-[#b09065]"
> >
No HP No HP
</th> </th>
<th <th
class="px-6 py-4 text-left font-semibold border-r border-[#b09065]" class="px-6 py-4 text-center text-D border-r border-[#b09065]"
> >
Alamat Alamat
</th> </th>
<th class="px-6 py-4 text-center font-semibold"> <th class="px-6 py-4 text-center text-D">
Aksi Aksi
</th> </th>
</tr> </tr>
@ -89,12 +89,12 @@
:class="{ 'bg-gray-50': index % 2 === 1 }" :class="{ 'bg-gray-50': index % 2 === 1 }"
> >
<td <td
class="px-6 py-4 border-r border-gray-200 font-medium text-gray-900" class="px-6 py-4 border-r border-gray-200 text-center font-medium text-gray-900"
> >
{{ index + 1 }} {{ index + 1 }}
</td> </td>
<td <td
class="px-6 py-4 border-r border-gray-200 text-gray-800" class="px-6 py-4 border-r border-gray-200 text-D"
> >
{{ item.nama }} {{ item.nama }}
</td> </td>
@ -178,7 +178,7 @@ const sales = ref([]);
const loading = ref(false); const loading = ref(false);
const creatingSales = ref(false); const creatingSales = ref(false);
const detail = ref(null); const detail = ref(null);
const editingSales = ref(false);
const confirmDeleteOpen = ref(false); const confirmDeleteOpen = ref(false);
const salesToDelete = ref(null); const salesToDelete = ref(null);
@ -204,7 +204,7 @@ const tambahSales = () => {
// Ubah // Ubah
const ubahSales = (item) => { const ubahSales = (item) => {
detail.value = item; detail.value = item;
creatingSales.value = true; editingSales.value = true;
}; };
// Hapus // Hapus
@ -234,6 +234,11 @@ const closeSales = () => {
fetchSales(); fetchSales();
}; };
const closeEditSales = () => {
editingSales.value = false;
fetchSales();
};
// Lifecycle // Lifecycle
onMounted(() => { onMounted(() => {
fetchSales(); fetchSales();