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

[feat] struk component

Browse Source
This commit is contained in:
dhilanradya 2025-09-08 13:34:56 +07:00
parent 26e1ee751e
commit 9b02e00a72
1 changed files with 196 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

196
resources/js/components/StrukOverlay.vue Normal file
View File

@ -0,0 +1,196 @@
<template>
<div
v-if="isOpen"
class="text-D font-serif font-medium 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-D h-8 w-full"></div>
<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">
<!-- Sosmed -->
<div class="flex flex-col gap-4">
<p class="flex items-center gap-2">
<i class="fab fa-instagram text-red-500 text-xl"></i> tokomas_Jakartacitayam
</p>
<p class="flex items-center gap-2">
<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-green-500 text-xl"></i> 08158851178
</p>
</div>
<!-- Logo & tanggal (absolute di tengah) -->
<div class="absolute inset-x-0 top-0 flex flex-col items-center">
<img :src="logo" alt="Logo" class="h-15" />
<p class="mt-1 text-center">Selasa/20-08-2025</p>
</div>
<!-- Data Pembeli -->
<div
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>
<inputField
class="h-7 px-2 text-sm rounded bg-blue-200 w-full"
/>
<div class="text-right font-semibold pr-3">Nomor Telepon</div>
<inputField
class="h-7 px-2 text-sm rounded bg-blue-200 w-full"
/>
<div class="text-right font-semibold pr-3">Alamat</div>
<inputField
class="h-7 px-2 text-sm rounded bg-blue-200 w-full"
/>
</div>
</div>
<!-- Nomor Transaksi -->
<p class="mt-1 text-sm">TRS-XXX-XXX</p>
<!-- Table Barang -->
<table class="w-full border-D mt-0 text-sm">
<thead>
<tr class="border-b border-D">
<th class="w-32 py-2 border-r border-D">Item</th>
<th class="w-32 py-2 border-r border-D">Posisi</th>
<th class="w-20 border-r border-D">Berat</th>
<th class="w-20 border-r border-D">Kadar</th>
<th class="w-32 border-r border-D">Harga Satuan</th>
<th class="w-20 border-r border-D">Jumlah</th>
<th class="w-32">Total Harga</th>
</tr>
</thead>
<tbody>
<!-- Barang 1 -->
<tr class="text-center">
<td class="flex items-center gap-2 p-2 border-r border-D">
<img src="" class="w-12 h-12 object-cover" />
Ring XXX
</td>
<td class="border-r border-D">A1, Brankas</td>
<td class="border-r border-D">2,4 g</td>
<td class="border-r border-D">23 K</td>
<td class="border-r border-D">Rp9.000.000</td>
<td class="border-r border-D">2</td>
<td>Rp18.000.000</td>
</tr>
<!-- Barang 2 -->
<tr class="text-center border-b">
<td class="flex items-center gap-2 p-2 border-r border-D">
<img src="" class="w-12 h-12 object-cover" />
Necklace XXX
</td>
<td class="border-r border-D">A2</td>
<td class="border-r border-D">2,4 g</td>
<td class="border-r border-D">23 K</td>
<td class="border-r border-D">Rp3.000.000</td>
<td class="border-r border-D">1</td>
<td>Rp3.000.000</td>
</tr>
<tr class="align-top">
<td colspan="2" rowspan="2" class="p-2 text-left align-top">
<p class="font-semibold">PERHATIAN</p>
<ol class="list-decimal ml-4 text-xs space-y-1">
<li>Berat barang telah ditimbang dan disaksikan oleh pembeli.</li>
<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 harus dibawa pada saat menjual kembali.</li>
</ol>
</td>
<td colspan="3" 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="sales"
:options="[
{ value: 'Timothy', label: 'Timothy' },
{ value: 'Iwan', label: 'Iwan' }
]"
class="mt-16 text-sm rounded bg-B text-center cursor-pointer !w-[160px]"
/>
</div>
</td>
<td 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
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">21.200.000</p>
</div>
</div>
</td>
</tr>
<tr>
<td class="p-2 text-center">
<button class="bg-gray-400 text-white px-6 py-2 rounded w-full">
Batal
</button>
</td>
<td class="p-2 text-center">
<button class="bg-C text-white px-6 py-2 rounded w-full">
Simpan
</button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Pesan bawah -->
<p
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
</p>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
import logo from '@/../images/logo.png'
import inputField from '@/components/inputField.vue'
import inputSelect from '@/components/inputSelect.vue'
defineProps({
isOpen: {
type: Boolean,
default: false,
},
})
const sales = ref('Timothy')
</script>