diff --git a/app/Http/Controllers/AuthController.php b/app/Http/Controllers/AuthController.php
index e05cca7..58f2d37 100644
--- a/app/Http/Controllers/AuthController.php
+++ b/app/Http/Controllers/AuthController.php
@@ -18,7 +18,7 @@ class AuthController extends Controller
         ]);
 
         // cari user berdasarkan nama
-        $user = User::where('nama', $request->nama)->first();
+        $user = User::whereRaw('BINARY nama = ?', [$request->nama])->first();
 
         if (!$user || !Hash::check($request->password, $user->password)) {
             return response()->json([
diff --git a/resources/js/components/BrankasList.vue b/resources/js/components/BrankasList.vue
index cdbe95a..7bf2a26 100644
--- a/resources/js/components/BrankasList.vue
+++ b/resources/js/components/BrankasList.vue
@@ -37,6 +37,16 @@
       </div>
     </div>
 
+    <!-- Sorting Controls -->
+    <div class="mb-4 flex items-center gap-2">
+      <label for="sort-select" class="text-sm font-medium text-gray-700">Urutkan:</label>
+      <select id="sort-select" v-model="sortOrder"
+        class="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="asc">Nama (A-Z)</option>
+        <option value="desc">Nama (Z-A)</option>
+      </select>
+    </div>
+
     <!-- Daftar Item -->
     <div v-if="filteredItems.length === 0" class="text-center text-gray-500 py-[120px]">
       {{ props.search ? 'Item tidak ditemukan.' : 'Brankas kosong.' }}
@@ -93,7 +103,7 @@
             Batal
           </button>
 
-          <button @click="showDeleteConfirm = true"
+          <button v-if="isAdmin" @click="showDeleteConfirm = true"
             class="px-4 py-2 rounded bg-red-500 text-white hover:bg-red-600 transition flex items-center">
             <i class="fas fa-trash mr-2"></i>Hapus
           </button>
@@ -162,6 +172,7 @@ const trays = ref([]);
 const loading = ref(true);
 const alert = ref(null);
 const timer = ref(null);
+const sortOrder = ref("asc");
 
 // State modal pindah
 const isPopupVisible = ref(false);
@@ -169,6 +180,7 @@ const selectedItem = ref(null);
 const selectedTrayId = ref("");
 const errorMove = ref("");
 const isMoving = ref(false);
+const isAdmin = localStorage.getItem('role') == 'admin'
 
 const showDeleteConfirm = ref(false);
 
@@ -188,11 +200,26 @@ const totalWeight = computed(() => {
 });
 
 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())
-  );
+  let filtered = items.value;
+  
+  if (props.search) {
+    filtered = filtered.filter((item) =>
+      item.produk?.nama?.toLowerCase().includes(props.search.toLowerCase()) ||
+      item.kode_item?.toLowerCase().includes(props.search.toLowerCase())
+    );
+  }
+  
+  // Sorting berdasarkan nama produk
+  return filtered.sort((a, b) => {
+    const nameA = (a.produk?.nama || "").toLowerCase();
+    const nameB = (b.produk?.nama || "").toLowerCase();
+    
+    if (sortOrder.value === "asc") {
+      return nameA.localeCompare(nameB);
+    } else {
+      return nameB.localeCompare(nameA);
+    }
+  });
 });
 
 // Fungsi modal pindah
diff --git a/resources/js/components/BrankasTabel.vue b/resources/js/components/BrankasTabel.vue
new file mode 100644
index 0000000..eae6f26
--- /dev/null
+++ b/resources/js/components/BrankasTabel.vue
@@ -0,0 +1,390 @@
+<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 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>
+
+    <!-- Sorting Controls -->
+    <div class="mb-4 flex items-center gap-2">
+      <label for="sort-select" class="text-sm font-medium text-gray-700">Urutkan:</label>
+      <select id="sort-select" v-model="sortOrder"
+        class="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="asc">Nama (A-Z)</option>
+        <option value="desc">Nama (Z-A)</option>
+      </select>
+    </div>
+
+    <!-- Daftar Item - Tabel -->
+    <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="overflow-x-auto border border-C rounded-lg shadow-sm">
+      <table class="min-w-full divide-y divide-C">
+        <thead class="bg-A">
+          <tr>
+            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-D uppercase tracking-wider">
+              Gambar
+            </th>
+            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-D uppercase tracking-wider">
+              Nama Produk
+            </th>
+            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-D uppercase tracking-wider">
+              Kode Item
+            </th>
+            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-D uppercase tracking-wider">
+              Berat
+            </th>
+          </tr>
+        </thead>
+        <tbody class="bg-white divide-y divide-gray-200">
+          <tr v-for="item in filteredItems" :key="item.id"
+            class="hover:bg-gray-50 transition cursor-pointer"
+            @click="openMovePopup(item)">
+            <td class="px-6 py-4 whitespace-nowrap">
+              <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>
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap">
+              <p class="font-semibold text-D">{{ item.produk?.nama }}</p>
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap">
+              <p class="text-sm text-gray-500 font-semibold">{{ item.kode_item }}</p>
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap">
+              <span class="font-medium text-D">{{ item.produk?.berat }}g</span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Modal Pindah Nampan -->
+    <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">
+        <PrintBarcode :code="selectedItem?.kode_item" :item="selectedItem?.produk" />
+
+        <!-- Dropdown pilih nampan -->
+        <div class="mb-4">
+          <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 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 border-gray-300 text-gray-700 hover:bg-gray-50 transition">
+            Batal
+          </button>
+
+          <button v-if="isAdmin" @click="showDeleteConfirm = true"
+            class="px-4 py-2 rounded bg-red-500 text-white hover:bg-red-600 transition flex items-center">
+            <i class="fas fa-trash mr-2"></i>Hapus
+          </button>
+
+          <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>
+
+    <!-- Modal Konfirmasi Hapus -->
+    <ConfirmDeleteModal :isOpen="showDeleteConfirm" title="Konfirmasi Hapus Item"
+      message="Apakah kamu yakin ingin menghapus item ini?" confirmText="Ya, Hapus" cancelText="Batal"
+      @confirm="confirmDelete" @cancel="cancelDelete" />
+
+    <!-- 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>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from "vue";
+import axios from "axios";
+import ConfirmDeleteModal from './ConfirmDeleteModal.vue';
+import PrintBarcode from './PrintBarcode.vue';
+
+const props = defineProps({
+  search: {
+    type: String,
+    default: "",
+  },
+});
+
+const items = ref([]);
+const trays = ref([]);
+const loading = ref(true);
+const alert = ref(null);
+const timer = ref(null);
+const sortOrder = ref("asc");
+
+// State modal pindah
+const isPopupVisible = ref(false);
+const selectedItem = ref(null);
+const selectedTrayId = ref("");
+const errorMove = ref("");
+const isMoving = ref(false);
+const isAdmin = localStorage.getItem('role') == 'admin'
+
+const showDeleteConfirm = ref(false);
+
+// State modal konfirmasi
+const isConfirmModalVisible = ref(false);
+const confirmModalTitle = ref("");
+const confirmModalMessage = ref("");
+const confirmText = ref("Ya, Konfirmasi");
+const cancelText = ref("Batal");
+
+// Computed untuk statistik
+const totalWeight = computed(() => {
+  const total = filteredItems.value.reduce((sum, item) => {
+    return sum + (item?.produk?.berat || 0);
+  }, 0);
+  return total.toFixed(2);
+});
+
+const filteredItems = computed(() => {
+  let filtered = items.value;
+  
+  if (props.search) {
+    filtered = filtered.filter((item) =>
+      item.produk?.nama?.toLowerCase().includes(props.search.toLowerCase()) ||
+      item.kode_item?.toLowerCase().includes(props.search.toLowerCase())
+    );
+  }
+  
+  // Sorting berdasarkan nama produk
+  return filtered.sort((a, b) => {
+    const nameA = (a.produk?.nama || "").toLowerCase();
+    const nameB = (b.produk?.nama || "").toLowerCase();
+    
+    if (sortOrder.value === "asc") {
+      return nameA.localeCompare(nameB);
+    } else {
+      return nameB.localeCompare(nameA);
+    }
+  });
+});
+
+// Fungsi modal pindah
+const openMovePopup = (item) => {
+  selectedItem.value = item;
+  selectedTrayId.value = "";
+  errorMove.value = "";
+  isPopupVisible.value = true;
+};
+
+const closePopup = () => {
+  isPopupVisible.value = false;
+  selectedItem.value = null;
+  selectedTrayId.value = "";
+  errorMove.value = "";
+  isMoving.value = false;
+};
+
+const confirmDelete = async () => {
+  if (!selectedItem.value) return;
+
+  try {
+    // Panggil API hapus item
+    await axios.delete(`/api/item/${selectedItem.value.id}`, {
+      headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
+    });
+    // Tutup modal & popup
+    showDeleteConfirm.value = false;
+    closePopup();
+
+    // Auto hide alert
+    clearTimeout(timer.value);
+    timer.value = setTimeout(() => { alert.value = null; }, 3000);
+  } catch (err) {
+    console.error("Gagal menghapus item:", err.response?.data || err);
+    alert.value = { error: err.response?.data?.message || "Gagal menghapus item. Silakan coba lagi." };
+
+    // Auto hide alert error
+    clearTimeout(timer.value);
+    timer.value = setTimeout(() => { alert.value = null; }, 5000);
+  }
+};
+
+const cancelDelete = () => {
+  showDeleteConfirm.value = false;
+};
+
+const saveMove = async () => {
+  if (!selectedTrayId.value || !selectedItem.value || isMoving.value) return;
+
+  errorMove.value = "";
+  isMoving.value = true;
+
+  try {
+    await axios.put(
+      `/api/item/${selectedItem.value.id}`,
+      {
+        id_nampan: selectedTrayId.value,
+        id_produk: selectedItem.value.id_produk,
+      },
+      {
+        headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
+      }
+    );
+
+    // 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);
+    errorMove.value = err.response?.data?.message || "Gagal memindahkan item. Silakan coba lagi.";
+  } finally {
+    isMoving.value = false;
+  }
+};
+
+// 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();
+};
+
+const handleImageError = (event) => {
+  event.target.style.display = 'none';
+};
+
+// Ambil data
+const refreshData = async () => {
+  try {
+    const [itemRes, trayRes] = await Promise.all([
+      axios.get("/api/item", {
+        headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
+      }),
+      axios.get("/api/nampan", {
+        headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
+      }),
+    ]);
+
+    // 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) {
+    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);
+</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>
\ No newline at end of file
diff --git a/resources/js/components/KasirForm.vue b/resources/js/components/KasirForm.vue
index 3377f9c..a9f76ce 100644
--- a/resources/js/components/KasirForm.vue
+++ b/resources/js/components/KasirForm.vue
@@ -20,7 +20,7 @@
     @close="closeStrukView"
   />
 
-  <div class="p-2 sm:p-4">
+  <div class="p-2 sm:p-4 h-120 relative">
     <!-- Grid Form & Total -->
     <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
       <!-- Input Form -->
@@ -61,10 +61,6 @@
             class="w-full sm:w-auto px-4 py-2 rounded-md bg-C text-D font-medium hover:bg-C/80 transition">
             Tambah Item
           </button>
-          <button @click="konfirmasiPenjualan"
-            class="w-full sm:w-auto px-6 py-2 rounded-md bg-D text-A font-semibold hover:bg-D/80 transition">
-            Lanjut
-          </button>
         </div>
       </div>
 
@@ -125,7 +121,12 @@
         </tbody>
       </table>
     </div>
-
+    <div class="absolute bottom-0 right-1">
+      <button @click="konfirmasiPenjualan"
+        class="w-full sm:w-auto px-6 py-2 rounded-md bg-D text-A font-semibold hover:bg-D/80 transition">
+        Lanjut
+      </button>
+    </div>
   </div>
 </template>
 
diff --git a/resources/js/pages/Brankas.vue b/resources/js/pages/Brankas.vue
index ae8d591..154024e 100644
--- a/resources/js/pages/Brankas.vue
+++ b/resources/js/pages/Brankas.vue
@@ -2,12 +2,32 @@
   <mainLayout>
     <div class="p-6">
       <p class="font-serif italic text-[25px] text-D">BRANKAS</p>
+      <div class="mb-4">
+        <ul class="flex flex-wrap text-center" role="tablist">
+          <li v-for="tab in tabs" class="mr-2" role="presentation">
+            <button :class="[
+              'inline-block p-2 border-b-2 rounded-t-lg',
+              activeTab === tab.id
+                ? 'border-D text-D'
+                : 'border-transparent text-D hover:text-D/50 hover:border-D',
+            ]" @click="activeTab = tab.id" type="button" role="tab" aria-controls="ringkasan-content"
+              :aria-selected="activeTab === tab.id">
+              {{ tab.name }}
+            </button>
+          </li>
+        </ul>
+      </div>
       <div class="flex justify-end">
         <div class="w-full md:w-64 my-3 mb-9">
           <searchbar v-model:search="searchQuery"/>
         </div>
-      </div>
-      <BrankasList :search="searchQuery" />
+        </div>
+      <template v-if="activeTab == 'tabel'">
+        <BrankasTabel :search="searchQuery" />
+      </template>
+      <template v-if="activeTab == 'card'">
+        <BrankasList :search="searchQuery" />
+      </template>
     </div>
   </mainLayout>
 </template>
@@ -17,5 +37,13 @@ import { ref } from 'vue';
 import mainLayout from '../layouts/mainLayout.vue'
 import searchbar from '../components/Searchbar.vue';
 import BrankasList from '../components/BrankasList.vue';
+import BrankasTabel from '../components/BrankasTabel.vue';
 const searchQuery = ref("");
+
+const activeTab = ref('tabel');
+
+const tabs = [
+  { name: 'Tabel', id: 'tabel' },
+  { name: 'Kartu', id: 'card' },
+];
 </script>
diff --git a/resources/js/pages/InputProduk.vue b/resources/js/pages/InputProduk.vue
index dae1e0f..de159a8 100644
--- a/resources/js/pages/InputProduk.vue
+++ b/resources/js/pages/InputProduk.vue
@@ -11,7 +11,8 @@
         <div class="flex-1">
           <div class="mb-3">
             <label class="block text-D mb-1">Nama Produk</label>
-            <InputField v-model="form.nama" type="text" placeholder="Masukkan nama produk" @input="errors.nama = null" />
+            <InputField v-model="form.nama" type="text" placeholder="Masukkan nama produk"
+              @input="errors.nama = null" />
             <p v-if="errors.nama" class="text-sm text-red-500 mt-1">{{ errors.nama[0] }}</p>
           </div>
 
@@ -24,34 +25,25 @@
             <div class="flex-1">
               <label class="block text-D mb-1">Berat (g)</label>
               <InputField v-model="form.berat" type="number" step="0.01" placeholder="Masukkan berat"
-                          @input="calculateHargaJual" />
+                @input="calculateHargaJual" />
             </div>
             <div class="flex-1">
               <label class="block text-D mb-1">Kadar (K)</label>
               <InputField v-model="form.kadar" type="number" placeholder="Masukkan kadar" />
+              <p v-if="errors.kadar" class="text-sm text-red-500 mt-1">{{ errors.kadar }}</p>
             </div>
           </div>
 
           <div class="mb-3 flex flex-row w-full gap-3">
             <div class="flex-1">
               <label class="block text-D mb-1">Harga per Gram</label>
-              <InputField
-                v-model="hargaPerGramFormatted"
-                type="text"
-                placeholder="Masukkan harga per gram"
-                @input="formatHargaPerGramInput"
-                @keypress="onlyNumbers"
-              />
+              <InputField v-model="hargaPerGramFormatted" type="text" placeholder="Masukkan harga per gram"
+                @input="formatHargaPerGramInput" @keypress="onlyNumbers" />
             </div>
             <div class="flex-1">
               <label class="block text-D mb-1">Harga Jual</label>
-              <InputField
-                v-model="hargaJualFormatted"
-                type="text"
-                placeholder="Masukkan harga jual"
-                @input="formatHargaJualInput"
-                @keypress="onlyNumbers"
-              />
+              <InputField v-model="hargaJualFormatted" type="text" placeholder="Masukkan harga jual"
+                @input="formatHargaJualInput" @keypress="onlyNumbers" />
             </div>
           </div>
         </div>
@@ -66,7 +58,7 @@
               <div class="w-full h-full bg-gray-100 rounded-lg border-2 border-gray-200 overflow-hidden">
                 <img :src="image.url" :alt="`Foto ${index + 1}`" class="w-full h-full object-cover" />
                 <button @click="removeImage(image.id)" :disabled="uploadLoading"
-                        class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold shadow-lg hover:bg-red-600 transition-colors disabled:bg-gray-400">
+                  class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold shadow-lg hover:bg-red-600 transition-colors disabled:bg-gray-400">
                   ×
                 </button>
               </div>
@@ -75,38 +67,38 @@
             <!-- Upload Button -->
             <div v-if="uploadedImages.length < 6" class="relative aspect-square">
               <div @drop="handleDrop" @dragover.prevent @dragenter.prevent="isDragging = true"
-                   @dragleave.prevent="isDragging = false" @click="toggleUploadMenu"
-                   class="w-full h-full 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 }">
+                @dragleave.prevent="isDragging = false" @click="toggleUploadMenu"
+                class="w-full h-full 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-D rounded-lg flex items-center justify-center mx-auto mb-2 group-hover:bg-D 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>
+                        d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                     </svg>
                   </div>
                   <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"
-                            d="m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
+                        d="m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
                       </path>
                     </svg>
                   </div>
                   <p class="text-xs text-gray-600 font-medium"
-                     v-html="uploadLoading ? 'Uploading...' : 'Unggah<br/>Foto'"></p>
+                    v-html="uploadLoading ? 'Uploading...' : 'Unggah<br/>Foto'"></p>
                 </div>
               </div>
 
               <!-- Dropdown Menu -->
               <div v-if="showUploadMenu"
-                   class="absolute top-full left-0 mt-2 w-60 bg-white border border-gray-200 rounded-lg shadow-lg z-20">
+                class="absolute top-full left-0 mt-2 w-60 bg-white border border-gray-200 rounded-lg shadow-lg z-20">
                 <button @click="triggerFileUpload"
-                        class="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center space-x-3 border-b border-gray-100">
+                  class="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center space-x-3 border-b border-gray-100">
                   <svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                          d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
+                      d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
                   </svg>
                   <div>
                     <div class="font-medium text-gray-900">Upload dari File</div>
@@ -115,12 +107,12 @@
                 </button>
 
                 <button @click="openCameraModal"
-                        class="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center space-x-3">
+                  class="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center space-x-3">
                   <svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                          d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/>
+                      d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                          d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"/>
+                      d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
                   </svg>
                   <div>
                     <div class="font-medium text-gray-900">Ambil dari Kamera</div>
@@ -132,8 +124,8 @@
           </div>
 
           <!-- Hidden File Input -->
-          <input ref="fileInput" type="file" multiple accept="image/jpeg,image/jpg,image/png"
-                 @change="handleFileSelect" class="hidden" />
+          <input ref="fileInput" type="file" multiple accept="image/jpeg,image/jpg,image/png" @change="handleFileSelect"
+            class="hidden" />
 
           <p class="text-xs text-gray-500 mt-2">Format: JPG, JPEG, PNG (Max: 2MB per file, Max: 6 foto)</p>
           <div v-if="uploadError" class="mt-2 p-2 bg-red-50 border border-red-200 rounded text-sm text-red-600">
@@ -145,11 +137,11 @@
       <div class="mt-6 flex justify-end flex-row gap-3">
         <button @click="back" class="px-6 py-2 rounded-md bg-gray-400 hover:bg-gray-500 text-white">Batal</button>
         <button @click="submitForm(true)" :disabled="loading || !isFormValid"
-                class="bg-C text-D px-6 py-2 rounded-md hover:bg-B disabled:bg-B disabled:text-white disabled:cursor-not-allowed">
+          class="bg-C text-D px-6 py-2 rounded-md hover:bg-B disabled:bg-B disabled:text-white disabled:cursor-not-allowed">
           {{ loading ? 'Menyimpan...' : 'Tambah Item' }}
         </button>
         <button @click="submitForm(false)" :disabled="loading || !isFormValid"
-                class="bg-C text-D px-6 py-2 rounded-md hover:bg-B disabled:bg-B disabled:text-white disabled:cursor-not-allowed">
+          class="bg-green-400 text-D px-6 py-2 rounded-md hover:bg-green-300 disabled:bg-green-300 disabled:text-white disabled:cursor-not-allowed">
           {{ loading ? 'Menyimpan...' : 'Simpan' }}
         </button>
       </div>
@@ -433,6 +425,12 @@ const submitForm = async (addItem) => {
   }
   loading.value = true;
   try {
+    if (form.value.kadar % 1 != 0) {
+      errors.value = { kadar: "Masukkan bilangan bulat" };
+      return;
+    }
+    form.value.berat = Number(form.value.berat)
+    
     const response = await axios.post('/api/produk', form.value, {
       headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
     });
@@ -470,21 +468,21 @@ const submitForm = async (addItem) => {
 
 
 const back = async () => {
-    loading.value = true;
-    try{
-        console.log(localStorage.getItem("token"));
+  loading.value = true;
+  try {
+    console.log(localStorage.getItem("token"));
 
-        await axios.delete('/api/all/foto', {
-            headers: {
-                Authorization: `Bearer ${localStorage.getItem("token")}`,
-            },
-        });
-        router.push('/produk');
-    } catch (e){
-        console.error("Error image ", e);
-    } finally {
-        loading.value = false;
-    }
+    await axios.delete('/api/all/foto', {
+      headers: {
+        Authorization: `Bearer ${localStorage.getItem("token")}`,
+      },
+    });
+    router.push('/produk');
+  } catch (e) {
+    console.error("Error image ", e);
+  } finally {
+    loading.value = false;
+  }
 };
 
 const openCreateItemModal = (product) => {
@@ -503,4 +501,3 @@ onMounted(() => {
   loadKategori();
 });
 </script>
-
diff --git a/resources/js/pages/Produk.vue b/resources/js/pages/Produk.vue
index 5a4670d..d134bb3 100644
--- a/resources/js/pages/Produk.vue
+++ b/resources/js/pages/Produk.vue
@@ -28,16 +28,16 @@
         </div>
 
         <!-- Desktop Layout -->
-        <div class="hidden sm:flex flex-row gap-3 items-start">
+        <div class="hidden sm:flex flex-row gap-3 items-start md:justify-between">
           <!-- Filter -->
-          <div class="w-40 sm:w-48 shrink-0">
+          <div class="w-40 sm:w-120 gap-4 flex flex-row">
             <InputSelect v-model="selectedCategory" :options="kategori" class="w-full" />
+            <div class="w-300">
+              <searchbar v-model:search="searchQuery" class="w-full" />
+            </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
@@ -84,15 +84,19 @@
     <!-- 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">
+      <div class="relative bg-white rounded-lg shadow-lg p-6 w-[450px] border-2 border-B relative flex flex-col items-center">
         <!-- Foto Produk -->
+         
+          <button @click="closeOverlay" class="absolute top-1 right-1 text-red-500 font-bold px-2 py-1 text-xl">
+            <i class="fas fa-times"></i>
+          </button>
         <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">
+          <div class="absolute top-1 left-1 bg-black/60 text-white text-s font-bold px-2 py-1 rounded">
             {{ detail.items_count }} pcs
           </div>
 
@@ -130,6 +134,11 @@
           <p class="col-span-1 text-right">
             Rp. {{ formatNumber(detail.harga_per_gram) }}
           </p>
+
+          <p class="col-span-1">Stok item :</p>
+          <p class="col-span-1 text-right">
+            {{ detail.items_count }} pcs
+          </p>
         </div>
 
         <!-- Tombol Aksi -->
diff --git a/routes/web.php b/routes/web.php
index 87f2b59..bbf0144 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -25,7 +25,6 @@ Route::prefix('api')->group(function () {
     Route::middleware(['auth:sanctum', 'role:owner'])->group(function () {
         Route::apiResource('nampan', NampanController::class)->except(['index', 'show']);
         Route::apiResource('produk', ProdukController::class)->except(['index', 'show']);
-        Route::apiResource('item', ItemController::class)->except(['index', 'show']);
         Route::apiResource('sales', SalesController::class)->except(['index', 'show']);
         Route::apiResource('kategori', KategoriController::class)->except(['index', 'show']);
         Route::apiResource('user', UserController::class);
@@ -53,6 +52,7 @@ Route::prefix('api')->group(function () {
 
     Route::middleware(['auth:sanctum', 'role:owner,kasir'])->group(function () {
         Route::apiResource('transaksi', TransaksiController::class);
+        Route::apiResource('item', ItemController::class)->except(['index', 'show']);
         Route::get('produk', [ProdukController::class, 'index']);
         Route::get('produk/{id}', [ProdukController::class, 'show']);
         Route::get('nampan', [NampanController::class, 'index']);