[update] ui struk

resources/js/components/KasirForm.vue

@@ -194,6 +194,15 @@ const tambahItem = () => {
     return;
   }
 
+  if (pesanan.value.length >= 2) {
+    error.value = "Maksimal hanya bisa memesan 2 item.";
+    clearTimeout(errorTimeout);
+    errorTimeout = setTimeout(() => {
+      error.value = "";
+    }, 3000);
+    return;
+  }
+
   // harga deal
   item.value.kode_item = kodeItem.value;
   item.value.harga_deal = Number(hargaJual.value);

resources/js/components/StrukOverlay.vue

@@ -77,24 +77,44 @@
       <th class="w-[140px]">Total Harga</th>
     </tr>
   </thead>
-  <tbody>
-    <!-- ==== MODIFIKASI: Loop pesanan dari props ==== -->
-    <tr v-for="(item, index) in pesanan" :key="index" class="text-center">
-      <td class="flex items-center gap-2 p-2 border-r border-D">
-        <img :src="item.produk.foto?.[0]?.url || ''" class="w-12 h-12 object-cover" />
-        {{ item.produk.nama }}
-      </td>
-      <td class="border-r border-D">{{ item.posisi || 'Brankas' }}</td>
-      <td class="border-r border-D">{{ item.produk.berat || '-' }}</td>
-      <td class="border-r border-D">{{ item.produk.kadar || '-' }}</td>
-      <td class="border-r border-D">Rp{{ item.harga_deal.toLocaleString() }}</td>
-      <td class="border-r border-D">1</td>
-      <td>Rp{{ item.harga_deal.toLocaleString() }}</td>
-    </tr>
-    <!-- ==== END MODIFIKASI ==== -->
 
+  <tbody>
+  <tr v-for="(item, index) in pesananMinimal" :key="index" class="text-center">
+    <td class="flex items-center gap-2 p-2 border-r border-D">
+  <template v-if="item.produk?.foto?.[0]?.url">
+    <img
+      :src="item.produk.foto[0].url"
+      class="w-12 h-12 object-cover"
+    />
+  </template>
+  <template v-else>
+    <div class="w-12 h-12"></div>
+  </template>
+  {{ item.produk?.nama || '' }}
+</td>
+
+
+
+    <td class="border-r border-D">{{ item.posisi || '' }}</td>
+    <td class="border-r border-D">{{ item.produk?.berat || '' }}</td>
+    <td class="border-r border-D">{{ item.produk?.kadar || '' }}</td>
+    <td class="border-r border-D">
+      <span v-if="item.harga_deal">Rp{{ item.harga_deal.toLocaleString() }}</span>
+    </td>
+    <td class="border-r border-D">
+      <span v-if="item.harga_deal">1</span>
+    </td>
+    <td>
+      <span v-if="item.harga_deal">Rp{{ item.harga_deal.toLocaleString() }}</span>
+    </td>
+  </tr>
+</tbody>
+
+
+  <!-- BAGIAN BAWAH DIPINDAHKAN KE TFOOT -->
+  <tfoot>
     <!-- Baris Ongkos + Total -->
-    <tr class="align-top">
+    <tr class="align-top border-t">
       <td colspan="2" rowspan="2" class="p-2 text-left align-top">
         <p class="font-semibold">PERHATIAN</p>
         <ol class="list-decimal ml-4 text-xs space-y-1">
@@ -108,17 +128,15 @@
       <td colspan="2" rowspan="2" class="p-2 text-center align-top">
         <div class="flex flex-col items-center justify-center h-full">
           <p><strong>Sales</strong></p>
-          <!-- ==== MODIFIKASI: Sales dropdown dinamis ==== -->
           <inputSelect
             v-model="selectedSales"
             :options="salesOptions"
             class="mt-16 text-sm rounded bg-B cursor-pointer !w-[160px] text-center [option]:text-left"
           />
-          <!-- ==== END MODIFIKASI ==== -->
         </div>
       </td>
 
-      <td colspan="2"  class="p-2 text-right text-sm font-semibold align-top border-r">
+      <td colspan="2" class="p-2 text-right text-sm font-semibold align-top border-r">
         <div class="space-y-2">
           <p>Ongkos bikin</p>
           <p class="text-red-500 text-xs">diluar harga jual</p>
@@ -130,19 +148,15 @@
         <div class="space-y-2">
           <div class="flex items-center">
             <p>Rp</p>
-            <!-- ==== MODIFIKASI: Ongkos bikin input ==== -->
             <inputField
               v-model.number="ongkosBikin"
               type="number"
               class="h-7 px-2 text-sm rounded bg-blue-200 text-left w-full"
             />
-            <!-- ==== END MODIFIKASI ==== -->
           </div>
           <div class="flex items-center">
             <p>Rp</p>
-            <!-- ==== MODIFIKASI: Total dinamis ==== -->
             <p class="px-3 py-1 text-left text-sm w-full">{{ grandTotal.toLocaleString() }}</p>
-            <!-- ==== END MODIFIKASI ==== -->
           </div>
         </div>
       </td>
@@ -154,22 +168,15 @@
       <td></td>
       <td class="p-2 text-center">
         <div class="flex gap-2">
-          <!-- ==== MODIFIKASI: Tombol Batal dengan emit close ==== -->
+          <button @click="$emit('close')" class="bg-gray-400 text-white px-6 py-2 rounded w-full">Batal</button>
-          <button @click="$emit('close')" class="bg-gray-400 text-white px-6 py-2 rounded w-full">
+          <button @click="handleSimpan" class="bg-C text-white px-6 py-2 rounded w-full">Simpan</button>
-            Batal
-          </button>
-          <!-- ==== END MODIFIKASI ==== -->
-          <!-- ==== MODIFIKASI: Tombol Simpan dengan validasi ==== -->
-          <button @click="handleSimpan" class="bg-C text-white px-6 py-2 rounded w-full">
-            Simpan
-          </button>
-          <!-- ==== END MODIFIKASI ==== -->
         </div>
       </td>
     </tr>
-  </tbody>
+  </tfoot>
 </table>
 
+
       </div>
 
       <!-- Pesan bawah -->
@@ -312,7 +319,7 @@ const handleSimpan = () => {
 // ==== TAMBAHAN: Fungsi untuk menyimpan transaksi ====
 const simpanTransaksi = async (dataTransaksi) => {
   console.log('Data transaksi yang akan disimpan:', dataTransaksi);
-  
+
   try {
     const response = await axios.post('/api/transaksi', dataTransaksi, {
       headers: {
@@ -341,6 +348,14 @@ onMounted(() => {
     fetchSales()
   }
 })
+
+const pesananMinimal = computed(() => {
+  const arr = [...props.pesanan] // copy data asli
+  while (arr.length < 2) {
+    arr.push({ produk: {}, harga_deal: 0, posisi: '' }) // baris kosong
+  }
+  return arr
+})
 // ==== END TAMBAHAN ====
 </script>