From a1a665bebf83610fee3ca3d5ae9729321ea95c61 Mon Sep 17 00:00:00 2001
From: adityaalfarison <adityaalfarison33@gmail.com>
Date: Thu, 11 Sep 2025 11:42:04 +0700
Subject: [PATCH] brankaslist,traylist update

---
 resources/js/components/BrankasList.vue |   4 +
 resources/js/components/TrayList.vue    |  54 ++++++---
 resources/js/pages/Tray.vue             | 154 +++++++++++++-----------
 3 files changed, 124 insertions(+), 88 deletions(-)

diff --git a/resources/js/components/BrankasList.vue b/resources/js/components/BrankasList.vue
index c90ca9a..2b9a64e 100644
--- a/resources/js/components/BrankasList.vue
+++ b/resources/js/components/BrankasList.vue
@@ -1,4 +1,8 @@
 <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">
diff --git a/resources/js/components/TrayList.vue b/resources/js/components/TrayList.vue
index b77d940..b4c0b32 100644
--- a/resources/js/components/TrayList.vue
+++ b/resources/js/components/TrayList.vue
@@ -1,6 +1,9 @@
 <template>
   <div>
-    <div v-if="loading" class="text-center py-6">Loading...</div>
+    <div v-if="loading" class="flex justify-center items-center h-screen">
+				<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-C"></div>
+				<span class="ml-2 text-gray-600">Memuat data...</span>
+			</div>
 
     <div v-else-if="error" class="text-center text-red-500 py-6">{{ error }}</div>
 
@@ -8,21 +11,31 @@
       Nampan tidak ditemukan.
     </div>
 
-    <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 ">
+    <!-- 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"
+        class="border border-C rounded-xl p-4 shadow-sm hover:shadow-md transition flex flex-col h-full"
       >
+        <!-- Header Card -->
         <div class="flex justify-between items-center mb-3">
           <h2 class="font-bold text-lg text-[#102C57]">{{ tray.nama }}</h2>
           <div class="flex gap-2">
-            <button class="p-2 rounded bg-yellow-400 hover:bg-yellow-500" @click="emit('edit', tray)">✏️</button>
-            <button class="bg-red-500 text-white p-1 rounded" @click="emit('delete', tray.id)">🗑️</button>
+            <button class="p-1 rounded" @click="emit('edit', tray)">
+              <i class="fa fa-pen fa-sm text-yellow-500 hover:text-yellow-600"></i>
+            </button>
+            <button class="p-1 rounded" @click="emit('delete', tray.id)">
+              <i class="fa fa-trash fa-sm text-red-500 hover:text-red-600"></i>
+            </button>
           </div>
         </div>
 
-        <div v-if="tray.items && tray.items.length" class="space-y-2 max-h-64 overflow-y-auto pr-2">
+        <!-- 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"
@@ -48,11 +61,13 @@
           </div>
         </div>
 
-        <div v-else class="text-gray-400 text-center py-4">
+        <!-- Kalau kosong -->
+        <div v-else class="text-gray-400 text-center py-4 flex-1">
           Nampan kosong.<br />
           Masuk ke menu <b>Brankas</b> untuk memindahkan item ke nampan.
         </div>
 
+        <!-- Footer Card -->
         <div class="border-t border-C mt-3 pt-2 text-right font-semibold">
           Berat Total: {{ totalWeight(tray) }}g
         </div>
@@ -72,8 +87,12 @@
         </div>
       </div>
 
-      <div class="text-center text-gray-700 font-medium mb-1">{{ selectedItem.produk.nama }}</div>
-      <div class="text-center text-gray-500 text-sm mb-4">{{ selectedItem.produk.kategori }}</div>
+      <div class="text-center text-gray-700 font-medium mb-1">
+        {{ selectedItem.produk.nama }}
+      </div>
+      <div class="text-center text-gray-500 text-sm mb-4">
+        {{ selectedItem.produk.kategori }}
+      </div>
 
       <div class="flex justify-center mb-4">
         <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition">
@@ -81,7 +100,7 @@
         </button>
       </div>
 
-      <!-- Dropdown: langsung pilih Nampan saat ini -->
+      <!-- Dropdown -->
       <div class="mb-4">
         <label for="tray-select" class="block text-sm font-medium mb-1">Nama Nampan</label>
         <select
@@ -89,12 +108,8 @@
           v-model="selectedTrayId"
           class="w-full rounded-md border shadow-sm focus:outline-none focus:ring focus:ring-indigo-200"
         >
-          <option
-            v-for="tray in trays"
-            :key="tray.id"
-            :value="tray.id"
-          >
-            {{ tray.nama }}<span v-if="Number(tray.id) === Number(selectedItem?.id_nampan)"></span>
+          <option v-for="tray in trays" :key="tray.id" :value="tray.id">
+            {{ tray.nama }}
           </option>
         </select>
       </div>
@@ -131,7 +146,7 @@ const trays = ref([]);
 const loading = ref(true);
 const error = ref(null);
 
-// --- State untuk Pop-up ---
+// --- State Pop-up ---
 const isPopupVisible = ref(false);
 const selectedItem = ref(null);
 const selectedTrayId = ref("");
@@ -148,7 +163,7 @@ const qrCodeUrl = computed(() => {
 // --- Fungsi Pop-up ---
 const openMovePopup = (item) => {
   selectedItem.value = item;
-  selectedTrayId.value = item.id_nampan; // ✅ tampilkan nampan saat ini (mis. A4)
+  selectedTrayId.value = item.id_nampan;
   isPopupVisible.value = true;
 };
 
@@ -171,7 +186,6 @@ const saveMove = async () => {
         headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
       }
     );
-
     await refreshData();
     closePopup();
   } catch (err) {
@@ -212,7 +226,7 @@ const totalWeight = (tray) => {
   return total.toFixed(2);
 };
 
-// Filter nampan berdasarkan pencarian
+// Filter nampan
 const filteredTrays = computed(() => {
   if (!props.search) return trays.value;
   return trays.value.filter((tray) =>
diff --git a/resources/js/pages/Tray.vue b/resources/js/pages/Tray.vue
index fdc9932..bd32946 100644
--- a/resources/js/pages/Tray.vue
+++ b/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,78 +33,82 @@
         </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"
-        >
-            <div class="bg-white rounded-lg shadow-lg p-6 w-96">
-                <h2 class="text-lg font-semibold mb-4" style="color: #102c57">
-                    Tambah Nampan
-                </h2>
+  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"
-                    style="color: #102c57"
-                    >Nama Nampan</label
-                >
-                <input
-                    v-model="trayName"
-                    type="text"
-                    placeholder="Contoh: A4"
-                    class="w-full border rounded-md p-2 mb-4"
-                />
+    <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"
-                        style="color: #102c57"
-                    >
-                        Save
-                    </button>
-                </div>
-            </div>
-        </div>
+    <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>
 
         <!-- Modal Konfirmasi Kosongkan -->
         <div
-            v-if="showConfirmModal"
-            class="fixed inset-0 bg-black bg-opacity-40 flex justify-center items-center z-50"
+          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-lg shadow-lg p-6 w-96 text-center">
-                <h2 class="text-xl font-bold mb-3" style="color: #102c57">
-                    Kosongkan semua nampan?
-                </h2>
-                <p class="text-gray-600 mb-6">
-                    Semua item akan dimasukkan ke brankas. <br />
-                    Masuk ke menu ‘Brankas’ untuk mengembalikan item ke nampan.
-                </p>
-                <div class="flex justify-center gap-4">
-                    <button
-                        @click="closeConfirmModal"
-                        class="px-5 py-2 bg-gray-300 hover:bg-gray-400 rounded-md font-semibold"
-                    >
-                        Batal
-                    </button>
-                    <button
-                        @click="confirmEmptyTray"
-                        class="px-5 py-2 bg-red-500 hover:bg-red-600 text-white rounded-md font-semibold"
-                    >
-                        Ya
-                    </button>
-                </div>
+          <div
+            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>
+
+            <!-- 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>
+
+            <!-- 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>
         </div>
     </mainLayout>
 </template>
@@ -122,6 +126,7 @@ const showConfirmModal = ref(false);
 const trayName = ref("");
 const editingTrayId = ref(null);
 
+
 // buka modal tambah/edit
 const openModal = () => {
     showModal.value = true;
@@ -145,9 +150,7 @@ const saveTray = async () => {
                 { nama: trayName.value },
                 {
                     headers: {
-                        Authorization: `Bearer ${localStorage.getItem(
-                            "token"
-                        )}`,
+                        Authorization: `Bearer ${localStorage.getItem("token")}`,
                     },
                 }
             );
@@ -158,9 +161,7 @@ const saveTray = async () => {
                 { nama: trayName.value },
                 {
                     headers: {
-                        Authorization: `Bearer ${localStorage.getItem(
-                            "token"
-                        )}`,
+                        Authorization: `Bearer ${localStorage.getItem("token")}`,
                     },
                 }
             );
@@ -220,3 +221,20 @@ 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>