resources/js/components/BrankasList.vue

@@ -1,8 +1,4 @@
 <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>
     <!-- Daftar Item -->
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">

resources/js/components/TrayList.vue

@@ -1,9 +1,6 @@
 <template>
   <div>
-    <div v-if="loading" class="flex justify-center items-center h-screen">
+    <div v-if="loading" class="text-center py-6">Loading...</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>
 
@@ -11,31 +8,21 @@
       Nampan tidak ditemukan.
     </div>
 
-    <!-- Grid Card -->
+    <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 ">
-    <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"
+        class="border border-C rounded-xl p-4 shadow-sm hover:shadow-md transition"
       >
-        <!-- Header Card -->
         <div class="flex justify-between items-center mb-3">
           <h2 class="font-bold text-lg text-[#102C57]">{{ tray.nama }}</h2>
           <div class="flex gap-2">
-            <button class="p-1 rounded" @click="emit('edit', tray)">
+            <button class="p-2 rounded bg-yellow-400 hover:bg-yellow-500" @click="emit('edit', tray)">✏️</button>
-              <i class="fa fa-pen fa-sm text-yellow-500 hover:text-yellow-600"></i>
+            <button class="bg-red-500 text-white p-1 rounded" @click="emit('delete', tray.id)">🗑️</button>
-            </button>
-            <button class="p-1 rounded" @click="emit('delete', tray.id)">
-              <i class="fa fa-trash fa-sm text-red-500 hover:text-red-600"></i>
-            </button>
           </div>
         </div>
 
-        <!-- Isi Card (Max tinggi 3 item + scroll kalau lebih) -->
+        <div v-if="tray.items && tray.items.length" class="space-y-2 max-h-64 overflow-y-auto pr-2">
-        <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"
@@ -61,13 +48,11 @@
           </div>
         </div>
 
-        <!-- Kalau kosong -->
+        <div v-else class="text-gray-400 text-center py-4">
-        <div v-else class="text-gray-400 text-center py-4 flex-1">
           Nampan kosong.<br />
           Masuk ke menu <b>Brankas</b> untuk memindahkan item ke nampan.
         </div>
 
-        <!-- Footer Card -->
         <div class="border-t border-C mt-3 pt-2 text-right font-semibold">
           Berat Total: {{ totalWeight(tray) }}g
         </div>
@@ -87,12 +72,8 @@
         </div>
       </div>
 
-      <div class="text-center text-gray-700 font-medium mb-1">
+      <div class="text-center text-gray-700 font-medium mb-1">{{ selectedItem.produk.nama }}</div>
-        {{ selectedItem.produk.nama }}
+      <div class="text-center text-gray-500 text-sm mb-4">{{ selectedItem.produk.kategori }}</div>
-      </div>
-      <div class="text-center text-gray-500 text-sm mb-4">
-        {{ selectedItem.produk.kategori }}
-      </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">
@@ -100,7 +81,7 @@
         </button>
       </div>
 
-      <!-- Dropdown -->
+      <!-- Dropdown: langsung pilih Nampan saat ini -->
       <div class="mb-4">
         <label for="tray-select" class="block text-sm font-medium mb-1">Nama Nampan</label>
         <select
@@ -108,8 +89,12 @@
           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">
+          <option
-            {{ tray.nama }}
+            v-for="tray in trays"
+            :key="tray.id"
+            :value="tray.id"
+          >
+            {{ tray.nama }}<span v-if="Number(tray.id) === Number(selectedItem?.id_nampan)"></span>
           </option>
         </select>
       </div>
@@ -146,7 +131,7 @@ const trays = ref([]);
 const loading = ref(true);
 const error = ref(null);
 
-// --- State Pop-up ---
+// --- State untuk Pop-up ---
 const isPopupVisible = ref(false);
 const selectedItem = ref(null);
 const selectedTrayId = ref("");
@@ -163,7 +148,7 @@ const qrCodeUrl = computed(() => {
 // --- Fungsi Pop-up ---
 const openMovePopup = (item) => {
   selectedItem.value = item;
-  selectedTrayId.value = item.id_nampan;
+  selectedTrayId.value = item.id_nampan; // ✅ tampilkan nampan saat ini (mis. A4)
   isPopupVisible.value = true;
 };
 
@@ -186,6 +171,7 @@ const saveMove = async () => {
         headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
       }
     );
+
     await refreshData();
     closePopup();
   } catch (err) {
@@ -226,7 +212,7 @@ const totalWeight = (tray) => {
   return total.toFixed(2);
 };
 
-// Filter nampan
+// Filter nampan berdasarkan pencarian
 const filteredTrays = computed(() => {
   if (!props.search) return trays.value;
   return trays.value.filter((tray) =>

resources/js/pages/Tray.vue

@@ -3,7 +3,7 @@
         <!-- Header -->
         <div class="p-6">
             <!-- Judul -->
-            <p class="font-serif italic text-[25px] text-D">NAMPAN</p>
+             <p class="font-serif italic text-[25px] text-D">NAMPAN</p>
 
             <!-- Searchbar -->
             <div class="flex justify-end mt-2">
@@ -33,82 +33,78 @@
         </div>
 
         <!-- Search + List -->
+
         <TrayList :search="searchQuery" @edit="editTray" @delete="deleteTray" />
 
         <!-- Modal Tambah/Edit Nampan -->
         <div
-  v-if="showModal"
+            v-if="showModal"
-  class="fixed inset-0 bg-black/75 flex justify-center items-center z-50 backdrop-blur-sm"
+            class="fixed inset-0 bg-black/75 flex justify-center items-center z-50"
->
+        >
-  <div
+            <div class="bg-white rounded-lg shadow-lg p-6 w-96">
-    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" style="color: #102c57">
-  >
+                    Tambah Nampan
-    <h2 class="text-lg font-semibold mb-4 text-[#102c57]">
+                </h2>
-      {{ editingTrayId ? "Edit Nampan" : "Tambah Nampan" }}
-    </h2>
 
-    <label class="block mb-2 text-sm font-medium text-[#102c57]">
+                <label
-      Nama Nampan
+                    class="block mb-2 text-sm font-medium"
-    </label>
+                    style="color: #102c57"
-    <input
+                    >Nama Nampan</label
-      v-model="trayName"
+                >
-      type="text"
+                <input
-      placeholder="Contoh: A4"
+                    v-model="trayName"
-      class="w-full border rounded-md p-2 mb-4"
+                    type="text"
-    />
+                    placeholder="Contoh: A4"
+                    class="w-full border rounded-md p-2 mb-4"
+                />
 
-    <div class="flex justify-end gap-2">
+                <div class="flex justify-end gap-2">
-      <button
+                    <button
-        @click="closeModal"
+                        @click="closeModal"
-        class="px-4 py-2 bg-gray-400 hover:bg-gray-500 text-white rounded-md"
+                        class="px-4 py-2 bg-gray-400 hover:bg-gray-500 text-white rounded-md"
-      >
+                    >
-        Cancel
+                        Cancel
-      </button>
+                    </button>
-      <button
+
-        @click="saveTray"
+                    <button
-        class="px-4 py-2 bg-[#DAC0A3] hover:bg-[#C9A77E] rounded-md text-[#102c57]"
+                        @click="saveTray"
-      >
+                        class="px-4 py-2 bg-[#DAC0A3] hover:bg-[#C9A77E] rounded-md"
-        Save
+                        style="color: #102c57"
-      </button>
+                    >
-    </div>
+                        Save
-  </div>
+                    </button>
-</div>
+                </div>
+            </div>
+        </div>
 
         <!-- Modal Konfirmasi Kosongkan -->
         <div
-          v-if="showConfirmModal"
+            v-if="showConfirmModal"
-          class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm"
+            class="fixed inset-0 bg-black bg-opacity-40 flex justify-center items-center z-50"
         >
-          <div
+            <div class="bg-white rounded-lg shadow-lg p-6 w-96 text-center">
-            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"
+                <h2 class="text-xl font-bold mb-3" style="color: #102c57">
-          >
+                    Kosongkan semua nampan?
-            <!-- Judul -->
+                </h2>
-            <h2 class="text-xl font-bold text-[#102c57] mb-3 text-center">
+                <p class="text-gray-600 mb-6">
-              Kosongkan semua nampan?
+                    Semua item akan dimasukkan ke brankas. <br />
-            </h2>
+                    Masuk ke menu ‘Brankas’ untuk mengembalikan item ke nampan.
-
+                </p>
-            <!-- Deskripsi -->
+                <div class="flex justify-center gap-4">
-            <p class="text-gray-600 text-sm mb-6 text-center leading-relaxed">
+                    <button
-              Semua item akan dimasukkan ke <span class="font-semibold">Brankas</span>.<br />
+                        @click="closeConfirmModal"
-              Masuk ke menu <b>Brankas</b> untuk mengembalikan item ke nampan.
+                        class="px-5 py-2 bg-gray-300 hover:bg-gray-400 rounded-md font-semibold"
-            </p>
+                    >
-
+                        Batal
-            <!-- Tombol -->
+                    </button>
-            <div class="flex justify-center gap-3">
+                    <button
-              <button
+                        @click="confirmEmptyTray"
-                @click="closeConfirmModal"
+                        class="px-5 py-2 bg-red-500 hover:bg-red-600 text-white rounded-md font-semibold"
-                class="px-5 py-2 rounded-lg font-semibold border border-gray-300 text-gray-700 hover:bg-gray-100 transition"
+                    >
-              >
+                        Ya
-                Batal
+                    </button>
-              </button>
+                </div>
-              <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>
         </div>
     </mainLayout>
 </template>
@@ -126,7 +122,6 @@ const showConfirmModal = ref(false);
 const trayName = ref("");
 const editingTrayId = ref(null);
 
-
 // buka modal tambah/edit
 const openModal = () => {
     showModal.value = true;
@@ -150,7 +145,9 @@ const saveTray = async () => {
                 { nama: trayName.value },
                 {
                     headers: {
-                        Authorization: `Bearer ${localStorage.getItem("token")}`,
+                        Authorization: `Bearer ${localStorage.getItem(
+                            "token"
+                        )}`,
                     },
                 }
             );
@@ -161,7 +158,9 @@ const saveTray = async () => {
                 { nama: trayName.value },
                 {
                     headers: {
-                        Authorization: `Bearer ${localStorage.getItem("token")}`,
+                        Authorization: `Bearer ${localStorage.getItem(
+                            "token"
+                        )}`,
                     },
                 }
             );
@@ -221,20 +220,3 @@ const deleteTray = async (id) => {
     }
 };
 </script>
-
-<style>
-@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>