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>
<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">
<!-- Header -->
@ -31,7 +32,7 @@
<button
@click="saveKategori"
: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
</button>

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

@ -1,7 +1,7 @@
<template>
<div
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">
<h2 class="text-xl font-bold mb-4">Tambah Sales</h2>
@ -24,7 +24,7 @@
<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="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>
</form>
</div>

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

@ -1,5 +1,5 @@
<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">
<!-- Tombol close -->
@ -27,8 +27,8 @@
<button @click="$emit('close')" class="px-4 py-2 bg-gray-300 rounded-md hover:bg-gray-400">
Batal
</button>
<button @click="updateKategori" class="px-4 py-2 bg-B text-white rounded-md hover:bg-A">
Update
<button @click="updateKategori" class="px-4 py-2 bg-B text-D rounded-md hover:bg-A">
Ubah
</button>
</div>
</div>

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

@ -1,7 +1,7 @@
<template>
<div
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">
<h2 class="text-xl font-bold mb-4">Ubah Sales</h2>
@ -24,7 +24,7 @@
<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="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>
</form>
</div>
@ -37,7 +37,7 @@
const props = defineProps({
isOpen: Boolean,
sales: Object, // data sales yang akan di-edit
sales: Object,
});
const emit = defineEmits(["close"]);
@ -48,7 +48,6 @@
alamat: "",
});
// isi form dengan data props.sales
watch(
() => props.sales,
(val) => {
@ -62,11 +61,9 @@
const handleSubmit = async () => {
try {
await axios.put(`/api/sales/${props.sales.id}`, form.value);
alert("Sales berhasil diubah!");
emit("close");
} catch (error) {
console.error("Error updating sales:", error);
alert("Gagal mengubah sales");
}
};
</script>

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

@ -4,7 +4,7 @@
<ConfirmDeleteModal :isOpen="confirmDeleteOpen" :item="kategoriToDelete" title="Hapus Kategori"
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 -->
<div class="flex justify-between items-center mb-6">
<h1 class="text-2xl font-bold text-gray-800">Kategori</h1>
@ -22,10 +22,10 @@
<table class="w-full">
<thead>
<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
</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
</th>
<th class="px-6 py-4 text-center font-semibold">
@ -37,10 +37,10 @@
<tr v-for="(item, index) in kategori" :key="item.id"
class="border-b border-gray-200 hover:bg-A transition duration-150"
: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 }}
</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 }}
</td>
<td class="px-6 py-4 text-center">

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

@ -12,7 +12,7 @@
v-if="editingSales"
:isOpen="editingSales"
:sales="detail"
@close="closeSales"
@close="closeEditSales"
/>
<!-- Modal Delete -->
@ -21,16 +21,16 @@
title="Hapus Sales"
message="Apakah Anda yakin ingin menghapus sales ini?"
@confirm="confirmDelete"
@close="closeDeleteModal"
@cancel="closeDeleteModal"
/>
<div class="p-6">
<div class="p-6 min-h-[75vh]">
<!-- Header Section -->
<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
@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
class="w-4 h-4"
@ -54,29 +54,29 @@
class="bg-white rounded-lg shadow-md border border-gray-200 overflow-hidden"
>
<table class="w-full">
<thead>
<tr class="bg-[#c6a77d] text-white">
<thead class="">
<tr class="bg-C text-white">
<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
</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
</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
</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
</th>
<th class="px-6 py-4 text-center font-semibold">
<th class="px-6 py-4 text-center text-D">
Aksi
</th>
</tr>
@ -89,12 +89,12 @@
:class="{ 'bg-gray-50': index % 2 === 1 }"
>
<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 }}
</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 }}
</td>
@ -178,7 +178,7 @@ const sales = ref([]);
const loading = ref(false);
const creatingSales = ref(false);
const detail = ref(null);
const editingSales = ref(false);
const confirmDeleteOpen = ref(false);
const salesToDelete = ref(null);
@ -204,7 +204,7 @@ const tambahSales = () => {
// Ubah
const ubahSales = (item) => {
detail.value = item;
creatingSales.value = true;
editingSales.value = true;
};
// Hapus
@ -234,6 +234,11 @@ const closeSales = () => {
fetchSales();
};
const closeEditSales = () => {
editingSales.value = false;
fetchSales();
};
// Lifecycle
onMounted(() => {
fetchSales();