[update] struk klo 1 item

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;

resources/js/components/StrukView.vue

@@ -2,7 +2,7 @@
   <div v-if="isOpen"
     class="text-D pt-serif-regular-italic fixed inset-0 bg-black/75 flex items-center justify-center z-[9999]">
 
-    <!-- Tambahkan class "print-area" agar bisa difokuskan saat print -->
+    <!-- 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>
@@ -68,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>
@@ -111,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
+              <li>Barang yang dikembalikan menurut harga pasaran dan dipotong ongkos bikin, barang rusak lain harga.</li>
-                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>
@@ -137,9 +136,9 @@
                 </div>
                 <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">
+                  <p class="px-2 pl-0 text-left text-sm w-full">
-                          {{ (transaksi.ongkos_bikin || 0).toLocaleString() }},-
+                    {{ (transaksi.ongkos_bikin || 0).toLocaleString() }},-
-                      </p>
+                  </p>
                 </div>
               </div>
 
@@ -200,7 +199,7 @@ const emit = defineEmits(['close'])
 
 const formatDate = (dateString) => {
   if (!dateString) return '-'
-  const days = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu']
+  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()]
@@ -216,12 +215,31 @@ const itemsWithMinimal = computed(() => {
                 props.transaksi.item_transaksi ||
                 []
   const arr = [...items]
-  while (arr.length < 2) {
+  // biar minimal ada 1 row terlihat
-    arr.push({ produk: {}, harga_deal: 0, posisi_asal: '' })
+  if (arr.length === 0) arr.push({ produk: {}, harga_deal: 0, posisi_asal: '' })
-  }
   return arr
 })
 
+// === 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()
 }
@@ -252,12 +270,11 @@ const formatNumber = (number) => {
     position: absolute;
     top: 0;
     left: 0;
-    transform: scale(0.5);   /* perkecil 2x lipat */
+    transform: scale(0.5);
-    transform-origin: top left; /* supaya mengecil dari pojok kiri atas */
+    transform-origin: top left;
   }
   .no-print {
     display: none !important;
   }
 }
-
 </style>