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

Compare commits

base: Magang-2025:94d146557f5efb08c69b059377781e5a77ef50f7
Branches Tags
Magang-2025:main
Magang-2025:development
Magang-2025:jadi
Magang-2025:production
..
compare: Magang-2025:a6be703b100bc76319ba4a6f5dca6a49add7d82c
Branches Tags
Magang-2025:development
Magang-2025:jadi
Magang-2025:production
Magang-2025:main

No commits in common. "94d146557f5efb08c69b059377781e5a77ef50f7" and "a6be703b100bc76319ba4a6f5dca6a49add7d82c" have entirely different histories.
94d146557f ... a6be703b10

4 changed files with 63 additions and 53 deletions
Show Stats Expand all files Collapse all files

28
resources/js/components/BrankasList.vue
View File

@ -66,10 +66,10 @@
<!-- Modal Pindah Nampan --> <!-- Modal Pindah Nampan -->
<div v-if="isPopupVisible" class="fixed inset-0 bg-black/75 flex items-center justify-center p-4 z-50 backdrop-blur-sm"> <div v-if="isPopupVisible" class="fixed inset-0 bg-black/75 flex items-center justify-center p-4 z-50 backdrop-blur-sm">
<div class="bg-white rounded-xl shadow-lg max-w-sm w-full p-6 relative transform transition-all duration-300 scale-95 opacity-0 animate-fadeIn"> <div class="bg-white rounded-xl shadow-lg max-w-sm w-full p-6 relative transform transition-all duration-300 scale-95 opacity-0 animate-fadeIn">
<!-- Barcode --> <!-- QR Code -->
<div class="flex justify-center mb-4"> <div class="flex justify-center mb-4">
<div class="p-2 border border-C rounded-lg"> <div class="p-2 border border-C rounded-lg">
<img :src="barcodeUrl" alt="Barcode" class="w-64 h-24" /> <img :src="qrCodeUrl" alt="QR Code" class="size-36" />
</div> </div>
</div> </div>
@ -201,11 +201,11 @@ const confirmModalMessage = ref("");
const confirmText = ref("Ya, Konfirmasi"); const confirmText = ref("Ya, Konfirmasi");
const cancelText = ref("Batal"); const cancelText = ref("Batal");
// Barcode generator (Code128) // QR Code generator
const barcodeUrl = computed(() => { const qrCodeUrl = computed(() => {
if (selectedItem.value) { if (selectedItem.value) {
const data = selectedItem.value.kode_item; const data = selectedItem.value.kode_item;
return `https://barcode.tec-it.com/barcode.ashx?data=${encodeURIComponent(data)}&code=Code128&dpi=96`; return `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(data)}`;
} }
return ""; return "";
}); });
@ -333,15 +333,15 @@ const handleConfirmAction = async () => {
// Fungsi utilitas // Fungsi utilitas
const printQR = () => { const printQR = () => {
if (barcodeUrl.value) { if (qrCodeUrl.value) {
const printWindow = window.open('', '_blank'); const printWindow = window.open('', '_blank');
printWindow.document.write(` printWindow.document.write(`
<html> <html>
<head> <head>
<title>Print Barcode - ${selectedItem.value.kode_item}</title> <title>Print QR Code - ${selectedItem.value.kode_item}</title>
<style> <style>
@page { @page {
size: 80mm 40mm; size: 60mm 50mm;
margin: 1mm; margin: 1mm;
} }
body { body {
@ -354,12 +354,12 @@ const printQR = () => {
justify-content: center; justify-content: center;
height: 100vh; height: 100vh;
} }
.barcode-container { .qr-container {
text-align: center; text-align: center;
} }
.barcode-img { .qr-img {
width: 70mm; width: 40mm;
height: 25mm; height: 40mm;
margin-bottom: 2mm; margin-bottom: 2mm;
} }
.item-info { .item-info {
@ -369,8 +369,8 @@ const printQR = () => {
</style> </style>
</head> </head>
<body> <body>
<div class="barcode-container"> <div class="qr-container">
<img class="barcode-img" src="${barcodeUrl.value}" alt="Barcode" <img class="qr-img" src="${qrCodeUrl.value}" alt="QR Code"
onload="window.print()" /> onload="window.print()" />
<div class="item-info"> <div class="item-info">
${selectedItem.value.kode_item} ${selectedItem.value.kode_item}

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

@ -88,7 +88,7 @@
<div class="bg-white rounded-xl shadow-lg max-w-sm w-full p-6 relative"> <div class="bg-white rounded-xl shadow-lg max-w-sm w-full p-6 relative">
<div class="flex justify-center mb-2"> <div class="flex justify-center mb-2">
<div class="p-2 border rounded-lg"> <div class="p-2 border rounded-lg">
<img :src="barcodeUrl" alt="Barcode" class="w-64 h-24" /> <img :src="qrCodeUrl" alt="QR Code" class="size-36" />
</div> </div>
</div> </div>
@ -167,25 +167,25 @@ const selectedItem = ref(null);
const selectedTrayId = ref(""); const selectedTrayId = ref("");
const showDeleteConfirm = ref(false); const showDeleteConfirm = ref(false);
// Barcode generator (Code128) // QR Code generator
const barcodeUrl = computed(() => { const qrCodeUrl = computed(() => {
if (selectedItem.value) { if (selectedItem.value) {
const data = selectedItem.value.kode_item; const data = selectedItem.value.kode_item;
return `https://barcode.tec-it.com/barcode.ashx?data=${encodeURIComponent(data)}&code=Code128&dpi=96`; return `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(data)}`;
} }
return ""; return "";
}); });
const printQR = () => { const printQR = () => {
if (barcodeUrl.value) { if (qrCodeUrl.value) {
const printWindow = window.open('', '_blank'); const printWindow = window.open('', '_blank');
printWindow.document.write(` printWindow.document.write(`
<html> <html>
<head> <head>
<title>Print Barcode - ${selectedItem.value.kode_item}</title> <title>Print QR Code - ${selectedItem.value.kode_item}</title>
<style> <style>
@page { @page {
size: 80mm 40mm; size: 60mm 50mm;
margin: 1mm; margin: 1mm;
} }
* { * {
@ -200,13 +200,13 @@ const printQR = () => {
height: 100vh; height: 100vh;
width: 100vw; width: 100vw;
} }
.barcode-container { .qr-container {
text-align: center; text-align: center;
width: 100%; width: 100%;
} }
.barcode-img { .qr-img {
width: 70mm; width: 40mm;
height: 25mm; height: 40mm;
margin-bottom: 2mm; margin-bottom: 2mm;
} }
.kode-item { .kode-item {
@ -216,8 +216,8 @@ const printQR = () => {
</style> </style>
</head> </head>
<body> <body>
<div class="barcode-container"> <div class="qr-container">
<img id="barcode-img" class="barcode-img" src="${barcodeUrl.value}" alt="Barcode" /> <img id="qr-img" class="qr-img" src="${qrCodeUrl.value}" alt="QR Code" />
<div class="kode-item">${selectedItem.value.kode_item}</div> <div class="kode-item">${selectedItem.value.kode_item}</div>
</div> </div>
</body> </body>
@ -226,7 +226,7 @@ const printQR = () => {
printWindow.document.close(); printWindow.document.close();
const img = printWindow.document.getElementById("barcode-img"); const img = printWindow.document.getElementById("qr-img");
img.onload = () => { img.onload = () => {
printWindow.focus(); printWindow.focus();
printWindow.print(); printWindow.print();

6
resources/js/pages/Login.vue
View File

@ -77,11 +77,7 @@ const handleLogin = async () => {
window.location.href = data.redirect; window.location.href = data.redirect;
} catch (error) { } catch (error) {
if (error.response?.data?.message) { if (error.response?.data?.message) {
if (error.response.data.message.includes("Nama atau password salah")) { errorMessage.value = error.response.data.message;
errorMessage.value = "Login gagal. Periksa username atau password.";
} else {
errorMessage.value = "Terjadi kesalahan pada server";
}
} else { } else {
errorMessage.value = "Login gagal. Periksa username atau password."; errorMessage.value = "Login gagal. Periksa username atau password.";
} }

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

@ -1,7 +1,13 @@
<template> <template>
<mainLayout> <mainLayout>
<!-- Modal Buat Item --> <!-- Modal Buat Item -->
<CreateItemModal :isOpen="creatingItem" :product="detail" @close="closeItemModal" @itemAdded="handleItemAdded" /> <CreateItemModal
:isOpen="creatingItem"
:product="detail"
@close="closeItemModal"
@itemAdded="handleItemAdded"
/>
<!-- Modal Konfirmasi Hapus Produk --> <!-- Modal Konfirmasi Hapus Produk -->
<ConfirmDeleteModal :isOpen="deleting" @cancel="deleting = false" @confirm="deleteProduk" title="Hapus Produk" <ConfirmDeleteModal :isOpen="deleting" @cancel="deleting = false" @confirm="deleteProduk" title="Hapus Produk"
@ -45,20 +51,26 @@
</div> </div>
</div> </div>
<!-- 🔹 Alert Message --> <!-- 🔹 Alert Message -->
<div class="my-5" v-if="alert"> <div class="my-5" v-if="alert">
<div v-if="alert.error" class="text-[#721c24] bg-[#f8d7da] border-l-4 border-[#dc3545] p-3 mb-5 rounded" <div
role="alert"> v-if="alert.error"
<strong class="font-bold">Error! </strong> class="text-[#721c24] bg-[#f8d7da] border-l-4 border-[#dc3545] p-3 mb-5 rounded"
<span class="block sm:inline">{{ alert.error }}</span> role="alert"
</div> >
<div v-if="alert.success" class="text-[#155724] bg-[#d4edda] border-l-4 border-[#28a745] p-3 mb-5 rounded" <strong class="font-bold">Error! </strong>
role="alert"> <span class="block sm:inline">{{ alert.error }}</span>
<strong class="font-bold">Success! </strong>
<span class="block sm:inline">{{ alert.success }}</span>
</div>
</div> </div>
<!-- 🔹 End Alert --> <div
v-if="alert.success"
class="text-[#155724] bg-[#d4edda] border-l-4 border-[#28a745] p-3 mb-5 rounded"
role="alert"
>
<strong class="font-bold">Success! </strong>
<span class="block sm:inline">{{ alert.success }}</span>
</div>
</div>
<!-- 🔹 End Alert -->
<!-- 🔵 Loading State (sama persis dengan kategori) --> <!-- 🔵 Loading State (sama persis dengan kategori) -->
<div v-if="loading" class="flex justify-center items-center h-screen"> <div v-if="loading" class="flex justify-center items-center h-screen">
@ -177,12 +189,12 @@ const kategori = ref([]);
const loading = ref(false); const loading = ref(false);
function showAlert(type, message) { function showAlert(type, message) {
alert.value = { [type]: message }; alert.value = { [type]: message };
clearTimeout(timer.value); clearTimeout(timer.value);
timer.value = setTimeout(() => { timer.value = setTimeout(() => {
alert.value = null; alert.value = null;
}, 5000); }, 5000);
} }
// Load kategori // Load kategori
const loadKategori = async () => { const loadKategori = async () => {
@ -310,6 +322,8 @@ function handleItemAdded() {
creatingItem.value = false; creatingItem.value = false;
} }
// Hapus produk // Hapus produk
async function deleteProduk() { async function deleteProduk() {
try { try {