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

[update] nambahin satuan berat,kadar

Browse Source
This commit is contained in:
dhilanradya 2025-09-12 16:04:02 +07:00
parent 4223cad92f
commit 286b270bd6
1 changed files with 135 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,188 +1,163 @@
<template> <template>
<div <div v-if="isOpen"
v-if="isOpen" class="text-D pt-serif-regular-italic fixed inset-0 bg-black/75 flex items-center justify-center z-[9999]">
class="text-D pt-serif-regular-italic fixed inset-0 bg-black/75 flex items-center justify-center z-[9999]" <div class="bg-white w-[1224px] h-[528px] rounded-md shadow-lg relative overflow-hidden">
>
<div
class="bg-white w-[1224px] h-[528px] rounded-md shadow-lg relative overflow-hidden"
>
<div class="bg-D h-8 w-full"></div> <div class="bg-D h-8 w-full"></div>
<div class="p-6 text-sm flex flex-col h-full relative"> <div class="p-6 text-sm flex flex-col h-full relative">
<!-- Header -->
<div class="relative flex items-center justify-between pb-2 mb-2"> <div class="relative flex items-center justify-between pb-2 mb-2">
<!-- Sosmed -->
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
<p class="flex items-center gap-2"> <p class="flex items-center gap-2">
<i class="fab fa-instagram text-red-500 text-xl"></i> tokomas_Jakartacitayam <i class="fab fa-instagram text-D text-xl"></i> tokomas_Jakartacitayam
</p> </p>
<p class="flex items-center gap-2"> <p class="flex items-center gap-2">
<i class="fab fa-tiktok text-black text-xl"></i> tokomas_Jakartacitayam <i class="fab fa-tiktok text-D text-xl"></i> tokomas_Jakartacitayam
</p> </p>
<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-D text-xl"></i> 08158851178
</p> </p>
</div> </div>
<!-- Logo & tanggal (absolute di tengah) -->
<div class="absolute inset-x-0 top-0 flex flex-col items-center"> <div class="absolute inset-x-0 top-0 flex flex-col items-center">
<img :src="logo" alt="Logo" class="h-15" /> <img :src="logo" alt="Logo" class="h-15" />
<!-- ==== MODIFIKASI: Tanggal sekarang dinamis ==== -->
<p class="mt-1 text-center">{{ getCurrentDate() }}</p> <p class="mt-1 text-center">{{ getCurrentDate() }}</p>
<!-- ==== END MODIFIKASI ==== -->
</div> </div>
<!-- Data Pembeli -->
<div <div class="grid grid-cols-[130px_1fr] gap-y-2 items-center relative z-10">
class="grid grid-cols-[130px_1fr] gap-y-2 items-center relative z-10"
>
<div class="text-right font-semibold pr-3">Nama Pembeli</div> <div class="text-right font-semibold pr-3">Nama Pembeli</div>
<!-- ==== MODIFIKASI: Input field sekarang v-model ==== -->
<inputField <inputField v-model="namaPembeli" class="h-7 px-2 text-sm rounded bg-blue-200 w-full" />
v-model="namaPembeli"
class="h-7 px-2 text-sm rounded bg-blue-200 w-full"
/>
<!-- ==== END MODIFIKASI ==== -->
<div class="text-right font-semibold pr-3">Nomor Telepon</div> <div class="text-right font-semibold pr-3">Nomor Telepon</div>
<!-- ==== MODIFIKASI: Input field sekarang v-model ==== -->
<inputField <inputField v-model="nomorTelepon" class="h-7 px-2 text-sm rounded bg-blue-200 w-full" />
v-model="nomorTelepon"
class="h-7 px-2 text-sm rounded bg-blue-200 w-full"
/>
<!-- ==== END MODIFIKASI ==== -->
<div class="text-right font-semibold pr-3">Alamat</div> <div class="text-right font-semibold pr-3">Alamat</div>
<!-- ==== MODIFIKASI: Input field sekarang v-model ==== -->
<inputField <inputField v-model="alamat" class="h-7 px-2 text-sm rounded bg-blue-200 w-full" />
v-model="alamat"
class="h-7 px-2 text-sm rounded bg-blue-200 w-full"
/>
<!-- ==== END MODIFIKASI ==== -->
</div> </div>
</div> </div>
<!-- Nomor Transaksi -->
<!-- ==== MODIFIKASI: Kode transaksi dinamis ==== -->
<p class="mt-1 text-sm">{{ generateTransactionCode() }}</p> <p class="mt-1 text-sm">{{ generateTransactionCode() }}</p>
<!-- ==== END MODIFIKASI ==== -->
<table class="w-full border-D mt-0 text-sm table-fixed">
<thead>
<tr class="border-b border-D">
<th class="w-[260px] py-2 border-r border-D">Item</th>
<th class="w-[70px] border-r border-D">Posisi</th>
<th class="w-[60px] border-r border-D">Berat</th>
<th class="w-[60px] border-r border-D">Kadar</th>
<th class="w-[140px] border-r border-D">Harga Satuan</th>
<th class="w-[60px] border-r border-D">Jumlah</th>
<th class="w-[140px]">Total Harga</th>
</tr>
</thead>
<tbody> <table class="w-full border-D mt-0 text-sm table-fixed">
<tr v-for="(item, index) in pesananMinimal" :key="index" class="text-center"> <thead>
<td class="flex items-center gap-2 p-2 border-r border-D"> <tr class="border-b border-D">
<template v-if="item.produk?.foto?.[0]?.url"> <th class="w-[260px] py-2 border-r border-D">Item</th>
<img <th class="w-[70px] border-r border-D">Posisi</th>
:src="item.produk.foto[0].url" <th class="w-[60px] border-r border-D">Berat</th>
class="w-12 h-12 object-cover" <th class="w-[60px] border-r border-D">Kadar</th>
/> <th class="w-[140px] border-r border-D">Harga Satuan</th>
</template> <th class="w-[60px] border-r border-D">Jumlah</th>
<template v-else> <th class="w-[140px]">Total Harga</th>
<div class="w-12 h-12"></div> </tr>
</template> </thead>
{{ item.produk?.nama || '' }}
</td> <tbody>
<tr v-for="(item, index) in pesananMinimal" :key="index" class="text-center">
<td class="flex items-center gap-2 p-2 border-r border-D">
<template v-if="item.produk?.foto?.[0]?.url">
<img :src="item.produk.foto[0].url" class="w-12 h-12 object-cover" />
</template>
<template v-else>
<div class="w-12 h-12"></div>
</template>
{{ item.produk?.nama || '' }}
</td>
<td class="border-r border-D">{{ item.posisi || '' }}</td>
<td class="border-r border-D">
<span v-if="item.produk?.berat">{{ item.produk.berat }}g</span>
</td>
<td class="border-r border-D">
<span v-if="item.produk?.kadar">{{ item.produk.kadar }}k</span>
</td>
<td class="border-r border-D">
<span v-if="item.harga_deal">Rp{{ item.harga_deal.toLocaleString() }}</span>
</td>
<td class="border-r border-D">
<span v-if="item.harga_deal">1</span>
</td>
<td>
<span v-if="item.harga_deal">Rp{{ item.harga_deal.toLocaleString() }}</span>
</td>
</tr>
</tbody>
<td class="border-r border-D">{{ item.posisi || '' }}</td> <tfoot>
<td class="border-r border-D">{{ item.produk?.berat || '' }}</td>
<td class="border-r border-D">{{ item.produk?.kadar || '' }}</td> <tr class="align-top border-t">
<td class="border-r border-D"> <td colspan="2" rowspan="2" class="p-2 text-left align-top">
<span v-if="item.harga_deal">Rp{{ item.harga_deal.toLocaleString() }}</span> <p class="font-semibold">PERHATIAN</p>
</td> <ol class="list-decimal ml-4 text-xs space-y-1">
<td class="border-r border-D"> <li>Berat barang telah ditimbang dan disaksikan oleh pembeli.</li>
<span v-if="item.harga_deal">1</span> <li>Barang yang dikembalikan menurut harga pasaran dan <br> dipotong ongkos bikin,
</td> barang rusak lain
<td> harga.</li>
<span v-if="item.harga_deal">Rp{{ item.harga_deal.toLocaleString() }}</span> <li>Barang yang sudah dibeli berarti sudah diperiksa dan disetujui.</li>
</td> <li>Surat ini harap dibawa pada saat menjual kembali.</li>
</tr> </ol>
</tbody> </td>
<td colspan="2" rowspan="2" class="p-2 text-center align-top">
<div class="flex flex-col items-center justify-center h-full">
<p><strong>Sales</strong></p>
<inputSelect v-model="selectedSales" :options="salesOptions"
class="mt-16 text-sm rounded bg-B cursor-pointer !w-[160px] text-center [option]:text-left" />
</div>
</td>
<td colspan="2" class="p-2 text-right text-sm font-semibold align-top border-r">
<div class="space-y-2">
<p>Ongkos bikin</p>
<p class="text-red-500 text-xs">diluar harga jual</p>
<p>Total</p>
</div>
</td>
<td class="p-2 text-sm align-top">
<div class="space-y-2">
<div class="flex items-center">
<p>Rp</p>
<inputField v-model.number="ongkosBikin" type="number"
class="h-7 px-2 text-sm rounded bg-blue-200 text-left w-full" />
</div>
<div class="flex items-center">
<p>Rp</p>
<p class="px-3 py-1 text-left text-sm w-full">{{ grandTotal.toLocaleString() }}
</p>
</div>
</div>
</td>
</tr>
<!-- BAGIAN BAWAH DIPINDAHKAN KE TFOOT --> <tr>
<tfoot> <td></td>
<!-- Baris Ongkos + Total --> <td></td>
<tr class="align-top border-t"> <td class="p-2 text-center">
<td colspan="2" rowspan="2" class="p-2 text-left align-top"> <div class="flex gap-2">
<p class="font-semibold">PERHATIAN</p> <button @click="$emit('close')" class="bg-gray-400 text-white px-6 py-2 rounded w-full">Batal</button>
<ol class="list-decimal ml-4 text-xs space-y-1"> <button @click="handleSimpan" class="bg-C text-white px-6 py-2 rounded w-full">Simpan</button>
<li>Berat barang telah ditimbang dan disaksikan oleh pembeli.</li> </div>
<li>Barang yang dikembalikan menurut harga pasaran dan <br> dipotong ongkos bikin, barang rusak lain harga.</li> </td>
<li>Barang yang sudah dibeli berarti sudah diperiksa dan disetujui.</li> </tr>
<li>Surat ini harap dibawa pada saat menjual kembali.</li> </tfoot>
</ol> </table>
</td>
<td colspan="2" rowspan="2" class="p-2 text-center align-top">
<div class="flex flex-col items-center justify-center h-full">
<p><strong>Sales</strong></p>
<inputSelect
v-model="selectedSales"
:options="salesOptions"
class="mt-16 text-sm rounded bg-B cursor-pointer !w-[160px] text-center [option]:text-left"
/>
</div>
</td>
<td colspan="2" class="p-2 text-right text-sm font-semibold align-top border-r">
<div class="space-y-2">
<p>Ongkos bikin</p>
<p class="text-red-500 text-xs">diluar harga jual</p>
<p>Total</p>
</div>
</td>
<td class="p-2 text-sm align-top">
<div class="space-y-2">
<div class="flex items-center">
<p>Rp</p>
<inputField
v-model.number="ongkosBikin"
type="number"
class="h-7 px-2 text-sm rounded bg-blue-200 text-left w-full"
/>
</div>
<div class="flex items-center">
<p>Rp</p>
<p class="px-3 py-1 text-left text-sm w-full">{{ grandTotal.toLocaleString() }}</p>
</div>
</div>
</td>
</tr>
<!-- Baris Tombol -->
<tr>
<td></td>
<td></td>
<td class="p-2 text-center">
<div class="flex gap-2">
<button @click="$emit('close')" class="bg-gray-400 text-white px-6 py-2 rounded w-full">Batal</button>
<button @click="handleSimpan" class="bg-C text-white px-6 py-2 rounded w-full">Simpan</button>
</div>
</td>
</tr>
</tfoot>
</table>
</div> </div>
<!-- Pesan bawah -->
<p <p class="absolute bottom-0 left-0 text-xs bg-D text-white px-2 py-1 rounded-tr-md">
class="absolute bottom-0 left-0 text-xs bg-D text-white px-2 py-1 rounded-tr-md"
>
Terima kasih sudah berbelanja dengan kami Terima kasih sudah berbelanja dengan kami
</p> </p>
</div> </div>
@ -194,11 +169,9 @@ import { ref, computed, onMounted } from 'vue'
import logo from '@/../images/logo.png' import logo from '@/../images/logo.png'
import inputField from '@/components/inputField.vue' import inputField from '@/components/inputField.vue'
import inputSelect from '@/components/inputSelect.vue' import inputSelect from '@/components/inputSelect.vue'
// ==== TAMBAHAN: Import axios ====
import axios from 'axios'
// ==== END TAMBAHAN ====
// ==== MODIFIKASI: Props sekarang menerima pesanan dan total ==== import axios from 'axios'
const props = defineProps({ const props = defineProps({
isOpen: { isOpen: {
type: Boolean, type: Boolean,
@ -213,28 +186,21 @@ const props = defineProps({
default: 0 default: 0
} }
}) })
// ==== END MODIFIKASI ====
// ==== TAMBAHAN: Define emits ====
const emit = defineEmits(['close', 'confirm']) const emit = defineEmits(['close', 'confirm'])
// ==== END TAMBAHAN ====
// ==== TAMBAHAN: Reactive variables untuk form ====
const namaPembeli = ref('') const namaPembeli = ref('')
const nomorTelepon = ref('') const nomorTelepon = ref('')
const alamat = ref('') const alamat = ref('')
const ongkosBikin = ref(0) const ongkosBikin = ref(0)
const selectedSales = ref(null) const selectedSales = ref(null)
const salesOptions = ref([]) const salesOptions = ref([])
// ==== END TAMBAHAN ====
// ==== TAMBAHAN: Computed untuk grand total ====
const grandTotal = computed(() => { const grandTotal = computed(() => {
return props.total + (ongkosBikin.value || 0) return props.total + (ongkosBikin.value || 0)
}) })
// ==== END TAMBAHAN ====
// ==== TAMBAHAN: Fungsi untuk generate tanggal ====
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 months = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
@ -247,17 +213,13 @@ const getCurrentDate = () => {
return `${dayName}/${day}-${month}-${year}` return `${dayName}/${day}-${month}-${year}`
} }
// ==== END TAMBAHAN ====
// ==== TAMBAHAN: Fungsi untuk generate kode transaksi ====
const generateTransactionCode = () => { const generateTransactionCode = () => {
const now = new Date() const now = new Date()
const timestamp = now.getTime().toString().slice(-6) const timestamp = now.getTime().toString().slice(-6)
return `TRS-${timestamp}` return `TRS-${timestamp}`
} }
// ==== END TAMBAHAN ====
// ==== TAMBAHAN: Fetch sales data ====
const fetchSales = async () => { const fetchSales = async () => {
try { try {
const response = await axios.get('/api/sales', { const response = await axios.get('/api/sales', {
@ -271,7 +233,7 @@ const fetchSales = async () => {
label: sales.nama label: sales.nama
})) }))
// Set default sales jika ada
if (salesOptions.value.length > 0) { if (salesOptions.value.length > 0) {
selectedSales.value = salesOptions.value[0].value selectedSales.value = salesOptions.value[0].value
} }
@ -279,11 +241,9 @@ const fetchSales = async () => {
console.error('Error fetching sales:', error) console.error('Error fetching sales:', error)
} }
} }
// ==== END TAMBAHAN ====
// ==== TAMBAHAN: Handle simpan dengan validasi ====
const handleSimpan = () => { const handleSimpan = () => {
// Validasi input wajib
if (!namaPembeli.value.trim()) { if (!namaPembeli.value.trim()) {
alert('Nama pembeli harus diisi!') alert('Nama pembeli harus diisi!')
return return
@ -304,7 +264,7 @@ const handleSimpan = () => {
return return
} }
// Emit data ke parent
simpanTransaksi({ simpanTransaksi({
id_sales: selectedSales.value, id_sales: selectedSales.value,
nama_pembeli: namaPembeli.value, nama_pembeli: namaPembeli.value,
@ -316,7 +276,7 @@ const handleSimpan = () => {
}) })
} }
// ==== TAMBAHAN: Fungsi untuk menyimpan transaksi ====
const simpanTransaksi = async (dataTransaksi) => { const simpanTransaksi = async (dataTransaksi) => {
console.log('Data transaksi yang akan disimpan:', dataTransaksi); console.log('Data transaksi yang akan disimpan:', dataTransaksi);
@ -327,7 +287,7 @@ const simpanTransaksi = async (dataTransaksi) => {
}, },
}); });
// Reset form setelah berhasil
props.pesanan.value = []; props.pesanan.value = [];
props.isOpen = false; props.isOpen = false;
@ -339,10 +299,7 @@ const simpanTransaksi = async (dataTransaksi) => {
alert('Error menyimpan transaksi: ' + (error.response?.data?.message || error.message)); alert('Error menyimpan transaksi: ' + (error.response?.data?.message || error.message));
} }
}; };
// ==== END TAMBAHAN ====
// ==== END TAMBAHAN ====
// ==== TAMBAHAN: Fetch sales saat component mounted ====
onMounted(() => { onMounted(() => {
if (props.isOpen) { if (props.isOpen) {
fetchSales() fetchSales()
@ -350,20 +307,20 @@ onMounted(() => {
}) })
const pesananMinimal = computed(() => { const pesananMinimal = computed(() => {
const arr = [...props.pesanan] // copy data asli const arr = [...props.pesanan]
while (arr.length < 2) { while (arr.length < 2) {
arr.push({ produk: {}, harga_deal: 0, posisi: '' }) // baris kosong arr.push({ produk: {}, harga_deal: 0, posisi: '' })
} }
return arr return arr
}) })
// ==== END TAMBAHAN ====
</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');
.pt-serif-regular-italic { .pt-serif-regular-italic {
font-family: "PT Serif", serif; font-family: "PT Serif", serif;
font-weight: 400; font-weight: 400;
} }
</style> </style>