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

[update] ui struk + fix input ongkos bikin

Browse Source
This commit is contained in:
dhilanradya 2025-09-17 01:45:54 +07:00
parent 428fedb944
commit 3d25ff5b13
7 changed files with 62 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
resources/images/logo_bca.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 120 KiB

BIN
resources/images/logo_bni.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 109 KiB

BIN
resources/images/logo_bri.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 108 KiB

BIN
resources/images/logo_mandiri.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 107 KiB

BIN
resources/images/logo_mastercard.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

BIN
resources/images/logo_visa.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 112 KiB

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

@ -7,16 +7,16 @@
</div>
<div class="p-6 text-sm flex flex-col h-full relative">
<div class="relative flex items-center justify-between top-0 pb-2 mb-2">
<div class="relative flex items-center justify-between top-0 pb-1 mb-2">
<div class="flex flex-col gap-2 -mt-5">
<p class="flex items-center gap-2">
<i class="fab fa-instagram text-D text-xl"></i> tokomas_Jakartacitayam
<i class="fab fa-instagram text-pink-600 text-xl"></i> tokomas_Jakartacitayam
</p>
<p class="flex items-center gap-2">
<i class="fab fa-tiktok text-D text-xl"></i> tokomas_Jakartacitayam
<i class="fab fa-tiktok text-black text-xl"></i> tokomas_Jakartacitayam
</p>
<p class="flex items-center gap-2">
<i class="fab fa-whatsapp text-D text-xl"></i> 08158851178
<i class="fab fa-whatsapp text-green-500 text-xl"></i> 08158851178
</p>
<p class=" text-sm">{{ generateTransactionCode() }}</p>
@ -28,39 +28,49 @@
</div>
<div class="grid grid-cols-[130px_1fr] gap-y-0 text-xs items-center -mt-5 relative z-10">
<div class="grid grid-cols-[130px_1fr] gap-y-0 text-xs items-center -mt-5 relative z-10">
<div class="text-right font-semibold pr-3">Tanggal :</div>
<p class="mt-1 text-left pl-2">{{ getCurrentDate() }}</p>
<div class="text-right font-semibold pr-3">Nama :</div>
<inputField v-model="namaPembeli" class="h-7 text-sm rounded bg-blue-200 w-full" />
<div class="text-right font-semibold pr-3">No.Hp :</div>
<inputField v-model="nomorTelepon" class="h-7 px-2 text-sm rounded bg-blue-200 w-full" />
<div class="text-right font-semibold pr-3">Alamat :</div>
<inputField v-model="alamat" class="h-7 px-2 text-sm rounded bg-blue-200 w-full" />
<div class="text-right font-semibold pr-3">No.Hp :</div>
<inputField v-model="nomorTelepon" class="h-7 px-2 text-sm rounded bg-blue-200 w-full" />
</div>
</div>
<table class="w-full border-D text-sm table-fixed border-b">
<div class="flex justify-between items-center mb-1 w-full">
<div class="flex gap-2">
<img :src="logo_bca" alt="Logo_bca" class="h-5" />
<img :src="logo_bri" alt="Logo_bri" class="h-5" />
<img :src="logo_bni" alt="Logo_bni" class="h-5" />
</div>
<div class="flex gap-2">
<img :src="logo_mastercard" alt="Logo_mastercard" class="h-5" />
<img :src="logo_visa" alt="Logo_visa" class="h-5" />
<img :src="logo_mandiri" alt="Logo_mandiri" class="h-5" />
</div>
</div>
<table class="w-full border-D text-sm table-fixed border-b">
<thead>
<tr class="border-b border-t border-D">
<th class="w-[60px] border-r border-D">Jml</th>
<th class="w-[330px] 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-[210px]">Harga</th>
<th class="w-[40px] border-r text-lg border-D">Jml</th>
<th class="w-[360px] py-2 text-lg border-r border-D">Item</th>
<th class="w-[70px] border-r text-lg border-D">Posisi</th>
<th class="w-[40px] border-r text-lg border-D">Berat</th>
<th class="w-[40px] border-r text-lg border-D">Kadar</th>
<th class="w-[240px] text-lg">Harga</th>
</tr>
</thead>
@ -101,13 +111,13 @@
<li>Barang yang dikembalikan menurut harga pasaran dan dipotong ongkos bikin, barang rusak
lain harga.</li>
<li>Barang yang sudah dibeli berarti sudah diperiksa dan disetujui.</li>
<li>Surat ini harap dibawa pada saat menjual kembali.</li>
<li class="text-red-500">Surat ini harap dibawa pada saat menjual kembali.</li>
</ol>
</div>
<!-- SALES -->
<div class="w-[20%] p-2 flex flex-col items-center justify-center">
<p><strong>Sales</strong></p>
<p><strong>Hormat Kami</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>
@ -122,19 +132,24 @@
<p class="text-red-500 text-xs">diluar harga jual</p>
</div>
<div class="flex items-center w-40">
<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>
<p>Rp</p>
<input
type="text"
v-model="ongkosBikinFormatted"
@input="formatInput"
class="h-7 px-2 text-sm rounded bg-blue-200 text-left w-full"
/>
</div>
</div>
<!-- Total -->
<div class="flex items-center justify-between -mt-4">
<p class="font-semibold">Total</p>
<p class="font-semibold">Total Harga</p>
<div class="flex items-center w-40">
<p>Rp</p>
<p class="px-3 pl-2 py-1 text-left text-sm w-full">
{{ grandTotal.toLocaleString() }}
{{ grandTotal.toLocaleString() }},-
</p>
</div>
</div>
@ -152,7 +167,7 @@
</div>
</div>
</div>
<p class="absolute p-2 bottom-0 left-0 w-full text-left text-xs bg-D text-white py-1">
<p class="absolute p-8 bottom-0 left-0 w-full text-left text-xs bg-D text-white py-1">
Terima kasih sudah berbelanja dengan kami
</p>
@ -163,6 +178,12 @@
<script setup>
import { ref, computed, onMounted } from 'vue'
import logo from '@/../images/logo.png'
import logo_bca from '@/../images/logo_bca.png'
import logo_bri from '@/../images/logo_bri.png'
import logo_bni from '@/../images/logo_bni.png'
import logo_mastercard from '@/../images/logo_mastercard.png'
import logo_visa from '@/../images/logo_visa.png'
import logo_mandiri from '@/../images/logo_mandiri.png'
import inputField from '@/components/inputField.vue'
import inputSelect from '@/components/inputSelect.vue'
@ -192,6 +213,7 @@ const alamat = ref('')
const ongkosBikin = ref(0)
const selectedSales = ref(null)
const salesOptions = ref([])
const ongkosBikinFormatted = ref("");
const grandTotal = computed(() => {
return props.total + (ongkosBikin.value || 0)
@ -310,6 +332,19 @@ const pesananMinimal = computed(() => {
return arr
})
function formatInput(e) {
let value = e.target.value.replace(/\D/g, "");
ongkosBikin.value = value ? parseInt(value, 10) : null;
ongkosBikinFormatted.value = value
? new Intl.NumberFormat("id-ID").format(value)
: "";
}
</script>
<style scoped>