diff --git a/app/Http/Controllers/KategoriController.php b/app/Http/Controllers/KategoriController.php
index 1dd4065..c263267 100644
--- a/app/Http/Controllers/KategoriController.php
+++ b/app/Http/Controllers/KategoriController.php
@@ -23,7 +23,7 @@ class KategoriController extends Controller
     public function store(Request $request)
     {
         $validated = $request->validate([
-            'nama' => 'required|string|max:100',
+            'nama' => 'required|string|max:50',
         ],
         [
             'nama' => 'Nama kategori harus diisi.'
@@ -31,7 +31,7 @@ class KategoriController extends Controller
 
         Kategori::create($validated);
 
-        
+
         return response()->json([
             'message' => 'Kategori berhasil dibuat'
         ],201);
@@ -53,7 +53,7 @@ class KategoriController extends Controller
     public function update(Request $request, int $id)
     {
         $validated = $request->validate([
-            'nama' => 'required|string|max:100',
+            'nama' => 'required|string|max:50',
         ],
         [
             'nama' => 'Nama Kategori harus diisi.'
@@ -74,9 +74,9 @@ class KategoriController extends Controller
     public function destroy(int $id)
     {
         Kategori::findOrFail($id)->delete();
-        
+
         return response()->json([
             'message' => 'Kategori berhasil dihapus'
-        ], 204);
+        ], 200);
     }
 }
diff --git a/app/Http/Controllers/LaporanController.php b/app/Http/Controllers/LaporanController.php
index 98939cd..f4de54d 100644
--- a/app/Http/Controllers/LaporanController.php
+++ b/app/Http/Controllers/LaporanController.php
@@ -89,12 +89,12 @@ class LaporanController extends Controller
     {
         try {
             return $this->laporanService->exportPerNampan($request->validate([
-                'tanggal' => 'nullable|string',
-                'sales_id' => 'nullable|integer|exists:sales,id',
-                'produk_id' => 'nullable|integer|exists:produk,id',
-                'nama_pembeli' => 'nullable|string|max:255',
+                'tanggal' => 'required|string',
                 'format' => 'required|string|in:pdf,xlsx,csv',
-                'page' => 'nullable|integer|min:1',
+                'page' => 'required|integer|min:1',
+                'sales_id' => 'nullable|integer|exists:sales,id',
+                'produk_id' => 'nullable|integer|exists:produks,id',
+                'nama_pembeli' => 'nullable|string|max:255',
             ]));
 
         } catch (\Exception $e) {
@@ -107,12 +107,12 @@ class LaporanController extends Controller
     {
         try {
             return $this->laporanService->exportPerProduk($request->validate([
-                'tanggal' => 'nullable|string',
-                'sales_id' => 'nullable|integer|exists:sales,id',
-                'nampan_id' => 'nullable|integer|exists:nampan,id',
-                'nama_pembeli' => 'nullable|string|max:255',
+                'tanggal' => 'required|string',
                 'format' => 'required|string|in:pdf,xlsx,csv',
-                'page' => 'nullable|integer|min:1',
+                'page' => 'required|integer|min:1',
+                'sales_id' => 'nullable|integer|exists:sales,id',
+                'nampan_id' => 'nullable|integer|exists:nampans,id',
+                'nama_pembeli' => 'nullable|string|max:255',
             ]));
 
         } catch (\Exception $e) {
diff --git a/app/Http/Controllers/NampanController.php b/app/Http/Controllers/NampanController.php
index f1e251f..91f7ffd 100644
--- a/app/Http/Controllers/NampanController.php
+++ b/app/Http/Controllers/NampanController.php
@@ -14,7 +14,7 @@ class NampanController extends Controller
     public function index()
     {
         return response()->json(
-            Nampan::with('items.produk.foto')->withCount('items')->get()
+            Nampan::with('items.produk.foto', 'items.produk.kategori')->withCount('items')->get()
         );
     }
 
@@ -24,15 +24,17 @@ class NampanController extends Controller
     public function store(Request $request)
     {
         $validated = $request->validate([
-            'nama' => 'required|string|max:100',
+            'nama' => 'required|string|max:10|unique:nampans,nama',
         ],
         [
-            'nama' => 'Nama nampan harus diisi.'
+            'nama.required' => 'Nama nampan harus diisi.',
+            'nama.unique' => 'Nampan dengan nama yang sama sudah ada.',
+            'nama.max' => 'Nama nampan maksimal 10 karakter.'
         ]);
 
         Nampan::create($validated);
 
-        
+
         return response()->json([
             'message' => 'Nampan berhasil dibuat'
         ],201);
@@ -54,7 +56,7 @@ class NampanController extends Controller
     public function update(Request $request, int $id)
     {
         $validated = $request->validate([
-            'nama' => 'required|string|max:100',
+            'nama' => 'required|string|max:10|unique:nampans,nama,'.$id,
         ],
         [
             'nama' => 'Nama nampan harus diisi.'
@@ -75,13 +77,13 @@ class NampanController extends Controller
     public function destroy(int $id)
     {
         $nampan = Nampan::findOrFail($id);
-        
+
         $nampan->items()->each(function ($item) {
             $item->update(['id_nampan' => null]);
         });
 
         $nampan->delete();
-        
+
         return response()->json([
             'message' => 'Nampan berhasil dihapus'
         ], 204);
diff --git a/app/Http/Controllers/UserController.php b/app/Http/Controllers/UserController.php
index ed1d8b5..3f1fae1 100644
--- a/app/Http/Controllers/UserController.php
+++ b/app/Http/Controllers/UserController.php
@@ -22,6 +22,13 @@ class UserController extends Controller
             'nama'    => 'required|string|unique:users',
             'password' => 'required|min:6',
             'role'     => 'required|in:owner,kasir',
+        ], [
+            'nama.require'    => 'Nama wajib diisi',
+            'nama.unique'     => 'Nama sudah digunakan',
+            'password.require' => 'Password wajib diisi',
+            'password.min'    => 'Password minimal 6 karakter',
+            'role.require'    => 'Role wajib diisi',
+            'role.in'        => 'Role harus owner atau kasir',
         ]);
 
         User::create([
@@ -44,6 +51,12 @@ class UserController extends Controller
             'nama'    => 'required|string|unique:users,nama,' . $id,
             'password' => 'nullable|min:6',
             'role'     => 'required|in:owner,kasir',
+        ], [
+            'nama.require'    => 'Nama wajib diisi',
+            'nama.unique'     => 'Nama sudah digunakan',
+            'password.min'    => 'Password minimal 6 karakter',
+            'role.require'    => 'Role wajib diisi',
+            'role.in'        => 'Role harus owner atau kasir',
         ]);
 
         $data = [
@@ -52,7 +65,7 @@ class UserController extends Controller
         ];
 
         if ($request->filled('password')) {
-            $data['password'] = $request->password; 
+            $data['password'] = $request->password;
         }
 
         $user->update($data);
diff --git a/resources/js/components/BrankasList.vue b/resources/js/components/BrankasList.vue
index c90ca9a..fa165f0 100644
--- a/resources/js/components/BrankasList.vue
+++ b/resources/js/components/BrankasList.vue
@@ -1,45 +1,83 @@
+// brankas list
 <template>
-  <div>
+  <div v-if="loading" class="flex justify-center items-center h-screen">
+    <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-C"></div>
+    <span class="ml-2 text-gray-600">Memuat data...</span>
+  </div>
+  
+  <div v-else>
+    <!-- Alert Section -->
+    <div class="mb-4" v-if="alert">
+      <div v-if="alert.error" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4" role="alert">
+        <strong class="font-bold">Error!</strong>
+        <span class="block sm:inline">{{ alert.error }}</span>
+      </div>
+      <div v-if="alert.success" class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative mb-4" role="alert">
+        <strong class="font-bold">Success!</strong>
+        <span class="block sm:inline">{{ alert.success }}</span>
+      </div>
+    </div>
+
+    <!-- Statistik Brankas -->
+    <div class="bg-A border border-C rounded-xl p-4 mb-6">
+      <div class="flex flex-row sm:items-center justify-between gap-4">
+        <div class="flex items-center gap-3">
+          <div class="p-2 bg-A rounded-lg">
+            <i class="fas fa-archive text-D"></i>
+          </div>
+          <div class="flex flex-col sm:flex-row sm:gap-6 text-sm text-gray-600">
+            <span>Total Item di brankas: {{ filteredItems.length }}</span>
+          </div>
+        </div>
+        <div class="text-right">
+          <div class="text-2xl font-bold text-D">{{ totalWeight }}g</div>
+          <div class="text-sm text-gray-500">Total Berat</div>
+        </div>
+      </div>
+    </div>
+
     <!-- Daftar Item -->
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
-      <div
-        v-for="item in filteredItems"
-        :key="item.id"
-        class="flex justify-between items-center border rounded-lg p-3 shadow-sm hover:shadow-md transition cursor-pointer"
-        @click="openMovePopup(item)"
-      >
+    <div v-if="filteredItems.length === 0" class="text-center text-gray-500 py-[120px]">
+      {{ props.search ? 'Item tidak ditemukan.' : 'Brankas kosong.' }}
+    </div>
+
+    <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+      <div v-for="item in filteredItems" :key="item.id"
+        class="flex justify-between items-center border border-C rounded-lg p-3 shadow-sm hover:shadow-md transition cursor-pointer"
+        @click="openMovePopup(item)">
         <!-- Gambar & Info Produk -->
         <div class="flex items-center gap-3">
-          <img
-            v-if="item.produk.foto?.length"
-            :src="item.produk.foto[0].url"
-            class="size-12 object-contain"
-          />
+          <img v-if="item.produk.foto?.length" :src="item.produk.foto[0].url" 
+               class="size-12 object-cover rounded" 
+               @error="handleImageError" />
+          <div class="size-12 bg-gray-200 rounded flex items-center justify-center" v-else>
+            <i class="fas fa-image text-gray-400"></i>
+          </div>
           <div>
-            <p class="font-semibold">{{ item.produk.nama }}</p>
-            <p class="text-sm text-gray-500">ID: {{ item.id }}</p>
+            <p class="font-semibold text-D">{{ item.produk.nama }}</p>
+            <p class="text-sm text-gray-500 font-semibold">{{ item.kode_item }}</p>
           </div>
         </div>
 
         <!-- Berat -->
-        <span class="font-medium">{{ item.produk.berat }}g</span>
+        <span class="font-medium text-D">{{ item.produk.berat }}g</span>
       </div>
     </div>
 
     <!-- Modal Pindah Nampan -->
-    <div
-      v-if="isPopupVisible"
-      class="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50"
-    >
-      <div class="bg-white rounded-xl shadow-lg max-w-sm w-full p-6 relative">
+    <div v-if="isPopupVisible" class="fixed inset-0 bg-black/75 flex items-center justify-center p-4 z-50 backdrop-blur-sm">
+      <div class="bg-white rounded-xl shadow-lg max-w-sm w-full p-6 relative transform transition-all duration-300 scale-95 opacity-0 animate-fadeIn">
         <!-- QR Code -->
         <div class="flex justify-center mb-4">
-          <div class="p-2 border rounded-lg">
+          <div class="p-2 border border-C rounded-lg">
             <img :src="qrCodeUrl" alt="QR Code" class="size-36" />
           </div>
         </div>
 
         <!-- Info Produk -->
+        <div class="text-center text-D font-bold text-lg mb-1">
+          {{ selectedItem?.kode_item }}
+        </div>
         <div class="text-center text-gray-700 font-medium mb-1">
           {{ selectedItem?.produk?.nama }}
         </div>
@@ -47,38 +85,63 @@
           {{ selectedItem?.produk?.kategori }}
         </div>
 
+        <!-- Tombol Cetak -->
+        <div class="flex justify-center mb-4">
+          <button @click="printQR" class="bg-D text-A px-4 py-2 rounded hover:bg-D/80 transition">
+            <i class="fas fa-print mr-2"></i>Cetak
+          </button>
+        </div>
+
         <!-- Dropdown pilih nampan -->
         <div class="mb-4">
-          <label for="tray-select" class="block text-sm font-medium mb-1">
-            Nama Nampan
+          <label for="tray-select" class="block text-sm font-medium text-D mb-2">
+            Pindah ke Nampan
           </label>
-          <select
-            id="tray-select"
-            v-model="selectedTrayId"
-            class="w-full rounded-md border shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
-          >
-            <option value="" disabled>Brankas</option>
+          <select id="tray-select" v-model="selectedTrayId"
+            class="w-full px-3 py-2 border border-C rounded-md shadow-sm focus:border-D focus:ring focus:ring-D/20 focus:ring-opacity-50">
+            <option value="" disabled>Pilih Nampan</option>
             <option v-for="tray in trays" :key="tray.id" :value="tray.id">
               {{ tray.nama }}
             </option>
           </select>
+          <p v-if="errorMove" class="text-red-500 text-sm mt-1">{{ errorMove }}</p>
         </div>
 
         <!-- Tombol -->
         <div class="flex justify-end gap-2">
-          <button
-            @click="closePopup"
-            class="px-4 py-2 rounded border text-gray-700 hover:bg-gray-100 transition"
-          >
+          <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="saveMove"
-            :disabled="!selectedTrayId"
-            class="px-4 py-2 rounded text-white transition"
-            :class="selectedTrayId ? 'bg-orange-500 hover:bg-orange-600' : 'bg-gray-400 cursor-not-allowed'"
-          >
-            Simpan
+          <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'">
+            <div v-if="isMoving" class="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
+            {{ isMoving ? 'Memindahkan...' : 'Pindahkan' }}
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 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">
+      <div class="bg-white rounded-xl shadow-lg max-w-md w-full p-6 transform transition-all duration-300 scale-95 opacity-0 animate-fadeIn">
+        <div class="flex items-center mb-4">
+          <div class="flex-shrink-0 w-10 h-10 mx-auto bg-red-100 rounded-full flex items-center justify-center">
+            <i class="fas fa-exclamation-triangle text-red-600"></i>
+          </div>
+          <div class="ml-3">
+            <h3 class="text-lg font-medium text-D">{{ confirmModalTitle }}</h3>
+          </div>
+        </div>
+        <div class="mb-4">
+          <p class="text-sm text-gray-500" v-html="confirmModalMessage"></p>
+        </div>
+        <div class="flex justify-end gap-2">
+          <button @click="closeConfirmModal" class="px-4 py-2 rounded border border-gray-300 text-gray-700 hover:bg-gray-50 transition">
+            {{ cancelText }}
+          </button>
+          <button @click="handleConfirmAction" class="px-4 py-2 rounded bg-red-500 hover:bg-red-600 text-white transition">
+            {{ confirmText }}
           </button>
         </div>
       </div>
@@ -86,8 +149,6 @@
   </div>
 </template>
 
-
-
 <script setup>
 import { ref, computed, onMounted } from "vue";
 import axios from "axios";
@@ -103,44 +164,68 @@ const items = ref([]);
 const trays = ref([]);
 const loading = ref(true);
 const error = ref(null);
+const alert = ref(null);
+const timer = ref(null);
 
-// --- state modal
+// State modal pindah
 const isPopupVisible = ref(false);
 const selectedItem = ref(null);
 const selectedTrayId = ref("");
+const errorMove = ref("");
+const isMoving = ref(false);
+
+// State modal konfirmasi
+const isConfirmModalVisible = ref(false);
+const confirmModalTitle = ref("");
+const confirmModalMessage = ref("");
+const confirmText = ref("Ya, Konfirmasi");
+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, "")}`;
-    return `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(
-      data
-    )}`;
+    return `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(data)}`;
   }
   return "";
 });
 
-// --- fungsi modal
+// Computed untuk statistik
+const totalWeight = computed(() => {
+  const total = filteredItems.value.reduce((sum, item) => sum + (item.produk.berat || 0), 0);
+  return total.toFixed(2);
+});
+
+const filteredItems = computed(() => {
+  if (!props.search) return items.value;
+  return items.value.filter((item) =>
+    item.produk?.nama?.toLowerCase().includes(props.search.toLowerCase()) ||
+    item.kode_item?.toLowerCase().includes(props.search.toLowerCase())
+  );
+});
+
+// Fungsi modal pindah
 const openMovePopup = (item) => {
   selectedItem.value = item;
-  if (item.id_nampan) {
-    // ✅ sudah ada di nampan tertentu
-    selectedTrayId.value = item.id_nampan;
-  } else {
-    // 🗄️ kalau belum ada, default ke "Brankas"
-    const brankas = trays.value.find(t => t.nama.toLowerCase() === "brankas");
-    selectedTrayId.value = brankas ? brankas.id : "";
-  }
+  selectedTrayId.value = "";
+  errorMove.value = "";
   isPopupVisible.value = true;
 };
+
 const closePopup = () => {
   isPopupVisible.value = false;
   selectedItem.value = null;
   selectedTrayId.value = "";
+  errorMove.value = "";
+  isMoving.value = false;
 };
 
 const saveMove = async () => {
-  if (!selectedTrayId.value || !selectedItem.value) return;
+  if (!selectedTrayId.value || !selectedItem.value || isMoving.value) return;
+  
+  errorMove.value = "";
+  isMoving.value = true;
+  
   try {
     await axios.put(
       `/api/item/${selectedItem.value.id}`,
@@ -153,15 +238,87 @@ const saveMove = async () => {
       }
     );
 
+    // Tampilkan alert sukses
+    const trayName = trays.value.find(t => t.id === selectedTrayId.value)?.nama;
+    alert.value = { success: `Item berhasil dipindahkan ke nampan "${trayName}"` };
+    
     await refreshData();
     closePopup();
+    
+    // Auto hide alert
+    clearTimeout(timer.value);
+    timer.value = setTimeout(() => { alert.value = null; }, 3000);
+    
   } catch (err) {
     console.error("Gagal memindahkan item:", err.response?.data || err);
-    alert("Gagal memindahkan item. Silakan coba lagi.");
+    errorMove.value = err.response?.data?.message || "Gagal memindahkan item. Silakan coba lagi.";
+  } finally {
+    isMoving.value = false;
   }
 };
 
-// --- ambil data
+// Fungsi modal konfirmasi
+const closeConfirmModal = () => {
+  isConfirmModalVisible.value = false;
+  confirmModalTitle.value = "";
+  confirmModalMessage.value = "";
+  confirmText.value = "Ya, Konfirmasi";
+  cancelText.value = "Batal";
+};
+
+const handleConfirmAction = async () => {
+  // Implementasi aksi konfirmasi jika diperlukan
+  closeConfirmModal();
+};
+
+// Fungsi utilitas
+const printQR = () => {
+  if (qrCodeUrl.value) {
+    const printWindow = window.open('', '_blank');
+    printWindow.document.write(`
+      <html>
+        <head>
+          <title>Print QR Code - ${selectedItem.value.kode_item}</title>
+          <style>
+            body { 
+              font-family: Arial, sans-serif; 
+              text-align: center; 
+              padding: 20px; 
+            }
+            .qr-container { 
+              border: 2px solid #ccc; 
+              padding: 20px; 
+              display: inline-block; 
+              margin: 20px;
+            }
+            .item-info {
+              margin-top: 10px;
+              font-size: 14px;
+            }
+          </style>
+        </head>
+        <body>
+          <div class="qr-container">
+            <img src="${qrCodeUrl.value}" alt="QR Code" style="width: 200px; height: 200px;" />
+            <div class="item-info">
+              <div style="font-weight: bold; margin-bottom: 5px;">${selectedItem.value.kode_item}</div>
+              <div>${selectedItem.value.produk.nama}</div>
+              <div style="color: #666; margin-top: 5px;">${selectedItem.value.produk.berat}g</div>
+            </div>
+          </div>
+        </body>
+      </html>
+    `);
+    printWindow.document.close();
+    printWindow.print();
+  }
+};
+
+const handleImageError = (event) => {
+  event.target.style.display = 'none';
+};
+
+// Ambil data
 const refreshData = async () => {
   try {
     const [itemRes, trayRes] = await Promise.all([
@@ -172,21 +329,30 @@ const refreshData = async () => {
         headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
       }),
     ]);
-    items.value = itemRes.data;
+    
+    // Filter hanya item yang ada di brankas (id_nampan = null atau tidak ada)
+    items.value = itemRes.data.filter(item => !item.id_nampan);
     trays.value = trayRes.data;
+    
   } catch (err) {
-    error.value = err.message || "Gagal mengambil data";
+    console.error("Error fetching data:", err);
+    alert.value = { error: err.response?.data?.message || "Gagal mengambil data" };
+    clearTimeout(timer.value);
+    timer.value = setTimeout(() => { alert.value = null; }, 5000);
   } finally {
     loading.value = false;
   }
 };
 
 onMounted(refreshData);
-
-const filteredItems = computed(() => {
-  if (!props.search) return items.value;
-  return items.value.filter((item) =>
-    item.produk?.nama?.toLowerCase().includes(props.search.toLowerCase())
-  );
-});
 </script>
+
+<style scoped>
+@keyframes fadeIn {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+.animate-fadeIn {
+  animation: fadeIn 0.25s ease-out forwards;
+}
+</style>
diff --git a/resources/js/components/ConfirmDeleteModal.vue b/resources/js/components/ConfirmDeleteModal.vue
index 1933467..de52331 100644
--- a/resources/js/components/ConfirmDeleteModal.vue
+++ b/resources/js/components/ConfirmDeleteModal.vue
@@ -1,32 +1,20 @@
 <template>
-  <div
-    v-if="isOpen"
-    class="fixed inset-0 bg-black/50 flex items-center justify-center z-[9999]"
-  >
-    <div
-      class="bg-white rounded-lg shadow-lg p-6 w-[350px] text-center relative"
-    >
-      <!-- Judul -->
-      <p class="text-lg font-semibold mb-2">{{ props.title }}?</p>
+  <div v-if="isOpen" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
+    <div class="bg-white rounded-2xl shadow-xl w-full max-w-md p-6 transform transition-all">
+      <h2 class="text-xl font-bold text-gray-800 mb-3 text-center">
+        {{ title }}
+      </h2>
 
-      <!-- Deskripsi tambahan -->
-      <p class="text-sm text-gray-600 mb-4">
-        {{ props.message }}
-      </p>
+      <p class="text-gray-600 text-sm mb-6 text-center leading-relaxed" v-html="message"></p>
 
-      <!-- Tombol aksi -->
       <div class="flex justify-center gap-3">
-        <button
-          @click="$emit('cancel')"
-          class="bg-gray-300 px-4 py-2 rounded hover:bg-gray-400"
-        >
-          Batal
+        <button @click="$emit('cancel')"
+          class="px-5 py-2 rounded-lg font-semibold border border-gray-300 text-gray-700 hover:bg-gray-100 transition">
+          {{ cancelText }}
         </button>
-        <button
-          @click="$emit('confirm')"
-          class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600"
-        >
-          Hapus
+        <button @click="$emit('confirm')"
+          class="px-5 py-2 rounded-lg font-semibold bg-red-500 text-white hover:bg-red-600 transition">
+          {{ confirmText }}
         </button>
       </div>
     </div>
@@ -35,8 +23,38 @@
 
 <script setup>
 const props = defineProps({
-  isOpen: Boolean,
-  title:String,
-  message:String
+  isOpen: {
+    type: Boolean,
+    required: true,
+  },
+  title: {
+    type: String,
+    required: true,
+  },
+  message: {
+    type: String,
+    required: true,
+  },
+  confirmText: {
+    type: String,
+    default: 'Ya, Konfirmasi',
+  },
+  cancelText: {
+    type: String,
+    default: 'Batal',
+  },
 });
+
+// Mendefinisikan events yang dapat di-emit oleh komponen
+defineEmits(['confirm', 'cancel']);
 </script>
+
+<style scoped>
+@keyframes fadeIn {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+.animate-fadeIn {
+  animation: fadeIn 0.25s ease-out forwards;
+}
+</style>
diff --git a/resources/js/components/CreateAkun.vue b/resources/js/components/CreateAkun.vue
index 3876180..0cd144b 100644
--- a/resources/js/components/CreateAkun.vue
+++ b/resources/js/components/CreateAkun.vue
@@ -7,33 +7,45 @@
 
             <form @submit.prevent="createAkun" class="space-y-3">
                 <!-- Nama -->
-                <label for="nama">Nama</label>
-                <InputField
-                    v-model="form.nama"
-                    id="nama"
-                    type="text"
-                    :required="true"
-                />
-
                 <div>
-                    <label for="password">Password</label>
+                    <label for="nama" class="block text-sm font-medium">Nama</label>
+                    <InputField
+                        v-model="form.nama"
+                        id="nama"
+                        type="text"
+                        :required="true"
+                        @input="clearError('nama')"
+                    />
+                    <p v-if="errors.nama" class="text-red-500 text-sm">{{ errors.nama }}</p>
+                </div>
+
+                <!-- Password -->
+                <div>
+                    <label for="password" class="block text-sm font-medium">Password</label>
                     <InputField
                         v-model="form.password"
                         id="password"
                         type="password"
                         :required="true"
+                        @input="clearError('password')"
                     />
+                    <p v-if="errors.password" class="text-red-500 text-sm">{{ errors.password }}</p>
                 </div>
 
-                <label for="peran">Peran</label>
-                <InputSelect
-                    v-model="form.role"
-                    :options="[
-                        { value: 'owner', label: 'Owner' },
-                        { value: 'kasir', label: 'Kasir' },
-                    ]"
-                    placeholder="-- Pilih Peran --"
-                />
+                <!-- Role -->
+                <div>
+                    <label for="peran" class="block text-sm font-medium">Peran</label>
+                    <InputSelect
+                        v-model="form.role"
+                        :options="[
+                            { value: 'owner', label: 'Owner' },
+                            { value: 'kasir', label: 'Kasir' },
+                        ]"
+                        placeholder="-- Pilih Peran --"
+                        @change="clearError('role')"
+                    />
+                    <p v-if="errors.role" class="text-red-500 text-sm">{{ errors.role }}</p>
+                </div>
 
                 <!-- Tombol -->
                 <div class="flex justify-end gap-2 mt-4">
@@ -53,7 +65,7 @@
                 </div>
             </form>
 
-            <!-- Error -->
+            <!-- Error global -->
             <p v-if="errorMessage" class="text-red-500 text-sm mt-3">
                 {{ errorMessage }}
             </p>
@@ -72,25 +84,65 @@ export default {
     data() {
         return {
             form: { nama: "", password: "", role: "" },
+            errors: { nama: "", password: "", role: "" },
             errorMessage: "",
         };
     },
     methods: {
+        clearError(field) {
+            this.errors[field] = "";
+            this.errorMessage = "";
+        },
+        validateForm() {
+            let valid = true;
+            this.errors = { nama: "", password: "", role: "" };
+
+            if (!this.form.nama) {
+                this.errors.nama = "Nama wajib diisi";
+                valid = false;
+            }
+            if (!this.form.password) {
+                this.errors.password = "Password wajib diisi";
+                valid = false;
+            } else if (this.form.password.length < 6) {
+                this.errors.password = "Password minimal 6 karakter";
+                valid = false;
+            }
+            if (!this.form.role) {
+                this.errors.role = "Role wajib dipilih";
+                valid = false;
+            } else if (!["owner", "kasir"].includes(this.form.role)) {
+                this.errors.role = "Role harus owner atau kasir";
+                valid = false;
+            }
+
+            return valid;
+        },
         async createAkun() {
+            if (!this.validateForm()) return;
+
             try {
-                await axios.post("api/user", this.form, {
+                await axios.post("/api/user", this.form, {
                     headers: {
-                        Authorization: `Bearer ${localStorage.getItem(
-                            "token"
-                        )}`,
+                        Authorization: `Bearer ${localStorage.getItem("token")}`,
                     },
                 });
+
+                // reset form
                 this.form = { nama: "", password: "", role: "" };
                 this.$emit("refresh");
                 this.$emit("close");
             } catch (err) {
-                this.errorMessage =
-                    err.response?.data?.message || "Gagal menambah akun.";
+                if (err.response?.status === 422 && err.response.data.errors) {
+                    // tampilkan error validasi backend
+                    const backendErrors = err.response.data.errors;
+                    Object.keys(backendErrors).forEach((key) => {
+                        this.errors[key] = backendErrors[key][0];
+                    });
+                } else {
+                    this.errorMessage =
+                        err.response?.data?.message || "Gagal menambah akun.";
+                }
                 console.error("Gagal tambah akun:", err);
             }
         },
diff --git a/resources/js/components/DetailPerNampan.vue b/resources/js/components/DetailPerNampan.vue
index f9d872b..2c2000d 100644
--- a/resources/js/components/DetailPerNampan.vue
+++ b/resources/js/components/DetailPerNampan.vue
@@ -175,9 +175,8 @@ const data = ref(null);
 const loading = ref(false);
 const loadingExport = ref(false);
 
-// Sorting state
 const sortBy = ref(null);
-const sortOrder = ref('asc'); // 'asc' or 'desc'
+const sortOrder = ref('asc');
 
 const pagination = ref({
   current_page: 1,
@@ -188,14 +187,14 @@ const pagination = ref({
 const pendapatanWidth = ref(0);
 const pendapatanElements = ref([]);
 
-const salesDipilih = ref(null);
+const salesDipilih = ref(0);
 const opsiSales = ref([
-  { label: 'Semua Sales', value: null, selected: true },
+  { label: 'Semua Sales', value: 0 },
 ]);
 
-const produkDipilih = ref(null);
+const produkDipilih = ref(0);
 const opsiProduk = ref([
-  { label: 'Semua Produk', value: null, selected: true },
+  { label: 'Semua Produk', value: 0 },
 ]);
 
 const namaPembeli = ref(null);
@@ -278,10 +277,8 @@ watch(nampan, async (newValue) => {
 // --- Methods ---
 const handleSort = (column) => {
   if (sortBy.value === column) {
-    // If same column, toggle sort order
     sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc';
   } else {
-    // If different column, set new column and default to ascending
     sortBy.value = column;
     sortOrder.value = 'asc';
   }
@@ -308,7 +305,7 @@ const fetchSales = async () => {
     });
     const salesData = response.data;
     opsiSales.value = [
-      { label: 'Semua Sales', value: null },
+      { label: 'Semua Sales', value: 0 },
       ...salesData.map(sales => ({
         label: sales.nama,
         value: sales.id,
@@ -328,7 +325,7 @@ const fetchProduk = async () => {
     });
     const produkData = response.data;
     opsiProduk.value = [
-      { label: 'Semua Produk', value: null },
+      { label: 'Semua Produk', value: 0 },
       ...produkData.map(produk => ({
         label: produk.nama,
         value: produk.id,
@@ -346,8 +343,8 @@ const fetchData = async (page = 1) => {
   pendapatanElements.value = [];
 
   let queryParams = `tanggal=${tanggalDipilih.value}&page=${page}`;
-  if (salesDipilih.value) queryParams += `&sales_id=${salesDipilih.value}`;
-  if (produkDipilih.value) queryParams += `&produk_id=${produkDipilih.value}`;
+  if (salesDipilih.value != 0 ) queryParams += `&sales_id=${salesDipilih.value}`;
+  if (produkDipilih.value != 0) queryParams += `&produk_id=${produkDipilih.value}`;
   if (namaPembeli.value) queryParams += `&nama_pembeli=${encodeURIComponent(namaPembeli.value)}`;
 
   try {
@@ -400,14 +397,14 @@ const selectExport = async (option) => {
   loadingExport.value = true;
 
   try {
-    const response = await axios.get('/api/laporan/export/detail-pernampan', {
+    const response = await axios.get(`/api/laporan/export/detail-pernampan`, {
       params: {
         tanggal: tanggalDipilih.value,
-        sales_id: salesDipilih.value,
-        produk_id: produkDipilih.value,
-        nama_pembeli: namaPembeli.value,
         format: exportFormat.value,
         page: pagination.value.current_page,
+        sales_id: salesDipilih.value != 0 ? salesDipilih.value : null,
+        produk_id: produkDipilih.value != 0 ? produkDipilih.value : null,
+        nama_pembeli: namaPembeli.value || null,
       },
       headers: {
         Authorization: `Bearer ${localStorage.getItem("token")}`,
diff --git a/resources/js/components/DetailPerProduk.vue b/resources/js/components/DetailPerProduk.vue
index cbe057e..922e1c1 100644
--- a/resources/js/components/DetailPerProduk.vue
+++ b/resources/js/components/DetailPerProduk.vue
@@ -183,14 +183,14 @@ const pagination = ref({
 const pendapatanWidth = ref(0);
 const pendapatanElements = ref([]);
 
-const salesDipilih = ref(null);
+const salesDipilih = ref(0);
 const opsiSales = ref([
-  { label: 'Semua Sales', value: null, selected: true },
+  { label: 'Semua Sales', value: 0, selected: true },
 ]);
 
-const nampanDipilih = ref(null);
+const nampanDipilih = ref(0);
 const opsiNampan = ref([
-  { label: 'Semua Nampan', value: null, selected: true },
+  { label: 'Semua Nampan', value: 0, selected: true },
 ]);
 
 const namaPembeli = ref(null);
@@ -301,7 +301,7 @@ const fetchSales = async () => {
     });
     const salesData = response.data;
     opsiSales.value = [
-      { label: 'Semua Sales', value: null },
+      { label: 'Semua Sales', value: 0 },
       ...salesData.map(sales => ({
         label: sales.nama,
         value: sales.id,
@@ -321,7 +321,7 @@ const fetchNampan = async () => {
     });
     const nampanData = response.data;
     opsiNampan.value = [
-      { label: 'Semua Nampan', value: null },
+      { label: 'Semua Nampan', value: 0 },
       { label: 'Brankas', value: 0 },
       ...nampanData.map(nampan => ({
         label: nampan.nama,
@@ -340,9 +340,9 @@ const fetchData = async (page = 1) => {
   pendapatanElements.value = [];
 
   let queryParams = `tanggal=${tanggalDipilih.value}&page=${page}`;
-  if (salesDipilih.value != null) queryParams += `&sales_id=${salesDipilih.value}`;
-  if (nampanDipilih.value != null) queryParams += `&nampan_id=${nampanDipilih.value}`;
-  if (namaPembeli.value != null || namaPembeli.value != '') queryParams += `&nama_pembeli=${encodeURIComponent(namaPembeli.value)}`;
+  if (salesDipilih.value != 0 ) queryParams += `&sales_id=${salesDipilih.value}`;
+  if (nampanDipilih.value != 0) queryParams += `&produk_id=${produkDipilih.value}`;
+  if (namaPembeli.value) queryParams += `&nama_pembeli=${encodeURIComponent(namaPembeli.value)}`;
 
   try {
     const response = await axios.get(`/api/laporan/detail-per-produk?${queryParams}`, {
@@ -395,10 +395,11 @@ const selectExport = async (option) => {
     const response = await axios.get('/api/laporan/export/detail-perproduk', {
       params: {
         tanggal: tanggalDipilih.value,
-        sales_id: salesDipilih.value,
-        nampan_id: nampanDipilih.value,
-        nama_pembeli: namaPembeli.value,
         format: exportFormat.value,
+        page: pagination.value.current_page,
+        sales_id: salesDipilih.value != 0 ? salesDipilih.value : null,
+        nampan_id: nampanDipilih.value != 0 ? nampanDipilih.value : null,
+        nama_pembeli: namaPembeli.value || null,
       },
       headers: {
         Authorization: `Bearer ${localStorage.getItem("token")}`,
diff --git a/resources/js/components/EditAkun.vue b/resources/js/components/EditAkun.vue
index 3007cd0..9730213 100644
--- a/resources/js/components/EditAkun.vue
+++ b/resources/js/components/EditAkun.vue
@@ -1,118 +1,174 @@
 <template>
-    <div class="fixed inset-0 flex items-center justify-center bg-black/65">
-      <div class="bg-white rounded-lg p-6 w-96">
-        <h2 class="text-lg font-bold mb-4">Edit Akun</h2>
+  <div class="fixed inset-0 flex items-center justify-center bg-black/65 z-50">
+    <div class="bg-white rounded-lg p-6 w-96 shadow-lg">
+      <h2 class="text-lg font-bold mb-4">Edit Akun</h2>
 
-        <form @submit.prevent="updateAkun" class="space-y-3">
-            <label for="nama">Nama</label>
+      <form @submit.prevent="updateAkun" class="space-y-3">
+        <!-- Nama -->
+        <div>
+          <label for="nama" class="block text-sm font-medium">Nama</label>
           <InputField
             v-model="form.nama"
-            label="nama"
+            id="nama"
             type="text"
             :required="true"
-            class="mb-3"
+            @input="clearError('nama')"
           />
-
-          <div>
-          <label for="password">Password</label>
-          <InputField
-            v-model="form.password"
-            label="password"
-            type="password"
-            :required="false"
-            class="mb-1"
-          />
-          <p class="text-sm">Kosongkan jika tidak ingin ubah password</p>
+          <p v-if="errors.nama" class="text-red-500 text-sm">{{ errors.nama }}</p>
         </div>
 
-            <label for="peran">Peran</label>
+        <!-- Password -->
+        <div>
+          <label for="password" class="block text-sm font-medium">Password</label>
+          <InputField
+            v-model="form.password"
+            id="password"
+            type="password"
+            :required="false"
+            @input="clearError('password')"
+          />
+          <p class="text-sm">Kosongkan jika tidak ingin ubah password</p>
+          <p v-if="errors.password" class="text-red-500 text-sm">{{ errors.password }}</p>
+        </div>
+
+        <!-- Role -->
+        <div>
+          <label for="role" class="block text-sm font-medium">Peran</label>
           <InputSelect
             v-model="form.role"
-            label="peran"
             :options="[
               { value: 'owner', label: 'Owner' },
               { value: 'kasir', label: 'Kasir' }
             ]"
-            :required="true"
-            class="mb-3"
+            placeholder="-- Pilih Peran --"
+            @change="clearError('role')"
           />
+          <p v-if="errors.role" class="text-red-500 text-sm">{{ errors.role }}</p>
+        </div>
 
-          <div class="flex justify-end gap-2 mt-4">
-            <button
-              type="button"
-              @click="$emit('close')"
-              class="bg-gray-300 px-4 py-2 rounded"
-            >
-              Batal
-            </button>
-            <button
-              type="submit"
-              class="bg-blue-500 text-white px-4 py-2 rounded"
-            >
-              Ubah
-            </button>
-          </div>
-        </form>
-      </div>
+        <!-- Tombol -->
+        <div class="flex justify-end gap-2 mt-4">
+          <button
+            type="button"
+            @click="$emit('close')"
+            class="bg-gray-300 hover:bg-gray-400 px-4 py-2 rounded"
+          >
+            Batal
+          </button>
+          <button
+            type="submit"
+            class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded"
+          >
+            Ubah
+          </button>
+        </div>
+      </form>
+
+      <!-- Error global -->
+      <p v-if="errorMessage" class="text-red-500 text-sm mt-3">
+        {{ errorMessage }}
+      </p>
     </div>
-  </template>
+  </div>
+</template>
 
-  <script>
-  import axios from "axios";
-  import InputField from "@/components/InputField.vue";
-  import InputSelect from "@/components/InputSelect.vue";
+<script>
+import axios from "axios";
+import InputField from "@/components/InputField.vue";
+import InputSelect from "@/components/InputSelect.vue";
 
-  export default {
-    props: {
-      akun: {
-        type: Object,
-        required: true,
+export default {
+  name: "EditAkun",
+  props: {
+    akun: {
+      type: Object,
+      required: true,
+    },
+  },
+  components: { InputField, InputSelect },
+  data() {
+    return {
+      form: {
+        nama: this.akun?.nama || "",
+        password: "",
+        role: this.akun?.role || "",
       },
-    },
-    components: { InputField, InputSelect },
-
-    data() {
-      return {
-        form: {
-          nama: this.akun.nama || "",
-          password: "",
-          role: this.akun.role || "",
-        },
-      };
-    },
-    watch: {
-      akun: {
-        handler(newVal) {
-          if (newVal) {
-            this.form = {
-              nama: newVal.nama || "",
-              password: "",
-              role: newVal.role || "",
-            };
-          }
-        },
-        deep: true,
-        immediate: true,
-      },
-    },
-    methods: {
-      async updateAkun() {
-        try {
-          const payload = { ...this.form };
-          if (!payload.password) delete payload.password;
-
-          await axios.put(`/api/user/${this.akun.id}`, payload, {
-            headers: {
-                Authorization: `Bearer ${localStorage.getItem("token")}`,
-            },
-        });;
-
-          this.$emit("refresh");
-          this.$emit("close");
-        } catch (err) {
-          console.error("Gagal update akun:", err.response?.data || err.message);
+      errors: { nama: "", password: "", role: "" },
+      errorMessage: "",
+    };
+  },
+  watch: {
+    akun: {
+      handler(newVal) {
+        if (newVal) {
+          this.form = {
+            nama: newVal.nama || "",
+            password: "",
+            role: newVal.role || "",
+          };
+          this.errors = { nama: "", password: "", role: "" };
+          this.errorMessage = "";
         }
       },
+      deep: true,
+      immediate: true,
     },
-  };
-  </script>
+  },
+  methods: {
+    clearError(field) {
+      this.errors[field] = "";
+      this.errorMessage = "";
+    },
+    validateForm() {
+      let valid = true;
+      this.errors = { nama: "", password: "", role: "" };
+
+      if (!this.form.nama) {
+        this.errors.nama = "Nama wajib diisi";
+        valid = false;
+      }
+      if (this.form.password && this.form.password.length < 6) {
+        this.errors.password = "Password minimal 6 karakter";
+        valid = false;
+      }
+      if (!this.form.role) {
+        this.errors.role = "Role wajib dipilih";
+        valid = false;
+      } else if (!["owner", "kasir"].includes(this.form.role)) {
+        this.errors.role = "Role harus owner atau kasir";
+        valid = false;
+      }
+
+      return valid;
+    },
+    async updateAkun() {
+      if (!this.validateForm()) return;
+
+      try {
+        const payload = { ...this.form };
+        if (!payload.password) delete payload.password;
+
+        await axios.put(`/api/user/${this.akun.id}`, payload, {
+          headers: {
+            Authorization: `Bearer ${localStorage.getItem("token")}`,
+          },
+        });
+
+        this.$emit("refresh");
+        this.$emit("close");
+      } catch (err) {
+        if (err.response?.status === 422 && err.response.data.errors) {
+          const backendErrors = err.response.data.errors;
+          Object.keys(backendErrors).forEach((key) => {
+            this.errors[key] = backendErrors[key][0];
+          });
+        } else {
+          this.errorMessage =
+            err.response?.data?.message || "Gagal update akun.";
+        }
+        console.error("Gagal update akun:", err);
+      }
+    },
+  },
+};
+</script>
diff --git a/resources/js/components/TrayList.vue b/resources/js/components/TrayList.vue
index b77d940..df77c0b 100644
--- a/resources/js/components/TrayList.vue
+++ b/resources/js/components/TrayList.vue
@@ -1,6 +1,29 @@
 <template>
   <div>
-    <div v-if="loading" class="text-center py-6">Loading...</div>
+    <!-- Tampilkan berat rata-rata -->
+    <div class="bg-A border border-C rounded-xl p-4 mx-6 mb-6">
+      <div class="flex flex-row sm:items-center justify-between gap-4">
+        <div class="flex items-center gap-3">
+          <div class="p-2 bg-A rounded-lg">
+            <i class="fas fa-weight text-D"></i>
+          </div>
+          <div class="flex flex-col sm:flex-row sm:gap-6 text-sm text-gray-600">
+            <span>Total: {{ totalTrays }}</span>
+            <span>Berisi: {{ nonEmptyTrays }}</span>
+            <span>Kosong: {{ emptyTrays }}</span>
+          </div>
+        </div>
+        <div class="text-right">
+          <div class="text-2xl font-bold text-D">{{ averageWeight }}g</div>
+          <div class="text-sm text-gray-500">Rata-rata</div>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="loading" class="flex justify-center items-center h-screen">
+      <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-C"></div>
+      <span class="ml-2 text-gray-600">Memuat data...</span>
+    </div>
 
     <div v-else-if="error" class="text-center text-red-500 py-6">{{ error }}</div>
 
@@ -8,38 +31,34 @@
       Nampan tidak ditemukan.
     </div>
 
-    <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 ">
-      <div
-        v-for="tray in filteredTrays"
-        :key="tray.id"
-        class="border border-C rounded-xl p-4 shadow-sm hover:shadow-md transition"
-      >
+    <!-- Grid Card -->
+    <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 items-stretch px-6">
+      <div v-for="tray in filteredTrays" :key="tray.id"
+        class="border border-C rounded-xl p-4 shadow-sm hover:shadow-md transition flex flex-col h-full">
+        <!-- Header Card -->
         <div class="flex justify-between items-center mb-3">
           <h2 class="font-bold text-lg text-[#102C57]">{{ tray.nama }}</h2>
-          <div class="flex gap-2">
-            <button class="p-2 rounded bg-yellow-400 hover:bg-yellow-500" @click="emit('edit', tray)">✏️</button>
-            <button class="bg-red-500 text-white p-1 rounded" @click="emit('delete', tray.id)">🗑️</button>
+          <div class="flex gap-2" v-if="isAdmin">
+            <button class="p-1 rounded" @click="emit('edit', tray)">
+              <i class="fa fa-pen fa-sm text-yellow-500 hover:text-yellow-600"></i>
+            </button>
+            <button class="p-1 rounded" @click="emit('delete', tray.id)">
+              <i class="fa fa-trash fa-sm text-red-500 hover:text-red-600"></i>
+            </button>
           </div>
         </div>
 
-        <div v-if="tray.items && tray.items.length" class="space-y-2 max-h-64 overflow-y-auto pr-2">
-          <div
-            v-for="item in tray.items"
-            :key="item.id"
+        <!-- Isi Card (Max tinggi 3 item + scroll kalau lebih) -->
+        <div v-if="tray.items && tray.items.length" class="space-y-2 flex-1 overflow-y-auto h-[160px] 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
-                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-[#102C57]">
+              <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.kategori }}</p>
-                <p class="text-sm">{{ item.produk.harga_jual.toLocaleString() }}</p>
+                <p class="text-sm font-medium">{{ item.kode_item }}</p>
               </div>
             </div>
             <div class="flex items-center gap-2">
@@ -48,70 +67,62 @@
           </div>
         </div>
 
-        <div v-else class="text-gray-400 text-center py-4">
+        <!-- Kalau kosong -->
+        <div v-else class="text-gray-400 text-center py-4 flex-1">
           Nampan kosong.<br />
           Masuk ke menu <b>Brankas</b> untuk memindahkan item ke nampan.
         </div>
 
+        <!-- Footer Card -->
         <div class="border-t border-C mt-3 pt-2 text-right font-semibold">
-          Berat Total: {{ totalWeight(tray) }}g
+          <div class="flex justify-between items-center">
+            <span class="text-sm text-gray-500">{{ tray.items?.length || 0 }} item</span>
+            <span class="text-lg">Berat Total: {{ totalWeight(tray) }}g</span>
+          </div>
         </div>
       </div>
     </div>
   </div>
 
   <!-- Pop-up pindah item -->
-  <div
-    v-if="isPopupVisible"
-    class="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50"
-  >
+  <div v-if="isPopupVisible" class="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
     <div class="bg-white rounded-xl shadow-lg max-w-sm w-full p-6 relative">
-      <div class="flex justify-center mb-4">
+      <div class="flex justify-center mb-2">
         <div class="p-2 border rounded-lg">
           <img :src="qrCodeUrl" alt="QR Code" class="size-36" />
         </div>
       </div>
 
-      <div class="text-center text-gray-700 font-medium mb-1">{{ selectedItem.produk.nama }}</div>
-      <div class="text-center text-gray-500 text-sm mb-4">{{ selectedItem.produk.kategori }}</div>
+      <div class="text-center text-D font-bold text-lg">
+        {{ selectedItem.kode_item }}
+      </div>
+      <div class="text-center text-gray-700 font-medium mb-3">
+        {{ selectedItem.produk.nama }}
+      </div>
 
       <div class="flex justify-center mb-4">
-        <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition">
-          Cetak
+        <button @click="printQR" class="bg-D text-A px-4 py-2 rounded hover:bg-D/80 transition">
+          <i class="fas fa-print mr-2"></i>Cetak
         </button>
       </div>
 
-      <!-- Dropdown: langsung pilih Nampan saat ini -->
+      <!-- Dropdown -->
       <div class="mb-4">
         <label for="tray-select" class="block text-sm font-medium mb-1">Nama Nampan</label>
-        <select
-          id="tray-select"
-          v-model="selectedTrayId"
-          class="w-full rounded-md border shadow-sm focus:outline-none focus:ring focus:ring-indigo-200"
-        >
-          <option
-            v-for="tray in trays"
-            :key="tray.id"
-            :value="tray.id"
-          >
-            {{ tray.nama }}<span v-if="Number(tray.id) === Number(selectedItem?.id_nampan)"></span>
-          </option>
-        </select>
+        <InputSelect v-if="isAdmin" v-model="selectedTrayId"
+          :options="trays.map(tray => ({ label: tray.nama, value: tray.id }))" placeholder="Pilih Nampan"
+          class="mt-2" />
+        <div class="bg-A px-3 py-2 rounded text-D font-medium" v-else>
+          {{trays.find(tray => tray.id === selectedTrayId)?.nama}}
+        </div>
       </div>
 
       <div class="flex justify-end gap-2">
-        <button
-          @click="closePopup"
-          class="px-4 py-2 rounded border text-gray-700 hover:bg-gray-100 transition"
-        >
-          Batal
+        <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="saveMove"
-          :disabled="!selectedTrayId"
-          class="px-4 py-2 rounded text-white transition"
-          :class="selectedTrayId ? 'bg-orange-500 hover:bg-orange-600' : 'bg-gray-400 cursor-not-allowed'"
-        >
+        <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
         </button>
       </div>
@@ -122,16 +133,20 @@
 <script setup>
 import { ref, onMounted, computed } from "vue";
 import axios from "axios";
+import InputSelect from "./InputSelect.vue";
+
+const isAdmin = localStorage.getItem("role") === "owner";
 
 const props = defineProps({
   search: { type: String, default: "" },
 });
+
 const emit = defineEmits(["edit", "delete"]);
 const trays = ref([]);
 const loading = ref(true);
 const error = ref(null);
 
-// --- State untuk Pop-up ---
+// --- State Pop-up ---
 const isPopupVisible = ref(false);
 const selectedItem = ref(null);
 const selectedTrayId = ref("");
@@ -145,10 +160,52 @@ const qrCodeUrl = computed(() => {
   return "";
 });
 
+const printQR = () => {
+  if (qrCodeUrl.value) {
+    const printWindow = window.open('', '_blank');
+    printWindow.document.write(`
+      <html>
+        <head>
+          <title>Print QR Code - ${selectedItem.value.kode_item}</title>
+          <style>
+            body { 
+              font-family: Arial, sans-serif; 
+              text-align: center; 
+              padding: 20px; 
+            }
+            .qr-container { 
+              border: 2px solid #ccc; 
+              padding: 20px; 
+              display: inline-block; 
+              margin: 20px;
+            }
+            .item-info {
+              margin-top: 10px;
+              font-size: 14px;
+            }
+          </style>
+        </head>
+        <body>
+          <div class="qr-container">
+            <img src="${qrCodeUrl.value}" alt="QR Code" style="width: 200px; height: 200px;" />
+            <div class="item-info">
+              <div style="font-weight: bold; margin-bottom: 5px;">${selectedItem.value.kode_item}</div>
+              <div>${selectedItem.value.produk.nama}</div>
+              <div style="color: #666; margin-top: 5px;">${selectedItem.value.produk.berat}g</div>
+            </div>
+          </div>
+        </body>
+      </html>
+    `);
+    printWindow.document.close();
+    printWindow.print();
+  }
+};
+
 // --- Fungsi Pop-up ---
 const openMovePopup = (item) => {
   selectedItem.value = item;
-  selectedTrayId.value = item.id_nampan; // ✅ tampilkan nampan saat ini (mis. A4)
+  selectedTrayId.value = item.id_nampan;
   isPopupVisible.value = true;
 };
 
@@ -171,37 +228,10 @@ const saveMove = async () => {
         headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
       }
     );
-
     await refreshData();
     closePopup();
   } catch (err) {
     console.error("Gagal memindahkan item:", err.response?.data || err);
-    alert("Gagal memindahkan item. Silakan coba lagi.");
-  }
-};
-
-// --- Ambil data nampan + item ---
-const refreshData = async () => {
-  try {
-    const [nampanRes, itemRes] = await Promise.all([
-      axios.get("/api/nampan", {
-        headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
-      }),
-      axios.get("/api/item", {
-        headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
-      }),
-    ]);
-    const nampans = nampanRes.data;
-    const items = itemRes.data;
-
-    trays.value = nampans.map((tray) => ({
-      ...tray,
-      items: items.filter((item) => Number(item.id_nampan) === Number(tray.id)),
-    }));
-  } catch (err) {
-    error.value = err.message || "Gagal mengambil data";
-  } finally {
-    loading.value = false;
   }
 };
 
@@ -212,7 +242,49 @@ const totalWeight = (tray) => {
   return total.toFixed(2);
 };
 
-// Filter nampan berdasarkan pencarian
+// Computed untuk statistik berat rata-rata
+const averageWeight = computed(() => {
+  const nonEmptyTraysData = trays.value.filter(tray => {
+    const weight = parseFloat(totalWeight(tray));
+    return weight > 0;
+  });
+
+  if (nonEmptyTraysData.length === 0) return "0.00";
+
+  const totalWeightSum = nonEmptyTraysData.reduce((sum, tray) => {
+    return sum + parseFloat(totalWeight(tray));
+  }, 0);
+
+  const average = totalWeightSum / nonEmptyTraysData.length;
+  return average.toFixed(2);
+});
+
+// Computed untuk statistik tambahan
+const totalTrays = computed(() => trays.value.length);
+
+const nonEmptyTrays = computed(() => {
+  return trays.value.filter(tray => parseFloat(totalWeight(tray)) > 0).length;
+});
+
+const emptyTrays = computed(() => {
+  return trays.value.filter(tray => parseFloat(totalWeight(tray)) === 0).length;
+});
+
+// --- Ambil data nampan + item ---
+const refreshData = async () => {
+  try {
+    const nampanRes = await axios.get("/api/nampan", {
+      headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
+    });
+    trays.value = nampanRes.data;
+  } catch (err) {
+    error.value = err.message || "Gagal mengambil data";
+  } finally {
+    loading.value = false;
+  }
+};
+
+// Filter nampan
 const filteredTrays = computed(() => {
   if (!props.search) return trays.value;
   return trays.value.filter((tray) =>
@@ -223,4 +295,4 @@ const filteredTrays = computed(() => {
 onMounted(() => {
   refreshData();
 });
-</script>
+</script>
\ No newline at end of file
diff --git a/resources/js/components/searchbar.vue b/resources/js/components/searchbar.vue
index 236637d..1f886c1 100644
--- a/resources/js/components/searchbar.vue
+++ b/resources/js/components/searchbar.vue
@@ -1,13 +1,12 @@
 <template>
-<div class="flex justify-end mb-4">
-      <input
-        v-model="searchText"
-        type="text"
-        placeholder="Cari ..."
-        class="border border-C bg-A rounded-md px-3 py-2 w-64 focus:outline-none focus:ring-2 focus:ring-blue-400"
-        @input="$emit('update:search', searchText)"
-      />
+  <div class="border border-C bg-A rounded-md w-full relative items-center">
+    <input v-model="searchText" type="text" placeholder="Cari ..."
+      class="focus:outline-none focus:ring-2 focus:ring-blue-400 rounded-md w-full px-3 py-2 "
+      @input="$emit('update:search', searchText)" />
+    <div class="absolute right-3 top-1/2 -translate-y-1/2 text-C">
+     <i class="fas fa-search"></i>
     </div>
+  </div>
 </template>
 <script setup>
 import { ref } from "vue";
diff --git a/resources/js/pages/Brankas.vue b/resources/js/pages/Brankas.vue
index a0e7f2e..b9d27ca 100644
--- a/resources/js/pages/Brankas.vue
+++ b/resources/js/pages/Brankas.vue
@@ -1,18 +1,21 @@
 <template>
-    <mainLayout>
-        <div class="p-6">
-            <p class="font-serif italic text-[25px] text-D">BRANKAS</p>
-            <searchbar v-model:search="searchQuery" />
-            <BrankasList :search="searchQuery" />
+  <mainLayout>
+    <div class="p-6">
+      <p class="font-serif italic text-[25px] text-D">BRANKAS</p>
+      <div class="flex justify-end">
+        <div class="w-full sm:w-64 my-3">
+          <searchbar v-model:search="searchQuery"/>
         </div>
-    </mainLayout>
-
-
+      </div>
+      <BrankasList :search="searchQuery" />
+    </div>
+  </mainLayout>
 </template>
+
 <script setup>
 import { ref } from 'vue';
 import mainLayout from '../layouts/mainLayout.vue'
-import searchbar from '../components/searchbar.vue';
+import searchbar from '../components/Searchbar.vue';
 import BrankasList from '../components/BrankasList.vue';
 const searchQuery = ref("");
 </script>
diff --git a/resources/js/pages/Kategori.vue b/resources/js/pages/Kategori.vue
index 1cb505f..b491b35 100644
--- a/resources/js/pages/Kategori.vue
+++ b/resources/js/pages/Kategori.vue
@@ -9,6 +9,7 @@
 			<div class="flex justify-between items-center mb-6">
 
 				<button @click="tambahKategori"
+          v-if="isAdmin"
 					class="px-4 py-2 bg-C text-black rounded-md hover:bg-B transition duration-200 flex items-center gap-2">
 					<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
@@ -28,7 +29,7 @@
 							<th class="px-6 py-4 text-center font-semibold border-r border-C">
 								Nama Kategori
 							</th>
-							<th class="px-6 py-4 text-center font-semibold">
+							<th v-if="isAdmin" class="px-6 py-4 text-center font-semibold">
 								Aksi
 							</th>
 						</tr>
@@ -43,7 +44,7 @@
 							<td class="px-6 py-4 border-r border-C text-center text-gray-800">
 								{{ item.nama }}
 							</td>
-							<td class="px-6 py-4 text-center">
+							<td class="px-6 py-4 text-center" v-if="isAdmin">
 								<div class="flex justify-center gap-2">
 									<button @click="ubahKategori(item)"
 										class="px-3 py-1 bg-yellow-500 text-white text-sm rounded hover:bg-yellow-600 transition duration-200">
@@ -97,6 +98,8 @@ const detail = ref(null);
 const confirmDeleteOpen = ref(false);
 const kategoriToDelete = ref(null);
 
+const isAdmin = localStorage.getItem("role") === "owner";
+
 // Fetch data kategori dari API
 const fetchKategoris = async () => {
 	loading.value = true;
diff --git a/resources/js/pages/Produk.vue b/resources/js/pages/Produk.vue
index 0886dbb..166ac96 100644
--- a/resources/js/pages/Produk.vue
+++ b/resources/js/pages/Produk.vue
@@ -1,224 +1,139 @@
 <template>
-    <mainLayout>
-        <!-- Modal Buat Item -->
-        <CreateItemModal
-            :isOpen="creatingItem"
-            :product="detail"
-            @close="closeItemModal"
-        />
+  <mainLayout>
+    <!-- Modal Buat Item -->
+    <CreateItemModal :isOpen="creatingItem" :product="detail" @close="closeItemModal" />
 
-        <!-- Modal Konfirmasi Hapus Produk -->
-        <ConfirmDeleteModal
-            :isOpen="deleting"
-            @cancel="deleting = false"
-            @confirm="deleteProduk"
-            title="Hapus Produk"
-            message="Apakah Anda yakin ingin menghapus produk ini?"
-        />
+    <!-- Modal Konfirmasi Hapus Produk -->
+    <ConfirmDeleteModal :isOpen="deleting" @cancel="deleting = false" @confirm="deleteProduk" title="Hapus Produk"
+      message="Apakah Anda yakin ingin menghapus produk ini?" />
 
-        <div class="p-6 min-h-[75vh]">
-            <!-- Judul -->
-            <p class="font-serif italic text-[25px] text-D">PRODUK</p>
+    <div class="p-6 min-h-[75vh]">
+      <!-- Judul -->
+      <p class="font-serif italic text-[25px] text-D">PRODUK</p>
 
-            <!-- Wrapper -->
-            <div class="mt-3">
-                <!-- Mobile Layout -->
-                <div class="flex flex-col gap-3 sm:hidden">
-                    <!-- Search -->
-                    <div class="w-full">
-                        <searchbar
-                            v-model:search="searchQuery"
-                            class="searchbar-mobile"
-                        />
-                    </div>
-
-                    <!-- Filter + Tombol -->
-                    <div class="flex flex-row justify-between items-center">
-                        <!-- Filter Kategori -->
-                        <div class="w-40 shrink-0">
-                            <InputSelect
-                                v-model="selectedCategory"
-                                :options="kategori"
-                                class="w-full"
-                            />
-                        </div>
-
-                        <!-- Tombol Tambah Produk -->
-                        <router-link
-                            to="/produk/baru"
-                            class="bg-C text-[#0a1a3c] px-4 py-2 rounded-md shadow hover:bg-C transition"
-                        >
-                            Tambah Produk
-                        </router-link>
-                    </div>
-                </div>
-
-                <!-- Desktop Layout -->
-                <div class="hidden sm:flex flex-row gap-3 items-start">
-                    <!-- Filter -->
-                    <div class="w-40 sm:w-48 shrink-0">
-                        <InputSelect
-                            v-model="selectedCategory"
-                            :options="kategori"
-                            class="w-full"
-                        />
-                    </div>
-
-                    <!-- Search -->
-                    <div class="flex-1 mt-[2px]">
-                        <searchbar v-model:search="searchQuery" class="w-full" />
-                    </div>
-                </div>
-
-                <!-- Tombol Tambah Produk (desktop) -->
-                <div class="hidden sm:flex justify-end mt-3">
-                    <router-link
-                        to="/produk/baru"
-                        class="bg-C text-[#0a1a3c] px-4 py-2 rounded-md shadow hover:bg-C transition"
-                    >
-                        Tambah Produk
-                    </router-link>
-                </div>
-            </div>
-
-            <!-- 🔵 Loading State (sama persis dengan kategori) -->
-            <div v-if="loading" class="flex justify-center items-center h-screen">
-                <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-C"></div>
-                <span class="ml-2 text-gray-600">Memuat data...</span>
-            </div>
-
-            <!-- 🔵 Grid Produk -->
-            <div
-                v-else
-                class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 mt-4 relative z-0"
-            >
-                <ProductCard
-                    v-for="item in filteredProducts"
-                    :key="item.id"
-                    :product="item"
-                    @click="openOverlay(item.id)"
-                />
-
-                <!-- 🔵 Empty State (sama kayak kategori) -->
-                <div
-                    v-if="filteredProducts.length === 0"
-                    class="col-span-full flex flex-col items-center py-10 text-gray-500"
-                >
-                    <svg
-                        class="w-12 h-12 text-gray-400 mb-2"
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                    >
-                        <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2 2v-5m16 0h-2M4 13h2"
-                        />
-                    </svg>
-                    <p>Tidak ada data produk</p>
-                </div>
+      <!-- Wrapper -->
+      <div class="mt-3">
+        <!-- Mobile Layout -->
+        <div class="flex flex-col gap-3 sm:hidden">
+          <searchbar v-model:search="searchQuery" class="w-full" />
+          <div class="flex flex-row justify-between items-center gap-3">
+            <div class="shrink-0">
+              <InputSelect v-model="selectedCategory" :options="kategori" />
             </div>
+            <router-link v-if="isAdmin" to="/produk/baru"
+              class="bg-C text-D px-4 py-2 rounded-md shadow hover:bg-C transition">
+              Tambah Produk
+            </router-link>
+          </div>
         </div>
 
-        <!-- Overlay Detail Produk -->
-        <div
-            v-if="showOverlay"
-            class="fixed inset-0 bg-black/30 flex justify-center items-center"
-            @click.self="closeOverlay"
-        >
-            <div
-                class="bg-white rounded-lg shadow-lg p-6 w-[450px] border-2 border-B relative flex flex-col items-center"
-            >
-                <!-- Foto Produk -->
-                <div
-                    class="relative w-72 h-72 border border-B flex items-center justify-center mb-3 overflow-hidden rounded"
-                >
-                    <img
-                        v-if="detail.foto && detail.foto.length > 0"
-                        :src="detail.foto[currentFotoIndex].url"
-                        :alt="detail.nama"
-                        class="w-full h-full object-contain"
-                    />
-                    <span v-else class="text-gray-400 text-sm">[gambar]</span>
+        <!-- Desktop Layout -->
+        <div class="hidden sm:flex flex-row gap-3 items-start">
+          <!-- Filter -->
+          <div class="w-40 sm:w-48 shrink-0">
+            <InputSelect v-model="selectedCategory" :options="kategori" class="w-full" />
+          </div>
 
-                    <!-- Stok (pcs) pojok kiri atas -->
-                    <div
-                        class="absolute top-1 left-1 bg-black/60 text-white text-xs px-2 py-1 rounded"
-                    >
-                        {{ detail.items_count }} pcs
-                    </div>
-
-                    <!-- Tombol Prev -->
-                    <button
-                        v-if="detail.foto && detail.foto.length > 1"
-                        @click.stop="prevFoto"
-                        class="absolute left-2 bg-white/80 hover:bg-white text-black px-2 py-1 rounded-full shadow"
-                    >
-                        ‹
-                    </button>
-                    <!-- Tombol Next -->
-                    <button
-                        v-if="detail.foto && detail.foto.length > 1"
-                        @click.stop="nextFoto"
-                        class="absolute right-2 bg-white/80 hover:bg-white text-black px-2 py-1 rounded-full shadow"
-                    >
-                        ›
-                    </button>
-                </div>
-
-                <!-- Nama Produk -->
-                <p class="text-lg font-semibold text-center mb-4">
-                    {{ detail.nama }}
-                </p>
-
-                <!-- Detail Harga & Info -->
-                <div
-                    class="grid grid-cols-2 gap-y-2 gap-x-4 text-sm w-full mb-6"
-                >
-                    <p class="col-span-1">Harga Jual :</p>
-                    <p class="col-span-1 text-right">
-                        Rp. {{ formatNumber(detail.harga_jual) }}
-                    </p>
-
-                    <p class="col-span-1">Kadar :</p>
-                    <p class="col-span-1 text-right">{{ detail.kadar }} K</p>
-
-                    <p class="col-span-1">Berat :</p>
-                    <p class="col-span-1 text-right">{{ detail.berat }} gram</p>
-
-                    <p class="col-span-1">Harga/gram :</p>
-                    <p class="col-span-1 text-right">
-                        Rp. {{ formatNumber(detail.harga_per_gram) }}
-                    </p>
-                </div>
-
-                <!-- Tombol Aksi -->
-                <div class="flex w-full gap-3">
-                    <button
-                        @click="$router.push(`/produk/${detail.id}/edit`)"
-                        class="flex-1 bg-yellow-400 text-black py-2 rounded font-bold"
-                    >
-                        Ubah
-                    </button>
-
-                    <button
-                        @click="openItemModal"
-                        class="bg-green-400 text-black px-4 py-2 rounded font-bold"
-                    >
-                        Tambah
-                    </button>
-                    <button
-                        @click="deleting = true"
-                        class="flex-1 bg-red-500 text-white py-2 rounded font-bold"
-                    >
-                        Hapus
-                    </button>
-                </div>
-            </div>
+          <!-- Search -->
+          <div class="flex-1">
+            <searchbar v-model:search="searchQuery" class="w-full" />
+          </div>
+          <router-link v-if="isAdmin" to="/produk/baru"
+            class="bg-C text-D px-4 py-2 rounded-md shadow hover:bg-C transition">
+            Tambah Produk
+          </router-link>
         </div>
-    </mainLayout>
+      </div>
+
+      <!-- 🔵 Loading State (sama persis dengan kategori) -->
+      <div v-if="loading" class="flex justify-center items-center h-screen">
+        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-C"></div>
+        <span class="ml-2 text-gray-600">Memuat data...</span>
+      </div>
+
+      <!-- 🔵 Grid Produk -->
+      <div v-else class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 mt-4 relative z-0">
+        <ProductCard v-for="item in filteredProducts" :key="item.id" :product="item" @click="openOverlay(item.id)" />
+
+        <!-- 🔵 Empty State (sama kayak kategori) -->
+        <div v-if="filteredProducts.length === 0" class="col-span-full flex flex-col items-center py-10 text-gray-500">
+          <svg class="w-12 h-12 text-gray-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+              d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2 2v-5m16 0h-2M4 13h2" />
+          </svg>
+          <p>Tidak ada data produk</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Overlay Detail Produk -->
+    <div v-if="showOverlay" class="fixed inset-0 bg-black/30 flex justify-center items-center"
+      @click.self="closeOverlay">
+      <div class="bg-white rounded-lg shadow-lg p-6 w-[450px] border-2 border-B relative flex flex-col items-center">
+        <!-- Foto Produk -->
+        <div class="relative w-72 h-72 border border-B flex items-center justify-center mb-3 overflow-hidden rounded">
+          <img v-if="detail.foto && detail.foto.length > 0" :src="detail.foto[currentFotoIndex].url" :alt="detail.nama"
+            class="w-full h-full object-contain" />
+          <span v-else class="text-gray-400 text-sm">[gambar]</span>
+
+          <!-- Stok (pcs) pojok kiri atas -->
+          <div class="absolute top-1 left-1 bg-black/60 text-white text-xs px-2 py-1 rounded">
+            {{ detail.items_count }} pcs
+          </div>
+
+          <!-- Tombol Prev -->
+          <button v-if="detail.foto && detail.foto.length > 1" @click.stop="prevFoto"
+            class="absolute left-2 bg-white/80 hover:bg-white text-black px-2 py-1 rounded-full shadow">
+            ‹
+          </button>
+          <!-- Tombol Next -->
+          <button v-if="detail.foto && detail.foto.length > 1" @click.stop="nextFoto"
+            class="absolute right-2 bg-white/80 hover:bg-white text-black px-2 py-1 rounded-full shadow">
+            ›
+          </button>
+        </div>
+
+        <!-- Nama Produk -->
+        <p class="text-lg font-semibold text-center mb-4">
+          {{ detail.nama }}
+        </p>
+
+        <!-- Detail Harga & Info -->
+        <div class="grid grid-cols-2 gap-y-2 gap-x-4 text-sm w-full mb-6">
+          <p class="col-span-1">Harga Jual :</p>
+          <p class="col-span-1 text-right">
+            Rp. {{ formatNumber(detail.harga_jual) }}
+          </p>
+
+          <p class="col-span-1">Kadar :</p>
+          <p class="col-span-1 text-right">{{ detail.kadar }} K</p>
+
+          <p class="col-span-1">Berat :</p>
+          <p class="col-span-1 text-right">{{ detail.berat }} gram</p>
+
+          <p class="col-span-1">Harga/gram :</p>
+          <p class="col-span-1 text-right">
+            Rp. {{ formatNumber(detail.harga_per_gram) }}
+          </p>
+        </div>
+
+        <!-- Tombol Aksi -->
+        <div v-if="isAdmin" class="flex w-full gap-3">
+          <button @click="$router.push(`/produk/${detail.id}/edit`)"
+            class="flex-1 bg-yellow-400 text-black py-2 rounded font-bold">
+            Ubah
+          </button>
+
+          <button @click="openItemModal" class="bg-green-400 text-black px-4 py-2 rounded font-bold">
+            Tambah
+          </button>
+          <button @click="deleting = true" class="flex-1 bg-red-500 text-white py-2 rounded font-bold">
+            Hapus
+          </button>
+        </div>
+      </div>
+    </div>
+  </mainLayout>
 </template>
 
 <script setup>
@@ -226,11 +141,13 @@ import { ref, onMounted, computed } from "vue";
 import axios from "axios";
 import mainLayout from "../layouts/mainLayout.vue";
 import ProductCard from "../components/ProductCard.vue";
-import searchbar from "../components/searchbar.vue";
+import searchbar from "../components/Searchbar.vue";
 import CreateItemModal from "../components/CreateItemModal.vue";
 import ConfirmDeleteModal from "../components/ConfirmDeleteModal.vue";
 import InputSelect from "../components/InputSelect.vue";
 
+const isAdmin = localStorage.getItem("role") == "owner";
+
 const products = ref([]);
 const searchQuery = ref("");
 const selectedCategory = ref(0);
@@ -246,137 +163,126 @@ const loading = ref(false); // 🔥 Loading persis kategori
 
 // Load kategori
 const loadKategori = async () => {
-    try {
-        const response = await axios.get("/api/kategori", {
-            headers: {
-                Authorization: `Bearer ${localStorage.getItem("token")}`,
-            },
-        });
-        if (response.data && Array.isArray(response.data)) {
-            kategori.value = [
-                { value: 0, label: "Semua" },
-                ...response.data.map((cat) => ({
-                    value: cat.id,
-                    label: cat.nama,
-                })),
-            ];
-        }
-    } catch (error) {
-        console.error("Error loading categories:", error);
+  try {
+    const response = await axios.get("/api/kategori", {
+      headers: {
+        Authorization: `Bearer ${localStorage.getItem("token")}`,
+      },
+    });
+    if (response.data && Array.isArray(response.data)) {
+      kategori.value = [
+        { value: 0, label: "Semua" },
+        ...response.data.map((cat) => ({
+          value: cat.id,
+          label: cat.nama,
+        })),
+      ];
     }
+  } catch (error) {
+    console.error("Error loading categories:", error);
+  }
 };
 
 // Load produk
 const loadProduk = async () => {
-    loading.value = true; // 🔵 start loading
-    try {
-        const response = await axios.get(`/api/produk`, {
-            headers: {
-                Authorization: `Bearer ${localStorage.getItem("token")}`,
-            },
-        });
+  loading.value = true; // 🔵 start loading
+  try {
+    const response = await axios.get(`/api/produk`, {
+      headers: {
+        Authorization: `Bearer ${localStorage.getItem("token")}`,
+      },
+    });
 
-        if (response.data && Array.isArray(response.data)) {
-            products.value = response.data;
-        }
-    } catch (error) {
-        console.error("Error loading products:", error);
-    } finally {
-        loading.value = false; // 🔵 stop loading
+    if (response.data && Array.isArray(response.data)) {
+      products.value = response.data;
     }
+  } catch (error) {
+    console.error("Error loading products:", error);
+  } finally {
+    loading.value = false; // 🔵 stop loading
+  }
 };
 
 // Modal item
 const openItemModal = () => {
-    creatingItem.value = true;
+  creatingItem.value = true;
 };
 const closeItemModal = () => {
-    creatingItem.value = false;
+  creatingItem.value = false;
 };
 
 // Fetch awal
 onMounted(async () => {
-    await loadKategori();
-    await loadProduk();
+  await loadKategori();
+  await loadProduk();
 });
 
 // Filter produk
 const filteredProducts = computed(() => {
-    let hasil = products.value;
+  let hasil = products.value;
 
-    if (selectedCategory.value != 0) {
-        hasil = hasil.filter((p) => p.id_kategori == selectedCategory.value);
-    }
+  if (selectedCategory.value != 0) {
+    hasil = hasil.filter((p) => p.id_kategori == selectedCategory.value);
+  }
 
-    if (searchQuery.value) {
-        hasil = hasil.filter((p) =>
-            p.nama.toLowerCase().includes(searchQuery.value.toLowerCase())
-        );
-    }
+  if (searchQuery.value) {
+    hasil = hasil.filter((p) =>
+      p.nama.toLowerCase().includes(searchQuery.value.toLowerCase())
+    );
+  }
 
-    return hasil;
+  return hasil;
 });
 
 // Overlay detail
 function openOverlay(id) {
-    const produk = products.value.find((p) => p.id === id);
-    if (produk) {
-        detail.value = produk;
-        currentFotoIndex.value = 0;
-        showOverlay.value = true;
-    }
+  const produk = products.value.find((p) => p.id === id);
+  if (produk) {
+    detail.value = produk;
+    currentFotoIndex.value = 0;
+    showOverlay.value = true;
+  }
 }
 function closeOverlay() {
-    showOverlay.value = false;
-    currentFotoIndex.value = 0;
+  showOverlay.value = false;
+  currentFotoIndex.value = 0;
 }
 
 // Navigasi foto
 function nextFoto() {
-    if (detail.value.foto && detail.value.foto.length > 0) {
-        currentFotoIndex.value =
-            (currentFotoIndex.value + 1) % detail.value.foto.length;
-    }
+  if (detail.value.foto && detail.value.foto.length > 0) {
+    currentFotoIndex.value =
+      (currentFotoIndex.value + 1) % detail.value.foto.length;
+  }
 }
 function prevFoto() {
-    if (detail.value.foto && detail.value.foto.length > 0) {
-        currentFotoIndex.value =
-            (currentFotoIndex.value - 1 + detail.value.foto.length) %
-            detail.value.foto.length;
-    }
+  if (detail.value.foto && detail.value.foto.length > 0) {
+    currentFotoIndex.value =
+      (currentFotoIndex.value - 1 + detail.value.foto.length) %
+      detail.value.foto.length;
+  }
 }
 
 // Format angka
 function formatNumber(num) {
-    return new Intl.NumberFormat().format(num || 0);
+  return new Intl.NumberFormat().format(num || 0);
 }
 
 // Hapus produk
 async function deleteProduk() {
-    try {
-        await axios.delete(`/api/produk/${detail.value.id}`, {
-            headers: {
-                Authorization: `Bearer ${localStorage.getItem("token")}`,
-            },
-        });
-        products.value = products.value.filter((p) => p.id !== detail.value.id);
-        deleting.value = false;
-        showOverlay.value = false;
-        alert("Produk berhasil dihapus!");
-    } catch (err) {
-        console.error("Gagal hapus produk:", err);
-        alert("Gagal menghapus produk!");
-    }
+  try {
+    await axios.delete(`/api/produk/${detail.value.id}`, {
+      headers: {
+        Authorization: `Bearer ${localStorage.getItem("token")}`,
+      },
+    });
+    products.value = products.value.filter((p) => p.id !== detail.value.id);
+    deleting.value = false;
+    showOverlay.value = false;
+    alert("Produk berhasil dihapus!");
+  } catch (err) {
+    console.error("Gagal hapus produk:", err);
+    alert("Gagal menghapus produk!");
+  }
 }
 </script>
-
-<style scoped>
-/* 🔥 Tambahan agar searchbar mobile full */
-.searchbar-mobile:deep(div) {
-  width: 100% !important;
-  justify-content: flex-start !important;
-}
-.searchbar-mobile:deep(input) {
-  width: 100% !important;
-}
-</style>
diff --git a/resources/js/pages/Sales.vue b/resources/js/pages/Sales.vue
index d93b08c..db46f82 100644
--- a/resources/js/pages/Sales.vue
+++ b/resources/js/pages/Sales.vue
@@ -1,166 +1,103 @@
 <template>
-    <mainLayout>
-        <!-- Modal Create/Edit Sales -->
-        <CreateSales
-            v-if="creatingSales"
-            :isOpen="creatingSales"
-            :sales="detail"
-            @close="closeSales"
-        />
+  <mainLayout>
+    <!-- Modal Create/Edit Sales -->
+    <CreateSales v-if="creatingSales" :isOpen="creatingSales" :sales="detail" @close="closeSales" />
 
-        <EditSales
-            v-if="editingSales"
-            :isOpen="editingSales"
-            :sales="detail"
-            @close="closeEditSales"
-        />
+    <EditSales v-if="editingSales" :isOpen="editingSales" :sales="detail" @close="closeEditSales" />
 
-        <!-- Modal Delete -->
-        <ConfirmDeleteModal
-            :isOpen="confirmDeleteOpen"
-            title="Hapus Sales"
-            message="Apakah Anda yakin ingin menghapus sales ini?"
-            @confirm="confirmDelete"
-            @cancel="closeDeleteModal"
-        />
+    <!-- Modal Delete -->
+    <ConfirmDeleteModal :isOpen="confirmDeleteOpen" title="Hapus Sales"
+      message="Apakah Anda yakin ingin menghapus sales ini?" @confirm="confirmDelete" @cancel="closeDeleteModal" />
 
-        <div class="p-6 min-h-[75vh]">
-             <p class="font-serif italic text-[25px] text-D">SALES</p>
-            <div class="flex justify-between items-center mb-6">
+    <div class="p-6 min-h-[75vh]">
+      <p class="font-serif italic text-[25px] text-D">SALES</p>
+      <div class="flex justify-between items-center mb-6">
 
-                <button
-                    @click="tambahSales"
-                    class="px-4 py-2 bg-C text-D rounded-md hover:bg-C/80 transition duration-200 flex items-center gap-2"
-                >
-                    <svg
-                        class="w-4 h-4"
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                    >
-                        <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M12 4v16m8-8H4"
-                        />
-                    </svg>
-                    Tambah Sales
-                </button>
-            </div>
+        <button @click="tambahSales"
+          v-if="isAdmin"
+          class="px-4 py-2 bg-C text-D rounded-md hover:bg-C/80 transition duration-200 flex items-center gap-2">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+          </svg>
+          Tambah Sales
+        </button>
+      </div>
 
-            <!-- Table Section -->
-            <div
-                class="bg-white rounded-lg shadow-md border border-gray-200\ overflow-hidden"
-            >
-                <table class="w-full">
-                    <thead class="">
-                        <tr class="bg-C text-white">
-                            <th
-                                class="px-6 py-4 text-center text-D border-r border-[#b09065]"
-                            >
-                                No
-                            </th>
-                            <th
-                                class="px-6 py-4 text-center text-D border-r border-[#b09065]"
-                            >
-                                Nama Sales
-                            </th>
-                            <th
-                                class="px-6 py-4 text-center text-D border-r border-[#b09065]"
-                            >
-                                No HP
-                            </th>
-                            <th
-                                class="px-6 py-4 text-center text-D border-r border-[#b09065]"
-                            >
-                                Alamat
-                            </th>
-                            <th class="px-6 py-4 text-center text-D">Aksi</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr
-                            v-for="(item, index) in sales"
-                            :key="item.id"
-                            class="border-b border-gray-200\ hover:bg-gray-50 transition duration-150"
-                            :class="{ 'bg-gray-50': index % 2 === 1 }"
-                        >
-                            <td
-                                class="px-6 py-4 border-r border-gray-200\ text-center font-medium text-gray-900"
-                            >
-                                {{ index + 1 }}
-                            </td>
-                            <td
-                                class="px-6 py-4 border-r border-gray-200\ text-D"
-                            >
-                                {{ item.nama }}
-                            </td>
-                            <td
-                                class="px-6 py-4 border-r border-gray-200\ text-gray-800"
-                            >
-                                {{ item.no_hp }}
-                            </td>
-                            <td
-                                class="px-6 py-4 border-r border-gray-200\ text-gray-800"
-                            >
-                                {{ item.alamat }}
-                            </td>
-                            <td class="px-6 py-4 text-center">
-                                <div class="flex justify-center gap-2">
-                                    <button
-                                        @click="ubahSales(item)"
-                                        class="px-3 py-1 bg-yellow-500 text-white text-sm rounded hover:bg-yellow-600 transition duration-200"
-                                    >
-                                        Ubah
-                                    </button>
-                                    <button
-                                        @click="hapusSales(item)"
-                                        class="px-3 py-1 bg-red-500 text-white text-sm rounded hover:bg-red-600 transition duration-200"
-                                    >
-                                        Hapus
-                                    </button>
-                                </div>
-                            </td>
-                        </tr>
+      <!-- Table Section -->
+      <div class="bg-white rounded-lg shadow-md border border-C overflow-x-auto">
+        <table class="w-full ">
+          <thead class="">
+            <tr class="bg-C text-white">
+              <th class="px-6 py-4 text-center text-D">
+                No
+              </th>
+              <th class="px-6 py-4 text-center text-D">
+                Nama Sales
+              </th>
+              <th class="px-6 py-4 text-center text-D">
+                No HP
+              </th>
+              <th class="px-6 py-4 text-center text-D">
+                Alamat
+              </th>
+              <th v-if="isAdmin" class="px-6 py-4 text-center text-D">
+                Aksi
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(item, index) in sales" :key="item.id"
+              class="border-b border-C hover:bg-gray-50 transition duration-150"
+              :class="{ 'bg-gray-50': index % 2 === 1 }">
+              <td class="px-6 py-4 border-r border-C text-center font-medium text-gray-900">
+                {{ index + 1 }}
+              </td>
+              <td class="px-6 py-4 border-r border-C text-D">
+                {{ item.nama }}
+              </td>
+              <td class="px-6 py-4 border-r border-C text-gray-800">
+                {{ item.no_hp }}
+              </td>
+              <td class="px-6 py-4 border-r border-C text-gray-800">
+                {{ item.alamat }}
+              </td>
+              <td class="px-6 py-4 text-center" v-if="isAdmin">
+                <div class="flex justify-center gap-2">
+                  <button @click="ubahSales(item)"
+                    class="px-3 py-1 bg-yellow-500 text-white text-sm rounded hover:bg-yellow-600 transition duration-200">
+                    Ubah
+                  </button>
+                  <button @click="hapusSales(item)"
+                    class="px-3 py-1 bg-red-500 text-white text-sm rounded hover:bg-red-600 transition duration-200">
+                    Hapus
+                  </button>
+                </div>
+              </td>
+            </tr>
 
-                        <!-- Empty State -->
-                        <tr v-if="sales.length === 0 && !loading">
-                            <td
-                                colspan="5"
-                                class="px-6 py-8 text-center text-gray-500"
-                            >
-                                <div class="flex flex-col items-center">
-                                    <svg
-                                        class="w-12 h-12 text-gray-400 mb-2"
-                                        fill="none"
-                                        stroke="currentColor"
-                                        viewBox="0 0 24 24"
-                                    >
-                                        <path
-                                            stroke-linecap="round"
-                                            stroke-linejoin="round"
-                                            stroke-width="2"
-                                            d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2 2v-5m16 0h-2M4 13h2"
-                                        />
-                                    </svg>
-                                    <p>Tidak ada data sales</p>
-                                </div>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+            <!-- Empty State -->
+            <tr v-if="sales.length === 0 && !loading">
+              <td colspan="5" class="px-6 py-8 text-center text-gray-500">
+                <div class="flex flex-col items-center">
+                  <svg class="w-12 h-12 text-gray-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                      d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2 2v-5m16 0h-2M4 13h2" />
+                  </svg>
+                  <p>Tidak ada data sales</p>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
 
-            <!-- Loading State -->
-            <div v-if="loading" class="flex justify-center items-center py-8">
-                <div
-                    class="animate-spin rounded-full h-8 w-8 border-b-2 border-[#c6a77d]"
-                ></div>
-                <span class="ml-2 text-gray-600">Memuat data...</span>
-            </div>
-        </div>
-    </mainLayout>
+      <!-- Loading State -->
+      <div v-if="loading" class="flex justify-center items-center py-8">
+        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-[#c6a77d]"></div>
+        <span class="ml-2 text-gray-600">Memuat data...</span>
+      </div>
+    </div>
+  </mainLayout>
 </template>
 
 <script setup>
@@ -171,6 +108,8 @@ import CreateSales from "../components/CreateSales.vue";
 import ConfirmDeleteModal from "../components/ConfirmDeleteModal.vue";
 import EditSales from "../components/EditSales.vue";
 
+const isAdmin = localStorage.getItem("role") === "owner";
+
 // State
 const sales = ref([]);
 const loading = ref(false);
@@ -182,71 +121,71 @@ const salesToDelete = ref(null);
 
 // Fetch data dari API
 const fetchSales = async () => {
-    loading.value = true;
-    try {
-        const response = await axios.get("/api/sales", {
-            headers: {
-                Authorization: `Bearer ${localStorage.getItem("token")}`,
-            },
-        });
-        sales.value = response.data;
-    } catch (error) {
-        console.error("Error fetching sales:", error);
-    } finally {
-        loading.value = false;
-    }
+  loading.value = true;
+  try {
+    const response = await axios.get("/api/sales", {
+      headers: {
+        Authorization: `Bearer ${localStorage.getItem("token")}`,
+      },
+    });
+    sales.value = response.data;
+  } catch (error) {
+    console.error("Error fetching sales:", error);
+  } finally {
+    loading.value = false;
+  }
 };
 
 // Tambah
 const tambahSales = () => {
-    detail.value = null;
-    creatingSales.value = true;
+  detail.value = null;
+  creatingSales.value = true;
 };
 
 // Ubah
 const ubahSales = (item) => {
-    detail.value = item;
-    editingSales.value = true;
+  detail.value = item;
+  editingSales.value = true;
 };
 
 // Hapus
 const hapusSales = (item) => {
-    salesToDelete.value = item;
-    confirmDeleteOpen.value = true;
+  salesToDelete.value = item;
+  confirmDeleteOpen.value = true;
 };
 
 const confirmDelete = async () => {
-    try {
-        await axios.delete(`/api/sales/${salesToDelete.value.id}`, {
-            headers: {
-                Authorization: `Bearer ${localStorage.getItem("token")}`,
-            },
-        });
-        fetchSales();
-        confirmDeleteOpen.value = false;
-    } catch (error) {
-        console.error("Error deleting sales:", error);
-    }
+  try {
+    await axios.delete(`/api/sales/${salesToDelete.value.id}`, {
+      headers: {
+        Authorization: `Bearer ${localStorage.getItem("token")}`,
+      },
+    });
+    fetchSales();
+    confirmDeleteOpen.value = false;
+  } catch (error) {
+    console.error("Error deleting sales:", error);
+  }
 };
 
 const closeDeleteModal = () => {
-    confirmDeleteOpen.value = false;
-    salesToDelete.value = null;
+  confirmDeleteOpen.value = false;
+  salesToDelete.value = null;
 };
 
 // Tutup modal Create/Edit
 const closeSales = () => {
-    creatingSales.value = false;
-    fetchSales();
+  creatingSales.value = false;
+  fetchSales();
 };
 
 const closeEditSales = () => {
-    editingSales.value = false;
-    fetchSales();
+  editingSales.value = false;
+  fetchSales();
 };
 
 // Lifecycle
 onMounted(() => {
-    fetchSales();
+  fetchSales();
 });
 </script>
diff --git a/resources/js/pages/Tray.vue b/resources/js/pages/Tray.vue
index fdc9932..c667721 100644
--- a/resources/js/pages/Tray.vue
+++ b/resources/js/pages/Tray.vue
@@ -1,222 +1,196 @@
 <template>
-    <mainLayout>
-        <!-- Header -->
-        <div class="p-6">
-            <!-- Judul -->
-             <p class="font-serif italic text-[25px] text-D">NAMPAN</p>
+  <mainLayout>
+    <div class="p-6 flex flex-col sm:flex-row justify-between items-start gap-3">
+      <p class="font-serif italic text-[25px] text-D">NAMPAN</p>
 
-            <!-- Searchbar -->
-            <div class="flex justify-end mt-2">
-                <div class="w-64">
-                    <searchbar v-model:search="searchQuery" />
-                </div>
-            </div>
-
-            <!-- Tombol -->
-            <div class="flex gap-2 mt-3 justify-end">
-                <!-- Tambah Nampan -->
-                <button
-                    @click="openModal"
-                    class="px-4 py-2 hover:bg-B bg-C rounded-md shadow font-semibold"
-                >
-                    Tambah Nampan
-                </button>
-
-                <!-- Kosongkan -->
-                <button
-                    @click="openConfirmModal"
-                    class="px-3 py-2 bg-red-500 hover:bg-red-600 text-white rounded-md"
-                >
-                    Kosongkan
-                </button>
-            </div>
+      <div class="flex flex-col gap-3 justify-end w-full sm:w-auto">
+        <Searchbar v-model:search="searchQuery" />
+        <div class="flex w-full gap-2" v-if="isAdmin">
+          <button @click="openModal" class="px-4 py-2 sm:px-2 sm:py-1 hover:bg-B bg-C rounded-md shadow w-full">
+            Tambah Nampan
+          </button>
+          <button @click="promptEmptyAllTrays" class="px-4 py-2 sm:px-2 sm:py-1 bg-red-500 hover:bg-red-600 text-white rounded-md w-full">
+            Kosongkan Semua Nampan
+          </button>
         </div>
+      </div>
+    </div>
 
-        <!-- Search + List -->
+    <div class="px-6" v-if="alert">
+      <div v-if="alert.error" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4" role="alert">
+        <strong class="font-bold">Error!</strong>
+        <span class="block sm:inline">{{ alert.error }}</span>
+      </div>
+      <div v-if="alert.success" class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative mb-4" role="alert">
+        <strong class="font-bold">Success!</strong>
+        <span class="block sm:inline">{{ alert.success }}</span>
+      </div>
+    </div>
 
-        <TrayList :search="searchQuery" @edit="editTray" @delete="deleteTray" />
+    <TrayList :search="searchQuery" @edit="editTray" @delete="promptDeleteTray" />
 
-        <!-- Modal Tambah/Edit Nampan -->
-        <div
-            v-if="showModal"
-            class="fixed inset-0 bg-black/75 flex justify-center items-center z-50"
-        >
-            <div class="bg-white rounded-lg shadow-lg p-6 w-96">
-                <h2 class="text-lg font-semibold mb-4" style="color: #102c57">
-                    Tambah Nampan
-                </h2>
-
-                <label
-                    class="block mb-2 text-sm font-medium"
-                    style="color: #102c57"
-                    >Nama Nampan</label
-                >
-                <input
-                    v-model="trayName"
-                    type="text"
-                    placeholder="Contoh: A4"
-                    class="w-full border rounded-md p-2 mb-4"
-                />
-
-                <div class="flex justify-end gap-2">
-                    <button
-                        @click="closeModal"
-                        class="px-4 py-2 bg-gray-400 hover:bg-gray-500 text-white rounded-md"
-                    >
-                        Cancel
-                    </button>
-
-                    <button
-                        @click="saveTray"
-                        class="px-4 py-2 bg-[#DAC0A3] hover:bg-[#C9A77E] rounded-md"
-                        style="color: #102c57"
-                    >
-                        Save
-                    </button>
-                </div>
-            </div>
+    <!-- Modal untuk tambah/edit nampan -->
+    <div v-if="showModal" class="fixed inset-0 bg-black/75 flex justify-center items-center z-50 backdrop-blur-sm">
+      <div class="bg-white rounded-lg shadow-lg p-6 w-96 transform transition-all duration-300 scale-95 opacity-0 animate-fadeIn">
+        <h2 class="text-lg font-semibold mb-4 text-D">
+          {{ editingTrayId ? "Edit Nampan" : "Tambah Nampan" }}
+        </h2>
+        <label class="block mb-2 text-sm font-medium text-D" for="tray-name">Nama Nampan</label>
+        <InputField id="tray-name" v-model="trayName" type="text" placeholder="Contoh: A1" class="mb-1" />
+        <p v-if="errorCreate" class="text-red-500 text-sm mb-4">{{ errorCreate }}</p>
+        <div class="flex justify-end mt-3 gap-2">
+          <button @click="closeModal" class="px-4 py-2 bg-gray-400 hover:bg-gray-500 text-white rounded-md">Batal</button>
+          <button @click="saveTray" class="px-4 py-2 bg-C hover:bg-C/80 rounded-md text-D">Simpan</button>
         </div>
+      </div>
+    </div>
 
-        <!-- Modal Konfirmasi Kosongkan -->
-        <div
-            v-if="showConfirmModal"
-            class="fixed inset-0 bg-black bg-opacity-40 flex justify-center items-center z-50"
-        >
-            <div class="bg-white rounded-lg shadow-lg p-6 w-96 text-center">
-                <h2 class="text-xl font-bold mb-3" style="color: #102c57">
-                    Kosongkan semua nampan?
-                </h2>
-                <p class="text-gray-600 mb-6">
-                    Semua item akan dimasukkan ke brankas. <br />
-                    Masuk ke menu ‘Brankas’ untuk mengembalikan item ke nampan.
-                </p>
-                <div class="flex justify-center gap-4">
-                    <button
-                        @click="closeConfirmModal"
-                        class="px-5 py-2 bg-gray-300 hover:bg-gray-400 rounded-md font-semibold"
-                    >
-                        Batal
-                    </button>
-                    <button
-                        @click="confirmEmptyTray"
-                        class="px-5 py-2 bg-red-500 hover:bg-red-600 text-white rounded-md font-semibold"
-                    >
-                        Ya
-                    </button>
-                </div>
-            </div>
-        </div>
-    </mainLayout>
+    <!-- Komponen ConfirmDeleteModal yang diperbaiki -->
+    <ConfirmDeleteModal
+      :isOpen="isConfirmModalVisible"
+      :title="confirmModalTitle"
+      :message="confirmModalMessage"
+      :confirmText="confirmText"
+      :cancelText="cancelText"
+      @confirm="handleConfirmAction"
+      @cancel="closeConfirmModal"
+    />
+  </mainLayout>
 </template>
 
 <script setup>
 import { ref } from "vue";
 import axios from "axios";
 import mainLayout from "../layouts/mainLayout.vue";
-import searchbar from "../components/searchbar.vue";
+import Searchbar from "../components/Searchbar.vue";
 import TrayList from "../components/TrayList.vue";
+import InputField from "../components/InputField.vue";
+import ConfirmDeleteModal from "../components/ConfirmDeleteModal.vue";
 
+const isAdmin = localStorage.getItem("role") === "owner";
 const searchQuery = ref("");
 const showModal = ref(false);
-const showConfirmModal = ref(false);
 const trayName = ref("");
 const editingTrayId = ref(null);
+const errorCreate = ref("");
+const timer = ref(null);
+const alert = ref(null);
 
-// buka modal tambah/edit
-const openModal = () => {
-    showModal.value = true;
-};
+// State untuk modal konfirmasi
+const isConfirmModalVisible = ref(false);
+const confirmModalTitle = ref("");
+const confirmModalMessage = ref("");
+const confirmText = ref("Ya, Konfirmasi");
+const cancelText = ref("Batal");
+const trayToDeleteId = ref(null);
+
+const openModal = () => { showModal.value = true; };
 const closeModal = () => {
-    trayName.value = "";
-    editingTrayId.value = null;
-    showModal.value = false;
+  trayName.value = "";
+  editingTrayId.value = null;
+  showModal.value = false;
 };
 
-// simpan nampan
 const saveTray = async () => {
-    if (!trayName.value.trim()) {
-        alert("Nama Nampan tidak boleh kosong");
-        return;
-    }
-    try {
-        if (editingTrayId.value) {
-            await axios.put(
-                `/api/nampan/${editingTrayId.value}`,
-                { nama: trayName.value },
-                {
-                    headers: {
-                        Authorization: `Bearer ${localStorage.getItem(
-                            "token"
-                        )}`,
-                    },
-                }
-            );
-            alert("Nampan berhasil diupdate");
-        } else {
-            await axios.post(
-                "/api/nampan",
-                { nama: trayName.value },
-                {
-                    headers: {
-                        Authorization: `Bearer ${localStorage.getItem(
-                            "token"
-                        )}`,
-                    },
-                }
-            );
-            alert("Nampan berhasil ditambahkan");
-        }
-        closeModal();
-        location.reload();
-    } catch (error) {
-        console.error(error);
-        alert("Gagal menyimpan nampan");
+  if (!trayName.value.trim()) {
+    errorCreate.value = "Nama nampan tidak boleh kosong.";
+    clearTimeout(timer.value);
+    timer.value = setTimeout(() => { errorCreate.value = ""; }, 3000);
+    return;
+  }
+  try {
+    const token = localStorage.getItem("token");
+    const headers = { Authorization: `Bearer ${token}` };
+    if (editingTrayId.value) {
+      await axios.put(`/api/nampan/${editingTrayId.value}`, { nama: trayName.value }, { headers });
+      alert.value = { success: "Nampan berhasil diperbarui" };
+    } else {
+      await axios.post("/api/nampan", { nama: trayName.value }, { headers });
+      alert.value = { success: "Nampan berhasil ditambahkan" };
     }
+    closeModal();
+    location.reload();
+  } catch (error) {
+    console.error(error);
+    errorCreate.value = error.response?.data?.message || "Gagal menyimpan nampan.";
+    clearTimeout(timer.value);
+    timer.value = setTimeout(() => { errorCreate.value = ""; }, 3000);
+  }
 };
 
-// === Konfirmasi kosongkan nampan ===
-const openConfirmModal = () => {
-    showConfirmModal.value = true;
-};
 const closeConfirmModal = () => {
-    showConfirmModal.value = false;
+  isConfirmModalVisible.value = false;
+  trayToDeleteId.value = null;
+  confirmModalTitle.value = "";
+  confirmModalMessage.value = "";
+  confirmText.value = "Ya, Konfirmasi";
+  cancelText.value = "Batal";
 };
 
-const confirmEmptyTray = async () => {
+const promptEmptyAllTrays = () => {
+  confirmModalTitle.value = "Kosongkan semua nampan?";
+  confirmModalMessage.value = `Semua item akan dimasukkan ke <span class="font-semibold">Brankas</span>.<br />Masuk ke menu <b>Brankas</b> untuk mengembalikan item ke nampan.`;
+  confirmText.value = "Ya, Kosongkan";
+  cancelText.value = "Batal";
+  trayToDeleteId.value = null;
+  isConfirmModalVisible.value = true;
+};
+
+const promptDeleteTray = (tray) => {
+  confirmModalTitle.value = `Hapus Nampan "${tray.nama}"?`;
+  confirmModalMessage.value = "Semua item di dalam nampan ini juga akan dipindahkan ke Brankas. Aksi ini tidak dapat dibatalkan.";
+  confirmText.value = "Ya, Hapus";
+  cancelText.value = "Batal";
+  trayToDeleteId.value = tray.id;
+  isConfirmModalVisible.value = true;
+};
+
+const handleConfirmAction = async () => {
+  if (trayToDeleteId.value) {
+    // Hapus nampan spesifik
     try {
-        await axios.delete("/api/kosongkan-nampan", {
-            headers: {
-                Authorization: `Bearer ${localStorage.getItem("token")}`,
-            },
-        });
-        alert("Semua item berhasil dipindahkan ke Brankas");
-        closeConfirmModal();
-        location.reload();
+      await axios.delete(`/api/nampan/${trayToDeleteId.value}`, {
+        headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
+      });
+      alert.value = { success: "Nampan berhasil dihapus" };
+      location.reload();
     } catch (error) {
-        console.error(error);
-        alert("Gagal mengosongkan nampan");
+      console.error(error);
+      alert.value = { error: "Gagal menghapus nampan. Silakan coba lagi." };
     }
+  } else {
+    // Kosongkan semua nampan
+    try {
+      await axios.delete("/api/kosongkan-nampan", {
+        headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
+      });
+      alert.value = { success: "Semua nampan berhasil dikosongkan" };
+      location.reload();
+    } catch (error) {
+      console.error(error);
+      alert.value = { error: "Gagal mengosongkan nampan. Silakan coba lagi." };
+    }
+  }
+  
+  closeConfirmModal();
+  clearTimeout(timer.value);
+  timer.value = setTimeout(() => { alert.value = null }, 3000);
 };
 
+// Fungsi untuk edit nampan
 const editTray = (tray) => {
-    trayName.value = tray.nama;
-    editingTrayId.value = tray.id;
-    showModal.value = true;
-};
-
-const deleteTray = async (id) => {
-    if (!confirm("Yakin ingin menghapus nampan ini?")) return;
-    try {
-        await axios.delete(`/api/nampan/${id}`, {
-            headers: {
-                Authorization: `Bearer ${localStorage.getItem("token")}`,
-            },
-        });
-        alert("Nampan berhasil dihapus");
-        location.reload();
-    } catch (error) {
-        console.error(error);
-        alert("Gagal menghapus nampan");
-    }
+  trayName.value = tray.nama;
+  editingTrayId.value = tray.id;
+  showModal.value = true;
 };
 </script>
+
+<style scoped>
+@keyframes fadeIn {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+.animate-fadeIn {
+  animation: fadeIn 0.25s ease-out forwards;
+}
+</style>
diff --git a/routes/web.php b/routes/web.php
index fa6ec0c..dcca87d 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -10,7 +10,6 @@ use App\Http\Controllers\SalesController;
 use App\Http\Controllers\UserController;
 use App\Http\Controllers\TransaksiController;
 use App\Http\Controllers\LaporanController;
-use App\Models\Kategori;
 use Illuminate\Support\Facades\Route;
 
 
@@ -43,7 +42,7 @@ Route::prefix('api')->group(function () {
             Route::get('ringkasan', [LaporanController::class, 'ringkasan']);
             Route::get('detail-per-produk', [LaporanController::class, 'detailPerProduk']);
             Route::get('detail-per-nampan', [LaporanController::class, 'detailPerNampan']);
-            
+
             Route::get('export/ringkasan', [LaporanController::class, 'exportRingkasan']);
             Route::get('export/detail-pernampan', [LaporanController::class, 'exportDetailNampan']);
             Route::get('export/detail-perproduk', [LaporanController::class, 'exportDetailProduk']);