diff --git a/app/Http/Controllers/StrukController.php b/app/Http/Controllers/StrukController.php
new file mode 100644
index 0000000..e1173a2
--- /dev/null
+++ b/app/Http/Controllers/StrukController.php
@@ -0,0 +1,51 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\Transaksi;
+use Barryvdh\DomPDF\Facade\Pdf;
+use Carbon\Carbon;
+
+class StrukController extends Controller
+{
+    public function cetak(int $id)
+    {
+        try {
+            $data = Transaksi::with(['itemTransaksi.produk.foto', 'sales'])
+                ->find($id);
+
+            if (!$data) {
+                return response()->json(['error'=>'Transaksi tidak ditemukan'], 404);
+            }
+
+            // Debug: Let's see what data structure we have
+            // dd([
+            //     'transaksi' => $data->toArray(),
+            //     'item_count' => $data->itemTransaksi->count(),
+            //     'has_sales' => $data->sales ? true : false,
+            // ]);
+
+            // After debugging, uncomment this:
+            
+            $pdf = Pdf::loadView('exports.struk', $data->toArray())
+                ->setPaper([0, 0, 1224 * 0.75, 528 * 0.75], 'landscape')
+                ->setOptions([
+                    'isHtml5ParserEnabled' => true,
+                    'isRemoteEnabled' => true,
+                    'defaultFont' => 'DejaVu Sans'
+                ]);
+
+            $filename = 'Struk_' . $data->kode_transaksi . '.pdf';
+            return $pdf->download($filename);
+            
+
+        } catch (\Exception $e) {
+            return response()->json([
+                'error' => 'Debug Error',
+                'message' => $e->getMessage(),
+                'line' => $e->getLine(),
+                'file' => $e->getFile()
+            ], 500);
+        }
+    }
+}
\ No newline at end of file
diff --git a/resources/js/components/BrankasList.vue b/resources/js/components/BrankasList.vue
index 032ceec..ffda540 100644
--- a/resources/js/components/BrankasList.vue
+++ b/resources/js/components/BrankasList.vue
@@ -204,7 +204,7 @@ const cancelText = ref("Batal");
 // QR Code generator
 const qrCodeUrl = computed(() => {
   if (selectedItem.value) {
-    const data = `ITM-${selectedItem.value.id}-${selectedItem.value.produk.nama.replace(/\s/g, "")}`;
+    const data = selectedItem.value.kode_item;
     return `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(data)}`;
   }
   return "";
diff --git a/resources/js/components/DetailPerProduk.vue b/resources/js/components/DetailPerProduk.vue
index 922e1c1..a567a9b 100644
--- a/resources/js/components/DetailPerProduk.vue
+++ b/resources/js/components/DetailPerProduk.vue
@@ -341,7 +341,7 @@ const fetchData = async (page = 1) => {
 
   let queryParams = `tanggal=${tanggalDipilih.value}&page=${page}`;
   if (salesDipilih.value != 0 ) queryParams += `&sales_id=${salesDipilih.value}`;
-  if (nampanDipilih.value != 0) queryParams += `&produk_id=${produkDipilih.value}`;
+  if (nampanDipilih.value != 0) queryParams += `&nampan_id=${nampanDipilih.value}`;
   if (namaPembeli.value) queryParams += `&nama_pembeli=${encodeURIComponent(namaPembeli.value)}`;
 
   try {
diff --git a/resources/js/components/NavigationComponent.vue b/resources/js/components/NavigationComponent.vue
index e5d8a8f..4f3f89a 100644
--- a/resources/js/components/NavigationComponent.vue
+++ b/resources/js/components/NavigationComponent.vue
@@ -13,9 +13,9 @@ const baseItems = [
   {
     label: "Manajemen Produk",
     subItems: [
-      { label: "Brankas", route: "/brankas" },
-      { label: "Nampan", route: "/nampan" },
       { label: "Produk", route: "/produk" },
+      { label: "Nampan", route: "/nampan" },
+      { label: "Brankas", route: "/brankas" },
       { label: "Kategori", route: "/kategori" },
       { label: "Sales", route: "/sales" },
     ]
diff --git a/resources/js/components/TrayList.vue b/resources/js/components/TrayList.vue
index 330921d..14404e5 100644
--- a/resources/js/components/TrayList.vue
+++ b/resources/js/components/TrayList.vue
@@ -54,15 +54,15 @@
             class="flex justify-between items-center border border-C rounded-lg p-2 cursor-pointer hover:bg-gray-50"
             @click="openMovePopup(item)">
             <div class="flex items-center gap-3">
-              <img v-if="item.produk.foto && item.produk.foto.length > 0" :src="item.produk.foto[0].url"
+              <img v-if="item.produk?.foto && item.produk?.foto.length > 0" :src="item.produk?.foto[0].url"
                 alt="foto produk" class="size-12 object-cover rounded" />
               <div class="text-D">
-                <p class="text-sm">{{ item.produk.nama }}</p>
+                <p class="text-sm">{{ item.produk?.nama }}</p>
                 <p class="text-sm font-medium">{{ item.kode_item }}</p>
               </div>
             </div>
             <div class="flex items-center gap-2">
-              <span class="font-medium">{{ item.produk.berat }}g</span>
+              <span class="font-medium">{{ item.produk?.berat }}g</span>
             </div>
           </div>
         </div>
@@ -171,7 +171,7 @@ const selectedTrayId = ref("");
 // QR Code generator
 const qrCodeUrl = computed(() => {
   if (selectedItem.value) {
-    const data = `ITM-${selectedItem.value.id}-${selectedItem.value.produk.nama.replace(/\s/g, "")}`;
+    const data = selectedItem.value.kode_item;
     return `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(data)}`;
   }
   return "";
@@ -296,7 +296,7 @@ const saveMove = async () => {
 // Hitung total berat
 const totalWeight = (tray) => {
   if (!tray.items) return 0;
-  const total = tray.items.reduce((sum, item) => sum + (item.produk.berat || 0), 0);
+  const total = tray.items.reduce((sum, item) => sum + (item.produk?.berat || 0), 0);
   return total.toFixed(2);
 };
 
diff --git a/resources/views/exports/struk.blade.php b/resources/views/exports/struk.blade.php
new file mode 100644
index 0000000..37053ee
--- /dev/null
+++ b/resources/views/exports/struk.blade.php
@@ -0,0 +1,542 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Struk Transaksi</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+        
+        :root {
+            --color-A: #EBF1F5;
+            --color-B: #AFE5FF;
+            --color-C: #77C7EE;
+            --color-D: #024768;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: "PT Serif", serif;
+            font-weight: 400;
+            font-style: italic;
+            color: var(--color-D);
+            background-color: white;
+            width: 1224px;
+            height: 528px;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .header-yellow {
+            background-color: #EAB308;
+            height: 32px;
+            width: 100%;
+        }
+
+        .header-dark {
+            background-color: var(--color-D);
+            height: 24px;
+            width: 100%;
+        }
+
+        .main-content {
+            padding: 24px;
+            font-size: 14px;
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            position: relative;
+        }
+
+        .top-section {
+            position: relative;
+            display: flex;
+            align-items: flex-start;
+            justify-content: space-between;
+            padding-bottom: 4px;
+            margin-bottom: 8px;
+        }
+
+        .contact-info {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+            margin-top: -20px;
+        }
+
+        .contact-item {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .contact-item i {
+            width: 20px;
+            font-size: 16px;
+        }
+
+        .instagram { color: #E4405F; }
+        .tiktok { color: #000000; }
+        .whatsapp { color: #25D366; }
+
+        .logo-container {
+            position: absolute;
+            left: 50%;
+            top: -48px;
+            transform: translateX(-50%);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+
+        .logo {
+            height: 160px;
+            width: 100px;
+            background: #ccc;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #666;
+            font-weight: bold;
+        }
+
+        .customer-info {
+            display: grid;
+            grid-template-columns: 130px 1fr;
+            gap: 0;
+            font-size: 12px;
+            align-items: center;
+            margin-top: -20px;
+            position: relative;
+            z-index: 10;
+        }
+
+        .customer-info .label {
+            text-align: right;
+            font-weight: 600;
+            padding-right: 12px;
+            margin-top: 4px;
+        }
+
+        .customer-info .value {
+            margin-top: 4px;
+            text-align: left;
+            padding-left: 8px;
+            height: 28px;
+            border-radius: 4px;
+            background-color: #DBEAFE;
+            padding: 4px 8px;
+            font-size: 14px;
+            display: flex;
+            align-items: center;
+        }
+
+        .bank-logos {
+            display: flex;
+            margin-bottom: 4px;
+            gap: 179px;
+        }
+
+        .bank-group {
+            display: flex;
+            gap: 16px;
+        }
+
+        .bank-logo {
+            height: 20px;
+            width: 40px;
+            background: #ccc;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 10px;
+            font-weight: bold;
+            color: #666;
+        }
+
+        .items-table {
+            width: 100%;
+            border: 1px solid var(--color-D);
+            font-size: 14px;
+            table-layout: fixed;
+            border-bottom: 1px solid var(--color-D);
+            border-collapse: collapse;
+        }
+
+        .items-table th,
+        .items-table td {
+            border: 1px solid var(--color-D);
+            padding: 8px 4px;
+        }
+
+        .items-table th {
+            font-size: 18px;
+            border-bottom: 1px solid var(--color-D);
+            border-top: 1px solid var(--color-D);
+            text-align: center;
+        }
+
+        .items-table .col-qty { width: 40px; }
+        .items-table .col-item { width: 360px; }
+        .items-table .col-position { width: 70px; }
+        .items-table .col-weight { width: 40px; }
+        .items-table .col-purity { width: 40px; }
+        .items-table .col-price { width: 240px; }
+
+        .item-row {
+            text-align: center;
+        }
+
+        .item-detail {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 8px;
+            text-align: left;
+        }
+
+        .item-image {
+            width: 48px;
+            height: 48px;
+            object-fit: cover;
+        }
+
+        .item-placeholder {
+            width: 48px;
+            height: 48px;
+            background: #f0f0f0;
+            border-radius: 4px;
+        }
+
+        .bottom-section {
+            display: flex;
+            font-size: 14px;
+            margin-top: 8px;
+        }
+
+        .attention-section {
+            width: 40%;
+            padding: 8px;
+            text-align: left;
+        }
+
+        .attention-title {
+            font-weight: 600;
+        }
+
+        .attention-list {
+            margin-left: 16px;
+            font-size: 12px;
+            margin-top: 4px;
+        }
+
+        .attention-list li {
+            margin-bottom: 4px;
+        }
+
+        .attention-list .highlight {
+            color: #EF4444;
+        }
+
+        .sales-section {
+            width: 20%;
+            padding: 8px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .sales-name {
+            margin-top: 64px;
+            font-size: 14px;
+            border-radius: 4px;
+            background-color: var(--color-B);
+            width: 160px;
+            text-align: center;
+            padding: 4px;
+        }
+
+        .total-section {
+            margin-left: auto;
+            width: 25%;
+            padding: 8px;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+        }
+
+        .cost-item {
+            display: flex;
+            align-items: flex-start;
+            justify-content: space-between;
+            margin-bottom: 16px;
+        }
+
+        .cost-label {
+            display: flex;
+            flex-direction: column;
+        }
+
+        .cost-title {
+            font-weight: 600;
+        }
+
+        .cost-subtitle {
+            color: #EF4444;
+            font-size: 12px;
+        }
+
+        .cost-value {
+            display: flex;
+            align-items: center;
+            width: 160px;
+        }
+
+        .cost-input {
+            height: 28px;
+            padding: 0 8px;
+            font-size: 14px;
+            border-radius: 4px;
+            background-color: #DBEAFE;
+            text-align: left;
+            width: 100%;
+            border: none;
+        }
+
+        .total-item {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-top: -16px;
+        }
+
+        .total-title {
+            font-weight: 600;
+        }
+
+        .total-value {
+            padding: 4px 12px 4px 8px;
+            text-align: left;
+            font-size: 14px;
+            width: 100%;
+        }
+
+        .footer-text {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            text-align: left;
+            font-size: 12px;
+            background-color: var(--color-D);
+            color: white;
+            padding: 32px;
+            padding-top: 4px;
+            padding-bottom: 4px;
+        }
+
+        .transaction-code {
+            font-size: 14px;
+        }
+    </style>
+</head>
+<body>
+    <div class="header-yellow">
+        <div class="header-dark"></div>
+    </div>
+
+    <div class="main-content">
+        <div class="top-section">
+            <div class="contact-info">
+                <p class="contact-item">
+                    <i class="fab fa-instagram instagram"></i>
+                    tokomas_Jakartacitayam
+                </p>
+                <p class="contact-item">
+                    <i class="fab fa-tiktok tiktok"></i>
+                    tokomas_Jakartacitayam
+                </p>
+                <p class="contact-item">
+                    <i class="fab fa-whatsapp whatsapp"></i>
+                    08158851178
+                </p>
+                <p class="transaction-code">{{ $kode_transaksi ?? 'N/A' }}</p>
+            </div>
+
+            <div class="logo-container">
+                <div class="logo">LOGO</div>
+            </div>
+
+            <div class="customer-info">
+                <div class="label">Tanggal :</div>
+                <div class="value">
+                    @if(isset($created_at))
+                        @php
+                            $date = \Carbon\Carbon::parse($created_at);
+                            $days = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
+                            $dayName = $days[$date->dayOfWeek];
+                            $formattedDate = $dayName . '/' . $date->format('d-m-Y');
+                        @endphp
+                        {{ $formattedDate }}
+                    @else
+                        N/A
+                    @endif
+                </div>
+
+                <div class="label">Nama :</div>
+                <div class="value">{{ $nama_pembeli ?? 'N/A' }}</div>
+
+                <div class="label">Alamat :</div>
+                <div class="value">{{ $alamat ?? 'N/A' }}</div>
+
+                <div class="label">No.Hp :</div>
+                <div class="value">{{ $no_hp ?? 'N/A' }}</div>
+            </div>
+        </div>
+
+        <div class="bank-logos">
+            <div class="bank-group">
+                <div class="bank-logo">BCA</div>
+                <div class="bank-logo">BRI</div>
+                <div class="bank-logo">BNI</div>
+            </div>
+            <div class="bank-group">
+                <div class="bank-logo">MC</div>
+                <div class="bank-logo">VISA</div>
+                <div class="bank-logo">MANDIRI</div>
+            </div>
+        </div>
+
+        <table class="items-table">
+            <thead>
+                <tr>
+                    <th class="col-qty">Jml</th>
+                    <th class="col-item">Item</th>
+                    <th class="col-position">Posisi</th>
+                    <th class="col-weight">Berat</th>
+                    <th class="col-purity">Kadar</th>
+                    <th class="col-price">Harga</th>
+                </tr>
+            </thead>
+            <tbody>
+                @if(isset($item_transaksi) && count($item_transaksi) > 0)
+                    @foreach($item_transaksi as $item)
+                    <tr class="item-row">
+                        <td>
+                            @if(isset($item['harga_deal']) && $item['harga_deal'])
+                                1
+                            @endif
+                        </td>
+                        <td>
+                            <div class="item-detail">
+                                @if(isset($item['produk']['foto'][0]['url']))
+                                    <img src="{{ $item['produk']['foto'][0]['url'] }}" class="item-image" />
+                                @else
+                                    <div class="item-placeholder"></div>
+                                @endif
+                                {{ $item['produk']['nama'] ?? '' }}
+                            </div>
+                        </td>
+                        <td>
+                            @if(isset($item['produk']['nama']) && $item['produk']['nama'])
+                                {{ $item['nampan']['nama'] ?? 'Brankas' }}
+                            @endif
+                        </td>
+                        <td>
+                            @if(isset($item['produk']['berat']) && $item['produk']['berat'])
+                                {{ $item['produk']['berat'] }}g
+                            @endif
+                        </td>
+                        <td>
+                            @if(isset($item['produk']['kadar']) && $item['produk']['kadar'])
+                                {{ $item['produk']['kadar'] }}k
+                            @endif
+                        </td>
+                        <td>
+                            @if(isset($item['harga_deal']) && $item['harga_deal'])
+                                Rp{{ number_format($item['harga_deal'], 0, ',', '.') }}
+                            @endif
+                        </td>
+                    </tr>
+                    @endforeach
+                @endif
+                
+                {{-- Add empty rows to ensure minimum 2 rows --}}
+                @for($i = (isset($item_transaksi) ? count($item_transaksi) : 0); $i < 2; $i++)
+                <tr class="item-row">
+                    <td></td>
+                    <td>
+                        <div class="item-detail">
+                            <div class="item-placeholder"></div>
+                        </div>
+                    </td>
+                    <td></td>
+                    <td></td>
+                    <td></td>
+                    <td></td>
+                </tr>
+                @endfor
+            </tbody>
+        </table>
+
+        <!-- Bottom Section -->
+        <div class="bottom-section">
+            <!-- PERHATIAN -->
+            <div class="attention-section">
+                <p class="attention-title">PERHATIAN</p>
+                <ol class="attention-list">
+                    <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="highlight">Surat ini harap dibawa pada saat menjual kembali.</li>
+                </ol>
+            </div>
+
+            <!-- SALES -->
+            <div class="sales-section">
+                <p><strong>Hormat Kami</strong></p>
+                <div class="sales-name">{{ $sales['nama'] ?? 'N/A' }}</div>
+            </div>
+
+            <!-- ONGKOS & TOTAL -->
+            <div class="total-section">
+                <div>
+                    <!-- Ongkos bikin -->
+                    <div class="cost-item">
+                        <div class="cost-label">
+                            <p class="cost-title">Ongkos bikin</p>
+                            <p class="cost-subtitle">diluar harga jual</p>
+                        </div>
+                        <div class="cost-value">
+                            <p>Rp</p>
+                            <div class="cost-input">{{ number_format($ongkos_bikin ?? 0, 0, ',', '.') }}</div>
+                        </div>
+                    </div>
+
+                    <!-- Total -->
+                    <div class="total-item">
+                        <p class="total-title">Total Harga</p>
+                        <div class="cost-value">
+                            <p>Rp</p>
+                            <p class="total-value">
+                                {{ number_format($total_harga ?? 0, 0, ',', '.') }},-
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <p class="footer-text">
+        Terima kasih sudah berbelanja dengan kami
+    </p>
+</body>
+</html>
\ No newline at end of file
diff --git a/routes/web.php b/routes/web.php
index 1dcd6ea..3f09d4e 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -10,6 +10,7 @@ use App\Http\Controllers\SalesController;
 use App\Http\Controllers\UserController;
 use App\Http\Controllers\TransaksiController;
 use App\Http\Controllers\LaporanController;
+use App\Http\Controllers\StrukController;
 use Illuminate\Support\Facades\Route;
 
 
@@ -63,6 +64,8 @@ Route::prefix('api')->group(function () {
         Route::get('kategori', [KategoriController::class, 'index']);
         Route::get('kategori/{id}', [KategoriController::class, 'show']);
         Route::get('brankas', [ItemController::class, 'brankasItem']);
+
+        Route::get('/cetak-struk/{id}', [StrukController::class, 'cetak']);
     });
 
 });