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

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

Browse Source
This commit is contained in:
timotiabbauftech 2025-10-21 10:07:27 +07:00
commit b186e7ca23
5 changed files with 1603 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
README.md
View File

@ -141,14 +141,17 @@ docker compose --env-file .env.production up -d --build
# Siapkan database # Siapkan database
docker exec -it abbauf_kasir_app php artisan migrate --seed docker exec -it abbauf_kasir_app php artisan migrate --seed
# Atau import database secara manual
docker exec -i abbauf_kasir_db mysql -u kasir_user -pkasir_password kasir_db < ./toko_emas.sql
# Periksa database (opsional) # Periksa database (opsional)
docker exec -it abbauf_kasir_db bash docker exec -it abbauf_kasir_db bash
mysql -u root -p mysql -u kasir_user -pkasir_password kasir_db
``` ```
### 8. Print Label ### 8. Print Label
- Install driver, ada pada folder `./driver/` untuk windows 64bit. - Install driver, ada pada folder `./driver/NiimbotPrinterDriverInstall_3.0.0.5.exe` untuk windows 64bit.
- Pilih `NIIMBOT B3S_P` pada saat install driver. - Pilih `NIIMBOT B3S_P` pada saat install driver.
- Sambungkan printer ke komputer via USB. - Sambungkan printer ke komputer via USB.
- Nyalakan printer. - Nyalakan printer.
@ -157,6 +160,16 @@ mysql -u root -p
- Pilih printer `NIIMBOT B3S_P` dan atur kertas ke ukuran kertas `40mm x 30mm`, margin `Default`, scale `Default` - Pilih printer `NIIMBOT B3S_P` dan atur kertas ke ukuran kertas `40mm x 30mm`, margin `Default`, scale `Default`
- Klik print - Klik print
### 9. Print Nota
- Pastikan printer terhubung dengan komputer via USB.
- Nyalakan printer.
- Install driver, ada pada folder `./driver/L120_x64_213UsHomeExportAsiaML.exe`.
- Lakukan transaksi penjualan pada aplikasi, atau pilih nota yang akan diprint di `Laporan > Riwayat transaksi`.
- Klik tombol print pada halaman tersebut
- Pilih ukuran kertas A4, margin `Minimum`, scale `95`
- Klik print
--- ---
## 🌐 Akses Aplikasi ## 🌐 Akses Aplikasi

8
database/seeders/DatabaseSeeder.php
View File

@ -37,14 +37,6 @@ class DatabaseSeeder extends Seeder
'updated_at' => now(), 'updated_at' => now(),
]); ]);
// Create sales record
Sales::create([
'nama' => 'Kasir',
'no_hp' => '-',
'alamat' => '-',
'created_at' => now(),
'updated_at' => now(),
]);
// Call other seeders // Call other seeders
$this->call(DataSeeder::class); $this->call(DataSeeder::class);

81
resources/js/components/PrintBarcode.vue
View File

@ -37,7 +37,9 @@ const printBarcode = () => {
const printWindow = window.open('', '_blank'); const printWindow = window.open('', '_blank');
const kode = props.code || 'N/A'; const kode = props.code || 'N/A';
const nama = props.item.nama || 'N/A'; const nama = props.item.nama || 'N/A';
const berat = props.item.berat ? `(${props.item.berat} g)` : ''; const berat = props.item.berat ? `${props.item.berat} g` : '';
const kadar = props.item.kadar ? `${props.item.kadar} K` : '';
const harga = props.item.harga_jual ? `Rp${props.item.harga_jual.toLocaleString('id-ID')},00` : '';
printWindow.document.write(` printWindow.document.write(`
<html> <html>
@ -70,29 +72,47 @@ const printBarcode = () => {
height: 38mm; height: 38mm;
} }
.barcode-container { .left-side {
width: 12mm; width: 12.5mm;
height: 38mm; height: 38mm;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} position: relative;
}
.barcode-img {
transform: rotate(90deg); .left-content {
transform-origin: center; position: absolute;
max-height: 12mm; width: fit-content;
max-width: 12mm; height: 12.5mm;
} transform: rotate(90deg);
transform-origin: center;
.details-container { display: flex;
width: 12mm; align-items: center;
gap: 2mm;
}
.barcode-img {
height: 10mm;
width: auto;
flex-shrink: 0;
}
.info-box {
display: flex;
flex-direction: column;
gap: 0.5mm;
font-size: 5pt;
line-height: 1.2;
}
.right-side {
width: 12.5mm;
height: 38mm; height: 38mm;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: relative; position: relative;
overflow: hidden;
} }
.item-name { .item-name {
@ -101,25 +121,30 @@ const printBarcode = () => {
white-space: normal; white-space: normal;
word-wrap: break-word; word-wrap: break-word;
position: absolute; position: absolute;
width: 32mm; width: 36mm;
text-align: center;
transform: rotate(270deg); transform: rotate(270deg);
top: 50%;
left: 50%;
transform-origin: center; transform-origin: center;
translate: -50% -50%;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="label"> <div class="label">
<div class="barcode-container"> <!-- Sisi Kiri: Barcode + Info -->
<img id="barcode-img" class="barcode-img" <div class="left-side">
src="${barcodeUrl.value}" alt="Barcode" /> <div class="left-content">
<img id="barcode-img" class="barcode-img" src="${barcodeUrl.value}" alt="Barcode" />
<div class="info-box">
${harga ? `<div>${harga}</div>` : ''}
${berat ? `<div>Berat: ${berat}</div>` : ''}
${kadar ? `<div>Kadar: ${kadar}</div>` : ''}
</div>
</div>
</div> </div>
<div class="details-container"> <div class="right-side">
<div class="item-name">${nama} ${berat}</div> <div class="item-name">${nama}</div>
</div> </div>
</div> </div>
</body> </body>

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

@ -18,7 +18,7 @@
<p class="flex items-center gap-2"> <p class="flex items-center gap-2">
<i class="fab fa-whatsapp text-green-500 text-xl"></i> 08158851178 <i class="fab fa-whatsapp text-green-500 text-xl"></i> 08158851178
</p> </p>
<p class=" text-sm">{{ generateTransactionCode() }}</p> <p class="text-sm">TRSXXXXXXXXXXXX</p>
</div> </div>
<div class="absolute inset-x-0 top-[-48px] flex flex-col items-center"> <div class="absolute inset-x-0 top-[-48px] flex flex-col items-center">
@ -108,7 +108,7 @@
<div class="w-[20%] p-2 flex flex-col items-center justify-center"> <div class="w-[20%] p-2 flex flex-col items-center justify-center">
<p><strong>Hormat Kami</strong></p> <p><strong>Hormat Kami</strong></p>
<inputSelect v-model="selectedSales" :options="salesOptions" <inputSelect v-model="selectedSales" :options="salesOptions" placeholder="Pilih Sales"
class="mt-16 text-sm rounded bg-B cursor-pointer !w-[160px] text-center [option]:text-left" /> class="mt-16 text-sm rounded bg-B cursor-pointer !w-[160px] text-center [option]:text-left" />
</div> </div>
@ -189,18 +189,9 @@ import inputSelect from '@/components/InputSelect.vue'
import axios from 'axios' import axios from 'axios'
const props = defineProps({ const props = defineProps({
isOpen: { isOpen: Boolean,
type: Boolean, pesanan: Array,
default: false, total: Number
},
pesanan: {
type: Array,
default: () => []
},
total: {
type: Number,
default: 0
}
}) })
const emit = defineEmits(['close', 'confirm', 'transaksi-saved']) const emit = defineEmits(['close', 'confirm', 'transaksi-saved'])
@ -218,52 +209,31 @@ const showToast = ref(false)
const toastType = ref('error') const toastType = ref('error')
const toastMessage = ref('') const toastMessage = ref('')
// 🧾 kode transaksi tetap
const transactionCode = ref('')
const toastClasses = computed(() => { const toastClasses = computed(() => {
const baseClasses = 'text-white' const base = 'text-white'
const typeClasses = { const type = {
error: 'bg-red-500', error: 'bg-red-500',
success: 'bg-green-500', success: 'bg-green-500',
info: 'bg-blue-500' info: 'bg-blue-500'
} }
return `${baseClasses} ${typeClasses[toastType.value]}` return `${base} ${type[toastType.value]}`
}) })
const grandTotal = computed(() => { const grandTotal = computed(() => props.total + (ongkosBikin.value || 0))
return props.total + (ongkosBikin.value || 0)
})
const getRowStyle = () => { const getRowStyle = () => props.pesanan.length === 1 ? { height: '126px' } : { height: '63px' }
if (props.pesanan.length === 1) { const getImageClass = () => props.pesanan.length === 1 ? 'w-25 h-25' : 'w-12 h-12'
return { height: '126px' } const getTextClass = () => props.pesanan.length === 1 ? 'text-lg font-medium' : 'text-sm'
}
return { height: '63px' }
}
const getImageClass = () => {
if (props.pesanan.length === 1) {
return 'w-25 h-25'
}
return 'w-12 h-12'
}
const getTextClass = () => {
if (props.pesanan.length === 1) {
return 'text-lg font-medium'
}
return 'text-sm'
}
const getCurrentDate = () => { const getCurrentDate = () => {
const days = ['Minggu','Senin','Selasa','Rabu','Kamis','Jumat','Sabtu'] const days = ['Minggu','Senin','Selasa','Rabu','Kamis','Jumat','Sabtu']
const months = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
const now = new Date() const now = new Date()
const dayName = days[now.getDay()]
const day = String(now.getDate()).padStart(2, '0') const day = String(now.getDate()).padStart(2, '0')
const month = months[now.getMonth()] const month = String(now.getMonth() + 1).padStart(2, '0')
const year = now.getFullYear() return `${days[now.getDay()]}, ${day}-${month}-${now.getFullYear()}`
return `${dayName}, ${day}-${month}-${year}`
} }
const generateTransactionCode = () => { const generateTransactionCode = () => {
@ -276,55 +246,33 @@ const showSimpleToast = (type, message, duration = 3000) => {
toastType.value = type toastType.value = type
toastMessage.value = message toastMessage.value = message
showToast.value = true showToast.value = true
setTimeout(() => (showToast.value = false), duration)
setTimeout(() => {
showToast.value = false
}, duration)
} }
const fetchSales = async () => { const fetchSales = async () => {
try { try {
const response = await axios.get('/api/sales', { const res = await axios.get('/api/sales', {
headers: { headers: { Authorization: `Bearer ${localStorage.getItem("token")}` }
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
}) })
salesOptions.value = res.data.map(s => ({ value: s.id, label: s.nama }))
salesOptions.value = response.data.map(sales => ({ if (salesOptions.value.length > 0) selectedSales.value = salesOptions.value[0].value
value: sales.id, } catch (e) {
label: sales.nama console.error('Error fetching sales:', e)
}))
if (salesOptions.value.length > 0) {
selectedSales.value = salesOptions.value[0].value
}
} catch (error) {
console.error('Error fetching sales:', error)
} }
} }
// 🟢 Generate kode hanya saat menyimpan transaksi
const handleSimpan = () => { const handleSimpan = () => {
if (!namaPembeli.value.trim()) { if (!namaPembeli.value.trim()) return showSimpleToast('error', 'Nama pembeli harus diisi!')
showSimpleToast('error', 'Nama pembeli harus diisi!') if (!nomorTelepon.value.trim()) return showSimpleToast('error', 'Nomor telepon harus diisi!')
return if (!alamat.value.trim()) return showSimpleToast('error', 'Alamat harus diisi!')
} if (!selectedSales.value) return showSimpleToast('error', 'Sales harus dipilih!')
if (!nomorTelepon.value.trim()) { // Kode transaksi dibuat hanya saat simpan
showSimpleToast('error', 'Nomor telepon harus diisi!') transactionCode.value = generateTransactionCode()
return
}
if (!alamat.value.trim()) {
showSimpleToast('error', 'Alamat harus diisi!')
return
}
if (!selectedSales.value) {
showSimpleToast('error', 'Sales harus dipilih!')
return
}
simpanTransaksi({ simpanTransaksi({
kode_transaksi: transactionCode.value,
id_sales: selectedSales.value, id_sales: selectedSales.value,
nama_pembeli: namaPembeli.value, nama_pembeli: namaPembeli.value,
no_hp: nomorTelepon.value, no_hp: nomorTelepon.value,
@ -337,48 +285,37 @@ const handleSimpan = () => {
const simpanTransaksi = async (dataTransaksi) => { const simpanTransaksi = async (dataTransaksi) => {
if (isSaving.value) return if (isSaving.value) return
isSaving.value = true isSaving.value = true
try { try {
const response = await axios.post('/api/transaksi', dataTransaksi, { const res = await axios.post('/api/transaksi', dataTransaksi, {
headers: { headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
Authorization: `Bearer ${localStorage.getItem("token")}`, })
},
});
showSimpleToast('success', 'Transaksi berhasil disimpan!', 2000) showSimpleToast('success', 'Transaksi berhasil disimpan!', 2000)
// Emit event dengan data transaksi yang sudah disimpan
setTimeout(() => { setTimeout(() => {
emit('transaksi-saved', response.data); emit('transaksi-saved', res.data)
emit('close'); emit('close')
}, 2200); }, 2200)
} catch (err) {
} catch (error) { const msg = err.response?.data?.message || err.message || 'Terjadi kesalahan saat menyimpan transaksi'
console.error('Error saving transaksi:', error); showSimpleToast('error', `Error: ${msg}`, 4000)
const errorMessage = error.response?.data?.message || error.message || 'Terjadi kesalahan saat menyimpan transaksi';
showSimpleToast('error', `Error: ${errorMessage}`, 4000);
} finally { } finally {
isSaving.value = false isSaving.value = false
} }
}; }
onMounted(() => { onMounted(() => {
if (props.isOpen) { if (props.isOpen) fetchSales()
fetchSales()
}
}) })
function formatInput(e) { function formatInput(e) {
let value = e.target.value.replace(/\D/g, ""); let val = e.target.value.replace(/\D/g, "")
ongkosBikin.value = value ? parseInt(value, 10) : null; ongkosBikin.value = val ? parseInt(val, 10) : null
ongkosBikinFormatted.value = value ongkosBikinFormatted.value = val ? new Intl.NumberFormat("id-ID").format(val) : ""
? new Intl.NumberFormat("id-ID").format(value)
: "";
} }
</script> </script>
<style scoped> <style scoped>
@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');

1485
storage/toko_emas.sql Normal file
View File

File diff suppressed because one or more lines are too long