From e33805b18e16df2eaaf0563e982ffb25e5d0ffeb Mon Sep 17 00:00:00 2001
From: Baghaztra <baghaztra21@gmail.com>
Date: Thu, 11 Sep 2025 11:45:22 +0700
Subject: [PATCH 1/2] [feat] authorisasi frontend

---
 resources/js/components/searchbar.vue |  17 +-
 resources/js/pages/Brankas.vue        |  19 +-
 resources/js/pages/Kategori.vue       |   7 +-
 resources/js/pages/Produk.vue         | 508 +++++++++++---------------
 resources/js/pages/Sales.vue          | 323 +++++++---------
 resources/js/pages/Tray.vue           |   2 +-
 6 files changed, 362 insertions(+), 514 deletions(-)

diff --git a/resources/js/components/searchbar.vue b/resources/js/components/searchbar.vue
index 236637d..398f829 100644
--- a/resources/js/components/searchbar.vue
+++ b/resources/js/components/searchbar.vue
@@ -1,13 +1,14 @@
 <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="flex justify-end mb-3">
+    <div class="border border-C bg-A rounded-md w-full sm:w-64 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>
+  </div>
 </template>
 <script setup>
 import { ref } from "vue";
diff --git a/resources/js/pages/Brankas.vue b/resources/js/pages/Brankas.vue
index a0e7f2e..180d57c 100644
--- a/resources/js/pages/Brankas.vue
+++ b/resources/js/pages/Brankas.vue
@@ -1,18 +1,17 @@
 <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" />
-        </div>
-    </mainLayout>
-
-
+  <mainLayout>
+    <div class="p-6">
+      <p class="font-serif italic text-[25px] text-D">BRANKAS</p>
+      <searchbar v-model:search="searchQuery" />
+      <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..e86d519 100644
--- a/resources/js/pages/Tray.vue
+++ b/resources/js/pages/Tray.vue
@@ -113,7 +113,7 @@
 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";
 
 const searchQuery = ref("");

From 3e96a158e5bc8466b1d2a5dddb1eff539433c46e Mon Sep 17 00:00:00 2001
From: Baghaztra <baghaztra21@gmail.com>
Date: Thu, 11 Sep 2025 15:11:20 +0700
Subject: [PATCH 2/2] [Update] UI Brankas dan nampan

---
 app/Http/Controllers/NampanController.php     |  10 +-
 resources/js/components/BrankasList.vue       | 304 ++++++++++++----
 .../js/components/ConfirmDeleteModal.vue      |  72 ++--
 resources/js/components/TrayList.vue          | 232 +++++++-----
 resources/js/components/searchbar.vue         |  14 +-
 resources/js/pages/Brankas.vue                |   6 +-
 resources/js/pages/Tray.vue                   | 342 ++++++++----------
 7 files changed, 589 insertions(+), 391 deletions(-)

diff --git a/app/Http/Controllers/NampanController.php b/app/Http/Controllers/NampanController.php
index 7673da2..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,10 +24,12 @@ class NampanController extends Controller
     public function store(Request $request)
     {
         $validated = $request->validate([
-            'nama' => 'required|string|max:10',
+            '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);
@@ -54,7 +56,7 @@ class NampanController extends Controller
     public function update(Request $request, int $id)
     {
         $validated = $request->validate([
-            'nama' => 'required|string|max:10',
+            'nama' => 'required|string|max:10|unique:nampans,nama,'.$id,
         ],
         [
             'nama' => 'Nama nampan harus diisi.'
diff --git a/resources/js/components/BrankasList.vue b/resources/js/components/BrankasList.vue
index 2b9a64e..fa165f0 100644
--- a/resources/js/components/BrankasList.vue
+++ b/resources/js/components/BrankasList.vue
@@ -1,49 +1,83 @@
+// brankas list
 <template>
   <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>
+    <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>
@@ -51,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>
@@ -90,8 +149,6 @@
   </div>
 </template>
 
-
-
 <script setup>
 import { ref, computed, onMounted } from "vue";
 import axios from "axios";
@@ -107,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}`,
@@ -157,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([
@@ -176,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/TrayList.vue b/resources/js/components/TrayList.vue
index b4c0b32..df77c0b 100644
--- a/resources/js/components/TrayList.vue
+++ b/resources/js/components/TrayList.vue
@@ -1,9 +1,29 @@
 <template>
   <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 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>
 
@@ -12,16 +32,13 @@
     </div>
 
     <!-- Grid Card -->
-    <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 items-stretch">
-      <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"
-      >
+    <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">
+          <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>
@@ -32,27 +49,16 @@
         </div>
 
         <!-- 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 max-h-[160px] pr-1"
-        >
-          <div
-            v-for="item in tray.items"
-            :key="item.id"
+        <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">
@@ -69,64 +75,54 @@
 
         <!-- 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 class="text-center text-D font-bold text-lg">
+        {{ selectedItem.kode_item }}
       </div>
-      <div class="text-center text-gray-500 text-sm mb-4">
-        {{ selectedItem.produk.kategori }}
+      <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 -->
       <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 }}
-          </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>
@@ -137,10 +133,14 @@
 <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);
@@ -160,6 +160,48 @@ 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;
@@ -190,32 +232,6 @@ const saveMove = async () => {
     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;
   }
 };
 
@@ -226,6 +242,48 @@ const totalWeight = (tray) => {
   return total.toFixed(2);
 };
 
+// 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;
@@ -237,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 398f829..1f886c1 100644
--- a/resources/js/components/searchbar.vue
+++ b/resources/js/components/searchbar.vue
@@ -1,12 +1,10 @@
 <template>
-  <div class="flex justify-end mb-3">
-    <div class="border border-C bg-A rounded-md w-full sm:w-64 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 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>
diff --git a/resources/js/pages/Brankas.vue b/resources/js/pages/Brankas.vue
index 180d57c..b9d27ca 100644
--- a/resources/js/pages/Brankas.vue
+++ b/resources/js/pages/Brankas.vue
@@ -2,7 +2,11 @@
   <mainLayout>
     <div class="p-6">
       <p class="font-serif italic text-[25px] text-D">BRANKAS</p>
-      <searchbar v-model:search="searchQuery" />
+      <div class="flex justify-end">
+        <div class="w-full sm:w-64 my-3">
+          <searchbar v-model:search="searchQuery"/>
+        </div>
+      </div>
       <BrankasList :search="searchQuery" />
     </div>
   </mainLayout>
diff --git a/resources/js/pages/Tray.vue b/resources/js/pages/Tray.vue
index 63edeae..c667721 100644
--- a/resources/js/pages/Tray.vue
+++ b/resources/js/pages/Tray.vue
@@ -1,239 +1,195 @@
 <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>
-
-        <!-- Search + List -->
-        <TrayList :search="searchQuery" @edit="editTray" @delete="deleteTray" />
-
-        <!-- Modal 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-[#102c57]">
-      {{ editingTrayId ? "Edit Nampan" : "Tambah Nampan" }}
-    </h2>
-
-    <label class="block mb-2 text-sm font-medium text-[#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 text-[#102c57]"
-      >
-        Save
-      </button>
+      </div>
     </div>
-  </div>
-</div>
 
-        <!-- Modal Konfirmasi Kosongkan -->
-        <div
-          v-if="showConfirmModal"
-          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 duration-300 scale-95 opacity-0 animate-fadeIn"
-          >
-            <!-- Judul -->
-            <h2 class="text-xl font-bold text-[#102c57] mb-3 text-center">
-              Kosongkan semua nampan?
-            </h2>
+    <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>
 
-            <!-- Deskripsi -->
-            <p class="text-gray-600 text-sm mb-6 text-center leading-relaxed">
-              Semua item akan dimasukkan ke <span class="font-semibold">Brankas</span>.<br />
-              Masuk ke menu <b>Brankas</b> untuk mengembalikan item ke nampan.
-            </p>
+    <TrayList :search="searchQuery" @edit="editTray" @delete="promptDeleteTray" />
 
-            <!-- Tombol -->
-            <div class="flex justify-center gap-3">
-              <button
-                @click="closeConfirmModal"
-                class="px-5 py-2 rounded-lg font-semibold border border-gray-300 text-gray-700 hover:bg-gray-100 transition"
-              >
-                Batal
-              </button>
-              <button
-                @click="confirmEmptyTray"
-                class="px-5 py-2 rounded-lg font-semibold bg-red-500 text-white hover:bg-red-600 transition"
-              >
-                Ya, Kosongkan
-              </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>
-    </mainLayout>
+      </div>
+    </div>
+
+    <!-- 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);
 
+// 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);
 
-// buka modal tambah/edit
-const openModal = () => {
-    showModal.value = true;
-};
+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>
+<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;
 }