diff --git a/package-lock.json b/package-lock.json
index 0a4bd74..e63f396 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-    "name": "tmsc-kasir-perhiasan",
+    "name": "Kasir",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
diff --git a/resources/js/components/ProductCard.vue b/resources/js/components/ProductCard.vue
index 1253d5b..650784a 100644
--- a/resources/js/components/ProductCard.vue
+++ b/resources/js/components/ProductCard.vue
@@ -1,65 +1,31 @@
 <template>
-  <div>
-    <!-- Card Produk -->
+  <div
+    class="relative 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="border border-C rounded-md aspect-square flex items-center justify-center hover:shadow-md transition cursor-pointer"
-      @click="showDetail = true"
+      class="absolute bottom-0 w-full bg-black/60 text-white text-center text-sm py-1"
     >
-      <span class="text-gray-700 font-medium text-center px-2">
-        {{ product.nama }}
-      </span>
-    </div>
-
-    <!-- Overlay Detail -->
-    <div
-      v-if="showDetail"
-      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
-    >
-      <div
-        class="bg-white rounded-lg shadow-lg w-[90%] max-w-md p-6 relative"
-      >
-        <!-- Tombol Close -->
-        <button
-          class="absolute top-3 right-3 text-gray-500 hover:text-gray-800"
-          @click="showDetail = false"
-        >
-          ✕
-        </button>
-
-        <!-- Judul -->
-        <h2 class="text-xl font-semibold text-D mb-4 text-center">
-          Detail Produk
-        </h2>
-
-        <!-- Data Produk -->
-        <div class="space-y-2 text-gray-700">
-          <p><span class="font-semibold">Nama:</span> {{ product.nama }}</p>
-          <p><span class="font-semibold">Kategori:</span> {{ product.kategori }}</p>
-          <p><span class="font-semibold">Berat:</span> {{ product.berat }} gram</p>
-          <p><span class="font-semibold">Kadar:</span> {{ product.kadar }}%</p>
-          <p><span class="font-semibold">Harga/gram:</span> Rp {{ formatHarga(product.harga_per_gram) }}</p>
-          <p><span class="font-semibold">Harga Jual:</span> Rp {{ formatHarga(product.harga_jual) }}</p>
-          <p><span class="font-semibold">Stok:</span> {{ product.items_count }} pcs</p>
-        </div>
-      </div>
+      {{ product.nama }}
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from "vue";
-
-const props = defineProps({
+defineProps({
   product: {
     type: Object,
     required: true,
   },
 });
-
-const showDetail = ref(false);
-
-// Format rupiah
-function formatHarga(value) {
-  return new Intl.NumberFormat("id-ID").format(value);
-}
 </script>
diff --git a/resources/js/pages/Produk.vue b/resources/js/pages/Produk.vue
index 8fe0318..566dce7 100644
--- a/resources/js/pages/Produk.vue
+++ b/resources/js/pages/Produk.vue
@@ -4,14 +4,27 @@
       <!-- Judul -->
       <p class="font-serif italic text-[25px] text-D">PRODUK</p>
 
-      <!-- Search -->
-      <searchbar v-model:search="searchQuery" />
+      <!-- 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>
+
+        <!-- Search -->
+        <searchbar v-model:search="searchQuery" class="flex-1" />
+      </div>
 
       <!-- Tombol Tambah Produk -->
       <div class="mt-3 flex justify-end">
-        <button
-          class="bg-B text-[#0a1a3c] px-4 py-2 rounded-md shadow hover:bg-C transition"
-        >
+        <button class="bg-C text-[#0a1a3c] px-4 py-2 rounded-md shadow hover:bg-C transition">
           Tambah Produk
         </button>
       </div>
@@ -22,78 +35,90 @@
           v-for="item in filteredProducts"
           :key="item.id"
           :product="item"
-          @showDetail="openOverlay"
+          @click="openOverlay(item.id)"
         />
       </div>
     </div>
 
     <!-- Overlay Detail Produk -->
-    <div
-      v-if="showOverlay"
-      class="fixed inset-0 bg-black bg-opacity-50 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"
-      >
-        <!-- Tombol Close -->
-        <button
-          @click="closeOverlay"
-          class="absolute top-2 right-2 text-gray-500 hover:text-black"
-        >
-          ✕
-        </button>
+    <!-- Overlay Detail Produk -->
+<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">
+      <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>
 
-        <!-- Foto Produk -->
-        <div class="border border-[#e6d3b3] p-2 mb-4 flex justify-center">
-          <img
-            v-if="detail.gambar"
-            :src="`http://127.0.0.1:8000/storage/${detail.gambar}`"
-            :alt="detail.nama"
-            class="w-40 h-40 object-contain"
-          />
-          <span v-else class="text-gray-400 text-sm">[gambar]</span>
-        </div>
-
-        <!-- Stok -->
-        <p class="text-sm mb-1">{{ detail.item_count }} pcs</p>
-
-        <!-- Nama Produk -->
-        <h2 class="text-xl font-semibold text-center mb-3">
-          {{ detail.nama }}
-        </h2>
-
-        <!-- Detail Harga & Info -->
-        <div class="grid grid-cols-2 gap-2 text-sm mb-4">
-          <p>Harga Beli : Rp. {{ formatNumber(detail.harga_beli) }}</p>
-          <p class="text-right">{{ detail.kadar }} K</p>
-          <p>Harga Jual : Rp. {{ formatNumber(detail.harga_jual) }}</p>
-          <p class="text-right">{{ detail.berat }} gram</p>
-          <p class="col-span-2">
-            Harga/gram : Rp. {{ formatNumber(detail.harga_per_gram) }}
-          </p>
-        </div>
-
-        <!-- Tombol Aksi -->
-        <div class="flex justify-between">
-          <button
-            class="bg-yellow-400 text-black px-4 py-2 rounded font-bold"
-          >
-            Ubah
-          </button>
-          <button
-            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"
-          >
-            Hapus
-          </button>
-        </div>
+      <!-- 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.item_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"
+      >
+        {{ detail.nama }}
+      </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"
+      >
+        ‹
+      </button>
+      <!-- Tombol Next -->
+      <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"
+      >
+        ›
+      </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
+      </p>
+      <p class="col-span-2">
+        Harga/gram : 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">
+        Ubah
+      </button>
+      <button 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">
+        Hapus
+      </button>
+    </div>
+  </div>
+</div>
+
   </mainLayout>
 </template>
 
@@ -106,10 +131,12 @@ import searchbar from "../components/searchbar.vue";
 
 const products = ref([]);
 const searchQuery = ref("");
+const selectedCategory = ref("semua");
 
 // overlay state
 const showOverlay = ref(false);
 const detail = ref({});
+const currentFotoIndex = ref(0);
 
 // Fetch data awal
 onMounted(async () => {
@@ -121,29 +148,60 @@ onMounted(async () => {
   }
 });
 
-// Filter
+// Filter gabungan (kategori + search)
 const filteredProducts = computed(() => {
-  if (!searchQuery.value) return products.value;
-  return products.value.filter((p) =>
-    p.nama.toLowerCase().includes(searchQuery.value.toLowerCase())
-  );
+  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())
+    );
+  }
+
+  return hasil;
 });
 
-// Fungsi buka overlay
+// buka overlay
 async function openOverlay(id) {
   try {
     const res = await axios.get(`http://127.0.0.1:8000/api/produk/${id}`);
     detail.value = res.data;
+    currentFotoIndex.value = 0; // reset ke foto pertama
     showOverlay.value = true;
   } catch (error) {
     console.error("Gagal fetch detail produk:", error);
   }
 }
 
-// Fungsi tutup overlay
+// tutup overlay
 function closeOverlay() {
   showOverlay.value = false;
   detail.value = {};
+  currentFotoIndex.value = 0;
+}
+
+// foto navigation
+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 =
+      (currentFotoIndex.value - 1 + detail.value.foto.length) %
+      detail.value.foto.length;
+  }
 }
 
 // Format angka