Merge branch 'production' of https://git.abbauf.com/Magang-2025/Kasir into production

This commit is contained in:
dhilanradya 2025-09-19 17:05:10 +07:00
commit fcf4473aa3

View File

@ -1,7 +1,8 @@
<template> <template>
<mainLayout> <mainLayout>
<!-- Modal Buat Item - Sekarang menggunakan komponen terpisah --> <!-- Modal Buat Item -->
<CreateItemModal :isOpen="openItemModal" :product="createdProduct" @close="closeItemModal" /> <CreateItemModal :isOpen="openItemModal" :product="createdProduct" @close="closeItemModal" />
<div class="p-6"> <div class="p-6">
<p class="font-serif italic text-[25px] text-D">Produk Baru</p> <p class="font-serif italic text-[25px] text-D">Produk Baru</p>
@ -10,10 +11,8 @@
<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 v-model="form.nama" type="text" placeholder="Masukkan nama produk" @input="errors.nama = null" /> <InputField v-model="form.nama" type="text" placeholder="Masukkan nama produk" @input="errors.nama = null" />
<p v-if="errors.nama" class="text-sm text-red-500 mt-1"> <p v-if="errors.nama" class="text-sm text-red-500 mt-1">{{ errors.nama[0] }}</p>
{{ errors.nama[0] }}
</p>
</div> </div>
<div class="mb-3"> <div class="mb-3">
@ -25,7 +24,7 @@
<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 v-model="form.berat" type="number" step="0.01" placeholder="Masukkan berat" <InputField v-model="form.berat" type="number" step="0.01" placeholder="Masukkan berat"
@input="calculateHargaJual" /> @input="calculateHargaJual" />
</div> </div>
<div class="flex-1"> <div class="flex-1">
<label class="block text-D mb-1">Kadar (K)</label> <label class="block text-D mb-1">Kadar (K)</label>
@ -36,12 +35,13 @@
<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">Harga per Gram</label> <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" <InputField v-model="form.harga_per_gram" type="number" step="0.01"
@input="calculateHargaJual" /> placeholder="Masukkan harga per gram" @input="calculateHargaJual" />
</div> </div>
<div class="flex-1"> <div class="flex-1">
<label class="block text-D mb-1">Harga Jual</label> <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" /> <InputField v-model="form.harga_jual" type="number" step="0.01"
placeholder="Masukkan harga jual" />
</div> </div>
</div> </div>
</div> </div>
@ -50,55 +50,82 @@
<div class="flex-1"> <div class="flex-1">
<label class="block text-D mb-1">Foto</label> <label class="block text-D mb-1">Foto</label>
<!-- Image Grid --> <div class="grid grid-cols-3 gap-3 relative">
<div class="grid grid-cols-3 gap-3">
<!-- Uploaded Images --> <!-- Uploaded Images -->
<div v-for="(image, index) in uploadedImages" :key="`img-${image.id}`" class="relative group aspect-square"> <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"> <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" /> <img :src="image.url" :alt="`Foto ${index + 1}`" class="w-full h-full object-cover" />
<!-- Delete Button -->
<button @click="removeImage(image.id)" :disabled="uploadLoading" <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"> 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> </button>
</div> </div>
</div> </div>
<!-- Upload Button --> <!-- Upload Button -->
<div v-if="uploadedImages.length < 6" @drop="handleDrop" @dragover.prevent <div v-if="uploadedImages.length < 6" class="relative aspect-square">
@dragenter.prevent="isDragging = true" @dragleave.prevent="isDragging = false" @click="triggerFileInput" <div @drop="handleDrop" @dragover.prevent @dragenter.prevent="isDragging = true"
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" @dragleave.prevent="isDragging = false" @click="toggleUploadMenu"
:class="{ class="w-full h-full 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"
'border-blue-400 bg-blue-50': isDragging, :class="{ 'border-blue-400 bg-blue-50': isDragging, 'cursor-not-allowed opacity-50': uploadLoading }">
'cursor-not-allowed opacity-50': uploadLoading <div class="text-center">
}"> <div v-if="!uploadLoading"
<div class="text-center"> class="w-12 h-12 bg-D rounded-lg flex items-center justify-center mx-auto mb-2 group-hover:bg-D transition-colors">
<div v-if="!uploadLoading" <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
class="w-12 h-12 bg-D rounded-lg flex items-center justify-center mx-auto mb-2 group-hover:bg-D transition-colors"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 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>
<!-- Dropdown Menu -->
<div v-if="showUploadMenu"
class="absolute top-full left-0 mt-2 w-60 bg-white border border-gray-200 rounded-lg shadow-lg z-20">
<button @click="triggerFileUpload"
class="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center space-x-3 border-b border-gray-100">
<svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path> d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
</svg> </svg>
</div> <div>
<div v-else class="w-12 h-12 bg-D rounded-lg flex items-center justify-center mx-auto mb-2"> <div class="font-medium text-gray-900">Upload dari File</div>
<svg class="animate-spin w-6 h-6 text-white" fill="none" viewBox="0 0 24 24"> <div class="text-sm text-gray-500">Pilih foto dari galeri</div>
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> </div>
<path class="opacity-75" fill="currentColor" </button>
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> <button @click="openCameraModal"
class="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center space-x-3">
<svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"/>
</svg> </svg>
</div> <div>
<p class="text-xs text-gray-600 font-medium" <div class="font-medium text-gray-900">Ambil dari Kamera</div>
v-html="uploadLoading ? 'Uploading...' : 'Unggah<br/>Foto'"></p> <div class="text-sm text-gray-500">Foto langsung dengan kamera</div>
</div>
</button>
</div> </div>
</div> </div>
</div> </div>
<input ref="fileInput" type="file" multiple accept="image/jpeg,image/jpg,image/png" @change="handleFileSelect" <!-- Hidden File Input -->
class="hidden" /> <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> <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"> <div v-if="uploadError" class="mt-2 p-2 bg-red-50 border border-red-200 rounded text-sm text-red-600">
{{ uploadError }} {{ uploadError }}
</div> </div>
@ -108,15 +135,30 @@
<div class="mt-6 flex justify-end flex-row gap-3"> <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="back" class="px-6 py-2 rounded-md bg-gray-400 hover:bg-gray-500 text-white">Batal</button>
<button @click="submitForm(true)" :disabled="loading || !isFormValid" <button @click="submitForm(true)" :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"> 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...' : 'Tambah Item' }} {{ loading ? 'Menyimpan...' : 'Tambah Item' }}
</button> </button>
<button @click="submitForm(false)" :disabled="loading || !isFormValid" <button @click="submitForm(false)" :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"> 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' }} {{ loading ? 'Menyimpan...' : 'Simpan' }}
</button> </button>
</div> </div>
</div> </div>
<!-- Overlay -->
<div v-if="showUploadMenu" @click="showUploadMenu = false" class="fixed inset-0 z-10"></div>
<!-- Camera Modal -->
<div v-if="showCamera" class="fixed inset-0 bg-black/75 flex items-center justify-center z-[9999]">
<div class="bg-white w-[480px] rounded-lg shadow-lg p-4 relative">
<video ref="video" autoplay playsinline class="w-full h-64 bg-black rounded"></video>
<canvas ref="canvas" class="hidden"></canvas>
<div class="mt-3 flex justify-between">
<button @click="closeCamera" class="px-4 py-2 bg-gray-400 text-white rounded">Batal</button>
<button @click="capturePhoto" class="px-4 py-2 bg-blue-500 text-white rounded">Ambil Foto</button>
</div>
</div>
</div>
</mainLayout> </mainLayout>
</template> </template>
@ -129,55 +171,32 @@ import InputField from "../components/InputField.vue";
import InputSelect from "../components/InputSelect.vue"; import InputSelect from "../components/InputSelect.vue";
import CreateItemModal from "../components/CreateItemModal.vue"; import CreateItemModal from "../components/CreateItemModal.vue";
const router = useRouter(); const router = useRouter();
const form = ref({ const form = ref({
nama: '', nama: '', id_kategori: null, berat: 0, kadar: 0, harga_per_gram: 0, harga_jual: 0,
id_kategori: null,
berat: 0,
kadar: 0,
harga_per_gram: 0,
harga_jual: 0,
}); });
const category = ref([]); const category = ref([]);
const showUploadMenu = ref(false);
const loadKategori = async () => { const fileInput = ref(null);
try {
const response = await axios.get('/api/kategori', {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
if (response.data && Array.isArray(response.data)) {
category.value = response.data.map(cat => ({
value: cat.id,
label: cat.nama
}));
}
} catch (error) {
console.error('Error loading categories:', error);
}
};
const loading = ref(false); const loading = ref(false);
const uploadLoading = ref(false); const uploadLoading = ref(false);
const uploadedImages = ref([]); const uploadedImages = ref([]);
const isDragging = ref(false); const isDragging = ref(false);
const uploadError = ref(''); const uploadError = ref('');
const fileInput = ref(null);
const errors = ref({}); const errors = ref({});
const openItemModal = ref(false); const openItemModal = ref(false);
const createdProduct = ref(null); const createdProduct = ref(null);
// Camera states
const showCamera = ref(false);
const video = ref(null);
const canvas = ref(null);
let stream = null;
const isFormValid = computed(() => { const isFormValid = computed(() => {
return form.value.nama && return form.value.nama && form.value.id_kategori && form.value.berat > 0 &&
form.value.id_kategori && form.value.kadar > 0 && form.value.harga_per_gram > 0 && form.value.harga_jual > 0 &&
form.value.berat > 0 &&
form.value.kadar > 0 &&
form.value.harga_per_gram > 0 &&
form.value.harga_jual > 0 &&
uploadedImages.value.length > 0; uploadedImages.value.length > 0;
}); });
@ -189,43 +208,42 @@ const calculateHargaJual = () => {
} }
}; };
const loadFoto = async () => { const loadKategori = async () => {
loading.value = true; try {
const response = await axios.get('/api/kategori', {
headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
});
if (response.data && Array.isArray(response.data)) {
category.value = response.data.map(cat => ({ value: cat.id, label: cat.nama }));
}
} catch (error) {
console.error('Error loading categories:', error);
}
};
const loadFoto = async () => {
try { try {
const response = await axios.get(`/api/foto`, { const response = await axios.get(`/api/foto`, {
headers: { headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
}); });
uploadedImages.value = response.data; uploadedImages.value = response.data;
console.log(uploadedImages.value);
} catch (e) { } catch (e) {
console.error(e); console.error(e);
uploadError.value = "Gagal memuat foto"; uploadError.value = "Gagal memuat foto";
} }
loading.value = false;
}
const openCreateItemModal = (product) => {
createdProduct.value = product;
openItemModal.value = true;
}; };
const closeItemModal = () => { const toggleUploadMenu = () => {
openItemModal.value = false;
createdProduct.value = null;
resetForm();
router.replace('/produk');
};
const triggerFileInput = () => {
if (!uploadLoading.value && uploadedImages.value.length < 6) { if (!uploadLoading.value && uploadedImages.value.length < 6) {
fileInput.value?.click(); showUploadMenu.value = !showUploadMenu.value;
} }
}; };
const triggerFileUpload = () => {
showUploadMenu.value = false;
fileInput.value?.click();
};
const handleFileSelect = (event) => { const handleFileSelect = (event) => {
const files = Array.from(event.target.files); const files = Array.from(event.target.files);
uploadFiles(files); uploadFiles(files);
@ -234,62 +252,36 @@ const handleFileSelect = (event) => {
const handleDrop = (event) => { const handleDrop = (event) => {
event.preventDefault(); event.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(event.dataTransfer.files); const files = Array.from(event.dataTransfer.files);
uploadFiles(files); uploadFiles(files);
}; };
const uploadFiles = async (files) => { const uploadFiles = async (files) => {
uploadError.value = ''; uploadError.value = '';
if (uploadedImages.value.length + files.length > 6) { if (uploadedImages.value.length + files.length > 6) {
uploadError.value = 'Maksimal 6 foto yang dapat diupload'; uploadError.value = 'Maksimal 6 foto yang dapat diupload';
return; return;
} }
const validFiles = files.filter(file => { const validFiles = files.filter(file => {
const isValidType = ['image/jpeg', 'image/jpg', 'image/png'].includes(file.type); const isValidType = ['image/jpeg', 'image/jpg', 'image/png'].includes(file.type);
const isValidSize = file.size <= 2 * 1024 * 1024; const isValidSize = file.size <= 2 * 1024 * 1024;
if (!isValidType) { uploadError.value = 'Format file harus JPG, JPEG, atau PNG'; return false; }
if (!isValidType) { if (!isValidSize) { uploadError.value = 'Ukuran file maksimal 2MB'; return false; }
uploadError.value = 'Format file harus JPG, JPEG, atau PNG';
return false;
}
if (!isValidSize) {
uploadError.value = 'Ukuran file maksimal 2MB';
return false;
}
return true; return true;
}); });
if (validFiles.length === 0) return; if (validFiles.length === 0) 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);
const response = await axios.post('/api/foto', formData, { const response = await axios.post('/api/foto', formData, {
headers: { headers: { Authorization: `Bearer ${localStorage.getItem("token")}`, 'Content-Type': 'multipart/form-data' },
Authorization: `Bearer ${localStorage.getItem("token")}`,
'Content-Type': 'multipart/form-data',
},
}); });
uploadedImages.value.push(response.data); uploadedImages.value.push(response.data);
} }
if (fileInput.value) fileInput.value.value = '';
if (fileInput.value) {
fileInput.value.value = '';
}
} catch (error) { } catch (error) {
console.error('Upload error:', error); console.error('Upload error:', error);
uploadError.value = error.response?.data?.message || 'Gagal mengupload foto'; uploadError.value = error.response?.data?.message || 'Gagal mengupload foto';
@ -299,16 +291,48 @@ const uploadFiles = async (files) => {
}; };
const removeImage = async (id) => { const removeImage = async (id) => {
try { try {
await axios.delete(`/api/foto/${id}`, { await axios.delete(`/api/foto/${id}`, {
headers: { headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
Authorization: `Bearer ${localStorage.getItem("token")}`, });
}, uploadedImages.value = uploadedImages.value.filter((i) => i.id !== id);
}); } catch {
uploadedImages.value = uploadedImages.value.filter((i) => i.id !== id); uploadError.value = "Gagal menghapus foto";
} catch { }
uploadError.value = "Gagal menghapus foto"; };
}
// CAMERA FUNCTIONS
const openCameraModal = async () => {
showUploadMenu.value = false;
showCamera.value = true;
try {
stream = await navigator.mediaDevices.getUserMedia({ video: true });
video.value.srcObject = stream;
} catch (err) {
console.error("Gagal akses kamera:", err);
alert("Tidak bisa mengakses kamera, cek izin browser!");
closeCamera();
}
};
const closeCamera = () => {
showCamera.value = false;
if (stream) {
stream.getTracks().forEach(track => track.stop());
stream = null;
}
};
const capturePhoto = () => {
const ctx = canvas.value.getContext("2d");
canvas.value.width = video.value.videoWidth;
canvas.value.height = video.value.videoHeight;
ctx.drawImage(video.value, 0, 0);
canvas.value.toBlob(async (blob) => {
if (!blob) return;
await uploadFiles([new File([blob], "camera_photo.png", { type: "image/png" })]);
closeCamera();
}, "image/png");
}; };
const submitForm = async (addItem) => { const submitForm = async (addItem) => {
@ -316,89 +340,37 @@ const submitForm = async (addItem) => {
alert('Mohon lengkapi semua field yang diperlukan'); alert('Mohon lengkapi semua field yang diperlukan');
return; return;
} }
loading.value = true; loading.value = true;
try { try {
const response = await axios.post('/api/produk', form.value, const response = await axios.post('/api/produk', form.value, {
{ headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
headers: { });
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
}
);
const createdProductData = response.data.data; const createdProductData = response.data.data;
form.value = { nama: '', id_kategori: '', berat: 0, kadar: 0, harga_per_gram: 0, harga_jual: 0 };
// Reset form
form.value = {
nama: '',
id_kategori: '',
berat: 0,
kadar: 0,
harga_per_gram: 0,
harga_jual: 0,
};
uploadedImages.value = []; uploadedImages.value = [];
uploadError.value = ''; uploadError.value = '';
showUploadMenu.value = false;
if (fileInput.value) { if (fileInput.value) fileInput.value.value = '';
fileInput.value.value = '';
}
if (addItem) { if (addItem) {
openCreateItemModal(createdProductData); openCreateItemModal(createdProductData);
} else { } else {
window.location.href = '/produk?message=Produk berhasil disimpan'; window.location.href = '/produk?message=Produk berhasil disimpan';
} }
} catch (error) { } catch (error) {
console.error('Submit error:', error); console.error('Submit error:', error);
if (error.response?.status === 422) {
if (error.response?.status === 422 && error.response.data?.errors) { errors.value = error.response.data.errors || {};
// 🔥 simpan error validasi dari backend } else {
errors.value = error.response.data.errors; errors.value = { general: "Terjadi kesalahan saat menyimpan produk" };
} else { }
uploadError.value = error.response?.data?.message || 'Gagal menyimpan produk'; } finally {
}
}
finally {
loading.value = false; loading.value = false;
} }
}; };
const resetForm = async () => { const back = () => { router.push('/produk'); };
form.value = { const openCreateItemModal = (product) => { createdProduct.value = product; openItemModal.value = true; };
nama: '', const closeItemModal = () => { openItemModal.value = false; createdProduct.value = null; };
id_kategori: '',
berat: 0,
kadar: 0,
harga_per_gram: 0,
harga_jual: 0,
};
try {
await axios.delete(`/api/foto/reset/${userId.value}`, {
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
uploadedImages.value = [];
} catch (error) {
console.error('Error resetting photos:', error);
}
uploadError.value = '';
if (fileInput.value) {
fileInput.value.value = '';
}
};
const back = () => { onMounted(() => { loadFoto(); loadKategori(); });
resetForm();
window.history.back();
};
onMounted(() => {
loadFoto();
loadKategori();
});
</script> </script>