Merge branch 'production' of https://git.abbauf.com/Magang-2025/Kasir into production

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);
+        }
+    }
+}

app/Http/Controllers/TransaksiController.php

@@ -33,7 +33,7 @@ class TransaksiController extends Controller
     // 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);
     }
 

resources/js/components/BrankasList.vue

@@ -107,10 +107,17 @@
         </div>
 
         <!-- Tombol -->
+        <!-- Tombol -->
 <div class="flex justify-end gap-2">
   <button @click="closePopup" class="px-4 py-2 rounded border border-gray-300 text-gray-700 hover:bg-gray-50 transition">
     Batal
   </button>
+
+<button @click="showDeleteConfirm = true"
+                class="px-4 py-2 rounded bg-red-500 text-white hover:bg-red-600 transition flex items-center">
+          <i class="fas fa-trash mr-2"></i>Hapus
+        </button>
+
   <button @click="saveMove" :disabled="!selectedTrayId || isMoving" 
           class="px-4 py-2 rounded text-D transition flex items-center"
           :class="(selectedTrayId && !isMoving) ? 'bg-C hover:bg-C/80' : 'bg-gray-400 cursor-not-allowed'">
@@ -118,8 +125,19 @@
     {{ isMoving ? 'Memindahkan...' : 'Pindahkan' }}
   </button>
 </div>
+
       </div>
     </div>
+    <!-- Modal Konfirmasi Hapus -->
+    <ConfirmDeleteModal 
+      :isOpen="showDeleteConfirm"
+      title="Konfirmasi Hapus Item"
+      message="Apakah kamu yakin ingin menghapus item ini?"
+      confirmText="Ya, Hapus"
+      cancelText="Batal"
+      @confirm="confirmDelete"
+      @cancel="cancelDelete"
+    />
 
     <!-- Confirm Modal untuk aksi berbahaya (jika diperlukan di masa depan) -->
     <div v-if="isConfirmModalVisible" class="fixed inset-0 bg-black/75 flex items-center justify-center p-4 z-50 backdrop-blur-sm">
@@ -151,6 +169,7 @@
 <script setup>
 import { ref, computed, onMounted } from "vue";
 import axios from "axios";
+import ConfirmDeleteModal from './ConfirmDeleteModal.vue';
 
 const props = defineProps({
   search: {
@@ -173,6 +192,8 @@ const selectedTrayId = ref("");
 const errorMove = ref("");
 const isMoving = ref(false);
 
+const showDeleteConfirm = ref(false);
+
 // State modal konfirmasi
 const isConfirmModalVisible = ref(false);
 const confirmModalTitle = ref("");
@@ -183,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 "";
@@ -221,6 +242,44 @@ const closePopup = () => {
   isMoving.value = false;
 };
 
+const confirmDelete = async () => {
+  if (!selectedItem.value) return;
+
+  try {
+    // Panggil API hapus item
+    await axios.delete(`/api/item/${selectedItem.value.id}`, {
+      headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
+    });
+
+    // Tampilkan alert sukses
+    alert.value = { success: `Item ${selectedItem.value.kode_item} berhasil dihapus.` };
+
+    // Refresh data
+    await refreshData();
+
+    // Tutup modal & popup
+    showDeleteConfirm.value = false;
+    closePopup();
+
+    // Auto hide alert
+    clearTimeout(timer.value);
+    timer.value = setTimeout(() => { alert.value = null; }, 3000);
+
+  } catch (err) {
+    console.error("Gagal menghapus item:", err.response?.data || err);
+    alert.value = { error: err.response?.data?.message || "Gagal menghapus item. Silakan coba lagi." };
+
+    // Auto hide alert error
+    clearTimeout(timer.value);
+    timer.value = setTimeout(() => { alert.value = null; }, 5000);
+  }
+};
+
+
+const cancelDelete = () => {
+  showDeleteConfirm.value = false;
+};
+
 const saveMove = async () => {
   if (!selectedTrayId.value || !selectedItem.value || isMoving.value) return;
   

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 {

resources/js/components/KasirTransaksiList.vue

@@ -17,7 +17,7 @@
           <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)"
+              @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>

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" },
     ]

resources/js/components/ProductCard.vue

@@ -1,4 +1,6 @@
 <template>
+  <div class="relative">
+    <!-- Card Produk -->
     <div
       class="relative z-0 border border-C rounded-md aspect-square flex items-center justify-center hover:shadow-md transition cursor-pointer overflow-hidden"
       @click="$emit('click', product.id)"
@@ -19,13 +21,39 @@
         {{ product.nama }}
       </div>
     </div>
+
+    <!-- Notifikasi Stok Menipis (di luar card) -->
+    <div
+      v-if="isStockLow"
+      class="absolute -top-2 -right-2 group z-20"
+    >
+      <!-- Bulatan Merah -->
+      <div class="w-5 h-5 bg-red-500 rounded-full flex items-center justify-center cursor-help border-2 border-white shadow-md">
+        <span class="text-white text-xs font-bold">!</span>
+      </div>
+
+      <!-- Tooltip -->
+      <div class="absolute top-6 -right-4 bg-red-600 text-white text-xs px-3 py-2 rounded shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap z-30">
+        Stok menipis: {{ product.items_count }} pcs
+        <!-- Arrow untuk tooltip -->
+        <div class="absolute -top-1 left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-2 border-r-2 border-b-2 border-transparent border-b-red-600"></div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
-defineProps({
+import { computed } from 'vue';
+
+const props = defineProps({
   product: {
     type: Object,
     required: true,
   },
 });
+
+// Computed untuk mengecek apakah stok menipis (kurang dari 5)
+const isStockLow = computed(() => {
+  return props.product.items_count < 5;
+});
 </script>

resources/js/components/StrukOverlay.vue

@@ -55,11 +55,11 @@
           <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-[425px] 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>
+              <th class="w-[175px] text-lg">Harga</th>
             </tr>
           </thead>
 
@@ -132,7 +132,7 @@
                 <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">
+                  <p class="px-3 pl-0 py-1 text-left text-sm w-full">
                     {{ grandTotal.toLocaleString() }},-
                   </p>
                 </div>
@@ -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
   })
@@ -337,8 +337,7 @@ const simpanTransaksi = async (dataTransaksi) => {
 
     // Delay untuk memberikan waktu user membaca notifikasi
     setTimeout(() => {
-      props.pesanan.value = [];
+      emit('close');
-      props.isOpen = false;
       window.location.reload();
     }, 2200);
 

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-[425px] 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-[175px] 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 pl-0 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-0 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>

resources/js/components/TrayList.vue

@@ -49,23 +49,13 @@
         </div>
 
         <!-- Isi Card (Max tinggi 3 item + scroll kalau lebih) -->
-        <div
+        <div v-if="tray.items && tray.items.length" class="space-y-2 flex-1 overflow-y-auto max-h-[168px] pr-1">
-  v-if="tray.items && tray.items.length"
+          <div v-for="item in tray.items" :key="item.id"
-  class="space-y-2 flex-1 overflow-y-auto max-h-[168px] pr-1"
->
-  <div
-    v-for="item in tray.items"
-    :key="item.id"
             class="flex justify-between items-center border border-C rounded-lg p-2 cursor-pointer hover:bg-gray-50"
-    @click="openMovePopup(item)"
+            @click="openMovePopup(item)">
-  >
             <div class="flex items-center gap-3">
-      <img
+              <img v-if="item.produk?.foto && item.produk?.foto.length > 0" :src="item.produk?.foto[0].url"
-        v-if="item.produk?.foto && item.produk?.foto.length > 0"
+                alt="foto produk" class="size-12 object-cover rounded" />
-        :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 font-medium">{{ item.kode_item }}</p>
@@ -107,7 +97,7 @@
         {{ selectedItem.kode_item }}
       </div>
       <div class="text-center text-gray-700 font-medium mb-3">
-        {{ selectedItem.produk?.nama }}
+        {{ selectedItem.produk.nama }}
       </div>
 
       <div class="flex justify-center mb-4">
@@ -128,9 +118,14 @@
       </div>
 
       <div class="flex justify-end gap-2">
+
         <button @click="closePopup" class="px-4 py-2 rounded bg-gray-400 hover:bg-gray-500 text-white transition">
           {{ isAdmin ? 'Batal' : 'Tutup' }}
         </button>
+        <button @click="showDeleteConfirm = true"
+                class="px-4 py-2 rounded bg-red-500 text-white hover:bg-red-600 transition flex items-center">
+          <i class="fas fa-trash mr-2"></i>Hapus
+        </button>
         <button v-if="isAdmin" @click="saveMove" :disabled="!selectedTrayId" class="px-4 py-2 rounded transition"
           :class="selectedTrayId ? 'bg-C hover:bg-C/80 text-D' : 'bg-gray-400 cursor-not-allowed'">
           Simpan
@@ -138,12 +133,24 @@
       </div>
     </div>
   </div>
+
+      <!-- Modal Konfirmasi Hapus -->
+    <ConfirmDeleteModal 
+      :isOpen="showDeleteConfirm"
+      title="Konfirmasi Hapus Item"
+      message="Apakah kamu yakin ingin menghapus item ini?"
+      confirmText="Ya, Hapus"
+      cancelText="Batal"
+      @confirm="confirmDelete"
+      @cancel="cancelDelete"
+    />
 </template>
 
 <script setup>
 import { ref, onMounted, computed } from "vue";
 import axios from "axios";
 import InputSelect from "./InputSelect.vue";
+import ConfirmDeleteModal from './ConfirmDeleteModal.vue';
 
 const isAdmin = localStorage.getItem("role") === "owner";
 
@@ -164,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 "";
@@ -212,6 +219,47 @@ const printQR = () => {
   }
 };
 
+const showDeleteConfirm = ref(false);
+
+const confirmDelete = async () => {
+  if (!selectedItem.value) return;
+
+  try {
+    // Panggil API hapus item
+    await axios.delete(`/api/item/${selectedItem.value.id}`, {
+      headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
+    });
+
+    // Tampilkan alert sukses
+    alert.value = { success: `Item ${selectedItem.value.kode_item} berhasil dihapus.` };
+
+    // Refresh data
+    await refreshData();
+
+    // Tutup modal & popup
+    showDeleteConfirm.value = false;
+    closePopup();
+
+    // Auto hide alert
+    clearTimeout(timer.value);
+    timer.value = setTimeout(() => { alert.value = null; }, 3000);
+
+  } catch (err) {
+    console.error("Gagal menghapus item:", err.response?.data || err);
+    alert.value = { error: err.response?.data?.message || "Gagal menghapus item. Silakan coba lagi." };
+
+    // Auto hide alert error
+    clearTimeout(timer.value);
+    timer.value = setTimeout(() => { alert.value = null; }, 5000);
+  }
+};
+
+
+
+const cancelDelete = () => {
+  showDeleteConfirm.value = false;
+};
+
 // --- Fungsi Pop-up ---
 const openMovePopup = (item) => {
   selectedItem.value = item;

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,7 +92,6 @@ const fetchTransaksi = async () => {
         });
 
         transaksi.value = res.data;
-
         console.log("Fetched transaksi:", transaksi.value);
 
     } catch (err) {
@@ -104,22 +100,14 @@ const fetchTransaksi = async () => {
         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>

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>

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']);
     });
 
 });