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>
<div class="md:hidden">
<div class="bg-D h-5 shadow-lg"></div>
<div class="px-4 fixed flex items-center mt-2">
<button @click="toggleMobileMenu"
:class="{ 'hidden': isMobileMenuOpen, 'block': !isMobileMenuOpen }"
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="w-7 h-7" fill="none"
class="text-D bg-C hover:bg-B transition-colors duration-200 p-0.5 rounded-sm z-50">
<svg :class="{ 'hidden': isMobileMenuOpen, 'block': !isMobileMenuOpen }" class="w-7 h-7" fill="none"
stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</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>
</div>
<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">

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

@ -1,6 +1,6 @@
<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"
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 -->

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

@ -8,11 +8,11 @@
Nampan tidak ditemukan.
</div>
<div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 ">
<div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
<div
v-for="tray in filteredTrays"
: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">
<h2 class="font-bold text-lg text-[#102C57]">{{ tray.nama }}</h2>
@ -26,7 +26,7 @@
<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"
class="flex justify-between items-center border rounded-lg p-2 cursor-pointer hover:bg-gray-50"
@click="openMovePopup(item)"
>
<div class="flex items-center gap-3">
@ -53,7 +53,7 @@
Masuk ke menu <b>Brankas</b> untuk memindahkan item ke nampan.
</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
</div>
</div>

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

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

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

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