diff --git a/resources/js/components/KasirForm.vue b/resources/js/components/KasirForm.vue
index aa97730..b845686 100644
--- a/resources/js/components/KasirForm.vue
+++ b/resources/js/components/KasirForm.vue
@@ -195,6 +195,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);
diff --git a/resources/js/components/StrukOverlay.vue b/resources/js/components/StrukOverlay.vue
index bfef561..b85e6a7 100644
--- a/resources/js/components/StrukOverlay.vue
+++ b/resources/js/components/StrukOverlay.vue
@@ -1,181 +1,163 @@
 <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"
-    >
+  <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">
       <div class="bg-D h-8 w-full"></div>
 
       <div class="p-6 text-sm flex flex-col h-full relative">
-        <!-- Header -->
         <div class="relative flex items-center justify-between pb-2 mb-2">
-          <!-- Sosmed -->
           <div class="flex flex-col gap-4">
             <p class="flex items-center gap-2">
-              <i class="fab fa-instagram text-red-500 text-xl"></i> tokomas_Jakartacitayam
+              <i class="fab fa-instagram text-D text-xl"></i> tokomas_Jakartacitayam
             </p>
             <p class="flex items-center gap-2">
-              <i class="fab fa-tiktok text-black text-xl"></i> tokomas_Jakartacitayam
+              <i class="fab fa-tiktok text-D text-xl"></i> tokomas_Jakartacitayam
             </p>
             <p class="flex items-center gap-2">
-              <i class="fab fa-whatsapp text-green-500 text-xl"></i> 08158851178
+              <i class="fab fa-whatsapp text-D text-xl"></i> 08158851178
             </p>
           </div>
 
-          <!-- Logo & tanggal (absolute di tengah) -->
+
           <div class="absolute inset-x-0 top-0 flex flex-col items-center">
             <img :src="logo" alt="Logo" class="h-15" />
-            <!-- ==== MODIFIKASI: Tanggal sekarang dinamis ==== -->
+
             <p class="mt-1 text-center">{{ getCurrentDate() }}</p>
-            <!-- ==== END MODIFIKASI ==== -->
+
           </div>
 
-          <!-- Data Pembeli -->
-          <div
-            class="grid grid-cols-[130px_1fr] gap-y-2 items-center relative z-10"
-          >
+
+          <div class="grid grid-cols-[130px_1fr] gap-y-2 items-center relative z-10">
             <div class="text-right font-semibold pr-3">Nama Pembeli</div>
-            <!-- ==== MODIFIKASI: Input field sekarang v-model ==== -->
-            <inputField
-              v-model="namaPembeli"
-              class="h-7 px-2 text-sm rounded bg-blue-200 w-full"
-            />
-            <!-- ==== END MODIFIKASI ==== -->
+
+            <inputField v-model="namaPembeli" class="h-7 px-2 text-sm rounded bg-blue-200 w-full" />
+
             <div class="text-right font-semibold pr-3">Nomor Telepon</div>
-            <!-- ==== MODIFIKASI: Input field sekarang v-model ==== -->
-            <inputField
-              v-model="nomorTelepon"
-              class="h-7 px-2 text-sm rounded bg-blue-200 w-full"
-            />
-            <!-- ==== END MODIFIKASI ==== -->
+
+            <inputField v-model="nomorTelepon" class="h-7 px-2 text-sm rounded bg-blue-200 w-full" />
+
             <div class="text-right font-semibold pr-3">Alamat</div>
-            <!-- ==== MODIFIKASI: Input field sekarang v-model ==== -->
-            <inputField
-              v-model="alamat"
-              class="h-7 px-2 text-sm rounded bg-blue-200 w-full"
-            />
-            <!-- ==== END MODIFIKASI ==== -->
+
+            <inputField v-model="alamat" class="h-7 px-2 text-sm rounded bg-blue-200 w-full" />
+
           </div>
         </div>
 
-        <!-- Nomor Transaksi -->
-        <!-- ==== MODIFIKASI: Kode transaksi dinamis ==== -->
+
         <p class="mt-1 text-sm">{{ generateTransactionCode() }}</p>
-        <!-- ==== END MODIFIKASI ==== -->
 
-       <table class="w-full border-D mt-0 text-sm table-fixed">
-  <thead>
-    <tr class="border-b border-D">
-      <th class="w-[260px] py-2 border-r border-D">Item</th>
-      <th class="w-[70px] border-r border-D">Posisi</th>
-      <th class="w-[60px] border-r border-D">Berat</th>
-      <th class="w-[60px] border-r border-D">Kadar</th>
-      <th class="w-[140px] border-r border-D">Harga Satuan</th>
-      <th class="w-[60px] border-r border-D">Jumlah</th>
-      <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 ==== -->
 
-    <!-- Baris Ongkos + Total -->
-    <tr class="align-top">
-      <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">
-          <li>Berat barang telah ditimbang dan disaksikan oleh pembeli.</li>
-          <li>Barang yang dikembalikan menurut harga pasaran dan <br> dipotong ongkos bikin, barang rusak lain harga.</li>
-          <li>Barang yang sudah dibeli berarti sudah diperiksa dan disetujui.</li>
-          <li>Surat ini harap dibawa pada saat menjual kembali.</li>
-        </ol>
-      </td>
+        <table class="w-full border-D mt-0 text-sm table-fixed">
+          <thead>
+            <tr class="border-b border-D">
+              <th class="w-[260px] py-2 border-r border-D">Item</th>
+              <th class="w-[70px] border-r border-D">Posisi</th>
+              <th class="w-[60px] border-r border-D">Berat</th>
+              <th class="w-[60px] border-r border-D">Kadar</th>
+              <th class="w-[140px] border-r border-D">Harga Satuan</th>
+              <th class="w-[60px] border-r border-D">Jumlah</th>
+              <th class="w-[140px]">Total Harga</th>
+            </tr>
+          </thead>
 
-      <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>
+          <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">
+                <span v-if="item.produk?.berat">{{ item.produk.berat }}g</span>
+              </td>
+              <td class="border-r border-D">
+                <span v-if="item.produk?.kadar">{{ item.produk.kadar }}k</span>
+              </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>
 
-      <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>
-          <p>Total</p>
-        </div>
-      </td>
 
-      <td class="p-2 text-sm align-top">
-        <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>
-    </tr>
 
-    <!-- Baris Tombol -->
-    <tr>
-      <td></td>
-      <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>
-          <!-- ==== 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>
-</table>
+          <tfoot>
+
+            <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">
+                  <li>Berat barang telah ditimbang dan disaksikan oleh pembeli.</li>
+                  <li>Barang yang dikembalikan menurut harga pasaran dan <br> dipotong ongkos bikin,
+                    barang rusak lain
+                    harga.</li>
+                  <li>Barang yang sudah dibeli berarti sudah diperiksa dan disetujui.</li>
+                  <li>Surat ini harap dibawa pada saat menjual kembali.</li>
+                </ol>
+              </td>
+
+              <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>
+                  <inputSelect v-model="selectedSales" :options="salesOptions"
+                    class="mt-16 text-sm rounded bg-B cursor-pointer !w-[160px] text-center [option]:text-left" />
+                </div>
+              </td>
+
+              <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>
+                  <p>Total</p>
+                </div>
+              </td>
+
+              <td class="p-2 text-sm align-top">
+                <div class="space-y-2">
+                  <div class="flex items-center">
+                    <p>Rp</p>
+                    <inputField v-model.number="ongkosBikin" type="number"
+                      class="h-7 px-2 text-sm rounded bg-blue-200 text-left w-full" />
+                  </div>
+                  <div class="flex items-center">
+                    <p>Rp</p>
+                    <p class="px-3 py-1 text-left text-sm w-full">{{ grandTotal.toLocaleString() }}
+                    </p>
+                  </div>
+                </div>
+              </td>
+            </tr>
+
+
+            <tr>
+              <td></td>
+              <td></td>
+              <td class="p-2 text-center">
+                <div class="flex gap-2">
+                  <button @click="$emit('close')" class="bg-gray-400 text-white px-6 py-2 rounded w-full">Batal</button>
+                  <button @click="handleSimpan" class="bg-C text-white px-6 py-2 rounded w-full">Simpan</button>
+                </div>
+              </td>
+            </tr>
+          </tfoot>
+        </table>
+
 
       </div>
 
-      <!-- Pesan bawah -->
-      <p
-        class="absolute bottom-0 left-0 text-xs bg-D text-white px-2 py-1 rounded-tr-md"
-      >
+
+      <p class="absolute bottom-0 left-0 text-xs bg-D text-white px-2 py-1 rounded-tr-md">
         Terima kasih sudah berbelanja dengan kami
       </p>
     </div>
@@ -187,11 +169,9 @@ import { ref, computed, onMounted } from 'vue'
 import logo from '@/../images/logo.png'
 import inputField from '@/components/inputField.vue'
 import inputSelect from '@/components/inputSelect.vue'
-// ==== TAMBAHAN: Import axios ====
-import axios from 'axios'
-// ==== END TAMBAHAN ====
 
-// ==== MODIFIKASI: Props sekarang menerima pesanan dan total ====
+import axios from 'axios'
+
 const props = defineProps({
   isOpen: {
     type: Boolean,
@@ -206,28 +186,21 @@ const props = defineProps({
     default: 0
   }
 })
-// ==== END MODIFIKASI ====
 
-// ==== TAMBAHAN: Define emits ====
+
 const emit = defineEmits(['close', 'confirm'])
-// ==== END TAMBAHAN ====
 
-// ==== TAMBAHAN: Reactive variables untuk form ====
 const namaPembeli = ref('')
 const nomorTelepon = ref('')
 const alamat = ref('')
 const ongkosBikin = ref(0)
 const selectedSales = ref(null)
 const salesOptions = ref([])
-// ==== END TAMBAHAN ====
 
-// ==== TAMBAHAN: Computed untuk grand total ====
 const grandTotal = computed(() => {
   return props.total + (ongkosBikin.value || 0)
 })
-// ==== END TAMBAHAN ====
 
-// ==== TAMBAHAN: Fungsi untuk generate tanggal ====
 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']
@@ -240,17 +213,13 @@ const getCurrentDate = () => {
 
   return `${dayName}/${day}-${month}-${year}`
 }
-// ==== END TAMBAHAN ====
 
-// ==== TAMBAHAN: Fungsi untuk generate kode transaksi ====
 const generateTransactionCode = () => {
   const now = new Date()
   const timestamp = now.getTime().toString().slice(-6)
   return `TRS-${timestamp}`
 }
-// ==== END TAMBAHAN ====
 
-// ==== TAMBAHAN: Fetch sales data ====
 const fetchSales = async () => {
   try {
     const response = await axios.get('/api/sales', {
@@ -264,7 +233,7 @@ const fetchSales = async () => {
       label: sales.nama
     }))
 
-    // Set default sales jika ada
+
     if (salesOptions.value.length > 0) {
       selectedSales.value = salesOptions.value[0].value
     }
@@ -272,11 +241,9 @@ const fetchSales = async () => {
     console.error('Error fetching sales:', error)
   }
 }
-// ==== END TAMBAHAN ====
 
-// ==== TAMBAHAN: Handle simpan dengan validasi ====
 const handleSimpan = () => {
-  // Validasi input wajib
+
   if (!namaPembeli.value.trim()) {
     alert('Nama pembeli harus diisi!')
     return
@@ -297,7 +264,7 @@ const handleSimpan = () => {
     return
   }
 
-  // Emit data ke parent
+
   simpanTransaksi({
     id_sales: selectedSales.value,
     nama_pembeli: namaPembeli.value,
@@ -309,10 +276,10 @@ 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: {
@@ -320,7 +287,7 @@ const simpanTransaksi = async (dataTransaksi) => {
       },
     });
 
-    // Reset form setelah berhasil
+
     props.pesanan.value = [];
     props.isOpen = false;
 
@@ -332,23 +299,28 @@ const simpanTransaksi = async (dataTransaksi) => {
     alert('Error menyimpan transaksi: ' + (error.response?.data?.message || error.message));
   }
 };
-// ==== END TAMBAHAN ====
-// ==== END TAMBAHAN ====
 
-// ==== TAMBAHAN: Fetch sales saat component mounted ====
 onMounted(() => {
   if (props.isOpen) {
     fetchSales()
   }
 })
-// ==== END TAMBAHAN ====
+
+const pesananMinimal = computed(() => {
+  const arr = [...props.pesanan]
+  while (arr.length < 2) {
+    arr.push({ produk: {}, harga_deal: 0, posisi: '' })
+  }
+  return arr
+})
+
 </script>
 
 <style scoped>
 @import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+
 .pt-serif-regular-italic {
   font-family: "PT Serif", serif;
   font-weight: 400;
 }
-
 </style>