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

Compare commits

base: Magang-2025:a345dd1229b5d7b4ea8d1c1106213128086935a3
Branches Tags
Magang-2025:main
Magang-2025:production
..
compare: Magang-2025:8e6aa4242bf7bc8cd52054a02526d61008f1d0de
Branches Tags
Magang-2025:production
Magang-2025:main

No commits in common. "a345dd1229b5d7b4ea8d1c1106213128086935a3" and "8e6aa4242bf7bc8cd52054a02526d61008f1d0de" have entirely different histories.
a345dd1229 ... 8e6aa4242b

5 changed files with 33 additions and 70 deletions
Show Stats Expand all files Collapse all files

13
resources/js/components/NavMobile.vue
View File

@ -17,16 +17,19 @@ const {
<template> <template>
<div class="md:hidden"> <div class="md:hidden">
<div class="bg-D h-5 shadow-lg"></div> <div class="bg-D h-5 shadow-lg"></div>
<div class="px-4 fixed flex items-center mt-2">
<button @click="toggleMobileMenu" <button @click="toggleMobileMenu"
:class="{ 'hidden': isMobileMenuOpen, 'block': !isMobileMenuOpen }" class="text-D bg-C hover:bg-B transition-colors duration-200 p-0.5 rounded-sm z-50">
class="fixed top-4 left-4 text-D bg-C hover:bg-B transition-colors duration-200 p-0.5 rounded-sm z-[9999]"> <svg :class="{ 'hidden': isMobileMenuOpen, 'block': !isMobileMenuOpen }" class="w-7 h-7" fill="none"
<svg class="w-7 h-7" fill="none"
stroke="currentColor" viewBox="0 0 24 24"> stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg> </svg>
<svg :class="{ 'block': isMobileMenuOpen, 'hidden': !isMobileMenuOpen }" class="w-6 h-6" fill="none"
stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button> </button>
</div>
<div :class="{ 'translate-x-0': isMobileMenuOpen, '-translate-x-full': !isMobileMenuOpen }" <div :class="{ 'translate-x-0': isMobileMenuOpen, '-translate-x-full': !isMobileMenuOpen }"
class="fixed inset-y-0 left-0 w-64 bg-A transform transition-transform duration-300 ease-in-out z-50 shadow-xl"> class="fixed inset-y-0 left-0 w-64 bg-A transform transition-transform duration-300 ease-in-out z-50 shadow-xl">

2
resources/js/components/ProductCard.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div <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" 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)" @click="$emit('click', product.id)"
> >
<!-- Foto Produk --> <!-- Foto Produk -->

6
resources/js/components/TrayList.vue
View File

@ -12,7 +12,7 @@
<div <div
v-for="tray in filteredTrays" v-for="tray in filteredTrays"
:key="tray.id" :key="tray.id"
class="border border-C rounded-xl p-4 shadow-sm hover:shadow-md transition" class="border rounded-xl p-4 shadow-sm hover:shadow-md transition"
> >
<div class="flex justify-between items-center mb-3"> <div class="flex justify-between items-center mb-3">
<h2 class="font-bold text-lg text-[#102C57]">{{ tray.nama }}</h2> <h2 class="font-bold text-lg text-[#102C57]">{{ tray.nama }}</h2>
@ -26,7 +26,7 @@
<div <div
v-for="item in tray.items" v-for="item in tray.items"
:key="item.id" :key="item.id"
class="flex justify-between items-center border border-C rounded-lg p-2 cursor-pointer hover:bg-gray-50" class="flex justify-between items-center border rounded-lg p-2 cursor-pointer hover:bg-gray-50"
@click="openMovePopup(item)" @click="openMovePopup(item)"
> >
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
@ -53,7 +53,7 @@
Masuk ke menu <b>Brankas</b> untuk memindahkan item ke nampan. Masuk ke menu <b>Brankas</b> untuk memindahkan item ke nampan.
</div> </div>
<div class="border-t border-C mt-3 pt-2 text-right font-semibold"> <div class="border-t mt-3 pt-2 text-right font-semibold">
Berat Total: {{ totalWeight(tray) }}g Berat Total: {{ totalWeight(tray) }}g
</div> </div>
</div> </div>

13
resources/js/layouts/mainLayout.vue
View File

@ -1,19 +1,14 @@
<template> <template>
<div class="min-h-screen flex flex-col"> <div class="min-h-screen max-w-screen">
<!-- Navbar -->
<NavigationComponent /> <NavigationComponent />
<div class="mx-2 md:mx-4 lg:mx-6 xl:mx-7 my-6">
<!-- Konten utama -->
<div class="flex-1 mx-2 md:mx-4 lg:mx-6 xl:mx-7 my-6">
<slot /> <slot />
</div> </div>
<Footer class="bottom-0 w-full" />
<!-- Footer selalu di bawah -->
<Footer class="w-full" />
</div> </div>
</template> </template>
<script setup> <script setup>
import Footer from '../components/Footer.vue' import Footer from '../components/Footer.vue'
import NavigationComponent from '../components/NavigationComponent.vue' import NavigationComponent from '../components/NavigationComponent.vue';
</script> </script>

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

@ -16,7 +16,7 @@
message="Apakah Anda yakin ingin menghapus produk ini?" message="Apakah Anda yakin ingin menghapus produk ini?"
/> />
<div class="p-6 min-h-[75vh]"> <div class="p-6">
<!-- Judul --> <!-- Judul -->
<p class="font-serif italic text-[25px] text-D">PRODUK</p> <p class="font-serif italic text-[25px] text-D">PRODUK</p>
@ -81,16 +81,9 @@
</div> </div>
</div> </div>
<!-- 🔵 Loading State (sama persis dengan kategori) --> <!-- Grid Produk -->
<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>
<!-- 🔵 Grid Produk -->
<div <div
v-else class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 mt-4"
class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 mt-4 relative z-0"
> >
<ProductCard <ProductCard
v-for="item in filteredProducts" v-for="item in filteredProducts"
@ -98,27 +91,6 @@
:product="item" :product="item"
@click="openOverlay(item.id)" @click="openOverlay(item.id)"
/> />
<!-- 🔵 Empty State (sama kayak kategori) -->
<div
v-if="filteredProducts.length === 0"
class="col-span-full flex flex-col items-center py-10 text-gray-500"
>
<svg
class="w-12 h-12 text-gray-400 mb-2"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2 2v-5m16 0h-2M4 13h2"
/>
</svg>
<p>Tidak ada data produk</p>
</div>
</div> </div>
</div> </div>
@ -242,9 +214,7 @@ const showOverlay = ref(false);
const currentFotoIndex = ref(0); const currentFotoIndex = ref(0);
const kategori = ref([]); const kategori = ref([]);
const loading = ref(false); // 🔥 Loading persis kategori
// Load kategori
const loadKategori = async () => { const loadKategori = async () => {
try { try {
const response = await axios.get("/api/kategori", { const response = await axios.get("/api/kategori", {
@ -266,9 +236,7 @@ const loadKategori = async () => {
} }
}; };
// Load produk
const loadProduk = async () => { const loadProduk = async () => {
loading.value = true; // 🔵 start loading
try { try {
const response = await axios.get(`/api/produk`, { const response = await axios.get(`/api/produk`, {
headers: { headers: {
@ -281,12 +249,10 @@ const loadProduk = async () => {
} }
} catch (error) { } catch (error) {
console.error("Error loading products:", error); console.error("Error loading products:", error);
} finally {
loading.value = false; // 🔵 stop loading
} }
}; };
// Modal item // Buka modal item
const openItemModal = () => { const openItemModal = () => {
creatingItem.value = true; creatingItem.value = true;
}; };
@ -294,13 +260,13 @@ const closeItemModal = () => {
creatingItem.value = false; creatingItem.value = false;
}; };
// Fetch awal // Fetch data awal
onMounted(async () => { onMounted(async () => {
await loadKategori(); loadKategori();
await loadProduk(); loadProduk();
}); });
// Filter produk // Filter produk (kategori + search)
const filteredProducts = computed(() => { const filteredProducts = computed(() => {
let hasil = products.value; let hasil = products.value;
@ -317,7 +283,7 @@ const filteredProducts = computed(() => {
return hasil; return hasil;
}); });
// Overlay detail // Buka overlay detail
function openOverlay(id) { function openOverlay(id) {
const produk = products.value.find((p) => p.id === id); const produk = products.value.find((p) => p.id === id);
if (produk) { if (produk) {
@ -326,6 +292,8 @@ function openOverlay(id) {
showOverlay.value = true; showOverlay.value = true;
} }
} }
// Tutup overlay detail
function closeOverlay() { function closeOverlay() {
showOverlay.value = false; showOverlay.value = false;
currentFotoIndex.value = 0; currentFotoIndex.value = 0;
@ -354,11 +322,7 @@ function formatNumber(num) {
// Hapus produk // Hapus produk
async function deleteProduk() { async function deleteProduk() {
try { try {
await axios.delete(`/api/produk/${detail.value.id}`, { await axios.delete(`/api/produk/${detail.value.id}`);
headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
products.value = products.value.filter((p) => p.id !== detail.value.id); products.value = products.value.filter((p) => p.id !== detail.value.id);
deleting.value = false; deleting.value = false;
showOverlay.value = false; showOverlay.value = false;
@ -376,6 +340,7 @@ async function deleteProduk() {
width: 100% !important; width: 100% !important;
justify-content: flex-start !important; justify-content: flex-start !important;
} }
.searchbar-mobile:deep(input) { .searchbar-mobile:deep(input) {
width: 100% !important; width: 100% !important;
} }