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

Compare commits

base: Magang-2025:ae225ce5c72f6a4afa4bba56566bc2210f5e83b1
Branches Tags
Magang-2025:main
Magang-2025:production
..
compare: Magang-2025:20c844a98b62d4a4bde455765ba8b259919ace48
Branches Tags
Magang-2025:production
Magang-2025:main

No commits in common. "ae225ce5c72f6a4afa4bba56566bc2210f5e83b1" and "20c844a98b62d4a4bde455765ba8b259919ace48" have entirely different histories.
ae225ce5c7 ... 20c844a98b

17 changed files with 600 additions and 869 deletions
Show Stats Expand all files Collapse all files

22
resources/js/components/CreateAkun.vue
View File

@ -16,13 +16,13 @@
/> />
<div> <div>
<label for="password">Password</label> <label for="password">Password</label>
<InputField <InputField
v-model="form.password" v-model="form.password"
id="password" id="password"
type="password" type="password"
:required="true" :required="true"
/> />
</div> </div>
<label for="peran">Peran</label> <label for="peran">Peran</label>
@ -78,13 +78,7 @@ export default {
methods: { methods: {
async createAkun() { async createAkun() {
try { try {
await axios.post("api/user", this.form, { await axios.post("api/user", this.form);
headers: {
Authorization: `Bearer ${localStorage.getItem(
"token"
)}`,
},
});
this.form = { nama: "", password: "", role: "" }; this.form = { nama: "", password: "", role: "" };
this.$emit("refresh"); this.$emit("refresh");
this.$emit("close"); this.$emit("close");

12
resources/js/components/CreateItemModal.vue
View File

@ -113,11 +113,7 @@ const selectedNampanName = computed(() => {
// Methods // Methods
const loadNampanList = async () => { const loadNampanList = async () => {
try { try {
const response = await axios.get('/api/nampan', { const response = await axios.get('/api/nampan');
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});;
nampanList.value = response.data; nampanList.value = response.data;
positionListOptions.value = [ positionListOptions.value = [
{ value: '', label: 'Brankas', selected: !selectedNampan.value }, { value: '', label: 'Brankas', selected: !selectedNampan.value },
@ -146,11 +142,7 @@ const createItem = async () => {
payload.id_nampan = selectedNampan.value; payload.id_nampan = selectedNampan.value;
} }
const response = await axios.post('/api/item', payload, { const response = await axios.post('/api/item', payload);
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});;
success.value = true; success.value = true;
createdItem.value = response.data.data createdItem.value = response.data.data

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

@ -61,17 +61,9 @@ import InputField from './InputField.vue'
const saveKategori = async () => { const saveKategori = async () => {
try { try {
if (props.product) { if (props.product) {
await axios.put(`/api/kategori/${props.product.id}`, form.value, { await axios.put(`/api/kategori/${props.product.id}`, form.value)
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
} else { } else {
await axios.post('/api/kategori', form.value, { await axios.post('/api/kategori', form.value)
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
} }
emit('close') // tutup modal emit('close') // tutup modal
} catch (err) { } catch (err) {

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

@ -71,11 +71,7 @@
const handleSubmit = async () => { const handleSubmit = async () => {
try { try {
await axios.post("/api/sales", form.value, { await axios.post("/api/sales", form.value)
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
resetForm() resetForm()
emit("saved") emit("saved")
emit("close") emit("close")

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

@ -101,11 +101,7 @@
const payload = { ...this.form }; const payload = { ...this.form };
if (!payload.password) delete payload.password; if (!payload.password) delete payload.password;
await axios.put(`/api/user/${this.akun.id}`, payload, { await axios.put(`/api/user/${this.akun.id}`, payload);
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});;
this.$emit("refresh"); this.$emit("refresh");
this.$emit("close"); this.$emit("close");

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

@ -65,11 +65,7 @@ import InputField from "./InputField.vue";
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);
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});;
emit("close"); emit("close");
} catch (error) { } catch (error) {
console.error("Error updating sales:", error); console.error("Error updating sales:", error);

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

@ -97,11 +97,7 @@ const inputItem = async () => {
loadingItem.value = true loadingItem.value = true
try { try {
const response = await axios.get(`/api/item/${kodeItem.value}`, { const response = await axios.get(`/api/item/${kodeItem.value}`);
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});;
item.value = response.data; item.value = response.data;
hargaJual.value = item.value.produk.harga_jual hargaJual.value = item.value.produk.harga_jual

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

@ -187,11 +187,7 @@ const fetchRingkasan = async (page = 1) => {
loading.value = true; loading.value = true;
pendapatanElements.value = []; pendapatanElements.value = [];
try { try {
const response = await axios.get(`/api/laporan?filter=${filterRingkasan.value}&page=${page}`, { const response = await axios.get(`/api/laporan?filter=${filterRingkasan.value}&page=${page}`);
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});;
ringkasanLaporan.value = response.data.data; ringkasanLaporan.value = response.data.data;
pagination.value = { pagination.value = {
current_page: response.data.current_page, current_page: response.data.current_page,

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

@ -185,11 +185,7 @@ const fetchRingkasan = async (page = 1) => {
loading.value = true; loading.value = true;
pendapatanElements.value = []; pendapatanElements.value = [];
try { try {
const response = await axios.get(`/api/laporan?filter=${filterRingkasan.value}&page=${page}`, { const response = await axios.get(`/api/laporan?filter=${filterRingkasan.value}&page=${page}`);
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});;
ringkasanLaporan.value = response.data.data; ringkasanLaporan.value = response.data.data;
pagination.value = { pagination.value = {
current_page: response.data.current_page, current_page: response.data.current_page,

20
resources/js/components/TrayList.vue
View File

@ -138,18 +138,16 @@ const closePopup = () => {
const saveMove = async () => { const saveMove = async () => {
if (!selectedTrayId.value || !selectedItem.value) return; if (!selectedTrayId.value || !selectedItem.value) return;
try { try {
await axios.put(`/api/item/${selectedItem.value.id}`, await axios.put(`/api/item/${selectedItem.value.id}`, {
{ header:{
id_nampan: selectedTrayId.value, Authorization: `Bearer ${localStorage.getItem("token")}`,
id_produk: selectedItem.value.id_produk, },
}, body:{
{ id_nampan: selectedTrayId.value,
headers: { id_produk: selectedItem.value.id_produk,
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
}
);
},
});
await refreshData(); await refreshData();
closePopup(); closePopup();

519
resources/js/pages/EditProduk.vue
View File

@ -1,219 +1,112 @@
<template> <template>
<mainLayout> <mainLayout>
<!-- Modal Buat Item --> <!-- Modal Buat Item -->
<CreateItemModal <CreateItemModal :isOpen="openItemModal" :product="editedProduct" @close="closeItemModal" />
:isOpen="openItemModal"
:product="editedProduct"
@close="closeItemModal"
/>
<div class="p-6"> <div class="p-6">
<p class="font-serif italic text-[25px] text-D">Edit Produk</p> <p class="font-serif italic text-[25px] text-D">Edit Produk</p>
<div class="flex flex-col md:flex-row mt-5 gap-6"> <div class="flex flex-col md:flex-row mt-5 gap-6">
<!-- Form Section --> <!-- Form Section -->
<div class="flex-1"> <div class="flex-1">
<div class="mb-3"> <div class="mb-3">
<label class="block text-D mb-1">Nama Produk</label> <label class="block text-D mb-1">Nama Produk</label>
<InputField <InputField v-model="form.nama" type="text" placeholder="Masukkan nama produk" />
v-model="form.nama" </div>
type="text"
placeholder="Masukkan nama produk"
/>
</div>
<div class="mb-3"> <div class="mb-3">
<label class="block text-D mb-1">Kategori</label> <label class="block text-D mb-1">Kategori</label>
<InputSelect <InputSelect v-model="form.id_kategori" :options="category" placeholder="Pilih kategori" />
v-model="form.id_kategori" </div>
:options="category"
placeholder="Pilih kategori"
/>
</div>
<div class="mb-3 flex flex-row w-full gap-3"> <div class="mb-3 flex flex-row w-full gap-3">
<div class="flex-1"> <div class="flex-1">
<label class="block text-D mb-1">Berat (g)</label> <label class="block text-D mb-1">Berat (g)</label>
<InputField <InputField v-model="form.berat" type="number" step="0.01" placeholder="Masukkan berat"
v-model="form.berat" @input="calculateHargaJual" />
type="number"
step="0.01"
placeholder="Masukkan berat"
@input="calculateHargaJual"
/>
</div>
<div class="flex-1">
<label class="block text-D mb-1">Kadar (K)</label>
<InputField
v-model="form.kadar"
type="number"
placeholder="Masukkan kadar"
/>
</div>
</div>
<div class="mb-3 flex flex-row w-full gap-3">
<div class="flex-1">
<label class="block text-D mb-1"
>Harga per Gram</label
>
<InputField
v-model="form.harga_per_gram"
type="number"
step="0.01"
placeholder="Masukkan harga per gram"
@input="calculateHargaJual"
/>
</div>
<div class="flex-1">
<label class="block text-D mb-1">Harga Jual</label>
<InputField
v-model="form.harga_jual"
type="number"
step="0.01"
placeholder="Masukkan harga jual"
/>
</div>
</div>
</div>
<!-- Image Upload Section -->
<div class="flex-1">
<label class="block text-D mb-1">Foto</label>
<div class="grid grid-cols-3 gap-3">
<!-- Existing Images -->
<div
v-for="(image, index) in uploadedImages"
:key="`img-${image.id}`"
class="relative group aspect-square"
>
<div
class="w-full h-full bg-gray-100 rounded-lg border-2 border-gray-200 overflow-hidden"
>
<img
:src="image.url"
:alt="`Foto ${index + 1}`"
class="w-full h-full object-cover"
/>
<button
@click="removeImage(image.id)"
:disabled="uploadLoading"
class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold shadow-lg hover:bg-red-600 transition-colors disabled:bg-gray-400"
>
×
</button>
</div>
</div>
<!-- Upload Button -->
<div
v-if="uploadedImages.length < 6"
@drop="handleDrop"
@dragover.prevent
@dragenter.prevent="isDragging = true"
@dragleave.prevent="isDragging = false"
@click="triggerFileInput"
class="aspect-square bg-gray-50 border-2 border-dashed border-gray-300 rounded-lg flex flex-col items-center justify-center cursor-pointer hover:border-D hover:bg-blue-50 transition-colors group"
:class="{
'border-blue-400 bg-blue-50': isDragging,
'cursor-not-allowed opacity-50': uploadLoading,
}"
>
<div class="text-center">
<div
v-if="!uploadLoading"
class="w-12 h-12 bg-D rounded-lg flex items-center justify-center mx-auto mb-2 group-hover:bg-D transition-colors"
>
<svg
class="w-6 h-6 text-white"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 6v6m0 0v6m0-6h6m-6 0H6"
></path>
</svg>
</div>
<div
v-else
class="w-12 h-12 bg-D rounded-lg flex items-center justify-center mx-auto mb-2"
>
<svg
class="animate-spin w-6 h-6 text-white"
fill="none"
viewBox="0 0 24 24"
>
<circle
class="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
stroke-width="4"
></circle>
<path
class="opacity-75"
fill="currentColor"
d="m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
></path>
</svg>
</div>
<p
class="text-xs text-gray-600 font-medium"
v-html="
uploadLoading
? 'Uploading...'
: 'Unggah<br/>Foto'
"
></p>
</div>
</div>
</div>
<input
ref="fileInput"
type="file"
multiple
accept="image/jpeg,image/jpg,image/png"
@change="handleFileSelect"
class="hidden"
/>
<p class="text-xs text-gray-500 mt-2">
Format: JPG, JPEG, PNG (Max: 2MB per file, Max: 6 foto)
</p>
<div
v-if="uploadError"
class="mt-2 p-2 bg-red-50 border border-red-200 rounded text-sm text-red-600"
>
{{ uploadError }}
</div>
</div>
</div> </div>
<div class="flex-1">
<div class="mt-6 flex justify-end flex-row gap-3"> <label class="block text-D mb-1">Kadar (K)</label>
<button <InputField v-model="form.kadar" type="number" placeholder="Masukkan kadar" />
@click="back"
class="px-6 py-2 rounded-md bg-gray-400 hover:bg-gray-500 text-white"
>
Batal
</button>
<button
@click="submitForm"
:disabled="loading || !isFormValid"
class="bg-C text-D px-6 py-2 rounded-md hover:bg-B disabled:bg-B disabled:text-white disabled:cursor-not-allowed"
>
{{ loading ? "Menyimpan..." : "Simpan Perubahan" }}
</button>
</div> </div>
</div>
<div class="mb-3 flex flex-row w-full gap-3">
<div class="flex-1">
<label class="block text-D mb-1">Harga per Gram</label>
<InputField v-model="form.harga_per_gram" type="number" step="0.01" placeholder="Masukkan harga per gram"
@input="calculateHargaJual" />
</div>
<div class="flex-1">
<label class="block text-D mb-1">Harga Jual</label>
<InputField v-model="form.harga_jual" type="number" step="0.01" placeholder="Masukkan harga jual" />
</div>
</div>
</div> </div>
</mainLayout>
<!-- Image Upload Section -->
<div class="flex-1">
<label class="block text-D mb-1">Foto</label>
<div class="grid grid-cols-3 gap-3">
<!-- Existing Images -->
<div v-for="(image, index) in uploadedImages" :key="`img-${image.id}`" class="relative group aspect-square">
<div class="w-full h-full bg-gray-100 rounded-lg border-2 border-gray-200 overflow-hidden">
<img :src="image.url" :alt="`Foto ${index + 1}`" class="w-full h-full object-cover" />
<button @click="removeImage(image.id)" :disabled="uploadLoading"
class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold shadow-lg hover:bg-red-600 transition-colors disabled:bg-gray-400">
×
</button>
</div>
</div>
<!-- Upload Button -->
<div v-if="uploadedImages.length < 6" @drop="handleDrop" @dragover.prevent
@dragenter.prevent="isDragging = true" @dragleave.prevent="isDragging = false" @click="triggerFileInput"
class="aspect-square bg-gray-50 border-2 border-dashed border-gray-300 rounded-lg flex flex-col items-center justify-center cursor-pointer hover:border-D hover:bg-blue-50 transition-colors group"
:class="{ 'border-blue-400 bg-blue-50': isDragging, 'cursor-not-allowed opacity-50': uploadLoading }">
<div class="text-center">
<div v-if="!uploadLoading"
class="w-12 h-12 bg-D rounded-lg flex items-center justify-center mx-auto mb-2 group-hover:bg-D transition-colors">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
</svg>
</div>
<div v-else class="w-12 h-12 bg-D rounded-lg flex items-center justify-center mx-auto mb-2">
<svg class="animate-spin w-6 h-6 text-white" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor"
d="m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
</path>
</svg>
</div>
<p class="text-xs text-gray-600 font-medium"
v-html="uploadLoading ? 'Uploading...' : 'Unggah<br/>Foto'"></p>
</div>
</div>
</div>
<input ref="fileInput" type="file" multiple accept="image/jpeg,image/jpg,image/png" @change="handleFileSelect"
class="hidden" />
<p class="text-xs text-gray-500 mt-2">Format: JPG, JPEG, PNG (Max: 2MB per file, Max: 6 foto)</p>
<div v-if="uploadError" class="mt-2 p-2 bg-red-50 border border-red-200 rounded text-sm text-red-600">
{{ uploadError }}
</div>
</div>
</div>
<div class="mt-6 flex justify-end flex-row gap-3">
<button @click="back" class="px-6 py-2 rounded-md bg-gray-400 hover:bg-gray-500 text-white">Batal</button>
<button @click="submitForm" :disabled="loading || !isFormValid"
class="bg-C text-D px-6 py-2 rounded-md hover:bg-B disabled:bg-B disabled:text-white disabled:cursor-not-allowed">
{{ loading ? 'Menyimpan...' : 'Simpan Perubahan' }}
</button>
</div>
</div>
</mainLayout>
</template> </template>
<script setup> <script setup>
@ -231,12 +124,12 @@ const router = useRouter();
const productId = route.params.id; const productId = route.params.id;
const form = ref({ const form = ref({
nama: "", nama: "",
id_kategori: null, id_kategori: null,
berat: 0, berat: 0,
kadar: 0, kadar: 0,
harga_per_gram: 0, harga_per_gram: 0,
harga_jual: 0, harga_jual: 0,
}); });
const category = ref([]); const category = ref([]);
@ -252,145 +145,137 @@ const editedProduct = ref(null);
const userId = ref(1); // TODO: ambil dari auth const userId = ref(1); // TODO: ambil dari auth
const isFormValid = computed(() => { const isFormValid = computed(() => {
return ( return (
form.value.nama && form.value.nama &&
form.value.id_kategori && form.value.id_kategori &&
form.value.berat > 0 && form.value.berat > 0 &&
form.value.kadar > 0 && form.value.kadar > 0 &&
form.value.harga_per_gram > 0 && form.value.harga_per_gram > 0 &&
form.value.harga_jual > 0 form.value.harga_jual > 0
); );
}); });
const calculateHargaJual = () => { const calculateHargaJual = () => {
const berat = parseFloat(form.value.berat) || 0; const berat = parseFloat(form.value.berat) || 0;
const hargaPerGram = parseFloat(form.value.harga_per_gram) || 0; const hargaPerGram = parseFloat(form.value.harga_per_gram) || 0;
if (berat > 0 && hargaPerGram > 0) { if (berat > 0 && hargaPerGram > 0) {
form.value.harga_jual = berat * hargaPerGram; form.value.harga_jual = berat * hargaPerGram;
} }
}; };
const loadKategori = async () => { const loadKategori = async () => {
const response = await axios.get("/api/kategori", { const response = await axios.get("/api/kategori", {
headers: { headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`, Authorization: `Bearer ${localStorage.getItem("token")}`,
}, },
}); });
category.value = response.data.map((c) => ({ value: c.id, label: c.nama })); category.value = response.data.map((c) => ({ value: c.id, label: c.nama }));
}; };
const loadProduk = async () => { const loadProduk = async () => {
const response = await axios.get(`/api/produk/${productId}`, { const response = await axios.get(`/api/produk/${productId}`, {
headers: { headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`, Authorization: `Bearer ${localStorage.getItem("token")}`,
}, },
}); });
const produk = response.data; const produk = response.data;
form.value = { form.value = {
nama: produk.nama, nama: produk.nama,
id_kategori: produk.id_kategori, id_kategori: produk.id_kategori,
berat: produk.berat, berat: produk.berat,
kadar: produk.kadar, kadar: produk.kadar,
harga_per_gram: produk.harga_per_gram, harga_per_gram: produk.harga_per_gram,
harga_jual: produk.harga_jual, harga_jual: produk.harga_jual,
}; };
uploadedImages.value = produk.foto || []; uploadedImages.value = produk.foto || [];
}; };
const triggerFileInput = () => { const triggerFileInput = () => {
if (!uploadLoading.value && uploadedImages.value.length < 6) { if (!uploadLoading.value && uploadedImages.value.length < 6) {
fileInput.value?.click(); fileInput.value?.click();
} }
}; };
const handleFileSelect = (e) => { const handleFileSelect = (e) => {
const files = Array.from(e.target.files); const files = Array.from(e.target.files);
uploadFiles(files); uploadFiles(files);
}; };
const handleDrop = (e) => { const handleDrop = (e) => {
e.preventDefault(); e.preventDefault();
isDragging.value = false; isDragging.value = false;
if (uploadLoading.value || uploadedImages.value.length >= 6) return; if (uploadLoading.value || uploadedImages.value.length >= 6) return;
const files = Array.from(e.dataTransfer.files); const files = Array.from(e.dataTransfer.files);
uploadFiles(files); uploadFiles(files);
}; };
const uploadFiles = async (files) => { const uploadFiles = async (files) => {
uploadError.value = ""; uploadError.value = "";
const validFiles = files.filter( const validFiles = files.filter(
(file) => (file) =>
["image/jpeg", "image/jpg", "image/png"].includes(file.type) && ["image/jpeg", "image/jpg", "image/png"].includes(file.type) &&
file.size <= 2 * 1024 * 1024 file.size <= 2 * 1024 * 1024
); );
if (!validFiles.length) return; if (!validFiles.length) return;
uploadLoading.value = true; uploadLoading.value = true;
try { try {
for (const file of validFiles) { for (const file of validFiles) {
const formData = new FormData(); const formData = new FormData();
formData.append("foto", file); formData.append("foto", file);
formData.append("id_user", userId.value); formData.append("id_user", userId.value);
const res = await axios.post("/api/foto/upload", formData, { const res = await axios.post("/api/foto/upload", formData, {
headers: { headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`, Authorization: `Bearer ${localStorage.getItem("token")}`,
"Content-Type": "multipart/form-data", "Content-Type": "multipart/form-data"
}, },
}); });
uploadedImages.value.push(res.data); uploadedImages.value.push(res.data);
}
} finally {
uploadLoading.value = false;
} }
} finally {
uploadLoading.value = false;
}
}; };
const removeImage = async (id) => { const removeImage = async (id) => {
try { try {
await axios.delete(`/api/foto/hapus/${id}`, { await axios.delete(`/api/foto/hapus/${id}`, {
headers: { headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`, Authorization: `Bearer ${localStorage.getItem("token")}`,
}, },
}); });
uploadedImages.value = uploadedImages.value.filter((i) => i.id !== id); uploadedImages.value = uploadedImages.value.filter((i) => i.id !== id);
} catch { } catch {
uploadError.value = "Gagal menghapus foto"; uploadError.value = "Gagal menghapus foto";
} }
}; };
const submitForm = async () => { const submitForm = async () => {
loading.value = true; loading.value = true;
try { try {
await axios.put( await axios.put(`/api/produk/${productId}`, {
`/api/produk/${productId}`, ...form.value,
{ id_user: userId.value,
...form.value, });
id_user: userId.value, alert("Produk berhasil diupdate!");
}, router.push("/produk");
{ } catch (err) {
headers: { alert("Gagal update produk!");
Authorization: `Bearer ${localStorage.getItem("token")}`, console.error(err);
}, } finally {
} loading.value = false;
); }
alert("Produk berhasil diupdate!");
router.push("/produk");
} catch (err) {
alert("Gagal update produk!");
console.error(err);
} finally {
loading.value = false;
}
}; };
const closeItemModal = () => { const closeItemModal = () => {
openItemModal.value = false; openItemModal.value = false;
}; };
const back = () => { const back = () => {
router.push("/produk"); router.push("/produk");
}; };
onMounted(() => { onMounted(() => {
loadKategori(); loadKategori();
loadProduk(); loadProduk();
}); });
</script> </script>

34
resources/js/pages/InputProduk.vue
View File

@ -146,11 +146,7 @@ const category = ref([]);
const loadKategori = async () => { const loadKategori = async () => {
try { try {
const response = await axios.get('/api/kategori', { const response = await axios.get('/api/kategori');
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
if (response.data && Array.isArray(response.data)) { if (response.data && Array.isArray(response.data)) {
category.value = response.data.map(cat => ({ category.value = response.data.map(cat => ({
value: cat.id, value: cat.id,
@ -194,11 +190,7 @@ const calculateHargaJual = () => {
const loadExistingPhotos = async () => { const loadExistingPhotos = async () => {
try { try {
const response = await axios.get(`/api/foto/${userId.value}`, { const response = await axios.get(`/api/foto/${userId.value}`);
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
if (response.data && Array.isArray(response.data)) { if (response.data && Array.isArray(response.data)) {
uploadedImages.value = response.data; uploadedImages.value = response.data;
} }
@ -279,9 +271,7 @@ const uploadFiles = async (files) => {
const response = await axios.post('/api/foto/upload', formData, { const response = await axios.post('/api/foto/upload', formData, {
headers: { headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`, 'Content-Type': 'multipart/form-data',
'Content-Type': 'multipart/form-data',
}, },
}); });
@ -302,12 +292,7 @@ const uploadFiles = async (files) => {
const removeImage = async (imageId) => { const removeImage = async (imageId) => {
try { try {
await axios.delete(`/api/foto/hapus/${imageId}`, { await axios.delete(`/api/foto/hapus/${imageId}`);
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
})
;
uploadedImages.value = uploadedImages.value.filter(img => img.id !== imageId); uploadedImages.value = uploadedImages.value.filter(img => img.id !== imageId);
uploadError.value = ''; uploadError.value = '';
} catch (error) { } catch (error) {
@ -327,10 +312,7 @@ const submitForm = async (addItem) => {
try { try {
const response = await axios.post('/api/produk', { const response = await axios.post('/api/produk', {
...form.value, ...form.value,
id_user: userId.value, id_user: userId.value
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
}); });
const createdProductData = response.data.data; const createdProductData = response.data.data;
@ -381,11 +363,7 @@ const resetForm = async () => {
harga_jual: 0, harga_jual: 0,
}; };
try { try {
await axios.delete(`/api/foto/reset/${userId.value}`, { await axios.delete(`/api/foto/reset/${userId.value}`);
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
uploadedImages.value = []; uploadedImages.value = [];
} catch (error) { } catch (error) {
console.error('Error resetting photos:', error); console.error('Error resetting photos:', error);

6
resources/js/pages/Kasir.vue
View File

@ -59,11 +59,7 @@ const loading = ref(true)
onMounted(async () => { onMounted(async () => {
try { try {
loading.value = true loading.value = true
const res = await axios.get("/api/transaksi?limit=10", { const res = await axios.get("/api/transaksi?limit=10")
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
})
transaksi.value = res.data transaksi.value = res.data
} catch (err) { } catch (err) {

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

@ -101,11 +101,7 @@ const kategoriToDelete = ref(null);
const fetchKategoris = async () => { const fetchKategoris = async () => {
loading.value = true; loading.value = true;
try { try {
const response = await axios.get("/api/kategori", { const response = await axios.get("/api/kategori");
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
kategori.value = response.data; kategori.value = response.data;
console.log("Data kategori:", response.data); console.log("Data kategori:", response.data);
} catch (error) { } catch (error) {
@ -142,11 +138,7 @@ const hapusKategori = (item) => {
// 🔵 Ditambahkan: aksi konfirmasi hapus // 🔵 Ditambahkan: aksi konfirmasi hapus
const confirmDelete = async () => { const confirmDelete = async () => {
try { try {
await axios.delete(`/api/kategori/${kategoriToDelete.value.id}`, { await axios.delete(`/api/kategori/${kategoriToDelete.value.id}`);
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
console.log("Kategori berhasil dihapus"); console.log("Kategori berhasil dihapus");
fetchKategoris(); fetchKategoris();
} catch (error) { } catch (error) {

414
resources/js/pages/Produk.vue
View File

@ -1,160 +1,150 @@
<template> <template>
<mainLayout> <mainLayout>
<!-- Modal Buat Item --> <!-- Modal Buat Item -->
<CreateItemModal <CreateItemModal
:isOpen="creatingItem" :isOpen="creatingItem"
:product="detail" :product="detail"
@close="closeItemModal" @close="closeItemModal"
/> />
<!-- Modal Konfirmasi Hapus Produk --> <!-- Modal Konfirmasi Hapus Produk -->
<ConfirmDeleteModal <ConfirmDeleteModal
:isOpen="deleting" :isOpen="deleting"
@cancel="deleting = false" @cancel="deleting = false"
@confirm="deleteProduk" @confirm="deleteProduk"
title="Hapus Produk" title="Hapus Produk"
message="Apakah Anda yakin ingin menghapus produk ini?" message="Apakah Anda yakin ingin menghapus produk ini?"
/> />
<div class="p-6"> <div class="p-6">
<!-- Judul --> <!-- Judul -->
<p class="font-serif italic text-[25px] text-D">PRODUK</p> <p class="font-serif italic text-[25px] text-D">PRODUK</p>
<!-- Filter --> <!-- Filter -->
<div <div class="mt-3 flex flex-col md:flex-row md:items-center md:justify-between gap-3">
class="mt-3 flex flex-col md:flex-row md:items-center md:justify-between gap-3" <!-- Dropdown Kategori -->
> <InputSelect v-model="selectedCategory" :options="kategori" class="w-full md:w-48" />
<!-- Dropdown Kategori -->
<InputSelect
v-model="selectedCategory"
:options="kategori"
class="w-full md:w-48"
/>
<!-- Search --> <!-- Search -->
<searchbar v-model:search="searchQuery" class="flex-1" /> <searchbar v-model:search="searchQuery" class="flex-1" />
</div> </div>
<!-- Tombol Tambah Produk --> <!-- Tombol Tambah Produk -->
<div class="mt-3 flex justify-end"> <div class="mt-3 flex justify-end">
<router-link <router-link
to="/produk/baru" to="/produk/baru"
class="bg-C text-[#0a1a3c] px-4 py-2 rounded-md shadow hover:bg-C transition" class="bg-C text-[#0a1a3c] px-4 py-2 rounded-md shadow hover:bg-C transition"
>
Tambah Produk
</router-link>
</div>
<!-- Grid Produk -->
<div
class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 mt-4"
>
<ProductCard
v-for="item in filteredProducts"
:key="item.id"
:product="item"
@click="openOverlay(item.id)"
/>
</div>
</div>
<!-- Overlay Detail Produk -->
<div
v-if="showOverlay"
class="fixed inset-0 bg-black/30 flex justify-center items-center"
@click.self="closeOverlay"
> >
<div Tambah Produk
class="bg-white rounded-lg shadow-lg p-6 w-[450px] border-2 border-B relative flex flex-col items-center" </router-link>
> </div>
<!-- Foto Produk -->
<div
class="relative w-72 h-72 border border-B flex items-center justify-center mb-3 overflow-hidden rounded"
>
<img
v-if="detail.foto && detail.foto.length > 0"
:src="detail.foto[currentFotoIndex].url"
:alt="detail.nama"
class="w-full h-full object-contain"
/>
<span v-else class="text-gray-400 text-sm">[gambar]</span>
<!-- Stok (pcs) pojok kiri atas --> <!-- Grid Produk -->
<div <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 mt-4">
class="absolute top-1 left-1 bg-black/60 text-white text-xs px-2 py-1 rounded" <ProductCard
> v-for="item in filteredProducts"
{{ detail.items_count }} pcs :key="item.id"
</div> :product="item"
@click="openOverlay(item.id)"
/>
</div>
</div>
<!-- Tombol Prev --> <!-- Overlay Detail Produk -->
<button <div
v-if="detail.foto && detail.foto.length > 1" v-if="showOverlay"
@click.stop="prevFoto" class="fixed inset-0 bg-black/30 flex justify-center items-center"
class="absolute left-2 bg-white/80 hover:bg-white text-black px-2 py-1 rounded-full shadow" @click.self="closeOverlay"
> >
‹ <div
</button> class="bg-white rounded-lg shadow-lg p-6 w-[450px] border-2 border-B relative flex flex-col items-center"
<!-- Tombol Next --> >
<button <!-- Foto Produk -->
v-if="detail.foto && detail.foto.length > 1" <div
@click.stop="nextFoto" class="relative w-72 h-72 border border-B flex items-center justify-center mb-3 overflow-hidden rounded"
class="absolute right-2 bg-white/80 hover:bg-white text-black px-2 py-1 rounded-full shadow" >
> <img
› v-if="detail.foto && detail.foto.length > 0"
</button> :src="detail.foto[currentFotoIndex].url"
</div> :alt="detail.nama"
class="w-full h-full object-contain"
/>
<span v-else class="text-gray-400 text-sm">[gambar]</span>
<!-- Nama Produk --> <!-- Stok (pcs) pojok kiri atas -->
<p class="text-lg font-semibold text-center mb-4"> <div
{{ detail.nama }} class="absolute top-1 left-1 bg-black/60 text-white text-xs px-2 py-1 rounded"
</p> >
{{ detail.items_count }} pcs
</div>
<!-- Detail Harga & Info --> <!-- Tombol Prev -->
<div <button
class="grid grid-cols-2 gap-y-2 gap-x-4 text-sm w-full mb-6" v-if="detail.foto && detail.foto.length > 1"
> @click.stop="prevFoto"
<p class="col-span-1">Harga Jual :</p> class="absolute left-2 bg-white/80 hover:bg-white text-black px-2 py-1 rounded-full shadow"
<p class="col-span-1 text-right"> >
Rp. {{ formatNumber(detail.harga_jual) }} ‹
</p> </button>
<!-- Tombol Next -->
<p class="col-span-1">Kadar :</p> <button
<p class="col-span-1 text-right">{{ detail.kadar }} K</p> v-if="detail.foto && detail.foto.length > 1"
@click.stop="nextFoto"
<p class="col-span-1">Berat :</p> class="absolute right-2 bg-white/80 hover:bg-white text-black px-2 py-1 rounded-full shadow"
<p class="col-span-1 text-right">{{ detail.berat }} gram</p> >
›
<p class="col-span-1">Harga/gram :</p> </button>
<p class="col-span-1 text-right">
Rp. {{ formatNumber(detail.harga_per_gram) }}
</p>
</div>
<!-- Tombol Aksi -->
<div class="flex w-full gap-3">
<button
@click="$router.push(`/produk/${detail.id}/edit`)"
class="flex-1 bg-yellow-400 text-black py-2 rounded font-bold"
>
Ubah
</button>
<button
@click="openItemModal"
class="bg-green-400 text-black px-4 py-2 rounded font-bold"
>
Tambah
</button>
<button
@click="deleting = true"
class="flex-1 bg-red-500 text-white py-2 rounded font-bold"
>
Hapus
</button>
</div>
</div>
</div> </div>
</mainLayout>
<!-- Nama Produk -->
<p class="text-lg font-semibold text-center mb-4">
{{ detail.nama }}
</p>
<!-- Detail Harga & Info -->
<div class="grid grid-cols-2 gap-y-2 gap-x-4 text-sm w-full mb-6">
<p class="col-span-1">Harga Jual :</p>
<p class="col-span-1 text-right">
Rp. {{ formatNumber(detail.harga_jual) }}
</p>
<p class="col-span-1">Kadar :</p>
<p class="col-span-1 text-right">{{ detail.kadar }} K</p>
<p class="col-span-1">Berat :</p>
<p class="col-span-1 text-right">{{ detail.berat }} gram</p>
<p class="col-span-1">Harga/gram :</p>
<p class="col-span-1 text-right">
Rp. {{ formatNumber(detail.harga_per_gram) }}
</p>
</div>
<!-- Tombol Aksi -->
<div class="flex w-full gap-3">
<button
@click="$router.push(`/produk/${detail.id}/edit`)"
class="flex-1 bg-yellow-400 text-black py-2 rounded font-bold"
>
Ubah
</button>
<button
@click="openItemModal"
class="bg-green-400 text-black px-4 py-2 rounded font-bold"
>
Tambah
</button>
<button
@click="deleting = true"
class="flex-1 bg-red-500 text-white py-2 rounded font-bold"
>
Hapus
</button>
</div>
</div>
</div>
</mainLayout>
</template> </template>
<script setup> <script setup>
@ -180,119 +170,113 @@ const currentFotoIndex = ref(0);
const kategori = ref([]); const kategori = ref([]);
const loadKategori = async () => { const loadKategori = async () => {
try { try {
const response = await axios.get("/api/kategori", { const response = await axios.get('/api/kategori');
headers: { if (response.data && Array.isArray(response.data)) {
Authorization: `Bearer ${localStorage.getItem("token")}`, kategori.value = [
}, { value: 0, label: "Semua" },
}); ...response.data.map(cat => ({
if (response.data && Array.isArray(response.data)) { value: cat.id,
kategori.value = [ label: cat.nama
{ value: 0, label: "Semua" }, }))
...response.data.map((cat) => ({ ];
value: cat.id,
label: cat.nama,
})),
];
}
} catch (error) {
console.error("Error loading categories:", error);
} }
} catch (error) {
console.error('Error loading categories:', error);
}
}; };
const loadProduk = async () => { const loadProduk = async () => {
try { try {
await axios.delete(`/api/produk/${detail.value.id}`, { const response = await axios.get('/api/produk');
headers: { if (response.data && Array.isArray(response.data)) {
Authorization: `Bearer ${localStorage.getItem("token")}`, products.value = response.data;
},
});
if (response.data && Array.isArray(response.data)) {
products.value = response.data;
}
} catch (error) {
console.error("Error loading products:", error);
} }
} catch (error) {
console.error('Error loading products:', error);
}
}; };
// Buka modal item // Buka modal item
const openItemModal = () => { const openItemModal = () => {
creatingItem.value = true; creatingItem.value = true;
}; };
const closeItemModal = () => { const closeItemModal = () => {
creatingItem.value = false; creatingItem.value = false;
}; };
// Fetch data awal // Fetch data awal
onMounted(async () => { onMounted(async () => {
loadKategori(); loadKategori()
loadProduk(); loadProduk();
}); });
// Filter produk (kategori + search) // Filter produk (kategori + search)
const filteredProducts = computed(() => { const filteredProducts = computed(() => {
let hasil = products.value; let hasil = products.value;
if (selectedCategory.value != 0) { if (selectedCategory.value != 0) {
hasil = hasil.filter((p) => p.id_kategori == selectedCategory.value); hasil = hasil.filter(
} (p) => p.id_kategori == selectedCategory.value
);
}
if (searchQuery.value) { if (searchQuery.value) {
hasil = hasil.filter((p) => hasil = hasil.filter((p) =>
p.nama.toLowerCase().includes(searchQuery.value.toLowerCase()) p.nama.toLowerCase().includes(searchQuery.value.toLowerCase())
); );
} }
return hasil; return hasil;
}); });
// Buka overlay detail // Buka overlay detail
function openOverlay(id) { function openOverlay(id) {
const produk = products.value.find((p) => p.id === id); const produk = products.value.find((p) => p.id === id);
if (produk) { if (produk) {
detail.value = produk; detail.value = produk;
currentFotoIndex.value = 0; currentFotoIndex.value = 0;
showOverlay.value = true; showOverlay.value = true;
} }
} }
// Tutup overlay detail // Tutup overlay detail
function closeOverlay() { function closeOverlay() {
showOverlay.value = false; showOverlay.value = false;
currentFotoIndex.value = 0; currentFotoIndex.value = 0;
} }
// Navigasi foto // Navigasi foto
function nextFoto() { function nextFoto() {
if (detail.value.foto && detail.value.foto.length > 0) { if (detail.value.foto && detail.value.foto.length > 0) {
currentFotoIndex.value = currentFotoIndex.value =
(currentFotoIndex.value + 1) % detail.value.foto.length; (currentFotoIndex.value + 1) % detail.value.foto.length;
} }
} }
function prevFoto() { function prevFoto() {
if (detail.value.foto && detail.value.foto.length > 0) { if (detail.value.foto && detail.value.foto.length > 0) {
currentFotoIndex.value = currentFotoIndex.value =
(currentFotoIndex.value - 1 + detail.value.foto.length) % (currentFotoIndex.value - 1 + detail.value.foto.length) %
detail.value.foto.length; detail.value.foto.length;
} }
} }
// Format angka // Format angka
function formatNumber(num) { function formatNumber(num) {
return new Intl.NumberFormat().format(num || 0); return new Intl.NumberFormat().format(num || 0);
} }
// Hapus produk // Hapus produk
async function deleteProduk() { async function deleteProduk() {
try { try {
await axios.delete(`/api/produk/${detail.value.id}`); await axios.delete(`/api/produk/${detail.value.id}`);
products.value = products.value.filter((p) => p.id !== detail.value.id); products.value = products.value.filter((p) => p.id !== detail.value.id);
deleting.value = false; deleting.value = false;
showOverlay.value = false; showOverlay.value = false;
alert("Produk berhasil dihapus!"); alert("Produk berhasil dihapus!");
} catch (err) { } catch (err) {
console.error("Gagal hapus produk:", err); console.error("Gagal hapus produk:", err);
alert("Gagal menghapus produk!"); alert("Gagal menghapus produk!");
} }
} }
</script> </script>

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

@ -51,7 +51,7 @@
<!-- Table Section --> <!-- Table Section -->
<div <div
class="bg-white rounded-lg shadow-md border border-gray-200\ overflow-hidden" class="bg-white rounded-lg shadow-md border border-C overflow-hidden"
> >
<table class="w-full"> <table class="w-full">
<thead class=""> <thead class="">
@ -76,33 +76,35 @@
> >
Alamat Alamat
</th> </th>
<th class="px-6 py-4 text-center text-D">Aksi</th> <th class="px-6 py-4 text-center text-D">
Aksi
</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr <tr
v-for="(item, index) in sales" v-for="(item, index) in sales"
:key="item.id" :key="item.id"
class="border-b border-gray-200\ hover:bg-gray-50 transition duration-150" class="border-b border-C hover:bg-gray-50 transition duration-150"
: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\ text-center font-medium text-gray-900" class="px-6 py-4 border-r border-C 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-D" class="px-6 py-4 border-r border-C text-D"
> >
{{ item.nama }} {{ item.nama }}
</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-C text-gray-800"
> >
{{ item.no_hp }} {{ item.no_hp }}
</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-C text-gray-800"
> >
{{ item.alamat }} {{ item.alamat }}
</td> </td>
@ -184,11 +186,7 @@ const salesToDelete = ref(null);
const fetchSales = async () => { const fetchSales = async () => {
loading.value = true; loading.value = true;
try { try {
const response = await axios.get("/api/sales", { const response = await axios.get("/api/sales");
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
sales.value = response.data; sales.value = response.data;
} catch (error) { } catch (error) {
console.error("Error fetching sales:", error); console.error("Error fetching sales:", error);
@ -217,11 +215,7 @@ const hapusSales = (item) => {
const confirmDelete = async () => { const confirmDelete = async () => {
try { try {
await axios.delete(`/api/sales/${salesToDelete.value.id}`, { await axios.delete(`/api/sales/${salesToDelete.value.id}`);
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
fetchSales(); fetchSales();
confirmDeleteOpen.value = false; confirmDeleteOpen.value = false;
} catch (error) { } catch (error) {

354
resources/js/pages/Tray.vue
View File

@ -1,230 +1,180 @@
<template> <template>
<mainLayout> <mainLayout>
<!-- Header -->
<div class="mb-4">
<!-- Judul -->
<p
style="
font-family: 'IM FELL Great Primer', serif;
font-style: italic;
font-size: 25px;
"
>
NAMPAN
</p>
<!-- Searchbar --> <!-- Header -->
<div class="flex justify-end mt-2"> <div class="mb-4">
<div class="w-64"> <!-- Judul -->
<searchbar v-model:search="searchQuery" /> <p style="font-family: 'IM FELL Great Primer', serif; font-style: italic; font-size: 25px;">
</div> NAMPAN
</div> </p>
<!-- Tombol --> <!-- Searchbar -->
<div class="flex gap-2 mt-3 justify-end"> <div class="flex justify-end mt-2">
<!-- Tambah Nampan --> <div class="w-64">
<button <searchbar v-model:search="searchQuery" />
@click="openModal" </div>
class="px-4 py-2 hover:bg-B bg-C rounded-md shadow font-semibold" </div>
>
Tambah Nampan
</button>
<!-- Kosongkan --> <!-- Tombol -->
<button <div class="flex gap-2 mt-3 justify-end">
@click="openConfirmModal" <!-- Tambah Nampan -->
class="px-3 py-2 bg-red-500 hover:bg-red-600 text-white rounded-md" <button
> @click="openModal"
Kosongkan class="px-4 py-2 hover:bg-B bg-C rounded-md shadow font-semibold" >
</button> Tambah Nampan
</div> </button>
<!-- Kosongkan -->
<button
@click="openConfirmModal"
class="px-3 py-2 bg-red-500 hover:bg-red-600 text-white rounded-md">
Kosongkan
</button>
</div>
</div>
<!-- Search + List -->
<TrayList :search="searchQuery" @edit="editTray" @delete="deleteTray"/>
<!-- Modal Tambah/Edit Nampan -->
<div
v-if="showModal"
class="fixed inset-0 bg-black/75 flex justify-center items-center z-50"
>
<div class="bg-white rounded-lg shadow-lg p-6 w-96">
<h2 class="text-lg font-semibold mb-4" style="color: #102C57;">Tambah Nampan</h2>
<label class="block mb-2 text-sm font-medium" style="color: #102C57;">Nama Nampan</label>
<input
v-model="trayName"
type="text"
placeholder="Contoh: A4"
class="w-full border rounded-md p-2 mb-4"
/>
<div class="flex justify-end gap-2">
<button
@click="closeModal"
class="px-4 py-2 bg-gray-400 hover:bg-gray-500 text-white rounded-md">
Cancel
</button>
<button
@click="saveTray"
class="px-4 py-2 bg-[#DAC0A3] hover:bg-[#C9A77E] rounded-md"
style="color: #102C57;">
Save
</button>
</div> </div>
</div>
</div>
<!-- Search + List --> <!-- Modal Konfirmasi Kosongkan -->
<div
<TrayList :search="searchQuery" @edit="editTray" @delete="deleteTray" /> v-if="showConfirmModal"
class="fixed inset-0 bg-black bg-opacity-40 flex justify-center items-center z-50"
<!-- Modal Tambah/Edit Nampan --> >
<div <div class="bg-white rounded-lg shadow-lg p-6 w-96 text-center">
v-if="showModal" <h2 class="text-xl font-bold mb-3" style="color: #102C57;">Kosongkan semua nampan?</h2>
class="fixed inset-0 bg-black/75 flex justify-center items-center z-50" <p class="text-gray-600 mb-6">
> Semua item akan dimasukkan ke brankas. <br/>
<div class="bg-white rounded-lg shadow-lg p-6 w-96"> Masuk ke menu ‘Brankas’ untuk mengembalikan item ke nampan.
<h2 class="text-lg font-semibold mb-4" style="color: #102c57"> </p>
Tambah Nampan <div class="flex justify-center gap-4">
</h2> <button
@click="closeConfirmModal"
<label class="px-5 py-2 bg-gray-300 hover:bg-gray-400 rounded-md font-semibold">
class="block mb-2 text-sm font-medium" Batal
style="color: #102c57" </button>
>Nama Nampan</label <button
> @click="confirmEmptyTray"
<input class="px-5 py-2 bg-red-500 hover:bg-red-600 text-white rounded-md font-semibold">
v-model="trayName" Ya
type="text" </button>
placeholder="Contoh: A4"
class="w-full border rounded-md p-2 mb-4"
/>
<div class="flex justify-end gap-2">
<button
@click="closeModal"
class="px-4 py-2 bg-gray-400 hover:bg-gray-500 text-white rounded-md"
>
Cancel
</button>
<button
@click="saveTray"
class="px-4 py-2 bg-[#DAC0A3] hover:bg-[#C9A77E] rounded-md"
style="color: #102c57"
>
Save
</button>
</div>
</div>
</div> </div>
</div>
</div>
<!-- Modal Konfirmasi Kosongkan --> </mainLayout>
<div
v-if="showConfirmModal"
class="fixed inset-0 bg-black bg-opacity-40 flex justify-center items-center z-50"
>
<div class="bg-white rounded-lg shadow-lg p-6 w-96 text-center">
<h2 class="text-xl font-bold mb-3" style="color: #102c57">
Kosongkan semua nampan?
</h2>
<p class="text-gray-600 mb-6">
Semua item akan dimasukkan ke brankas. <br />
Masuk ke menu ‘Brankas’ untuk mengembalikan item ke nampan.
</p>
<div class="flex justify-center gap-4">
<button
@click="closeConfirmModal"
class="px-5 py-2 bg-gray-300 hover:bg-gray-400 rounded-md font-semibold"
>
Batal
</button>
<button
@click="confirmEmptyTray"
class="px-5 py-2 bg-red-500 hover:bg-red-600 text-white rounded-md font-semibold"
>
Ya
</button>
</div>
</div>
</div>
</mainLayout>
</template> </template>
<script setup> <script setup>
import { ref } from "vue"; import { ref } from 'vue'
import axios from "axios"; import axios from 'axios'
import mainLayout from "../layouts/mainLayout.vue"; import mainLayout from '../layouts/mainLayout.vue'
import searchbar from "../components/searchbar.vue"; import searchbar from '../components/searchbar.vue'
import TrayList from "../components/TrayList.vue"; import TrayList from '../components/TrayList.vue'
const searchQuery = ref(""); const searchQuery = ref("")
const showModal = ref(false); const showModal = ref(false)
const showConfirmModal = ref(false); const showConfirmModal = ref(false)
const trayName = ref(""); const trayName = ref("")
const editingTrayId = ref(null); const editingTrayId = ref(null)
// buka modal tambah/edit // buka modal tambah/edit
const openModal = () => { const openModal = () => { showModal.value = true }
showModal.value = true;
};
const closeModal = () => { const closeModal = () => {
trayName.value = ""; trayName.value = ""
editingTrayId.value = null; editingTrayId.value = null
showModal.value = false; showModal.value = false
}; }
// simpan nampan // simpan nampan
const saveTray = async () => { const saveTray = async () => {
if (!trayName.value.trim()) { if (!trayName.value.trim()) {
alert("Nama Nampan tidak boleh kosong"); alert("Nama Nampan tidak boleh kosong")
return; return
}
try {
if (editingTrayId.value) {
await axios.put(`/api/nampan/${editingTrayId.value}`, { nama: trayName.value })
alert("Nampan berhasil diupdate")
} else {
await axios.post("/api/nampan", { nama: trayName.value })
alert("Nampan berhasil ditambahkan")
} }
try { closeModal()
if (editingTrayId.value) { location.reload()
await axios.put( } catch (error) {
`/api/nampan/${editingTrayId.value}`, console.error(error)
{ nama: trayName.value }, alert("Gagal menyimpan nampan")
{ }
headers: { }
Authorization: `Bearer ${localStorage.getItem(
"token"
)}`,
},
}
);
alert("Nampan berhasil diupdate");
} else {
await axios.post(
"/api/nampan",
{ nama: trayName.value },
{
headers: {
Authorization: `Bearer ${localStorage.getItem(
"token"
)}`,
},
}
);
alert("Nampan berhasil ditambahkan");
}
closeModal();
location.reload();
} catch (error) {
console.error(error);
alert("Gagal menyimpan nampan");
}
};
// === Konfirmasi kosongkan nampan === // === Konfirmasi kosongkan nampan ===
const openConfirmModal = () => { const openConfirmModal = () => { showConfirmModal.value = true }
showConfirmModal.value = true; const closeConfirmModal = () => { showConfirmModal.value = false }
};
const closeConfirmModal = () => {
showConfirmModal.value = false;
};
const confirmEmptyTray = async () => { const confirmEmptyTray = async () => {
try { try {
await axios.delete("/api/kosongkan-nampan", { await axios.delete("/api/kosongkan-nampan",)
headers: { alert("Semua item berhasil dipindahkan ke Brankas")
Authorization: `Bearer ${localStorage.getItem("token")}`, closeConfirmModal()
}, location.reload()
}); } catch (error) {
alert("Semua item berhasil dipindahkan ke Brankas"); console.error(error)
closeConfirmModal(); alert("Gagal mengosongkan nampan")
location.reload(); }
} catch (error) { }
console.error(error);
alert("Gagal mengosongkan nampan");
}
};
const editTray = (tray) => { const editTray = (tray) => {
trayName.value = tray.nama; trayName.value = tray.nama
editingTrayId.value = tray.id; editingTrayId.value = tray.id
showModal.value = true; showModal.value = true
}; }
const deleteTray = async (id) => { const deleteTray = async (id) => {
if (!confirm("Yakin ingin menghapus nampan ini?")) return; if (!confirm("Yakin ingin menghapus nampan ini?")) return
try { try {
await axios.delete(`/api/nampan/${id}`, { await axios.delete(`/api/nampan/${id}`)
headers: { alert("Nampan berhasil dihapus")
Authorization: `Bearer ${localStorage.getItem("token")}`, location.reload()
}, } catch (error) {
}); console.error(error)
alert("Nampan berhasil dihapus"); alert("Gagal menghapus nampan")
location.reload(); }
} catch (error) { }
console.error(error);
alert("Gagal menghapus nampan");
}
};
</script> </script>