diff --git a/resources/js/components/BrankasList.vue b/resources/js/components/BrankasList.vue
index af0ee7c..032ceec 100644
--- a/resources/js/components/BrankasList.vue
+++ b/resources/js/components/BrankasList.vue
@@ -107,19 +107,37 @@
         </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 @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>
+        <!-- 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 @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">
@@ -151,6 +169,7 @@
 <script setup>
 import { ref, computed, onMounted } from "vue";
 import axios from "axios";
+import ConfirmDeleteModal from './ConfirmDeleteModal.vue';
 
 const props = defineProps({
   search: {
@@ -173,6 +192,8 @@ const selectedTrayId = ref("");
 const errorMove = ref("");
 const isMoving = ref(false);
 
+const showDeleteConfirm = ref(false);
+
 // State modal konfirmasi
 const isConfirmModalVisible = ref(false);
 const confirmModalTitle = ref("");
@@ -221,6 +242,44 @@ const closePopup = () => {
   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")}` },
+    });
+
+    // Tampilkan alert sukses
+    alert.value = { success: `Item ${selectedItem.value.kode_item} berhasil dihapus.` };
+
+    // Refresh data
+    await refreshData();
+
+    // 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;
   
diff --git a/resources/js/components/ProductCard.vue b/resources/js/components/ProductCard.vue
index bac5015..e70a0c8 100644
--- a/resources/js/components/ProductCard.vue
+++ b/resources/js/components/ProductCard.vue
@@ -1,31 +1,59 @@
 <template>
-  <div
-    class="relative z-0 border  border-C rounded-md aspect-square flex items-center justify-center hover:shadow-md transition cursor-pointer overflow-hidden"
-    @click="$emit('click', product.id)"
-  >
-    <!-- Foto Produk -->
-    <img
-      v-if="product.foto && product.foto.length > 0"
-      :src="product.foto[0].url"
-      :alt="product.nama"
-      class="w-full h-full object-cover"
-    />
-    <span v-else class="text-gray-400 text-sm">[tidak ada foto]</span>
-
-    <!-- Nama Produk di bawah -->
+  <div class="relative">
+    <!-- Card Produk -->
     <div
-      class="absolute bottom-0 w-full bg-black/60 text-white text-center text-sm py-1"
+      class="relative z-0 border border-C rounded-md aspect-square flex items-center justify-center hover:shadow-md transition cursor-pointer overflow-hidden"
+      @click="$emit('click', product.id)"
     >
-      {{ product.nama }}
+      <!-- Foto Produk -->
+      <img
+        v-if="product.foto && product.foto.length > 0"
+        :src="product.foto[0].url"
+        :alt="product.nama"
+        class="w-full h-full object-cover"
+      />
+      <span v-else class="text-gray-400 text-sm">[tidak ada foto]</span>
+
+      <!-- Nama Produk di bawah -->
+      <div
+        class="absolute bottom-0 w-full bg-black/60 text-white text-center text-sm py-1"
+      >
+        {{ product.nama }}
+      </div>
+    </div>
+
+    <!-- Notifikasi Stok Menipis (di luar card) -->
+    <div
+      v-if="isStockLow"
+      class="absolute -top-2 -right-2 group z-20"
+    >
+      <!-- Bulatan Merah -->
+      <div class="w-5 h-5 bg-red-500 rounded-full flex items-center justify-center cursor-help border-2 border-white shadow-md">
+        <span class="text-white text-xs font-bold">!</span>
+      </div>
+
+      <!-- Tooltip -->
+      <div class="absolute top-6 -right-4 bg-red-600 text-white text-xs px-3 py-2 rounded shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap z-30">
+        Stok menipis: {{ product.items_count }} pcs
+        <!-- Arrow untuk tooltip -->
+        <div class="absolute -top-1 left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-2 border-r-2 border-b-2 border-transparent border-b-red-600"></div>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-defineProps({
+import { computed } from 'vue';
+
+const props = defineProps({
   product: {
     type: Object,
     required: true,
   },
 });
+
+// Computed untuk mengecek apakah stok menipis (kurang dari 5)
+const isStockLow = computed(() => {
+  return props.product.items_count < 5;
+});
 </script>
diff --git a/resources/js/components/TrayList.vue b/resources/js/components/TrayList.vue
index 27cae7c..330921d 100644
--- a/resources/js/components/TrayList.vue
+++ b/resources/js/components/TrayList.vue
@@ -49,33 +49,23 @@
         </div>
 
         <!-- 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-[168px] pr-1"
->
-  <div
-    v-for="item in tray.items"
-    :key="item.id"
-    class="flex justify-between items-center border border-C rounded-lg p-2 cursor-pointer hover:bg-gray-50"
-    @click="openMovePopup(item)"
-  >
-    <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="size-12 object-cover rounded"
-      />
-      <div class="text-D">
-        <p class="text-sm">{{ item.produk?.nama }}</p>
-        <p class="text-sm font-medium">{{ item.kode_item }}</p>
-      </div>
-    </div>
-    <div class="flex items-center gap-2">
-      <span class="font-medium">{{ item.produk?.berat }}g</span>
-    </div>
-  </div>
-</div>
+        <div v-if="tray.items && tray.items.length" class="space-y-2 flex-1 overflow-y-auto max-h-[168px] pr-1">
+          <div v-for="item in tray.items" :key="item.id"
+            class="flex justify-between items-center border border-C rounded-lg p-2 cursor-pointer hover:bg-gray-50"
+            @click="openMovePopup(item)">
+            <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="size-12 object-cover rounded" />
+              <div class="text-D">
+                <p class="text-sm">{{ item.produk.nama }}</p>
+                <p class="text-sm font-medium">{{ item.kode_item }}</p>
+              </div>
+            </div>
+            <div class="flex items-center gap-2">
+              <span class="font-medium">{{ item.produk.berat }}g</span>
+            </div>
+          </div>
+        </div>
 
         <!-- Kalau kosong -->
         <div v-else class="text-gray-400 text-center py-4 flex-1">
@@ -107,7 +97,7 @@
         {{ selectedItem.kode_item }}
       </div>
       <div class="text-center text-gray-700 font-medium mb-3">
-        {{ selectedItem.produk?.nama }}
+        {{ selectedItem.produk.nama }}
       </div>
 
       <div class="flex justify-center mb-4">
@@ -128,9 +118,14 @@
       </div>
 
       <div class="flex justify-end gap-2">
+
         <button @click="closePopup" class="px-4 py-2 rounded bg-gray-400 hover:bg-gray-500 text-white transition">
           {{ isAdmin ? 'Batal' : 'Tutup' }}
         </button>
+        <button @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 v-if="isAdmin" @click="saveMove" :disabled="!selectedTrayId" class="px-4 py-2 rounded transition"
           :class="selectedTrayId ? 'bg-C hover:bg-C/80 text-D' : 'bg-gray-400 cursor-not-allowed'">
           Simpan
@@ -138,12 +133,24 @@
       </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"
+    />
 </template>
 
 <script setup>
 import { ref, onMounted, computed } from "vue";
 import axios from "axios";
 import InputSelect from "./InputSelect.vue";
+import ConfirmDeleteModal from './ConfirmDeleteModal.vue';
 
 const isAdmin = localStorage.getItem("role") === "owner";
 
@@ -212,6 +219,47 @@ const printQR = () => {
   }
 };
 
+const showDeleteConfirm = ref(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")}` },
+    });
+
+    // Tampilkan alert sukses
+    alert.value = { success: `Item ${selectedItem.value.kode_item} berhasil dihapus.` };
+
+    // Refresh data
+    await refreshData();
+
+    // 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;
+};
+
 // --- Fungsi Pop-up ---
 const openMovePopup = (item) => {
   selectedItem.value = item;
@@ -248,7 +296,7 @@ const saveMove = async () => {
 // Hitung total berat
 const totalWeight = (tray) => {
   if (!tray.items) return 0;
-  const total = tray.items.reduce((sum, item) => sum + (item.produk?.berat || 0), 0);
+  const total = tray.items.reduce((sum, item) => sum + (item.produk.berat || 0), 0);
   return total.toFixed(2);
 };