Merge branch 'production' of https://git.abbauf.com/Magang-2025/Kasir into production

resources/js/components/ConfirmDeleteModal.vue

@@ -0,0 +1,40 @@
+<template>
+  <div
+    v-if="isOpen"
+    class="fixed inset-0 bg-black/50 flex items-center justify-center z-[9999]"
+  >
+    <div
+      class="bg-white rounded-lg shadow-lg p-6 w-[350px] text-center relative"
+    >
+      <!-- Judul -->
+      <p class="text-lg font-semibold mb-2">Yakin hapus produk ini?</p>
+
+      <!-- Deskripsi tambahan -->
+      <p class="text-sm text-gray-600 mb-4">
+        Produk yang sudah dihapus tidak akan bisa dikembalikan.
+      </p>
+
+      <!-- Tombol aksi -->
+      <div class="flex justify-center gap-3">
+        <button
+          @click="$emit('cancel')"
+          class="bg-gray-300 px-4 py-2 rounded hover:bg-gray-400"
+        >
+          Batal
+        </button>
+        <button
+          @click="$emit('confirm')"
+          class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600"
+        >
+          Hapus
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  isOpen: Boolean,
+});
+</script>

resources/js/pages/Produk.vue

@@ -1,12 +1,19 @@
 <template>
   <mainLayout>
-    <!-- Modal Buat Item - Sekarang menggunakan komponen terpisah -->
+    <!-- Modal Buat Item -->
     <CreateItemModal
       :isOpen="creatingItem"
       :product="detail"
       @close="closeItemModal"
     />
 
+    <!-- Modal Konfirmasi Hapus Produk -->
+    <ConfirmDeleteModal
+      :isOpen="deleting"
+      @cancel="deleting = false"
+      @confirm="deleteProduk"
+    />
+
     <div class="p-6">
       <!-- Judul -->
       <p class="font-serif italic text-[25px] text-D">PRODUK</p>
@@ -31,7 +38,10 @@
 
       <!-- Tombol Tambah Produk -->
       <div class="mt-3 flex justify-end">
-        <router-link to="/produk/baru" class="bg-C text-[#0a1a3c] px-4 py-2 rounded-md shadow hover:bg-C transition">
+        <router-link
+          to="/produk/baru"
+          class="bg-C text-[#0a1a3c] px-4 py-2 rounded-md shadow hover:bg-C transition"
+        >
           Tambah Produk
         </router-link>
       </div>
@@ -48,17 +58,18 @@
     </div>
 
     <!-- Overlay Detail Produk -->
-<div
+    <div
       v-if="showOverlay"
       class="fixed inset-0 bg-black/30 flex justify-center items-center z-50"
       @click.self="closeOverlay"
->
-  <div
-    class="bg-white rounded-lg shadow-lg p-6 w-[400px] border-2 border-[#e6d3b3] relative flex flex-col items-center"
-    @mouseleave="closeOverlay"
     >
-    <!-- Foto Produk dengan Slider -->
-    <div class="relative w-60 h-60 border border-[#e6d3b3] flex items-center justify-center mb-4 overflow-hidden rounded">
+      <div
+        class="bg-white rounded-lg shadow-lg p-6 w-[450px] border-2 border-[#e6d3b3] relative flex flex-col items-center"
+      >
+        <!-- Foto Produk -->
+        <div
+          class="relative w-72 h-72 border border-[#e6d3b3] flex items-center justify-center mb-3 overflow-hidden rounded"
+        >
           <img
             v-if="detail.foto && detail.foto.length > 0"
             :src="detail.foto[currentFotoIndex].url"
@@ -68,22 +79,17 @@
           <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">
-        {{ detail.items_count }} pcs
-      </div>
-
-      <!-- Nama Produk di bawah -->
           <div
-        class="absolute bottom-0 w-full bg-black/70 text-white text-center text-sm py-1"
+            class="absolute top-1 left-1 bg-black/60 text-white text-xs px-2 py-1 rounded"
           >
-        {{ detail.nama }}
+            {{ detail.items_count }} pcs
           </div>
 
           <!-- Tombol Prev -->
           <button
             v-if="detail.foto && detail.foto.length > 1"
             @click.stop="prevFoto"
-        class="absolute left-2 bg-white/70 hover:bg-white text-black px-2 py-1 rounded"
+            class="absolute left-2 bg-white/80 hover:bg-white text-black px-2 py-1 rounded-full shadow"
           >
             ‹
           </button>
@@ -91,40 +97,58 @@
           <button
             v-if="detail.foto && detail.foto.length > 1"
             @click.stop="nextFoto"
-        class="absolute right-2 bg-white/70 hover:bg-white text-black px-2 py-1 rounded"
+            class="absolute right-2 bg-white/80 hover:bg-white text-black px-2 py-1 rounded-full shadow"
           >
             ›
           </button>
         </div>
 
-    <!-- Detail Harga & Info -->
-    <div class="grid grid-cols-2 gap-2 text-sm mb-4 w-full">
-      <!-- harga beli dihapus -->
-      <p>Harga Jual : Rp. {{ formatNumber(detail.harga_jual) }}</p>
-      <p class="text-right">{{ detail.kadar }} K</p>
-      <p class="col-span-2 text-center">
-        Berat : {{ detail.berat }} gram
+        <!-- Nama Produk -->
+        <p class="text-lg font-semibold text-center mb-4">
+          {{ detail.nama }}
         </p>
-      <p class="col-span-2">
-        Harga/gram : Rp. {{ formatNumber(detail.harga_per_gram) }}
+
+        <!-- Detail Harga & Info -->
+        <div class="grid grid-cols-2 gap-y-2 gap-x-4 text-sm w-full mb-6">
+          <p class="col-span-1">Harga Jual :</p>
+          <p class="col-span-1 text-right">
+            Rp. {{ formatNumber(detail.harga_jual) }}
+          </p>
+
+          <p class="col-span-1">Kadar :</p>
+          <p class="col-span-1 text-right">{{ detail.kadar }} K</p>
+
+          <p class="col-span-1">Berat :</p>
+          <p class="col-span-1 text-right">{{ detail.berat }} gram</p>
+
+          <p class="col-span-1">Harga/gram :</p>
+          <p class="col-span-1 text-right">
+            Rp. {{ formatNumber(detail.harga_per_gram) }}
           </p>
         </div>
 
         <!-- Tombol Aksi -->
-    <div class="flex justify-between w-full">
-      <button class="bg-yellow-400 text-black px-4 py-2 rounded font-bold">
+        <div class="flex w-full gap-3">
+          <button
+            class="flex-1 bg-yellow-400 text-black py-2 rounded font-bold"
+          >
             Ubah
           </button>
-      <button @click="openItemModal" class="bg-green-400 text-black px-4 py-2 rounded font-bold">
+          <button
+            @click="openItemModal"
+            class="bg-green-400 text-black px-4 py-2 rounded font-bold"
+          >
             Tambah
           </button>
-      <button class="bg-red-500 text-white px-4 py-2 rounded font-bold">
+          <button
+            @click="deleting = true"
+            class="flex-1 bg-red-500 text-white py-2 rounded font-bold"
+          >
             Hapus
           </button>
         </div>
       </div>
-</div>
-
+    </div>
   </mainLayout>
 </template>
 
@@ -135,26 +159,26 @@ import mainLayout from "../layouts/mainLayout.vue";
 import ProductCard from "../components/ProductCard.vue";
 import searchbar from "../components/searchbar.vue";
 import CreateItemModal from "../components/CreateItemModal.vue";
+import ConfirmDeleteModal from "../components/ConfirmDeleteModal.vue";
 
 const products = ref([]);
 const searchQuery = ref("");
 const selectedCategory = ref("semua");
 const creatingItem = ref(false);
+const deleting = ref(false);
 
+const detail = ref({});
+const showOverlay = ref(false);
+const currentFotoIndex = ref(0);
+
+// Buka modal item
 const openItemModal = () => {
-  console.log("open item modal", detail.value);
-  
   creatingItem.value = true;
 };
 const closeItemModal = () => {
   creatingItem.value = false;
 };
 
-// overlay state
-const showOverlay = ref(false);
-const detail = ref({});
-const currentFotoIndex = ref(0);
-
 // Fetch data awal
 onMounted(async () => {
   try {
@@ -165,18 +189,16 @@ onMounted(async () => {
   }
 });
 
-// Filter gabungan (kategori + search)
+// Filter produk (kategori + search)
 const filteredProducts = computed(() => {
   let hasil = products.value;
 
-  // filter kategori
   if (selectedCategory.value !== "semua") {
     hasil = hasil.filter(
       (p) => p.kategori.toLowerCase() === selectedCategory.value
     );
   }
 
-  // filter search
   if (searchQuery.value) {
     hasil = hasil.filter((p) =>
       p.nama.toLowerCase().includes(searchQuery.value.toLowerCase())
@@ -186,27 +208,29 @@ const filteredProducts = computed(() => {
   return hasil;
 });
 
-// buka overlay
-async function openOverlay(id) {
-  detail.value = products.value.find(p => p.id === id) ;
+// Buka overlay detail
+function openOverlay(id) {
+  const produk = products.value.find((p) => p.id === id);
+  if (produk) {
+    detail.value = produk;
     currentFotoIndex.value = 0;
     showOverlay.value = true;
+  }
 }
 
-// tutup overlay
+// Tutup overlay detail
 function closeOverlay() {
   showOverlay.value = false;
   currentFotoIndex.value = 0;
 }
 
-// foto navigation
+// Navigasi foto
 function nextFoto() {
   if (detail.value.foto && detail.value.foto.length > 0) {
     currentFotoIndex.value =
       (currentFotoIndex.value + 1) % detail.value.foto.length;
   }
 }
-
 function prevFoto() {
   if (detail.value.foto && detail.value.foto.length > 0) {
     currentFotoIndex.value =
@@ -219,4 +243,18 @@ function prevFoto() {
 function formatNumber(num) {
   return new Intl.NumberFormat().format(num || 0);
 }
+
+// Hapus produk
+async function deleteProduk() {
+  try {
+    await axios.delete(`/api/produk/${detail.value.id}`);
+    products.value = products.value.filter((p) => p.id !== detail.value.id);
+    deleting.value = false;
+    showOverlay.value = false;
+    alert("Produk berhasil dihapus!");
+  } catch (err) {
+    console.error("Gagal hapus produk:", err);
+    alert("Gagal menghapus produk!");
+  }
+}
 </script>