diff --git a/resources/js/components/CreateItemModal.vue b/resources/js/components/CreateItemModal.vue
index bd3c622..88101f7 100644
--- a/resources/js/components/CreateItemModal.vue
+++ b/resources/js/components/CreateItemModal.vue
@@ -154,7 +154,7 @@ const createItem = async () => {
 
     success.value = true;
     createdItem.value = response.data.data;
-    console.log('Item created:', createdItem);
+    // console.log('Item created:', createdItem);
 
     emit('itemAdded'); // 🔔 penting
 
diff --git a/resources/js/components/DetailPerNampan.vue b/resources/js/components/DetailPerNampan.vue
index d56ce61..963b199 100644
--- a/resources/js/components/DetailPerNampan.vue
+++ b/resources/js/components/DetailPerNampan.vue
@@ -303,7 +303,7 @@ const getSortIcon = (column) => {
 };
 
 const handleDateChange = (newDateRange) => {
-  console.log('Date range changed:', newDateRange);
+  // console.log('Date range changed:', newDateRange);
   // Reset pagination when date changes
   pagination.value.current_page = 1;
   fetchData(1);
@@ -384,9 +384,9 @@ const fetchData = async (page = 1) => {
         total: response.data.nampan ? response.data.nampan.length : 0,
       };
     }
-    console.log('Data laporan nampan berhasil diambil:', data.value);
+    // console.log('Data laporan nampan berhasil diambil:', data.value);
   } catch (error) {
-    console.error('Gagal mengambil data laporan nampan:', error);
+    console.error('Gagal mengambil data laporan nampan');
     data.value = null;
     pagination.value = {
       current_page: 1,
diff --git a/resources/js/components/DetailPerProduk.vue b/resources/js/components/DetailPerProduk.vue
index 89921c3..607df72 100644
--- a/resources/js/components/DetailPerProduk.vue
+++ b/resources/js/components/DetailPerProduk.vue
@@ -304,7 +304,7 @@ const getSortIcon = (column) => {
 };
 
 const handleDateChange = (newDateRange) => {
-  console.log('Date range changed:', newDateRange);
+  // console.log('Date range changed:', newDateRange);
   // Reset pagination when date changes
   pagination.value.current_page = 1;
   fetchData(1);
@@ -386,7 +386,7 @@ const fetchData = async (page = 1) => {
         total: response.data.produk ? response.data.produk.length : 0,
       };
     }
-    console.log('Data laporan produk berhasil diambil:', data.value);
+    // console.log('Data laporan produk berhasil diambil:', data.value);
   } catch (error) {
     console.error('Gagal mengambil data laporan produk:', error);
     data.value = null;
diff --git a/resources/js/components/EditAkun.vue b/resources/js/components/EditAkun.vue
index 1aec4b6..325f2a2 100644
--- a/resources/js/components/EditAkun.vue
+++ b/resources/js/components/EditAkun.vue
@@ -202,9 +202,9 @@
   };
   
   onMounted(() => {
-    console.log("Akun.id:", props.akun.id);
-    console.log("LoggedInId:", loggedInId.value);
-    console.log("isEditingSelf:", isEditingSelf.value);
+    // console.log("Akun.id:", props.akun.id);
+    // console.log("LoggedInId:", loggedInId.value);
+    // console.log("isEditingSelf:", isEditingSelf.value);
   });
   </script>
   
\ No newline at end of file
diff --git a/resources/js/components/KasirForm.vue b/resources/js/components/KasirForm.vue
index 235436b..6b11af4 100644
--- a/resources/js/components/KasirForm.vue
+++ b/resources/js/components/KasirForm.vue
@@ -199,7 +199,7 @@ const inputItem = async () => {
     // Format harga untuk tampilan
     hargaJualFormatted.value = formatNumber(item.value.produk.harga_jual);
 
-    console.log(item.value);
+    // console.log(item.value);
 
     if (item.value.is_sold) {
       throw new Error("Item sudah terjual");
diff --git a/resources/js/components/KasirTransaksiList.vue b/resources/js/components/KasirTransaksiList.vue
index a33ac85..cb7f1fd 100644
--- a/resources/js/components/KasirTransaksiList.vue
+++ b/resources/js/components/KasirTransaksiList.vue
@@ -184,7 +184,7 @@ const formatTime = (dateString) => {
 const lihatDetail = async (trx) => {
   try {
     isDetailLoading.value = true
-    console.log('Fetching detail untuk transaksi:', trx.kode_transaksi)
+    // console.log('Fetching detail untuk transaksi:', trx.kode_transaksi)
 
     const response = await axios.get(`/api/transaksi/${trx.id}`, {
       headers: {
@@ -192,7 +192,7 @@ const lihatDetail = async (trx) => {
       },
     })
 
-    console.log('Response detail transaksi:', response.data)
+    // console.log('Response detail transaksi:', response.data)
     selectedTransaksi.value = response.data
     isDetailOpen.value = true
 
diff --git a/resources/js/components/NavDesktop.vue b/resources/js/components/NavDesktop.vue
index 04303ac..dd515c9 100644
--- a/resources/js/components/NavDesktop.vue
+++ b/resources/js/components/NavDesktop.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { inject } from "vue";
+import { useRoute } from "vue-router";
 
 const {
   logo,
@@ -8,6 +9,19 @@ const {
   toggleDropdown,
   logout
 } = inject('navigationData');
+
+const route = useRoute();
+
+// Function to check if a menu item or its subItems are active
+const isMenuActive = (item) => {
+  if (item.route) {
+    return route.path === item.route;
+  }
+  if (item.subItems) {
+    return item.subItems.some(sub => route.path === sub.route);
+  }
+  return false;
+};
 </script>
 
 <template>
@@ -24,10 +38,13 @@ const {
       <div class="px-8 pb-4">
         <div class="flex justify-around items-center gap-4">
           <template v-for="(item, index) in items" :key="index">
-
             <div v-if="item.subItems" class="relative flex-1">
-              <button @click="toggleDropdown(index)"
-                class="w-full text-center text-lg text-D hover:underline cursor-pointer flex items-center justify-center gap-2 transition-colors duration-200 py-2">
+              <button 
+                @click="toggleDropdown(index)"
+                :class="[
+                  'w-full text-center text-lg text-D hover:underline cursor-pointer flex items-center justify-center gap-2 transition-colors duration-200 py-2',
+                  { 'underline underline-offset-4': isMenuActive(item) }
+                ]">
                 {{ item.label }}
                 <svg :class="{ 'rotate-180': openDropdownIndex === index }"
                   class="w-4 h-4 transition-transform duration-200" fill="none" stroke="currentColor"
@@ -41,9 +58,13 @@ const {
                 <ul>
                   <li v-for="(sub, subIndex) in item.subItems" :key="subIndex"
                     class="hover:bg-A transition-colors duration-200">
-                    <router-link :to="sub.route" 
+                    <router-link 
+                      :to="sub.route"
                       @click="openDropdownIndex = null"
-                      class="block w-full h-full px-4 py-2 text-D">
+                      :class="[
+                        'block w-full h-full px-4 py-2 text-D',
+                        { 'underline underline-offset-4': route.path === sub.route }
+                      ]">
                       {{ sub.label }}
                     </router-link>
                   </li>
@@ -51,8 +72,13 @@ const {
               </div>
             </div>
 
-            <router-link v-else :to="item.route"
-              class="flex-1 text-center text-lg text-D hover:underline cursor-pointer transition-colors duration-200 py-2">
+            <router-link 
+              v-else 
+              :to="item.route"
+              :class="[
+                'flex-1 text-center text-lg text-D hover:underline cursor-pointer transition-colors duration-200 py-2',
+                { 'underline underline-offset-4': isMenuActive(item) }
+              ]">
               {{ item.label }}
             </router-link>
           </template>
diff --git a/resources/js/components/NavMobile.vue b/resources/js/components/NavMobile.vue
index e2eccc5..49b93ad 100644
--- a/resources/js/components/NavMobile.vue
+++ b/resources/js/components/NavMobile.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { inject } from "vue";
+import { useRoute } from "vue-router";
 
-// Mengambil data dan fungsi yang disediakan dari komponen induk
 const {
   logo,
   items,
@@ -12,21 +12,33 @@ const {
   closeMobileMenu,
   logout
 } = inject('navigationData');
+
+const route = useRoute();
+
+// Function to check if a menu item or its subItems are active
+const isMenuActive = (item) => {
+  if (item.route) {
+    return route.path === item.route;
+  }
+  if (item.subItems) {
+    return item.subItems.some(sub => route.path === sub.route);
+  }
+  return false;
+};
 </script>
 
 <template>
   <div class="md:hidden">
     <div class="bg-D h-5 shadow-lg"></div>
     
-      <button @click="toggleMobileMenu"
+    <button @click="toggleMobileMenu"
       :class="{ 'hidden': isMobileMenuOpen, 'block': !isMobileMenuOpen }"
-        class="fixed top-4 left-4 text-D bg-C hover:bg-B transition-colors duration-200 p-0.5 rounded-sm z-[9999]">
-        <svg class="w-7 h-7" fill="none"
-          stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
-        </svg>
-      </button>
-    
+      class="fixed top-4 left-4 text-D bg-C hover:bg-B transition-colors duration-200 p-0.5 rounded-sm z-[9999]">
+      <svg class="w-7 h-7" fill="none"
+        stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+      </svg>
+    </button>
 
     <div :class="{ 'translate-x-0': isMobileMenuOpen, '-translate-x-full': !isMobileMenuOpen }"
       class="fixed inset-y-0 left-0 w-64 bg-A transform transition-transform duration-300 ease-in-out z-50 shadow-xl">
@@ -43,7 +55,10 @@ const {
         <template v-for="(item, index) in items" :key="index">
           <div v-if="item.subItems" class="px-4 py-2">
             <button @click="toggleDropdown(index)"
-              class="w-full flex justify-between items-center text-left text-lg text-D hover:bg-B rounded-md px-3 py-2 transition-colors duration-200">
+              :class="[
+                'w-full flex justify-between items-center text-left text-lg text-D hover:bg-B rounded-md px-3 py-2 transition-colors duration-200',
+                { 'bg-C': isMenuActive(item) }
+              ]">
               <span>{{ item.label }}</span>
               <svg :class="{ 'rotate-180': openDropdownIndex === index }" class="w-4 h-4 transition-transform duration-200"
                 fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -62,16 +77,22 @@ const {
               <div v-if="openDropdownIndex === index" class="mt-2 ml-4 space-y-1 overflow-hidden">
                 <router-link v-for="(sub, subIndex) in item.subItems" :key="subIndex" :to="sub.route"
                   @click="closeMobileMenu"
-                  class="block px-3 py-2 text-D hover:bg-B rounded-md transition-colors duration-200">
+                  :class="[
+                    'block px-3 py-2 text-D hover:bg-B rounded-md transition-colors duration-200',
+                    { 'bg-C': route.path === sub.route }
+                  ]">
                   {{ sub.label }}
                 </router-link>
               </div>
             </transition>
-            </div>
+          </div>
 
           <div v-else class="px-4">
             <router-link :to="item.route" @click="closeMobileMenu"
-              class="block px-3 py-2 text-lg text-D hover:bg-B rounded-md transition-colors duration-200">
+              :class="[
+                'block px-3 py-2 text-lg text-D hover:bg-B rounded-md transition-colors duration-200',
+                { 'bg-C': isMenuActive(item) }
+              ]">
               {{ item.label }}
             </router-link>
           </div>
diff --git a/resources/js/components/RiwayatTransaksi.vue b/resources/js/components/RiwayatTransaksi.vue
index b70b7ec..b2687a1 100644
--- a/resources/js/components/RiwayatTransaksi.vue
+++ b/resources/js/components/RiwayatTransaksi.vue
@@ -293,7 +293,7 @@ const fetchTransaksi = async (page = 1) => {
     transaksi.value = response.data.data || []
     pagination.value = response.data.pagination || null
 
-    console.log("data", transaksi.value)
+    // console.log("data", transaksi.value)
   } catch (error) {
     console.error('Error fetching transaksi:', error)
     transaksi.value = []
diff --git a/resources/js/components/StrukOverlay.vue b/resources/js/components/StrukOverlay.vue
index 02203c2..abdc190 100644
--- a/resources/js/components/StrukOverlay.vue
+++ b/resources/js/components/StrukOverlay.vue
@@ -355,7 +355,7 @@ const handleSimpan = () => {
 }
 
 const simpanTransaksi = async (dataTransaksi) => {
-  console.log('Data transaksi yang akan disimpan:', dataTransaksi);
+  // console.log('Data transaksi yang akan disimpan:', dataTransaksi);
 
   try {
     const response = await axios.post('/api/transaksi', dataTransaksi, {
diff --git a/resources/js/components/TrayList.vue b/resources/js/components/TrayList.vue
index 73e138d..68371b1 100644
--- a/resources/js/components/TrayList.vue
+++ b/resources/js/components/TrayList.vue
@@ -82,68 +82,61 @@
         </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 class="bg-white rounded-xl shadow-lg max-w-sm w-full p-6 relative">
-      <div class="flex justify-center mb-2">
-        <div class="p-2 border rounded-lg">
-          <img :src="qrCodeUrl" alt="QR Code" class="size-36" />
+    <!-- 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 class="bg-white rounded-xl shadow-lg max-w-sm w-full p-6 relative">
+        <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>
 
-      <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 @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 -->
-      <div class="mb-4">
-        <label for="tray-select" class="block text-sm font-medium mb-1">Nama Nampan</label>
-        <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 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>
 
-      <div class="flex justify-end gap-2">
+        <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>
 
-        <button @click="closePopup" class="px-4 py-2 rounded bg-gray-400 hover:bg-gray-500 text-white transition">
-          {{ isAdmin ? 'Batal' : 'Tutup' }}
-        </button>
-        <button @click="showDeleteConfirm = true"
-                class="px-4 py-2 rounded bg-red-500 text-white hover:bg-red-600 transition flex items-center">
-          <i class="fas fa-trash mr-2"></i>Hapus
-        </button>
-        <button v-if="isAdmin" @click="saveMove" :disabled="!selectedTrayId" class="px-4 py-2 rounded transition"
-          :class="selectedTrayId ? 'bg-C hover:bg-C/80 text-D' : 'bg-gray-400 cursor-not-allowed'">
-          Simpan
-        </button>
+        <!-- Dropdown -->
+        <div class="mb-4">
+          <label for="tray-select" class="block text-sm font-medium mb-1">Nama Nampan</label>
+          <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 bg-gray-400 hover:bg-gray-500 text-white transition">
+            {{ isAdmin ? 'Batal' : 'Tutup' }}
+          </button>
+          <button @click="showDeleteConfirm = true"
+            class="px-4 py-2 rounded bg-red-500 text-white hover:bg-red-600 transition flex items-center">
+            <i class="fas fa-trash mr-2"></i>Hapus
+          </button>
+          <button v-if="isAdmin" @click="saveMove" :disabled="!selectedTrayId" class="px-4 py-2 rounded transition"
+            :class="selectedTrayId ? 'bg-C hover:bg-C/80 text-D' : 'bg-gray-400 cursor-not-allowed'">
+            Simpan
+          </button>
+        </div>
       </div>
     </div>
-  </div>
 
-      <!-- Modal Konfirmasi Hapus -->
-    <ConfirmDeleteModal 
-      :isOpen="showDeleteConfirm"
-      title="Konfirmasi Hapus Item"
-      message="Apakah kamu yakin ingin menghapus item ini?"
-      confirmText="Ya, Hapus"
-      cancelText="Batal"
-      @confirm="confirmDelete"
-      @cancel="cancelDelete"
-    />
+    <!-- Modal Konfirmasi Hapus -->
+    <ConfirmDeleteModal :isOpen="showDeleteConfirm" title="Konfirmasi Hapus Item"
+      message="Apakah kamu yakin ingin menghapus item ini?" confirmText="Ya, Hapus" cancelText="Batal"
+      @confirm="confirmDelete" @cancel="cancelDelete" />
+  </div>
 </template>
 
 <script setup>
@@ -159,6 +152,7 @@ const props = defineProps({
 });
 
 const emit = defineEmits(["edit", "delete"]);
+
 const trays = ref([]);
 const loading = ref(true);
 const error = ref(null);
@@ -167,6 +161,7 @@ const error = ref(null);
 const isPopupVisible = ref(false);
 const selectedItem = ref(null);
 const selectedTrayId = ref("");
+const showDeleteConfirm = ref(false);
 
 // QR Code generator
 const qrCodeUrl = computed(() => {
@@ -235,44 +230,23 @@ const printQR = () => {
   }
 };
 
-
-const showDeleteConfirm = ref(false);
-
 const confirmDelete = async () => {
   if (!selectedItem.value) return;
 
   try {
-    // Panggil API hapus item
     await axios.delete(`/api/item/${selectedItem.value.id}`, {
       headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
     });
 
-    // Tampilkan alert sukses
-    alert.value = { success: `Item ${selectedItem.value.kode_item} berhasil dihapus.` };
-
-    // Refresh data
     await refreshData();
-
-    // Tutup modal & popup
     showDeleteConfirm.value = false;
     closePopup();
-
-    // Auto hide alert
-    clearTimeout(timer.value);
-    timer.value = setTimeout(() => { alert.value = null; }, 3000);
-
   } catch (err) {
     console.error("Gagal menghapus item:", err.response?.data || err);
-    alert.value = { error: err.response?.data?.message || "Gagal menghapus item. Silakan coba lagi." };
-
-    // Auto hide alert error
-    clearTimeout(timer.value);
-    timer.value = setTimeout(() => { alert.value = null; }, 5000);
+    error.value = err.response?.data?.message || "Gagal menghapus item. Silakan coba lagi.";
   }
 };
 
-
-
 const cancelDelete = () => {
   showDeleteConfirm.value = false;
 };
@@ -307,6 +281,7 @@ const saveMove = async () => {
     closePopup();
   } catch (err) {
     console.error("Gagal memindahkan item:", err.response?.data || err);
+    error.value = err.response?.data?.message || "Gagal memindahkan item. Silakan coba lagi.";
   }
 };
 
@@ -345,7 +320,7 @@ const emptyTrays = computed(() => {
   return trays.value.filter(tray => parseFloat(totalWeight(tray)) === 0).length;
 });
 
-// --- Ambil data nampan + item ---
+// Ambil data nampan + item
 const refreshData = async () => {
   try {
     const nampanRes = await axios.get("/api/nampan", {
@@ -370,4 +345,7 @@ const filteredTrays = computed(() => {
 onMounted(() => {
   refreshData();
 });
+
+// Expose refreshData to parent
+defineExpose({ refreshData });
 </script>
\ No newline at end of file
diff --git a/resources/js/pages/EditProduk.vue b/resources/js/pages/EditProduk.vue
index 1d8cd70..97ac7f8 100644
--- a/resources/js/pages/EditProduk.vue
+++ b/resources/js/pages/EditProduk.vue
@@ -287,7 +287,7 @@ const loadProduk = async () => {
         },
     });
     const produk = response.data;
-    console.log(produk);
+    // console.log(produk);
     
     form.value = {
         nama: produk.nama,
@@ -307,7 +307,7 @@ const loadFoto = async () => {
             },
         });
         uploadedImages.value = response.data;
-        console.log(uploadedImages.value);
+        // console.log(uploadedImages.value);
     } catch (e) {
         console.error(e);
         
diff --git a/resources/js/pages/Kasir.vue b/resources/js/pages/Kasir.vue
index 695aa54..5a41651 100644
--- a/resources/js/pages/Kasir.vue
+++ b/resources/js/pages/Kasir.vue
@@ -67,7 +67,7 @@ const fetchTransaksiHariIni = async (page = 1) => {
             end_date: today
         }).toString();
 
-        console.log('Fetching transaksi hari ini:', params);
+        // console.log('Fetching transaksi hari ini:', params);
 
         const res = await axios.get(`/api/transaksi?${params}`, {
             headers: {
@@ -80,7 +80,7 @@ const fetchTransaksiHariIni = async (page = 1) => {
             pagination: res.data.pagination || null
         };
         
-        console.log("Transaksi hari ini:", transaksi.value);
+        // console.log("Transaksi hari ini:", transaksi.value);
 
     } catch (err) {
         console.error("Gagal fetch transaksi hari ini:", err);
@@ -103,7 +103,7 @@ const fetchTransaksiHariIni = async (page = 1) => {
 
 // Handle pagination
 const handlePageChange = (page) => {
-    console.log('Page changed to:', page);
+    // console.log('Page changed to:', page);
     
     if (page >= 1 && page <= (transaksi.value.pagination?.last_page || 1)) {
         fetchTransaksiHariIni(page);
@@ -112,7 +112,7 @@ const handlePageChange = (page) => {
 
 // Handle transaksi baru dari KasirForm
 const handleTransaksiSaved = async (newTransaksi) => {
-    console.log("Transaksi baru disimpan:", newTransaksi);
+    // console.log("Transaksi baru disimpan:", newTransaksi);
     
     // Karena ini transaksi hari ini, selalu tambahkan ke list
     const formattedNewTransaksi = {
@@ -139,7 +139,7 @@ const handleTransaksiSaved = async (newTransaksi) => {
         }
     }
     
-    console.log("Transaksi baru ditambahkan ke list hari ini");
+    // console.log("Transaksi baru ditambahkan ke list hari ini");
 };
 
 // Auto-refresh setiap 10 detik untuk update real-time
diff --git a/resources/js/pages/Kategori.vue b/resources/js/pages/Kategori.vue
index 4a36a79..f1a1b66 100644
--- a/resources/js/pages/Kategori.vue
+++ b/resources/js/pages/Kategori.vue
@@ -109,7 +109,7 @@ const fetchKategoris = async () => {
 			},
 		});
 		kategori.value = response.data;
-		console.log("Data kategori:", response.data);
+		// console.log("Data kategori:", response.data);
 	} catch (error) {
 		console.error("Error fetching kategori:", error);
 	} finally {
@@ -149,7 +149,7 @@ const confirmDelete = async () => {
 				Authorization: `Bearer ${localStorage.getItem("token")}`,
 			},
 		});
-		console.log("Kategori berhasil dihapus");
+		// console.log("Kategori berhasil dihapus");
 		fetchKategoris();
 	} catch (error) {
 		console.error("Error deleting kategori:", error);
diff --git a/resources/js/pages/Tray.vue b/resources/js/pages/Tray.vue
index c4d6eb1..35a2f84 100644
--- a/resources/js/pages/Tray.vue
+++ b/resources/js/pages/Tray.vue
@@ -9,7 +9,8 @@
           <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">
+          <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>
@@ -17,21 +18,24 @@
     </div>
 
     <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>
+      <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>
+      <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="promptDeleteTray" />
+    <TrayList ref="trayList" :search="searchQuery" @edit="editTray" @delete="promptDeleteTray" />
 
     <!-- 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">
+      <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>
@@ -39,22 +43,16 @@
         <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="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>
 
     <!-- Komponen ConfirmDeleteModal yang diperbaiki -->
-    <ConfirmDeleteModal
-      :isOpen="isConfirmModalVisible"
-      :title="confirmModalTitle"
-      :message="confirmModalMessage"
-      :confirmText="confirmText"
-      :cancelText="cancelText"
-      @confirm="handleConfirmAction"
-      @cancel="closeConfirmModal"
-    />
+    <ConfirmDeleteModal :isOpen="isConfirmModalVisible" :title="confirmModalTitle" :message="confirmModalMessage"
+      :confirmText="confirmText" :cancelText="cancelText" @confirm="handleConfirmAction" @cancel="closeConfirmModal" />
   </mainLayout>
 </template>
 
@@ -75,6 +73,7 @@ const editingTrayId = ref(null);
 const errorCreate = ref("");
 const timer = ref(null);
 const alert = ref(null);
+const trayList = ref(null); // Add ref for TrayList
 
 // State untuk modal konfirmasi
 const isConfirmModalVisible = ref(false);
@@ -108,8 +107,11 @@ const saveTray = async () => {
       await axios.post("/api/nampan", { nama: trayName.value }, { headers });
       alert.value = { success: "Nampan berhasil ditambahkan" };
     }
+    timer.value = setTimeout(() => { alert.value = null; }, 5000);
     closeModal();
-    location.reload();
+    if (trayList.value) {
+      await trayList.value.refreshData(); // Call refreshData on TrayList
+    }
   } catch (error) {
     console.error(error);
     errorCreate.value = error.response?.data?.message || "Gagal menyimpan nampan.";
@@ -153,7 +155,10 @@ const handleConfirmAction = async () => {
         headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
       });
       alert.value = { success: "Nampan berhasil dihapus" };
-      location.reload();
+      if (trayList.value) {
+        await trayList.value.refreshData(); // Call refreshData on TrayList
+      }
+      timer.value = setTimeout(() => { alert.value = null; }, 5000);
     } catch (error) {
       console.error(error);
       alert.value = { error: "Gagal menghapus nampan. Silakan coba lagi." };
@@ -165,7 +170,11 @@ const handleConfirmAction = async () => {
         headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
       });
       alert.value = { success: "Semua nampan berhasil dikosongkan" };
-      location.reload();
+      if (trayList.value) {
+        await trayList.value.refreshData(); // Call refreshData on TrayList
+      }
+      timer.value = setTimeout(() => { alert.value = null; }, 5000);
+
     } catch (error) {
       console.error(error);
       alert.value = { error: "Gagal mengosongkan nampan. Silakan coba lagi." };
@@ -187,9 +196,17 @@ const editTray = (tray) => {
 
 <style scoped>
 @keyframes fadeIn {
-  from { opacity: 0; transform: scale(0.95); }
-  to { opacity: 1; transform: scale(1); }
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
 }
+
 .animate-fadeIn {
   animation: fadeIn 0.25s ease-out forwards;
 }