Compare commits
2 Commits
ae225ce5c7
...
7766fd8938
| Author | SHA1 | Date | |
|---|---|---|---|
|
7766fd8938 | ||
|
|
9b02e00a72 |
196
resources/js/components/StrukOverlay.vue
Normal file
196
resources/js/components/StrukOverlay.vue
Normal 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>
|
||||||
Loading…
Reference in New Issue
Block a user