diff --git a/app/Http/Controllers/ItemController.php b/app/Http/Controllers/ItemController.php
index 399e5e0..3e336d4 100644
--- a/app/Http/Controllers/ItemController.php
+++ b/app/Http/Controllers/ItemController.php
@@ -52,8 +52,8 @@ class ItemController extends Controller
     public function update(Request $request, int $id)
     {
         $validated = $request->validate([
-            'id_produk' => 'required|in:produks.id',
-            'id_nampan' => 'nullable|in:nampans.id'
+            'id_produk' => 'required|exists:produks,id',
+            'id_nampan' => 'nullable|exists:nampans,id'
         ],[
             'id_produk' => 'Id produk tidak valid.',
             'id_nampan' => 'Id nampan tidak valid'
diff --git a/app/Http/Controllers/ProdukController.php b/app/Http/Controllers/ProdukController.php
index 404dff9..d91f2a8 100644
--- a/app/Http/Controllers/ProdukController.php
+++ b/app/Http/Controllers/ProdukController.php
@@ -28,7 +28,7 @@ class ProdukController extends Controller
     {
         $validated = $request->validate([
             'nama' => 'required|string|max:100',
-            'id_kategori' => 'required|exists:users,id',
+            'id_kategori' => 'required|exists:kategoris,id',
             'berat' => 'required|numeric',
             'kadar' => 'required|integer',
             'harga_per_gram' => 'required|numeric',
diff --git a/app/Models/Kategori.php b/app/Models/Kategori.php
index 3abc4fa..b76a659 100644
--- a/app/Models/Kategori.php
+++ b/app/Models/Kategori.php
@@ -15,7 +15,7 @@ class Kategori extends Model
 
     protected $hidden = ['created_at', 'updated_at', 'deleted_at'];
 
-    public function produks()
+    public function produk()
     {
         return $this->hasMany(Produk::class, 'id_kategori');
     }
diff --git a/database/seeders/DatabaseSeeder.php b/database/seeders/DatabaseSeeder.php
index 70d55af..5ec537c 100644
--- a/database/seeders/DatabaseSeeder.php
+++ b/database/seeders/DatabaseSeeder.php
@@ -37,7 +37,7 @@ class DatabaseSeeder extends Seeder
             }
         }
 
-        $kategoriList = ['cincin', 'gelang', 'kalung', 'anting'];
+        $kategoriList = ['cincin', 'gelang rantai', 'gelang bulat', 'kalung', 'liontin', 'anting', 'giwang'];
         foreach ($kategoriList as $kategori) {
             Kategori::factory()->create([
                 'nama' => $kategori
diff --git a/resources/js/components/BrankasList.vue b/resources/js/components/BrankasList.vue
index 0135531..5532207 100644
--- a/resources/js/components/BrankasList.vue
+++ b/resources/js/components/BrankasList.vue
@@ -20,7 +20,7 @@
       </div>
 
       <!-- Berat -->
-      <span class="font-medium">{{ item.berat }}g</span>
+      <span class="font-medium">{{ item.produk.berat }}g</span>
     </div>
   </div>
 </template>
@@ -39,6 +39,7 @@ const props = defineProps({
 });
 
 const items = ref([]);
+const produk = ref([])
 const loading = ref(true);
 const error = ref(null);
 
diff --git a/resources/js/components/TrayList.vue b/resources/js/components/TrayList.vue
index 85e8124..de19062 100644
--- a/resources/js/components/TrayList.vue
+++ b/resources/js/components/TrayList.vue
@@ -1,66 +1,51 @@
 <template>
   <div>
-    <!-- Loading -->
     <div v-if="loading" class="text-center py-6">Loading...</div>
 
-    <!-- Error -->
     <div v-else-if="error" class="text-center text-red-500 py-6">{{ error }}</div>
 
-    <!-- Kalau hasil search kosong -->
-    <div
-      v-else-if="filteredTrays.length === 0"
-      class="text-center text-gray-500 py-6"
-    >
+    <div v-else-if="filteredTrays.length === 0" class="text-center text-gray-500 py-6">
       Nampan tidak ditemukan.
     </div>
 
-    <!-- Grid nampan -->
-    <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 xl:grid-cols-4 gap-4">
       <div
         v-for="tray in filteredTrays"
         :key="tray.id"
         class="border rounded-lg p-4 shadow-sm hover:shadow-md transition"
       >
-        <!-- Header Nampan -->
         <div class="flex justify-between items-center mb-3">
           <h2 class="font-bold text-lg" style="color: #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-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 max-h-64 overflow-y-auto pr-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"
+  @click="openMovePopup(item)"
 >
-  <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
-                 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"
+                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="text-sm" style="color: #102C57;">{{ item.produk.nama }}</p>
@@ -68,88 +53,179 @@
                 <p class="text-sm" style="color: #102C57;">{{ item.produk.harga_jual.toLocaleString() }}</p>
               </div>
             </div>
-            <!-- Berat -->
-            <span class="font-medium">{{ item.produk.berat }}g</span>
+            <div class="flex items-center gap-2">
+              <span class="font-medium">{{ item.produk.berat }}g</span>
+            </div>
           </div>
         </div>
 
-        <!-- Kalau nampan kosong -->
         <div v-else class="text-gray-400 text-center py-4">
           Nampan kosong.<br />
           Masuk ke menu <b>Brankas</b> untuk memindahkan item ke nampan.
         </div>
 
-        <!-- Total Berat -->
         <div class="border-t mt-3 pt-2 text-right font-semibold">
           Berat Total: {{ totalWeight(tray) }}g
         </div>
       </div>
     </div>
   </div>
-</template>
 
+  <!-- Pop-up pindah item -->
+  <div v-if="isPopupVisible" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
+    <div class="bg-white rounded-lg shadow-lg max-w-sm w-full p-6 relative">
+      <div class="flex justify-center mb-4">
+        <div class="p-2 border border-gray-300 rounded-lg">
+          <img :src="qrCodeUrl" alt="QR Code" class="w-36 h-36" />
+        </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="flex justify-center mb-4">
+        <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition">
+          Cetak
+        </button>
+      </div>
+      <div class="mb-4">
+        <label for="tray-select" class="block text-sm font-medium text-gray-700 mb-1">Nama Nampan</label>
+        <select
+          id="tray-select"
+          v-model="selectedTrayId"
+          class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+        >
+          <option value="" disabled>Pilih Nampan</option>
+          <option v-for="tray in availableTrays" :key="tray.id" :value="tray.id">
+            {{ tray.nama }}
+          </option>
+        </select>
+      </div>
+      <div class="flex justify-end gap-2">
+        <button
+          @click="closePopup"
+          class="px-4 py-2 rounded border border-gray-300 text-gray-700 hover:bg-gray-100 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>
+      </div>
+    </div>
+  </div>
+</template>
 
 <script setup>
 import { ref, onMounted, computed } from "vue";
 import axios from "axios";
 
-// terima search dari parent
 const props = defineProps({
   search: {
     type: String,
     default: "",
   },
 });
-
-const emit = defineEmits(["edit", "delete"])
-
+const emit = defineEmits(["edit", "delete"]);
 const trays = ref([]);
 const loading = ref(true);
 const error = ref(null);
 
-// hitung total berat
-const totalWeight = (tray) => {
-  if (!tray.items) return 0;
-  return tray.items.reduce((sum, item) => sum + (item.produk.berat || 0), 0);
-};
-// const totalWeight = (tray) => {
-//   if (!tray.items) return 0;
-//   const total = tray.items.reduce((sum, item) => sum + (item.produk.berat || 0), 0);
-//   return total.toFixed(2); // hasil string "12.34"
-// };
+// --- State untuk Pop-up ---
+const isPopupVisible = ref(false);
+const selectedItem = ref(null);
+const selectedTrayId = ref("");
 
-// ambil data dari backend
-onMounted(async () => {
+// 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 '';
+});
+
+// --- Fungsi Pop-up ---
+const openMovePopup = (item) => {
+  selectedItem.value = item;
+  selectedTrayId.value = "";
+  isPopupVisible.value = true;
+};
+
+const closePopup = () => {
+  isPopupVisible.value = false;
+  selectedItem.value = null;
+  selectedTrayId.value = "";
+};
+
+const saveMove = async () => {
+  if (!selectedTrayId.value || !selectedItem.value) return;
+  try {
+    await axios.put(`/api/item/${selectedItem.value.id}`, {
+      id_nampan: selectedTrayId.value,
+      id_produk: selectedItem.value.id_produk, // ikutkan id_produk karena API minta
+    });
+
+    await refreshData();
+    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"),
-      axios.get("/api/item")
+      axios.get("/api/item"),
     ]);
-
     const nampans = nampanRes.data;
     const items = itemRes.data;
 
-    // mapping items ke nampan
-    trays.value = nampans.map(tray => {
+    trays.value = nampans.map((tray) => {
       return {
         ...tray,
-        items: items.filter(item => item.id_nampan === tray.id)
+        // pastikan tipe sama (string/number)
+        items: items.filter((item) => Number(item.id_nampan) === Number(tray.id)),
       };
     });
-
-    console.log("Nampan dengan items:", trays.value);
   } catch (err) {
     error.value = err.message || "Gagal mengambil data";
   } finally {
     loading.value = false;
   }
-});
+};
 
-// filter berdasarkan nama nampan
+// Hitung total berat
+const totalWeight = (tray) => {
+  if (!tray.items) return 0;
+  const total = tray.items.reduce((sum, item) => sum + (item.produk.berat || 0), 0);
+  return total.toFixed(2);
+};
+
+// Filter nampan berdasarkan pencarian
 const filteredTrays = computed(() => {
   if (!props.search) return trays.value;
   return trays.value.filter((tray) =>
     tray.nama.toLowerCase().includes(props.search.toLowerCase())
   );
 });
-</script>
\ No newline at end of file
+
+// Daftar nampan lain (selain tempat item saat ini)
+const availableTrays = computed(() => {
+  if (!selectedItem.value || !trays.value) return [];
+  return trays.value.filter(
+    (tray) => Number(tray.id) !== Number(selectedItem.value.id_nampan)
+  );
+});
+
+onMounted(() => {
+  refreshData();
+});
+</script>
diff --git a/resources/js/pages/InputProduk.vue b/resources/js/pages/InputProduk.vue
index 5f4a1ae..05fcfe8 100644
--- a/resources/js/pages/InputProduk.vue
+++ b/resources/js/pages/InputProduk.vue
@@ -20,7 +20,7 @@
 
           <div class="mb-3">
             <label class="block text-D mb-1">Kategori</label>
-            <InputSelect v-model="form.kategori" :options="category" placeholder="Pilih kategori" />
+            <InputSelect v-model="form.id_kategori" :options="category" placeholder="Pilih kategori" />
           </div>
 
           <div class="mb-3 flex flex-row w-full gap-3">
@@ -69,20 +69,20 @@
             <!-- Upload Button -->
             <div v-if="uploadedImages.length < 6" @drop="handleDrop" @dragover.prevent
               @dragenter.prevent="isDragging = true" @dragleave.prevent="isDragging = false" @click="triggerFileInput"
-              class="aspect-square bg-gray-50 border-2 border-dashed border-gray-300 rounded-lg flex flex-col items-center justify-center cursor-pointer hover:border-blue-400 hover:bg-blue-50 transition-colors group"
+              class="aspect-square bg-gray-50 border-2 border-dashed border-gray-300 rounded-lg flex flex-col items-center justify-center cursor-pointer hover:border-D hover:bg-blue-50 transition-colors group"
               :class="{
                 'border-blue-400 bg-blue-50': isDragging,
                 'cursor-not-allowed opacity-50': uploadLoading
               }">
               <div class="text-center">
                 <div v-if="!uploadLoading"
-                  class="w-12 h-12 bg-blue-600 rounded-lg flex items-center justify-center mx-auto mb-2 group-hover:bg-blue-700 transition-colors">
+                  class="w-12 h-12 bg-D rounded-lg flex items-center justify-center mx-auto mb-2 group-hover:bg-D transition-colors">
                   <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                       d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                   </svg>
                 </div>
-                <div v-else class="w-12 h-12 bg-blue-600 rounded-lg flex items-center justify-center mx-auto mb-2">
+                <div v-else class="w-12 h-12 bg-D rounded-lg flex items-center justify-center mx-auto mb-2">
                   <svg class="animate-spin w-6 h-6 text-white" fill="none" viewBox="0 0 24 24">
                     <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                     <path class="opacity-75" fill="currentColor"
@@ -135,19 +135,28 @@ const router = useRouter();
 
 const form = ref({
   nama: '',
-  kategori: '',
+  id_kategori: null,
   berat: 0,
   kadar: 0,
   harga_per_gram: 0,
   harga_jual: 0,
 });
 
-const category = ref([
-  { value: "cincin", label: "Cincin" },
-  { value: "gelang", label: "Gelang" },
-  { value: "kalung", label: "Kalung" },
-  { value: "anting", label: "Anting" },
-]);
+const category = ref([]);
+
+const loadKategori = async () => {
+  try {
+    const response = await axios.get('/api/kategori');
+    if (response.data && Array.isArray(response.data)) {
+      category.value = response.data.map(cat => ({
+        value: cat.id,
+        label: cat.nama
+      }));
+    }
+  } catch (error) {
+    console.error('Error loading categories:', error);
+  }
+};
 
 const loading = ref(false);
 const uploadLoading = ref(false);
@@ -163,7 +172,7 @@ const createdProduct = ref(null);
 
 const isFormValid = computed(() => {
   return form.value.nama &&
-    form.value.kategori &&
+    form.value.id_kategori &&
     form.value.berat > 0 &&
     form.value.kadar > 0 &&
     form.value.harga_per_gram > 0 &&
@@ -311,7 +320,7 @@ const submitForm = async (addItem) => {
     // Reset form
     form.value = {
       nama: '',
-      kategori: '',
+      id_kategori: '',
       berat: 0,
       kadar: 0,
       harga_per_gram: 0,
@@ -347,7 +356,7 @@ const submitForm = async (addItem) => {
 const resetForm = async () => {
   form.value = {
     nama: '',
-    kategori: '',
+    id_kategori: '',
     berat: 0,
     kadar: 0,
     harga_per_gram: 0,
@@ -372,5 +381,6 @@ const back = () => {
 
 onMounted(() => {
   loadExistingPhotos();
+  loadKategori();
 });
 </script>
diff --git a/resources/js/pages/Produk.vue b/resources/js/pages/Produk.vue
index e57a268..5ea1019 100644
--- a/resources/js/pages/Produk.vue
+++ b/resources/js/pages/Produk.vue
@@ -21,16 +21,7 @@
       <!-- Filter -->
       <div class="mt-3 flex flex-col md:flex-row md:items-center md:justify-between gap-3">
         <!-- Dropdown Kategori -->
-        <select
-          v-model="selectedCategory"
-          class="border border-gray-300 rounded-md px-3 py-2 bg-B focus:outline-none focus:ring-2 focus:ring-B w-full md:w-48"
-        >
-          <option value="semua">Semua</option>
-          <option value="cincin">Cincin</option>
-          <option value="gelang">Gelang</option>
-          <option value="kalung">Kalung</option>
-          <option value="anting">Anting</option>
-        </select>
+        <InputSelect v-model="selectedCategory" :options="kategori" class="w-full md:w-48" />
 
         <!-- Search -->
         <searchbar v-model:search="searchQuery" class="flex-1" />
@@ -160,10 +151,11 @@ import ProductCard from "../components/ProductCard.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 products = ref([]);
 const searchQuery = ref("");
-const selectedCategory = ref("semua");
+const selectedCategory = ref(0);
 const creatingItem = ref(false);
 const deleting = ref(false);
 
@@ -171,6 +163,36 @@ const detail = ref({});
 const showOverlay = ref(false);
 const currentFotoIndex = ref(0);
 
+const kategori = ref([]);
+
+const loadKategori = async () => {
+  try {
+    const response = await axios.get('/api/kategori');
+    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);
+  }
+};
+
+const loadProduk = async () => {
+  try {
+    const response = await axios.get('/api/produk');
+    if (response.data && Array.isArray(response.data)) {
+      products.value = response.data;
+    }
+  } catch (error) {
+    console.error('Error loading products:', error);
+  }
+};
+
 // Buka modal item
 const openItemModal = () => {
   creatingItem.value = true;
@@ -181,21 +203,17 @@ const closeItemModal = () => {
 
 // Fetch data awal
 onMounted(async () => {
-  try {
-    const res = await axios.get("/api/produk");
-    products.value = res.data;
-  } catch (error) {
-    console.error("Gagal ambil data produk:", error);
-  }
+  loadKategori()
+  loadProduk();
 });
 
 // Filter produk (kategori + search)
 const filteredProducts = computed(() => {
   let hasil = products.value;
 
-  if (selectedCategory.value !== "semua") {
+  if (selectedCategory.value != 0) {
     hasil = hasil.filter(
-      (p) => p.kategori.toLowerCase() === selectedCategory.value
+      (p) => p.id_kategori == selectedCategory.value
     );
   }
 
diff --git a/routes/web.php b/routes/web.php
index ac3aef3..e4d9f5a 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -2,6 +2,7 @@
 
 use App\Http\Controllers\FotoSementaraController;
 use App\Http\Controllers\ItemController;
+use App\Http\Controllers\KategoriController;
 use App\Http\Controllers\NampanController;
 use App\Http\Controllers\ProdukController;
 use App\Http\Controllers\SalesController;
@@ -17,6 +18,7 @@ Route::prefix('api')->group(function () {
     Route::apiResource('sales', SalesController::class);
     Route::apiResource('user', UserController::class);
     Route::apiResource('transaksi', TransaksiController::class);
+    Route::apiResource('kategori', KategoriController::class);
     
     Route::get('brankas', [ItemController::class, 'brankasItem']);