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

Compare commits

base: Magang-2025:70c1a7a0bf3f959413ecf9e5357df8eb5579236e
Branches Tags
Magang-2025:main
Magang-2025:development
Magang-2025:jadi
Magang-2025:production
..
compare: Magang-2025:1d7b9e2d32b2d3200bb39c56049cfacac17d76e0
Branches Tags
Magang-2025:development
Magang-2025:jadi
Magang-2025:production
Magang-2025:main

No commits in common. "70c1a7a0bf3f959413ecf9e5357df8eb5579236e" and "1d7b9e2d32b2d3200bb39c56049cfacac17d76e0" have entirely different histories.
70c1a7a0bf ... 1d7b9e2d32

4 changed files with 74 additions and 81 deletions
Show Stats Expand all files Collapse all files

61
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">
<!-- QR Code --> <!-- Barcode -->
<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="qrCodeUrl" alt="QR Code" class="w-36 h-36" /> <img :src="barcodeUrl" alt="Barcode" class="w-64 h-24" />
</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");
// QR Code generator // Barcode generator (Code128)
const qrCodeUrl = computed(() => { const barcodeUrl = computed(() => {
if (selectedItem.value) { if (selectedItem.value) {
const data = selectedItem.value.kode_item; const data = selectedItem.value.kode_item;
return `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(data)}`; return `https://barcode.tec-it.com/barcode.ashx?data=${encodeURIComponent(data)}&code=Code128&dpi=96`;
} }
return ""; return "";
}); });
@ -333,56 +333,53 @@ const handleConfirmAction = async () => {
// Fungsi utilitas // Fungsi utilitas
const printQR = () => { const printQR = () => {
if (qrCodeUrl.value && selectedItem.value) { if (barcodeUrl.value) {
const printWindow = window.open('', '_blank'); const printWindow = window.open('', '_blank');
const itemCode = selectedItem.value.kode_item;
printWindow.document.write(` printWindow.document.write(`
<html> <html>
<head> <head>
<title>Print QR Code - ${itemCode}</title> <title>Print Barcode - ${selectedItem.value.kode_item}</title>
<style> <style>
@page {
size: 80mm 40mm;
margin: 1mm;
}
body { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
text-align: center; text-align: center;
padding: 20px; margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
} }
.qr-container { .barcode-container {
border: 2px solid #ccc; text-align: center;
padding: 20px;
display: inline-block;
margin: 20px;
} }
.qr-img { .barcode-img {
width: 200px; width: 70mm;
height: 200px; height: 25mm;
margin-bottom: 2mm;
} }
.item-info { .item-info {
margin-top: 10px; font-size: 14pt;
font-size: 14px; font-weight: bold;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="qr-container"> <div class="barcode-container">
<img id="qr-img" class="qr-img" src="${qrCodeUrl.value}" alt="QR Code" /> <img class="barcode-img" src="${barcodeUrl.value}" alt="Barcode"
onload="window.print()" />
<div class="item-info"> <div class="item-info">
<div style="font-weight: bold; margin-bottom: 5px;">${itemCode}</div> ${selectedItem.value.kode_item}
<div>${selectedItem.value.produk?.nama || ''}</div>
<div style="color: #666; margin-top: 5px;">${selectedItem.value.produk?.berat || ''}g</div>
</div> </div>
</div> </div>
</body> </body>
</html> </html>
`); `);
printWindow.document.close(); printWindow.document.close();
const img = printWindow.document.getElementById("qr-img");
img.onload = () => {
printWindow.focus();
printWindow.print();
};
} }
}; };

22
resources/js/components/CreateItemModal.vue
View File

@ -102,9 +102,11 @@ const createdItem = ref(null);
// QR Code generator - berdasarkan logika dari brankas list // QR Code generator - berdasarkan logika dari brankas list
const qrCodeUrl = computed(() => { const qrCodeUrl = computed(() => {
if (createdItem.value && props.product) { if (createdItem.value && props.product) {
const kode_item = createdItem.value.kode_item; const itemId = createdItem.value.kode_item || createdItem.value.id;
const data = kode_item; const data = `${itemId}`;
return `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(data)}`;
// Barcode Code128
return `https://barcode.tec-it.com/barcode.ashx?data=${encodeURIComponent(data)}&code=Code128&dpi=96`;
} }
return ""; return "";
}); });
@ -196,10 +198,6 @@ const printItem = () => {
display: inline-block; display: inline-block;
margin: 20px; margin: 20px;
} }
.qr-img {
width: 200px;
height: 200px;
}
.item-info { .item-info {
margin-top: 10px; margin-top: 10px;
font-size: 14px; font-size: 14px;
@ -208,7 +206,7 @@ const printItem = () => {
</head> </head>
<body> <body>
<div class="qr-container"> <div class="qr-container">
<img id="qr-img" class="qr-img" src="${qrCodeUrl.value}" alt="QR Code" /> <img src="${qrCodeUrl.value}" alt="Barcode" style="width: 300px; height: 100px;" />
<div class="item-info"> <div class="item-info">
<div style="font-weight: bold; margin-bottom: 5px;">${itemCode}</div> <div style="font-weight: bold; margin-bottom: 5px;">${itemCode}</div>
<div>${props.product.nama}</div> <div>${props.product.nama}</div>
@ -218,14 +216,8 @@ const printItem = () => {
</body> </body>
</html> </html>
`); `);
printWindow.document.close(); printWindow.document.close();
printWindow.print();
const img = printWindow.document.getElementById("qr-img");
img.onload = () => {
printWindow.focus();
printWindow.print();
};
} }
}; };

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

@ -281,7 +281,7 @@ const getCurrentDate = () => {
const month = months[now.getMonth()] const month = months[now.getMonth()]
const year = now.getFullYear() const year = now.getFullYear()
return `${dayName}, ${day}-${month}-${year}` return `${dayName}/${day}-${month}-${year}`
} }
const generateTransactionCode = () => { const generateTransactionCode = () => {

62
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="qrCodeUrl" alt="QR Code" class="w-36 h-36" /> <img :src="barcodeUrl" alt="Barcode" class="w-64 h-24" />
</div> </div>
</div> </div>
@ -167,54 +167,58 @@ const selectedItem = ref(null);
const selectedTrayId = ref(""); const selectedTrayId = ref("");
const showDeleteConfirm = ref(false); const showDeleteConfirm = ref(false);
// QR Code generator // Barcode generator (Code128)
const qrCodeUrl = computed(() => { const barcodeUrl = computed(() => {
if (selectedItem.value) { if (selectedItem.value) {
const data = selectedItem.value.kode_item; const data = selectedItem.value.kode_item;
return `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(data)}`; return `https://barcode.tec-it.com/barcode.ashx?data=${encodeURIComponent(data)}&code=Code128&dpi=96`;
} }
return ""; return "";
}); });
const printQR = () => { const printQR = () => {
if (qrCodeUrl.value && selectedItem.value) { if (barcodeUrl.value) {
const printWindow = window.open('', '_blank'); const printWindow = window.open('', '_blank');
const itemCode = selectedItem.value.kode_item;
printWindow.document.write(` printWindow.document.write(`
<html> <html>
<head> <head>
<title>Print QR Code - ${itemCode}</title> <title>Print Barcode - ${selectedItem.value.kode_item}</title>
<style> <style>
@page {
size: 80mm 40mm;
margin: 1mm;
}
* {
margin: 0;
padding: 0;
}
body { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 100vw;
}
.barcode-container {
text-align: center; text-align: center;
padding: 20px; width: 100%;
} }
.qr-container { .barcode-img {
border: 2px solid #ccc; width: 70mm;
padding: 20px; height: 25mm;
display: inline-block; margin-bottom: 2mm;
margin: 20px;
} }
.qr-img { .kode-item {
width: 200px; font-weight: bold;
height: 200px; font-size: 14pt;
}
.item-info {
margin-top: 10px;
font-size: 14px;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="qr-container"> <div class="barcode-container">
<img id="qr-img" class="qr-img" src="${qrCodeUrl.value}" alt="QR Code" /> <img id="barcode-img" class="barcode-img" src="${barcodeUrl.value}" alt="Barcode" />
<div class="item-info"> <div class="kode-item">${selectedItem.value.kode_item}</div>
<div style="font-weight: bold; margin-bottom: 5px;">${itemCode}</div>
<div>${selectedItem.value.produk?.nama || ''}</div>
<div style="color: #666; margin-top: 5px;">${selectedItem.value.produk?.berat || ''}g</div>
</div>
</div> </div>
</body> </body>
</html> </html>
@ -222,7 +226,7 @@ const printQR = () => {
printWindow.document.close(); printWindow.document.close();
const img = printWindow.document.getElementById("qr-img"); const img = printWindow.document.getElementById("barcode-img");
img.onload = () => { img.onload = () => {
printWindow.focus(); printWindow.focus();
printWindow.print(); printWindow.print();