From 5999ff6359b4980c46f8fb20015642d914ba570d Mon Sep 17 00:00:00 2001
From: dhilanradya <akundhilan@gmail.com>
Date: Mon, 29 Sep 2025 16:55:18 +0700
Subject: [PATCH] [update] strukview

---
 resources/js/components/StrukView.vue | 44 ++++++++++++++++++---------
 1 file changed, 30 insertions(+), 14 deletions(-)

diff --git a/resources/js/components/StrukView.vue b/resources/js/components/StrukView.vue
index 0134c61..b3ca4e4 100644
--- a/resources/js/components/StrukView.vue
+++ b/resources/js/components/StrukView.vue
@@ -3,7 +3,7 @@
     class="text-D pt-serif-regular-italic fixed inset-0 bg-black/75 flex items-center justify-center z-[9999]">
 
     <!-- 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="print-area bg-white w-[1224px] h-[528px] shadow-lg relative overflow-hidden">
       <div class="bg-yellow-500 h-8 w-full">
         <div class="bg-D h-6 w-full"></div>
       </div>
@@ -104,9 +104,9 @@
           </tbody>
         </table>
 
-        <!-- Bagian bawah -->
+
         <div class="flex text-sm mt-2">
-          <!-- PERHATIAN -->
+         
           <div class="w-[40%] p-2 text-left">
             <p class="font-semibold">PERHATIAN</p>
             <ol class="list-decimal ml-4 text-xs space-y-1">
@@ -117,7 +117,7 @@
             </ol>
           </div>
 
-          <!-- SALES -->
+
           <div class="w-[20%] p-2 flex flex-col items-center justify-center">
             <p><strong>Hormat Kami</strong></p>
             <div class="mt-16 text-sm text-center">
@@ -125,10 +125,10 @@
             </div>
           </div>
 
-          <!-- ONGKOS & TOTAL -->
+
           <div class="ml-auto w-[25%] p-2 flex flex-col justify-between">
             <div class="space-y-4">
-              <!-- Ongkos bikin -->
+
               <div class="flex items-start justify-between">
                 <div class="flex flex-col">
                   <p class="font-semibold">Ongkos bikin</p>
@@ -159,7 +159,7 @@
               <button @click="$emit('close')" class="bg-gray-400 text-white px-6 py-2 rounded">
                 Tutup
               </button>
-              <button @click="handlePrint" class="bg-blue-500 text-white px-6 py-2 rounded">
+              <button @click="handlePrint" class="bg-C text-white px-6 py-2 rounded">
                 Print
               </button>
             </div>
@@ -215,12 +215,12 @@ const itemsWithMinimal = computed(() => {
                 props.transaksi.item_transaksi ||
                 []
   const arr = [...items]
-  // biar minimal ada 1 row terlihat
+
   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' }
@@ -258,23 +258,39 @@ const formatNumber = (number) => {
   font-weight: 400;
 }
 
-/* Print styles */
+
 @media print {
+  @page {
+    size: A4; /* atau '80mm 200mm' kalau thermal */
+    margin: Minimum;
+  }
+  /* Sembunyikan semua elemen di luar print-area */
   body * {
-    visibility: hidden;
+    visibility: hidden !important;
   }
-  .print-area, .print-area * {
-    visibility: visible;
+  .print-area * {
+    visibility: visible !important;
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+    
   }
+
   .print-area {
     position: absolute;
     top: 0;
     left: 0;
-    transform: scale(0.5);
+    width: 1224px;
+    height: 528px;
+    margin: 0;
+    padding: 0;
+    transform: scale(0.6673);   
     transform-origin: top left;
   }
+
+  /* Hilangkan tombol tutup & print */
   .no-print {
     display: none !important;
   }
 }
 </style>
+ 
\ No newline at end of file