Compare commits
3 Commits
7b1fdc30f6
...
c28be3706e
| Author | SHA1 | Date | |
|---|---|---|---|
|
c28be3706e | ||
|
|
b9c562d0a2 | ||
|
|
7f4b41b904 |
@ -52,121 +52,119 @@
|
|||||||
<!-- Nomor Transaksi -->
|
<!-- Nomor Transaksi -->
|
||||||
<p class="mt-1 text-sm">TRS-XXX-XXX</p>
|
<p class="mt-1 text-sm">TRS-XXX-XXX</p>
|
||||||
|
|
||||||
<!-- Table Barang -->
|
<table class="w-full border-D mt-0 text-sm table-fixed">
|
||||||
<table class="w-full border-D mt-0 text-sm">
|
<thead>
|
||||||
<thead>
|
<tr class="border-b border-D">
|
||||||
<tr class="border-b border-D">
|
<th class="w-[260px] py-2 border-r border-D">Item</th>
|
||||||
<th class="w-32 py-2 border-r border-D">Item</th>
|
<th class="w-[70px] border-r border-D">Posisi</th>
|
||||||
<th class="w-32 py-2 border-r border-D">Posisi</th>
|
<th class="w-[60px] border-r border-D">Berat</th>
|
||||||
<th class="w-20 border-r border-D">Berat</th>
|
<th class="w-[60px] border-r border-D">Kadar</th>
|
||||||
<th class="w-20 border-r border-D">Kadar</th>
|
<th class="w-[140px] border-r border-D">Harga Satuan</th>
|
||||||
<th class="w-32 border-r border-D">Harga Satuan</th>
|
<th class="w-[60px] border-r border-D">Jumlah</th>
|
||||||
<th class="w-20 border-r border-D">Jumlah</th>
|
<th class="w-[140px]">Total Harga</th>
|
||||||
<th class="w-32">Total Harga</th>
|
</tr>
|
||||||
</tr>
|
</thead>
|
||||||
</thead>
|
<tbody>
|
||||||
<tbody>
|
<!-- Barang 1 -->
|
||||||
<!-- Barang 1 -->
|
<tr class="text-center">
|
||||||
<tr class="text-center">
|
<td class="flex items-center gap-2 p-2 border-r border-D">
|
||||||
<td class="flex items-center gap-2 p-2 border-r border-D">
|
<img src="" class="w-12 h-12 object-cover" />
|
||||||
<img src="" class="w-12 h-12 object-cover" />
|
Ring XXX
|
||||||
Ring XXX
|
</td>
|
||||||
</td>
|
<td class="border-r border-D">A1, Brankas</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">2,4 g</td>
|
<td class="border-r border-D">23 K</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">Rp9.000.000</td>
|
<td class="border-r border-D">2</td>
|
||||||
<td class="border-r border-D">2</td>
|
<td>Rp18.000.000</td>
|
||||||
<td>Rp18.000.000</td>
|
</tr>
|
||||||
</tr>
|
|
||||||
|
|
||||||
<!-- Barang 2 -->
|
<!-- Barang 2 -->
|
||||||
<tr class="text-center border-b">
|
<tr class="text-center border-b">
|
||||||
<td class="flex items-center gap-2 p-2 border-r border-D">
|
<td class="flex items-center gap-2 p-2 border-r border-D">
|
||||||
<img src="" class="w-12 h-12 object-cover" />
|
<img src="" class="w-12 h-12 object-cover" />
|
||||||
Necklace XXX
|
Necklace XXX
|
||||||
</td>
|
</td>
|
||||||
<td class="border-r border-D">A2</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">2,4 g</td>
|
||||||
<td class="border-r border-D">23 K</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">Rp3.000.000</td>
|
||||||
<td class="border-r border-D">1</td>
|
<td class="border-r border-D">1</td>
|
||||||
<td>Rp3.000.000</td>
|
<td>Rp3.000.000</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
<tr class="align-top">
|
<!-- Baris Ongkos + Total -->
|
||||||
<td colspan="2" rowspan="2" class="p-2 text-left align-top">
|
<tr class="align-top">
|
||||||
<p class="font-semibold">PERHATIAN</p>
|
<td colspan="2" rowspan="2" class="p-2 text-left align-top">
|
||||||
<ol class="list-decimal ml-4 text-xs space-y-1">
|
<p class="font-semibold">PERHATIAN</p>
|
||||||
<li>Berat barang telah ditimbang dan disaksikan oleh pembeli.</li>
|
<ol class="list-decimal ml-4 text-xs space-y-1">
|
||||||
<li>
|
<li>Berat barang telah ditimbang dan disaksikan oleh pembeli.</li>
|
||||||
Barang yang dikembalikan menurut harga pasaran dan dipotong
|
<li>Barang yang dikembalikan menurut harga pasaran dan <br> dipotong ongkos bikin, barang rusak lain harga.</li>
|
||||||
ongkos bikin, barang rusak lain harga.
|
<li>Barang yang sudah dibeli berarti sudah diperiksa dan disetujui.</li>
|
||||||
</li>
|
<li>Surat ini harap dibawa pada saat menjual kembali.</li>
|
||||||
<li>
|
</ol>
|
||||||
Barang yang sudah dibeli berarti sudah diperiksa dan
|
</td>
|
||||||
disetujui.
|
|
||||||
</li>
|
<td colspan="2" rowspan="2" class="p-2 text-center align-top">
|
||||||
<li>Surat ini harus dibawa pada saat menjual kembali.</li>
|
<div class="flex flex-col items-center justify-center h-full">
|
||||||
</ol>
|
<p><strong>Sales</strong></p>
|
||||||
</td>
|
<inputSelect
|
||||||
|
v-model="sales"
|
||||||
|
:options="[
|
||||||
|
{ value: 'Timothy', label: 'Timothy' },
|
||||||
|
{ value: 'Iwan', label: 'Iwan' }
|
||||||
|
]"
|
||||||
|
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
|
||||||
|
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>
|
||||||
|
|
||||||
|
<!-- Baris Tombol -->
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td class="p-2 text-center">
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<button class="bg-gray-400 text-white px-6 py-2 rounded w-full">
|
||||||
|
Batal
|
||||||
|
</button>
|
||||||
|
<button class="bg-C text-white px-6 py-2 rounded w-full">
|
||||||
|
Simpan
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
|
||||||
<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>
|
</div>
|
||||||
|
|
||||||
<!-- Pesan bawah -->
|
<!-- Pesan bawah -->
|
||||||
@ -179,6 +177,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import logo from '@/../images/logo.png'
|
import logo from '@/../images/logo.png'
|
||||||
|
|||||||
@ -20,29 +20,65 @@
|
|||||||
<!-- Judul -->
|
<!-- Judul -->
|
||||||
<p class="font-serif italic text-[25px] text-D">PRODUK</p>
|
<p class="font-serif italic text-[25px] text-D">PRODUK</p>
|
||||||
|
|
||||||
<!-- Filter -->
|
<!-- Wrapper -->
|
||||||
<div
|
<div class="mt-3">
|
||||||
class="mt-3 flex flex-col md:flex-row md:items-center md:justify-between gap-3"
|
<!-- Mobile Layout -->
|
||||||
>
|
<div class="flex flex-col gap-3 sm:hidden">
|
||||||
<!-- Dropdown Kategori -->
|
<!-- Search -->
|
||||||
<InputSelect
|
<div class="w-full">
|
||||||
v-model="selectedCategory"
|
<searchbar
|
||||||
:options="kategori"
|
v-model:search="searchQuery"
|
||||||
class="w-full md:w-48"
|
class="searchbar-mobile"
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Search -->
|
<!-- Filter + Tombol -->
|
||||||
<searchbar v-model:search="searchQuery" class="flex-1" />
|
<div class="flex flex-row justify-between items-center">
|
||||||
</div>
|
<!-- Filter Kategori -->
|
||||||
|
<div class="w-40 shrink-0">
|
||||||
|
<InputSelect
|
||||||
|
v-model="selectedCategory"
|
||||||
|
:options="kategori"
|
||||||
|
class="w-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Tombol Tambah Produk -->
|
<!-- Tombol Tambah Produk -->
|
||||||
<div class="mt-3 flex justify-end">
|
<router-link
|
||||||
<router-link
|
to="/produk/baru"
|
||||||
to="/produk/baru"
|
class="bg-C text-[#0a1a3c] px-4 py-2 rounded-md shadow hover:bg-C transition"
|
||||||
class="bg-C text-[#0a1a3c] px-4 py-2 rounded-md shadow hover:bg-C transition"
|
>
|
||||||
>
|
Tambah Produk
|
||||||
Tambah Produk
|
</router-link>
|
||||||
</router-link>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Desktop Layout -->
|
||||||
|
<div class="hidden sm:flex flex-row gap-3 items-start">
|
||||||
|
<!-- Filter -->
|
||||||
|
<div class="w-40 sm:w-48 shrink-0">
|
||||||
|
<InputSelect
|
||||||
|
v-model="selectedCategory"
|
||||||
|
:options="kategori"
|
||||||
|
class="w-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Search -->
|
||||||
|
<div class="flex-1 mt-[2px]">
|
||||||
|
<searchbar v-model:search="searchQuery" class="w-full" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Tombol Tambah Produk (desktop) -->
|
||||||
|
<div class="hidden sm:flex justify-end mt-3">
|
||||||
|
<router-link
|
||||||
|
to="/produk/baru"
|
||||||
|
class="bg-C text-[#0a1a3c] px-4 py-2 rounded-md shadow hover:bg-C transition"
|
||||||
|
>
|
||||||
|
Tambah Produk
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Grid Produk -->
|
<!-- Grid Produk -->
|
||||||
@ -297,3 +333,15 @@ async function deleteProduk() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* 🔥 Tambahan agar searchbar mobile full */
|
||||||
|
.searchbar-mobile:deep(div) {
|
||||||
|
width: 100% !important;
|
||||||
|
justify-content: flex-start !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchbar-mobile:deep(input) {
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user