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

resources/js/pages/InputProduk.vue

@@ -1,7 +1,8 @@
 <template>
   <mainLayout>
-    <!-- Modal Buat Item - Sekarang menggunakan komponen terpisah -->
+    <!-- Modal Buat Item -->
     <CreateItemModal :isOpen="openItemModal" :product="createdProduct" @close="closeItemModal" />
+
     <div class="p-6">
       <p class="font-serif italic text-[25px] text-D">Produk Baru</p>
 
@@ -11,9 +12,7 @@
           <div class="mb-3">
             <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" />
-            <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 class="mb-3">
@@ -36,12 +35,13 @@
           <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"
+              <InputField v-model="form.harga_per_gram" type="number" step="0.01"
-                @input="calculateHargaJual" />
+                          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" />
+              <InputField v-model="form.harga_jual" type="number" step="0.01"
+                          placeholder="Masukkan harga jual" />
             </div>
           </div>
         </div>
@@ -50,13 +50,11 @@
         <div class="flex-1">
           <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 -->
             <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" />
-                <!-- Delete Button -->
                 <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">
                   ×
@@ -65,13 +63,11 @@
             </div>
 
             <!-- 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"
                        class="w-12 h-12 bg-D rounded-lg flex items-center justify-center mx-auto mb-2 group-hover:bg-D transition-colors">
@@ -92,13 +88,44 @@
                      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"
+                          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>
+                  <div>
+                    <div class="font-medium text-gray-900">Upload dari File</div>
+                    <div class="text-sm text-gray-500">Pilih foto dari galeri</div>
+                  </div>
+                </button>
+
+                <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>
+                  <div>
+                    <div class="font-medium text-gray-900">Ambil dari Kamera</div>
+                    <div class="text-sm text-gray-500">Foto langsung dengan kamera</div>
+                  </div>
+                </button>
+              </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>
-
           <div v-if="uploadError" class="mt-2 p-2 bg-red-50 border border-red-200 rounded text-sm text-red-600">
             {{ uploadError }}
           </div>
@@ -117,6 +144,21 @@
         </button>
       </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>
 </template>
 
@@ -129,55 +171,32 @@ import InputField from "../components/InputField.vue";
 import InputSelect from "../components/InputSelect.vue";
 import CreateItemModal from "../components/CreateItemModal.vue";
 
-
 const router = useRouter();
 
 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 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 uploadLoading = ref(false);
 const uploadedImages = ref([]);
 const isDragging = ref(false);
 const uploadError = ref('');
-const fileInput = ref(null);
 const errors = ref({});
 const openItemModal = ref(false);
 const createdProduct = ref(null);
 
+// Camera states
+const showCamera = ref(false);
+const video = ref(null);
+const canvas = ref(null);
+let stream = null;
+
 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;
 });
 
@@ -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 {
     const response = await axios.get(`/api/foto`, {
-      headers: {
+      headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
-        Authorization: `Bearer ${localStorage.getItem("token")}`,
-      },
     });
     uploadedImages.value = response.data;
-    console.log(uploadedImages.value);
   } catch (e) {
     console.error(e);
-
     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) {
-    fileInput.value?.click();
+    showUploadMenu.value = !showUploadMenu.value;
   }
 };
 
+const triggerFileUpload = () => {
+  showUploadMenu.value = false;
+  fileInput.value?.click();
+};
+
 const handleFileSelect = (event) => {
   const files = Array.from(event.target.files);
   uploadFiles(files);
@@ -234,62 +252,36 @@ const handleFileSelect = (event) => {
 const handleDrop = (event) => {
   event.preventDefault();
   isDragging.value = false;
-
   if (uploadLoading.value || uploadedImages.value.length >= 6) return;
-
   const files = Array.from(event.dataTransfer.files);
   uploadFiles(files);
 };
 
 const uploadFiles = async (files) => {
   uploadError.value = '';
-
   if (uploadedImages.value.length + files.length > 6) {
     uploadError.value = 'Maksimal 6 foto yang dapat diupload';
     return;
   }
-
   const validFiles = files.filter(file => {
     const isValidType = ['image/jpeg', 'image/jpg', 'image/png'].includes(file.type);
     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;
   });
-
   if (validFiles.length === 0) return;
-
   uploadLoading.value = true;
-
   try {
     for (const file of validFiles) {
       const formData = new FormData();
       formData.append('foto', file);
-
       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);
     }
-
+    if (fileInput.value) fileInput.value.value = '';
-    if (fileInput.value) {
-      fileInput.value.value = '';
-    }
-
   } catch (error) {
     console.error('Upload error:', error);
     uploadError.value = error.response?.data?.message || 'Gagal mengupload foto';
@@ -301,9 +293,7 @@ const uploadFiles = async (files) => {
 const removeImage = async (id) => {
   try {
     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 {
@@ -311,42 +301,56 @@ const removeImage = async (id) => {
   }
 };
 
+// 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) => {
   if (!isFormValid.value) {
     alert('Mohon lengkapi semua field yang diperlukan');
     return;
   }
-
   loading.value = true;
-
   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;
-
+    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 = [];
     uploadError.value = '';
-
+    showUploadMenu.value = false;
-    if (fileInput.value) {
+    if (fileInput.value) fileInput.value.value = '';
-      fileInput.value.value = '';
-    }
-
     if (addItem) {
       openCreateItemModal(createdProductData);
     } else {
@@ -354,51 +358,19 @@ const submitForm = async (addItem) => {
     }
   } catch (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
-    errors.value = error.response.data.errors;
     } else {
-    uploadError.value = error.response?.data?.message || 'Gagal menyimpan produk';
+      errors.value = { general: "Terjadi kesalahan saat menyimpan produk" };
     }
-}
+  } finally {
- finally {
     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>