diff --git a/.env.example b/.env.example
deleted file mode 100644
index 35db1dd..0000000
--- a/.env.example
+++ /dev/null
@@ -1,65 +0,0 @@
-APP_NAME=Laravel
-APP_ENV=local
-APP_KEY=
-APP_DEBUG=true
-APP_URL=http://localhost
-
-APP_LOCALE=en
-APP_FALLBACK_LOCALE=en
-APP_FAKER_LOCALE=en_US
-
-APP_MAINTENANCE_DRIVER=file
-# APP_MAINTENANCE_STORE=database
-
-PHP_CLI_SERVER_WORKERS=4
-
-BCRYPT_ROUNDS=12
-
-LOG_CHANNEL=stack
-LOG_STACK=single
-LOG_DEPRECATIONS_CHANNEL=null
-LOG_LEVEL=debug
-
-DB_CONNECTION=sqlite
-# DB_HOST=127.0.0.1
-# DB_PORT=3306
-# DB_DATABASE=laravel
-# DB_USERNAME=root
-# DB_PASSWORD=
-
-SESSION_DRIVER=database
-SESSION_LIFETIME=120
-SESSION_ENCRYPT=false
-SESSION_PATH=/
-SESSION_DOMAIN=null
-
-BROADCAST_CONNECTION=log
-FILESYSTEM_DISK=local
-QUEUE_CONNECTION=database
-
-CACHE_STORE=database
-# CACHE_PREFIX=
-
-MEMCACHED_HOST=127.0.0.1
-
-REDIS_CLIENT=phpredis
-REDIS_HOST=127.0.0.1
-REDIS_PASSWORD=null
-REDIS_PORT=6379
-
-MAIL_MAILER=log
-MAIL_SCHEME=null
-MAIL_HOST=127.0.0.1
-MAIL_PORT=2525
-MAIL_USERNAME=null
-MAIL_PASSWORD=null
-MAIL_FROM_ADDRESS="hello@example.com"
-MAIL_FROM_NAME="${APP_NAME}"
-
-AWS_ACCESS_KEY_ID=
-AWS_SECRET_ACCESS_KEY=
-AWS_DEFAULT_REGION=us-east-1
-AWS_BUCKET=
-AWS_USE_PATH_STYLE_ENDPOINT=false
-
-VITE_APP_NAME="${APP_NAME}"
diff --git a/resources/js/components/BrankasList.vue b/resources/js/components/BrankasList.vue
index dcdb2fc..0135531 100644
--- a/resources/js/components/BrankasList.vue
+++ b/resources/js/components/BrankasList.vue
@@ -8,8 +8,8 @@
       <!-- Gambar -->
       <div class="flex items-center gap-3">
         <img
-          :src="item.image"
-          alt="Product Image"
+           v-if="item.produk.foto && item.produk.foto.length > 0"
+      :src="item.produk.foto[0].url"
           class="w-12 h-12 object-contain"
         />
         <!-- Info produk -->
diff --git a/resources/js/components/TrayList.vue b/resources/js/components/TrayList.vue
index eea9b85..86dd17f 100644
--- a/resources/js/components/TrayList.vue
+++ b/resources/js/components/TrayList.vue
@@ -26,34 +26,50 @@
       >
         <!-- Header Nampan -->
         <div class="flex justify-between items-center mb-3">
-          <h2 class="font-bold text-lg">{{ tray.nama }}</h2>
+          <h2 class="font-bold text-lg" style="color: #102C57;">{{ tray.nama }}</h2>
           <div class="flex gap-2">
-            <button class="bg-yellow-300 p-1 rounded">✏️</button>
-            <button class="bg-red-500 text-white p-1 rounded">🗑️</button>
+            <button 
+  class="p-2 rounded bg-yellow-400 hover:bg-yellow-500"
+  @click="emit('edit', tray)"
+>
+  ✏️
+</button>
+            <button 
+  class="bg-red-500 text-white p-1 rounded"
+  @click="emit('delete', tray.id)"
+>
+  🗑️
+</button>
           </div>
         </div>
 
         <!-- Isi Nampan -->
-        <div v-if="tray.items && tray.items.length > 0" class="space-y-2">
-          <div
-            v-for="item in tray.items"
-            :key="item.id"
-            class="flex justify-between items-center border rounded-lg p-2"
-          >
+        <div 
+  v-if="tray.items && tray.items.length > 0" 
+  class="space-y-2 max-h-64 overflow-y-auto pr-2"
+>
+  <div
+    v-for="item in tray.items"
+    :key="item.id"
+    class="flex justify-between items-center border rounded-lg p-2"
+  >
+          
             <!-- Gambar + Info -->
             <div class="flex items-center gap-3">
               <img
-                :src="item.image"
-                alt="Product Image"
-                class="w-12 h-12 object-contain"
+                 v-if="item.produk.foto && item.produk.foto.length > 0"
+      :src="item.produk.foto[0].url"
+      alt="foto produk"
+      class="w-12 h-12 object-cover rounded"
               />
               <div>
-                <p class="font-semibold">{{ item.produk.nama }}</p>
-                <p class="text-sm text-gray-500">{{ item.produk.id }}</p>
+                <p class="text-sm" style="color: #102C57;">{{ item.produk.nama }}</p>
+                <p class="text-sm" style="color: #102C57;">{{ item.produk.kategori }}</p>
+                <p class="text-sm" style="color: #102C57;">{{ item.produk.harga_jual.toLocaleString() }}</p>
               </div>
             </div>
             <!-- Berat -->
-            <span class="font-medium">{{ item.berat }}g</span>
+            <span class="font-medium">{{ item.produk.berat }}g</span>
           </div>
         </div>
 
@@ -85,6 +101,8 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits(["edit", "delete"])
+
 const trays = ref([]);
 const loading = ref(true);
 const error = ref(null);
@@ -92,15 +110,29 @@ const error = ref(null);
 // hitung total berat
 const totalWeight = (tray) => {
   if (!tray.items) return 0;
-  return tray.items.reduce((sum, item) => sum + (item.berat || 0), 0);
+  return tray.items.reduce((sum, item) => sum + (item.produk.berat || 0), 0);
 };
 
 // ambil data dari backend
 onMounted(async () => {
   try {
-    const res = await axios.get("/api/nampan");
-    trays.value = res.data; // harus array tray dengan items
-    console.log("Data nampan:", res.data);
+    const [nampanRes, itemRes] = await Promise.all([
+      axios.get("/api/nampan"),
+      axios.get("/api/item")
+    ]);
+
+    const nampans = nampanRes.data;
+    const items = itemRes.data;
+
+    // mapping items ke nampan
+    trays.value = nampans.map(tray => {
+      return {
+        ...tray,
+        items: items.filter(item => item.id_nampan === tray.id)
+      };
+    });
+
+    console.log("Nampan dengan items:", trays.value);
   } catch (err) {
     error.value = err.message || "Gagal mengambil data";
   } finally {
diff --git a/resources/js/pages/Tray.vue b/resources/js/pages/Tray.vue
index fde2d7e..a867775 100644
--- a/resources/js/pages/Tray.vue
+++ b/resources/js/pages/Tray.vue
@@ -1,16 +1,141 @@
 <template>
     <mainLayout>
+         <div class="flex justify-between items-center mb-4">
         <p style="font-family: 'IM FELL Great Primer', serif; font-style: italic;font-size: 25px;">NAMPAN</p>
+        <div class="flex gap-2">
+        <button 
+          @click="openModal" 
+          class="px-4 py-2 hover:bg-green-700 rounded-md shadow font-semibold"
+          style="background-color: #DAC0A3; color: #102C57;">
+        Tambah Nampan
+        </button>
+
+        <button 
+          @click="emptyTray" 
+          class="px-3 py-2 bg-red-500 hover:bg-red-600 text-white rounded-md">
+          Kosongkan
+        </button>
+      </div>
+      </div>
         <searchbar v-model:search="searchQuery" />
-        <TrayList :search="searchQuery" />
+        <TrayList :search="searchQuery" 
+        @edit="editTray"
+  @delete="deleteTray"/>
+        <div 
+      v-if="showModal" 
+      class="fixed inset-0 bg-black bg-opacity-40 flex justify-center items-center z-50"
+    >
+      <div class="bg-white rounded-lg shadow-lg p-6 w-96">
+        <h2 class="text-lg font-semibold mb-4">Tambah Nampan</h2>
+
+        <label class="block mb-2 text-sm font-medium">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-green-600 hover:bg-green-700 text-white rounded-md">
+            Save
+          </button>
+        </div>
+      </div>
+      </div>
     </mainLayout>
 
     
 </template>
 <script setup>
-import { ref } from 'vue';
+import { ref } from 'vue'
+import axios from 'axios'
 import mainLayout from '../layouts/mainLayout.vue'
-import searchbar from '../components/searchbar.vue';
-import TrayList from '../components/TrayList.vue';
-const searchQuery = ref("");
-</script>
\ No newline at end of file
+import searchbar from '../components/searchbar.vue'
+import TrayList from '../components/TrayList.vue'
+
+const searchQuery = ref("")   // buat search
+const showModal = ref(false)  // <-- ini penting, biar tidak undefined
+const trayName = ref("")      // nama nampan baru
+
+// buka modal
+const openModal = () => {
+  showModal.value = true
+}
+
+// tutup modal
+const closeModal = () => {
+  trayName.value = ""
+  editingTrayId.value = null
+  showModal.value = false
+}
+// simpan nampan baru
+const saveTray = async () => {
+  if (!trayName.value.trim()) {
+    alert("Nama Nampan tidak boleh kosong")
+    return
+  }
+
+  try {
+    if (editingTrayId.value) {
+      // mode edit
+      await axios.put(`/api/nampan/${editingTrayId.value}`, { nama: trayName.value })
+      alert("Nampan berhasil diupdate")
+    } else {
+      // mode tambah
+      await axios.post("/api/nampan", { nama: trayName.value })
+      alert("Nampan berhasil ditambahkan")
+    }
+    closeModal()
+    location.reload()
+  } catch (error) {
+    console.error(error)
+    alert("Gagal menyimpan nampan")
+  }
+}
+
+
+// kosongkan semua nampan
+const emptyTray = async () => {
+  if (!confirm("Yakin ingin memindahkan semua item ke Brankas?")) return
+
+  try {
+    await axios.post("/api/brankas", { action: "move_all_from_tray" })
+    alert("Semua item berhasil dipindahkan ke Brankas")
+    location.reload()
+  } catch (error) {
+    console.error(error)
+    alert("Gagal mengosongkan nampan")
+  }
+}
+
+const editTray = (tray) => {
+  // buka modal edit, bisa pake sama seperti modal tambah
+  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}`)
+    alert("Nampan berhasil dihapus")
+    location.reload()
+  } catch (error) {
+    console.error(error)
+    alert("Gagal menghapus nampan")
+  }
+}
+
+const editingTrayId = ref(null)
+
+</script>