diff --git a/resources/js/components/StrukOverlay.vue b/resources/js/components/StrukOverlay.vue
index ac66435..02203c2 100644
--- a/resources/js/components/StrukOverlay.vue
+++ b/resources/js/components/StrukOverlay.vue
@@ -64,18 +64,23 @@
           </thead>
 
           <tbody>
-            <tr v-for="(item, index) in pesananMinimal" :key="index" class="text-center">
+            <!-- Item rows dengan dynamic height -->
+            <tr v-for="(item, index) in props.pesanan" :key="index"
+                class="text-center"
+                :style="getRowStyle()">
               <td class="border-r border-D">
                 <span v-if="item.harga_deal">1</span>
               </td>
-              <td class="flex items-center gap-2 p-2 border-r border-D">
+              <td class="flex items-center gap-2 p-2 border-r border-D" :style="getRowStyle()">
                 <template v-if="item.produk?.foto?.[0]?.url">
-                  <img :src="item.produk.foto[0].url" class="w-12 h-12 object-cover" />
+                  <img :src="item.produk.foto[0].url"
+                       :class="getImageClass()"
+                       class="object-cover" />
                 </template>
                 <template v-else>
-                  <div class="w-12 h-12"></div>
+                  <div :class="getImageClass()"></div>
                 </template>
-                {{ item.produk?.nama || '' }}
+                <span :class="getTextClass()">{{ item.produk?.nama || '' }}</span>
               </td>
               <td class="border-r border-D">{{ item.produk.nama ? (item.nampan?.nama || 'Brankas') : '' }}</td>
               <td class="border-r border-D">
@@ -240,6 +245,32 @@ const grandTotal = computed(() => {
   return props.total + (ongkosBikin.value || 0)
 })
 
+// Fungsi untuk menentukan style row berdasarkan jumlah item
+const getRowStyle = () => {
+  if (props.pesanan.length === 1) {
+    return { height: '126px' } // 2x lipat dari tinggi normal (48px)
+  }
+  return { height: '63px' } // Tinggi normal
+}
+
+
+
+// Fungsi untuk menentukan class gambar berdasarkan jumlah item
+const getImageClass = () => {
+  if (props.pesanan.length === 1) {
+    return 'w-25 h-25' // 2x lipat dari ukuran normal (w-10 h-10)
+  }
+  return 'w-12 h-12' // Ukuran normal
+}
+
+// Fungsi untuk menentukan class text berdasarkan jumlah item
+const getTextClass = () => {
+  if (props.pesanan.length === 1) {
+    return 'text-lg font-medium' // Text lebih besar untuk single item
+  }
+  return 'text-sm' // Text normal
+}
+
 const getCurrentDate = () => {
   const days = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu']
   const months = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
@@ -354,14 +385,6 @@ onMounted(() => {
   }
 })
 
-const pesananMinimal = computed(() => {
-  const arr = [...props.pesanan]
-  while (arr.length < 2) {
-    arr.push({ produk: {}, harga_deal: 0, posisi: '' })
-  }
-  return arr
-})
-
 function formatInput(e) {
   let value = e.target.value.replace(/\D/g, "");
   ongkosBikin.value = value ? parseInt(value, 10) : null;
diff --git a/resources/js/components/StrukView.vue b/resources/js/components/StrukView.vue
index 34e8f81..0134c61 100644
--- a/resources/js/components/StrukView.vue
+++ b/resources/js/components/StrukView.vue
@@ -1,7 +1,9 @@
 <template>
   <div v-if="isOpen"
     class="text-D pt-serif-regular-italic fixed inset-0 bg-black/75 flex items-center justify-center z-[9999]">
-    <div class="bg-white w-[1224px] h-[528px] rounded-md shadow-lg relative overflow-hidden">
+
+    <!-- print-area untuk fokus saat print -->
+    <div class="print-area bg-white w-[1224px] h-[528px] rounded-md shadow-lg relative overflow-hidden">
       <div class="bg-yellow-500 h-8 w-full">
         <div class="bg-D h-6 w-full"></div>
       </div>
@@ -66,23 +68,23 @@
           </thead>
 
           <tbody>
-            <tr v-for="(item, index) in itemsWithMinimal" :key="index" class="text-center">
+            <tr v-for="(item, index) in itemsWithMinimal" :key="index" class="text-center" :style="getRowStyle()">
               <td class="border-r border-D">
                 <span v-if="item.harga_deal && item.harga_deal > 0">1</span>
               </td>
-              <td class="flex items-center gap-2 p-2 border-r border-D">
+              <td class="flex items-center gap-2 p-2 border-r border-D" :style="getRowStyle()">
                 <template v-if="item.produk?.foto?.[0]?.url">
-                  <img :src="item.produk.foto[0].url" class="w-12 h-12 object-cover rounded" />
+                  <img :src="item.produk.foto[0].url" :class="getImageClass()" class="object-cover rounded" />
                 </template>
                 <template v-else-if="item.produk?.nama">
-                  <div class="w-12 h-12 bg-gray-200 rounded flex items-center justify-center">
+                  <div :class="getImageClass() + ' bg-gray-200 rounded flex items-center justify-center'">
                     <span class="text-xs text-gray-500">IMG</span>
                   </div>
                 </template>
                 <template v-else>
-                  <div class="w-12 h-12"></div>
+                  <div :class="getImageClass()"></div>
                 </template>
-                <span class="text-left">{{ item.produk?.nama || '' }}</span>
+                <span :class="getTextClass()">{{ item.produk?.nama || '' }}</span>
               </td>
               <td class="border-r border-D">
                 <span v-if="item.produk?.nama">{{ item.posisi_asal || 'Brankas' }}</span>
@@ -109,8 +111,7 @@
             <p class="font-semibold">PERHATIAN</p>
             <ol class="list-decimal ml-4 text-xs space-y-1">
               <li>Berat barang telah ditimbang dan disaksikan oleh pembeli.</li>
-              <li>Barang yang dikembalikan menurut harga pasaran dan dipotong ongkos bikin, barang rusak
-                lain harga.</li>
+              <li>Barang yang dikembalikan menurut harga pasaran dan dipotong ongkos bikin, barang rusak lain harga.</li>
               <li>Barang yang sudah dibeli berarti sudah diperiksa dan disetujui.</li>
               <li class="text-red-500">Surat ini harap dibawa pada saat menjual kembali.</li>
             </ol>
@@ -133,7 +134,7 @@
                   <p class="font-semibold">Ongkos bikin</p>
                   <p class="text-red-500 text-xs">diluar harga jual</p>
                 </div>
-                <div class="flex items-center w-40">
+                <div class="flex p-1 items-center w-40 bg-B rounded-sm">
                   <p>Rp</p>
                   <p class="px-2 pl-0 text-left text-sm w-full">
                     {{ (transaksi.ongkos_bikin || 0).toLocaleString() }},-
@@ -154,7 +155,7 @@
             </div>
 
             <!-- Tombol -->
-            <div class="flex justify-end gap-2 mt-4">
+            <div class="flex justify-end gap-2 mt-4 no-print">
               <button @click="$emit('close')" class="bg-gray-400 text-white px-6 py-2 rounded">
                 Tutup
               </button>
@@ -196,50 +197,53 @@ const props = defineProps({
 
 const emit = defineEmits(['close'])
 
-// Format tanggal sesuai dengan format yang ada
 const formatDate = (dateString) => {
   if (!dateString) return '-'
-
-  const days = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu']
-  const months = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
-
+  const days = ['Minggu','Senin','Selasa','Rabu','Kamis','Jumat','Sabtu']
+  const months = ['01','02','03','04','05','06','07','08','09','10','11','12']
   const date = new Date(dateString)
   const dayName = days[date.getDay()]
   const day = String(date.getDate()).padStart(2, '0')
   const month = months[date.getMonth()]
   const year = date.getFullYear()
-
   return `${dayName}/${day}-${month}-${year}`
 }
 
-// Menambahkan minimal 2 baris untuk tampilan yang konsisten
 const itemsWithMinimal = computed(() => {
-  console.log('Transaksi data in StrukView:', props.transaksi)
-
-  // Coba berbagai kemungkinan nama field
   const items = props.transaksi.itemTransaksi ||
                 props.transaksi.items ||
                 props.transaksi.item_transaksi ||
                 []
-
-  console.log('Items found:', items)
-
   const arr = [...items]
-
-  // Pastikan minimal ada 2 baris untuk tampilan yang rapi
-  while (arr.length < 2) {
-    arr.push({ produk: {}, harga_deal: 0, posisi_asal: '' })
-  }
-
+  // biar minimal ada 1 row terlihat
+  if (arr.length === 0) arr.push({ produk: {}, harga_deal: 0, posisi_asal: '' })
   return arr
 })
 
-// Fungsi print (bisa dikembangkan lebih lanjut)
+// === Tambahan style/helper sama dengan strukoverlay ===
+const getRowStyle = () => {
+  if (itemsWithMinimal.value.length === 1) {
+    return { height: '126px' }
+  }
+  return { height: '63px' }
+}
+const getImageClass = () => {
+  if (itemsWithMinimal.value.length === 1) {
+    return 'w-25 h-25'
+  }
+  return 'w-12 h-12'
+}
+const getTextClass = () => {
+  if (itemsWithMinimal.value.length === 1) {
+    return 'text-lg font-medium'
+  }
+  return 'text-sm'
+}
+
 const handlePrint = () => {
   window.print()
 }
 
-// Format number helper
 const formatNumber = (number) => {
   if (!number) return 0
   return parseFloat(number).toLocaleString('id-ID')
@@ -256,15 +260,20 @@ const formatNumber = (number) => {
 
 /* Print styles */
 @media print {
-  .fixed {
-    position: static !important;
+  body * {
+    visibility: hidden;
   }
-
-  .bg-black\/75 {
-    background: none !important;
+  .print-area, .print-area * {
+    visibility: visible;
   }
-
-  button {
+  .print-area {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: scale(0.5);
+    transform-origin: top left;
+  }
+  .no-print {
     display: none !important;
   }
 }
diff --git a/resources/js/pages/InputProduk.vue b/resources/js/pages/InputProduk.vue
index 86dbbb5..e264117 100644
--- a/resources/js/pages/InputProduk.vue
+++ b/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>
 
@@ -10,10 +11,8 @@
         <div class="flex-1">
           <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">
-                {{ errors.nama[0] }}
-            </p>
+            <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">{{ errors.nama[0] }}</p>
           </div>
 
           <div class="mb-3">
@@ -25,7 +24,7 @@
             <div class="flex-1">
               <label class="block text-D mb-1">Berat (g)</label>
               <InputField v-model="form.berat" type="number" step="0.01" placeholder="Masukkan berat"
-                @input="calculateHargaJual" />
+                          @input="calculateHargaJual" />
             </div>
             <div class="flex-1">
               <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="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" />
+              <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" />
+              <InputField v-model="form.harga_jual" type="number" step="0.01"
+                          placeholder="Masukkan harga jual" />
             </div>
           </div>
         </div>
@@ -50,55 +50,82 @@
         <div class="flex-1">
           <label class="block text-D mb-1">Foto</label>
 
-          <!-- Image Grid -->
-          <div class="grid grid-cols-3 gap-3">
+          <div class="grid grid-cols-3 gap-3 relative">
             <!-- 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">
+                        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">
+            <div v-if="uploadedImages.length < 6" class="relative aspect-square">
+              <div @drop="handleDrop" @dragover.prevent @dragenter.prevent="isDragging = true"
+                   @dragleave.prevent="isDragging = false" @click="toggleUploadMenu"
+                   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"
+                   :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>
+
+              <!-- 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="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>
-                </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>
+                  <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>
-                <p class="text-xs text-gray-600 font-medium"
-                  v-html="uploadLoading ? 'Uploading...' : 'Unggah<br/>Foto'"></p>
+                  <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"
-            class="hidden" />
+          <!-- Hidden File Input -->
+          <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>
@@ -108,15 +135,30 @@
       <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(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' }}
         </button>
         <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' }}
         </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: '',
-  id_kategori: null,
-  berat: 0,
-  kadar: 0,
-  harga_per_gram: 0,
-  harga_jual: 0,
+  nama: '', id_kategori: null, berat: 0, kadar: 0, harga_per_gram: 0, harga_jual: 0,
 });
-
 const category = ref([]);
-
-const loadKategori = async () => {
-  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 showUploadMenu = ref(false);
+const fileInput = ref(null);
 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 &&
-    form.value.id_kategori &&
-    form.value.berat > 0 &&
-    form.value.kadar > 0 &&
-    form.value.harga_per_gram > 0 &&
-    form.value.harga_jual > 0 &&
+  return form.value.nama && form.value.id_kategori && 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 () => {
-  loading.value = true;
+const loadKategori = async () => {
+  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: {
-        Authorization: `Bearer ${localStorage.getItem("token")}`,
-      },
+      headers: { 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 = () => {
-  openItemModal.value = false;
-  createdProduct.value = null;
-  resetForm();
-  router.replace('/produk');
-};
-
-const triggerFileInput = () => {
+const toggleUploadMenu = () => {
   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 (!isValidSize) {
-      uploadError.value = 'Ukuran file maksimal 2MB';
-      return false;
-    }
-
+    if (!isValidType) { 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: {
-          Authorization: `Bearer ${localStorage.getItem("token")}`,
-          'Content-Type': 'multipart/form-data',
-
-        },
+        headers: { 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';
@@ -299,16 +291,48 @@ const uploadFiles = async (files) => {
 };
 
 const removeImage = async (id) => {
-    try {
-        await axios.delete(`/api/foto/${id}`, {
-            headers: {
-                Authorization: `Bearer ${localStorage.getItem("token")}`,
-            },
-        });
-        uploadedImages.value = uploadedImages.value.filter((i) => i.id !== id);
-    } catch {
-        uploadError.value = "Gagal menghapus foto";
-    }
+  try {
+    await axios.delete(`/api/foto/${id}`, {
+      headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
+    });
+    uploadedImages.value = uploadedImages.value.filter((i) => i.id !== id);
+  } 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) => {
@@ -316,89 +340,37 @@ const submitForm = async (addItem) => {
     alert('Mohon lengkapi semua field yang diperlukan');
     return;
   }
-
   loading.value = true;
-
   try {
-    const response = await axios.post('/api/produk', form.value,
-      {
-        headers: {
-          Authorization: `Bearer ${localStorage.getItem("token")}`,
-        },
-      }
-    );
-
+    const response = await axios.post('/api/produk', form.value, {
+      headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
+    });
     const createdProductData = response.data.data;
-
-    // Reset form
-    form.value = {
-      nama: '',
-      id_kategori: '',
-      berat: 0,
-      kadar: 0,
-      harga_per_gram: 0,
-      harga_jual: 0,
-    };
-
+    form.value = { nama: '', id_kategori: '', berat: 0, kadar: 0, harga_per_gram: 0, harga_jual: 0 };
     uploadedImages.value = [];
     uploadError.value = '';
-
-    if (fileInput.value) {
-      fileInput.value.value = '';
-    }
-
+    showUploadMenu.value = false;
+    if (fileInput.value) fileInput.value.value = '';
     if (addItem) {
       openCreateItemModal(createdProductData);
     } else {
       window.location.href = '/produk?message=Produk berhasil disimpan';
     }
   } catch (error) {
-  console.error('Submit error:', error);
-
-  if (error.response?.status === 422 && 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';
-  }
-}
- finally {
+    console.error('Submit error:', error);
+    if (error.response?.status === 422) {
+      errors.value = error.response.data.errors || {};
+    } else {
+      errors.value = { general: "Terjadi kesalahan saat menyimpan produk" };
+    }
+  } finally {
     loading.value = false;
   }
 };
 
-const resetForm = async () => {
-  form.value = {
-    nama: '',
-    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 = () => { router.push('/produk'); };
+const openCreateItemModal = (product) => { createdProduct.value = product; openItemModal.value = true; };
+const closeItemModal = () => { openItemModal.value = false; createdProduct.value = null; };
 
-const back = () => {
-  resetForm();
-  window.history.back();
-};
-
-onMounted(() => {
-  loadFoto();
-  loadKategori();
-});
+onMounted(() => { loadFoto(); loadKategori(); });
 </script>