diff --git a/app/Http/Controllers/TransaksiController.php b/app/Http/Controllers/TransaksiController.php
index c975503..350a82f 100644
--- a/app/Http/Controllers/TransaksiController.php
+++ b/app/Http/Controllers/TransaksiController.php
@@ -25,15 +25,15 @@ class TransaksiController extends Controller
             $transaksi->total_items = $transaksi->itemTransaksi->count();
             $transaksi->tanggal   = $transaksi->created_at->format('d/m/Y');
         });
-        return response()->json($transaksi); 
-        
+        return response()->json($transaksi);
+
     }
 
 
     // Detail transaksi by ID
     public function show($id)
     {
-        $transaksi = Transaksi::with(['kasir', 'sales', 'items.produk.foto'])->findOrFail($id);
+        $transaksi = Transaksi::with(['kasir', 'sales', 'itemTransaksi.produk.foto'])->findOrFail($id);
         return response()->json($transaksi);
     }
 
@@ -64,7 +64,7 @@ class TransaksiController extends Controller
 
             $transaksi = Transaksi::create([
                 'kode_transaksi' => 'belum pak',
-                'id_kasir'     => $kasir->id, 
+                'id_kasir'     => $kasir->id,
                 'id_sales'     => $request->id_sales,
                 'nama_sales'   => $sales->nama ?? 'N/A',
                 'nama_pembeli' => $request->nama_pembeli,
diff --git a/resources/js/components/KasirTransaksiList.vue b/resources/js/components/KasirTransaksiList.vue
index e5f76d4..6fc9638 100644
--- a/resources/js/components/KasirTransaksiList.vue
+++ b/resources/js/components/KasirTransaksiList.vue
@@ -16,8 +16,8 @@
           <td class="border border-B p-2">{{ trx.kode_transaksi }}</td>
           <td class="border border-B p-2">Rp{{ (trx.total_harga || 0).toLocaleString() }}</td>
           <td class="border border-B p-2 text-center">
-            <button 
-              @click="$emit('detail', trx)"
+            <button
+              @click="lihatDetail(trx)"
               class="px-3 py-1 rounded-md bg-D text-A hover:bg-D/80 transition">
               Detail
             </button>
@@ -25,10 +25,30 @@
         </tr>
       </tbody>
     </table>
+
+    <!-- Modal Detail Transaksi -->
+    <StrukView
+      :isOpen="isDetailOpen"
+      :transaksi="selectedTransaksi"
+      @close="closeDetail"
+    />
+
+    <!-- Loading Modal -->
+    <div v-if="isLoading"
+      class="fixed inset-0 bg-black/75 flex items-center justify-center z-[10000]">
+      <div class="bg-white p-6 rounded-lg flex items-center gap-3">
+        <div class="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-500"></div>
+        <span>Memuat detail transaksi...</span>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
+import { ref } from 'vue'
+import axios from 'axios'
+import StrukView from './StrukView.vue'
+
 const props = defineProps({
   transaksi: {
     type: Array,
@@ -36,5 +56,51 @@ const props = defineProps({
   }
 })
 
-defineEmits(['detail'])
+const emit = defineEmits(['detail'])
+
+// State untuk modal detail
+const isDetailOpen = ref(false)
+const selectedTransaksi = ref({})
+const isLoading = ref(false)
+
+// Fungsi untuk melihat detail transaksi
+const lihatDetail = async (trx) => {
+  try {
+    isLoading.value = true
+    console.log('Fetching detail untuk transaksi:', trx)
+
+    // Fetch detail transaksi dengan semua relasi
+    const response = await axios.get(`/api/transaksi/${trx.id}`, {
+      headers: {
+        Authorization: `Bearer ${localStorage.getItem("token")}`,
+      },
+    })
+
+    console.log('Response detail transaksi:', response.data)
+    selectedTransaksi.value = response.data
+    isDetailOpen.value = true
+
+  } catch (error) {
+    console.error('Error fetching transaksi detail:', error)
+
+    let errorMessage = 'Gagal memuat detail transaksi'
+    if (error.response) {
+      errorMessage += `: ${error.response.status} - ${error.response.data?.message || error.response.statusText}`
+    } else if (error.request) {
+      errorMessage += ': Tidak ada respon dari server'
+    } else {
+      errorMessage += `: ${error.message}`
+    }
+
+    alert(errorMessage)
+  } finally {
+    isLoading.value = false
+  }
+}
+
+// Fungsi untuk menutup modal detail
+const closeDetail = () => {
+  isDetailOpen.value = false
+  selectedTransaksi.value = {}
+}
 </script>
diff --git a/resources/js/components/StrukOverlay.vue b/resources/js/components/StrukOverlay.vue
index 055ae13..03a3292 100644
--- a/resources/js/components/StrukOverlay.vue
+++ b/resources/js/components/StrukOverlay.vue
@@ -158,8 +158,8 @@
   </div>
 
   <!-- Simple Toast Alert -->
-  <div v-if="showToast" 
-    class="fixed top-4 left-1/2 transform -translate-x-1/2 z-[10001] 
+  <div v-if="showToast"
+    class="fixed top-4 left-1/2 transform -translate-x-1/2 z-[10001]
            transition-all duration-300 ease-in-out"
     :class="toastClasses">
     <div class="flex items-center gap-2 px-4 py-3 rounded-lg shadow-lg max-w-sm">
@@ -175,7 +175,7 @@
           <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
         </svg>
       </div>
-      
+
       <!-- Message -->
       <p class="text-sm font-medium">{{ toastMessage }}</p>
     </div>
@@ -230,7 +230,7 @@ const toastClasses = computed(() => {
   const baseClasses = 'text-white'
   const typeClasses = {
     error: 'bg-red-500',
-    success: 'bg-green-500', 
+    success: 'bg-green-500',
     info: 'bg-blue-500'
   }
   return `${baseClasses} ${typeClasses[toastType.value]}`
@@ -264,7 +264,7 @@ const showSimpleToast = (type, message, duration = 3000) => {
   toastType.value = type
   toastMessage.value = message
   showToast.value = true
-  
+
   setTimeout(() => {
     showToast.value = false
   }, duration)
@@ -317,7 +317,7 @@ const handleSimpan = () => {
     nama_pembeli: namaPembeli.value,
     no_hp: nomorTelepon.value,
     alamat: alamat.value,
-    ongkosBikin: ongkosBikin.value || 0,
+    ongkos_bikin: ongkosBikin.value || 0,  // Pastikan nama field benar
     total_harga: grandTotal.value,
     items: props.pesanan
   })
@@ -334,11 +334,10 @@ const simpanTransaksi = async (dataTransaksi) => {
     });
 
     showSimpleToast('success', 'Transaksi berhasil disimpan!', 2000)
-    
+
     // Delay untuk memberikan waktu user membaca notifikasi
     setTimeout(() => {
-      props.pesanan.value = [];
-      props.isOpen = false;
+      emit('close');
       window.location.reload();
     }, 2200);
 
@@ -379,4 +378,4 @@ function formatInput(e) {
   font-family: "PT Serif", serif;
   font-weight: 400;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/resources/js/components/StrukView.vue b/resources/js/components/StrukView.vue
new file mode 100644
index 0000000..66aa0ee
--- /dev/null
+++ b/resources/js/components/StrukView.vue
@@ -0,0 +1,271 @@
+<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 class="bg-yellow-500 h-8 w-full">
+        <div class="bg-D h-6 w-full"></div>
+      </div>
+
+      <div class="p-6 text-sm flex flex-col h-full relative">
+        <div class="relative flex items-center justify-between top-0 pb-1 mb-2">
+          <div class="flex flex-col gap-2 -mt-5">
+            <p class="flex items-center gap-2">
+              <i class="fab fa-instagram text-pink-600 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
+            </p>
+            <p class="flex items-center gap-2">
+              <i class="fab fa-whatsapp text-green-500 text-xl"></i> 08158851178
+            </p>
+            <p class=" text-sm">{{ transaksi.kode_transaksi || 'N/A' }}</p>
+          </div>
+
+          <div class="absolute inset-x-0 top-[-48px] flex flex-col items-center">
+            <img :src="logo" alt="Logo" class="h-40" />
+          </div>
+
+          <div class="grid grid-cols-[130px_1fr] gap-y-1 text-xs items-center -mt-5 relative z-10">
+            <div class="text-right font-semibold pr-3">Tanggal :</div>
+            <p class="text-left pl-2">{{ formatDate(transaksi.created_at) }}</p>
+
+            <div class="text-right font-semibold pr-3">Nama :</div>
+            <p class="text-left pl-2">{{ transaksi.nama_pembeli || '-' }}</p>
+
+            <div class="text-right font-semibold pr-3">Alamat :</div>
+            <p class="text-left pl-2">{{ transaksi.alamat || '-' }}</p>
+
+            <div class="text-right font-semibold pr-3">No.Hp :</div>
+            <p class="text-left pl-2">{{ transaksi.no_hp || '-' }}</p>
+          </div>
+        </div>
+
+        <div class="flex mb-1 gap-179">
+          <div class="flex gap-4">
+            <img :src="logo_bca" alt="Logo_bca" class="h-5" />
+            <img :src="logo_bri" alt="Logo_bri" class="h-5" />
+            <img :src="logo_bni" alt="Logo_bni" class="h-5" />
+          </div>
+          <div class="flex gap-4">
+            <img :src="logo_mastercard" alt="Logo_mastercard" class="h-5" />
+            <img :src="logo_visa" alt="Logo_visa" class="h-5" />
+            <img :src="logo_mandiri" alt="Logo_mandiri" class="h-5" />
+          </div>
+        </div>
+
+        <table class="w-full border-D text-sm table-fixed border-b">
+          <thead>
+            <tr class="border-b border-t border-D">
+              <th class="w-[40px] border-r text-lg border-D">Jml</th>
+              <th class="w-[360px] py-2 text-lg border-r border-D">Item</th>
+              <th class="w-[70px] border-r text-lg border-D">Posisi</th>
+              <th class="w-[40px] border-r text-lg border-D">Berat</th>
+              <th class="w-[40px] border-r text-lg border-D">Kadar</th>
+              <th class="w-[240px] text-lg">Harga</th>
+            </tr>
+          </thead>
+
+          <tbody>
+            <tr v-for="(item, index) in itemsWithMinimal" :key="index" class="text-center">
+              <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">
+                <template v-if="item.produk?.foto?.[0]?.url">
+                  <img :src="item.produk.foto[0].url" class="w-12 h-12 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">
+                    <span class="text-xs text-gray-500">IMG</span>
+                  </div>
+                </template>
+                <template v-else>
+                  <div class="w-12 h-12"></div>
+                </template>
+                <span class="text-left">{{ item.produk?.nama || '' }}</span>
+              </td>
+              <td class="border-r border-D">
+                <span v-if="item.produk?.nama">{{ item.posisi_asal || 'Brankas' }}</span>
+              </td>
+              <td class="border-r border-D">
+                <span v-if="item.produk?.berat">{{ formatNumber(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>
+                <span v-if="item.harga_deal && item.harga_deal > 0">
+                  Rp{{ formatNumber(item.harga_deal) }}
+                </span>
+              </td>
+            </tr>
+          </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">
+              <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 sudah dibeli berarti sudah diperiksa dan disetujui.</li>
+              <li class="text-red-500">Surat ini harap dibawa pada saat menjual kembali.</li>
+            </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">
+              <p class="font-semibold">{{ transaksi.nama_sales || '-' }}</p>
+            </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>
+                  <p class="text-red-500 text-xs">diluar harga jual</p>
+                </div>
+                <div class="flex items-center w-40">
+                  <p>Rp</p>
+                  <p class="px-2 text-left text-sm w-full">
+                    {{ (transaksi.ongkos_bikin || 0).toLocaleString() }},-
+                  </p>
+                </div>
+              </div>
+
+              <!-- Total -->
+              <div class="flex items-center justify-between -mt-4">
+                <p class="font-semibold">Total Harga</p>
+                <div class="flex items-center w-40">
+                  <p>Rp</p>
+                  <p class="px-3 pl-2 py-1 text-left text-sm w-full">
+                    {{ (transaksi.total_harga || 0).toLocaleString() }},-
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <!-- Tombol -->
+            <div class="flex justify-end gap-2 mt-4">
+              <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">
+                Print
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <p class="absolute p-8 bottom-0 left-0 w-full text-left text-xs bg-D text-white py-1">
+        Terima kasih sudah berbelanja dengan kami
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import logo from '@/../images/logo.png'
+import logo_bca from '@/../images/logo_bca.png'
+import logo_bri from '@/../images/logo_bri.png'
+import logo_bni from '@/../images/logo_bni.png'
+import logo_mastercard from '@/../images/logo_mastercard.png'
+import logo_visa from '@/../images/logo_visa.png'
+import logo_mandiri from '@/../images/logo_mandiri.png'
+
+const props = defineProps({
+  isOpen: {
+    type: Boolean,
+    default: false,
+  },
+  transaksi: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+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 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: '' })
+  }
+
+  return arr
+})
+
+// Fungsi print (bisa dikembangkan lebih lanjut)
+const handlePrint = () => {
+  window.print()
+}
+
+// Format number helper
+const formatNumber = (number) => {
+  if (!number) return 0
+  return parseFloat(number).toLocaleString('id-ID')
+}
+</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;
+}
+
+/* Print styles */
+@media print {
+  .fixed {
+    position: static !important;
+  }
+
+  .bg-black\/75 {
+    background: none !important;
+  }
+
+  button {
+    display: none !important;
+  }
+}
+</style>
diff --git a/resources/js/pages/Kasir.vue b/resources/js/pages/Kasir.vue
index b04ee97..52bc489 100644
--- a/resources/js/pages/Kasir.vue
+++ b/resources/js/pages/Kasir.vue
@@ -10,9 +10,7 @@
                         class="bg-white rounded-xl shadow-lg border border-B overflow-hidden h-auto lg:h-full"
                     >
                         <div class="p-2 sm:p-3 md:p-4 h-auto lg:h-full">
-                            <!-- ==== MODIFIKASI: Tambah event listener untuk transaksi-saved ==== -->
                             <KasirForm @transaksi-saved="handleTransaksiSaved" />
-                            <!-- ==== END MODIFIKASI ==== -->
                         </div>
                     </div>
                 </div>
@@ -63,7 +61,6 @@
                             <KasirTransaksiList
                                 v-else
                                 :transaksi="transaksi"
-                                @detail="lihatDetail"
                             />
                         </div>
                     </div>
@@ -84,7 +81,7 @@ import KasirTransaksiList from "../components/KasirTransaksiList.vue";
 const transaksi = ref([]);
 const loading = ref(true);
 
-// ==== TAMBAHAN: Fungsi untuk fetch transaksi (dipindah ke fungsi terpisah) ====
+// Fungsi untuk fetch transaksi
 const fetchTransaksi = async () => {
     try {
         loading.value = true;
@@ -95,31 +92,22 @@ const fetchTransaksi = async () => {
         });
 
         transaksi.value = res.data;
-
         console.log("Fetched transaksi:", transaksi.value);
-        
+
     } catch (err) {
         console.error("Gagal fetch transaksi:", err);
     } finally {
         loading.value = false;
     }
 };
-// ==== END TAMBAHAN ====
 
 onMounted(async () => {
-    // ==== MODIFIKASI: Panggil fungsi fetchTransaksi ====
     await fetchTransaksi();
-    // ==== END MODIFIKASI ====
 });
 
-// ==== TAMBAHAN: Handle ketika transaksi baru disimpan ====
+// Handle ketika transaksi baru disimpan
 const handleTransaksiSaved = async (newTransaksi) => {
     // Refresh daftar transaksi
     await fetchTransaksi();
 };
-// ==== END TAMBAHAN ====
-
-const lihatDetail = (trx) => {
-    alert(`Detail transaksi: ${trx.kode}`);
-};
 </script>