Magang-2025/Kasir
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Baghaztra 2025-08-29 11:05:51 +07:00
commit 32bab1f01a
2 changed files with 171 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
resources/js/components/ConfirmDeleteModal.vue Normal file
View File

@ -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>

128
resources/js/pages/Produk.vue
View File

@ -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>
@ -54,11 +64,12 @@
@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"
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"
>
<!-- 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"
@ -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>
</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>