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

Compare commits

base: Magang-2025:7b1fdc30f62099e1aa109c1a6682ffcd4e75d9a9
Branches Tags
Magang-2025:main
Magang-2025:production
..
compare: Magang-2025:c28be3706e6b1f07da23fcf395668bf218d88ae9
Branches Tags
Magang-2025:production
Magang-2025:main

3 Commits
7b1fdc30f6 ... c28be3706e

Author SHA1 Message Date
dhilanradya
c28be3706e Merge branch 'production' of https://git.abbauf.com/Magang-2025/Kasir into production 2025-09-09 11:24:34 +07:00
dhilanradya
b9c562d0a2 [update] revisi struk 2025-09-09 11:24:13 +07:00
dhilanradya
7f4b41b904 [fix] ui mobile produk 2025-09-08 17:16:05 +07:00
3 changed files with 179 additions and 131 deletions
Show Stats Expand all files Collapse all files

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

@ -52,17 +52,16 @@
<!-- Nomor Transaksi -->
<p class="mt-1 text-sm">TRS-XXX-XXX</p>
<!-- Table Barang -->
<table class="w-full border-D mt-0 text-sm">
<table class="w-full border-D mt-0 text-sm table-fixed">
<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>
<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>
@ -94,25 +93,19 @@
<td>Rp3.000.000</td>
</tr>
<!-- Baris Ongkos + Total -->
<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>
<li>Barang yang dikembalikan menurut harga pasaran dan <br> 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>
</ol>
</td>
<td colspan="3" rowspan="2" class="p-2 text-center align-top">
<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
@ -121,13 +114,13 @@
{ value: 'Timothy', label: 'Timothy' },
{ value: 'Iwan', label: 'Iwan' }
]"
class="mt-16 text-sm rounded bg-B text-center cursor-pointer !w-[160px]"
class="mt-16 text-sm rounded bg-B cursor-pointer !w-[160px] text-center [option]:text-left"
/>
</div>
</td>
<td class="p-2 text-right text-sm font-semibold align-top border-r">
<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>
@ -135,7 +128,6 @@
</div>
</td>
<td class="p-2 text-sm align-top">
<div class="space-y-2">
<div class="flex items-center">
@ -152,21 +144,27 @@
</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>
</td>
<td class="p-2 text-center">
<button class="bg-C text-white px-6 py-2 rounded w-full">
Simpan
</button>
</div>
</td>
</tr>
</tbody>
</table>
</table>
</div>
<!-- Pesan bawah -->
@ -179,6 +177,8 @@
</div>
</template>
<script setup>
import { ref } from 'vue'
import logo from '@/../images/logo.png'

68
resources/js/pages/Produk.vue
View File

@ -20,23 +20,30 @@
<!-- Judul -->
<p class="font-serif italic text-[25px] text-D">PRODUK</p>
<!-- Filter -->
<div
class="mt-3 flex flex-col md:flex-row md:items-center md:justify-between gap-3"
>
<!-- Dropdown Kategori -->
<!-- Wrapper -->
<div class="mt-3">
<!-- Mobile Layout -->
<div class="flex flex-col gap-3 sm:hidden">
<!-- Search -->
<div class="w-full">
<searchbar
v-model:search="searchQuery"
class="searchbar-mobile"
/>
</div>
<!-- Filter + Tombol -->
<div class="flex flex-row justify-between items-center">
<!-- Filter Kategori -->
<div class="w-40 shrink-0">
<InputSelect
v-model="selectedCategory"
:options="kategori"
class="w-full md:w-48"
class="w-full"
/>
<!-- Search -->
<searchbar v-model:search="searchQuery" class="flex-1" />
</div>
<!-- Tombol Tambah Produk -->
<div class="mt-3 flex justify-end">
<router-link
to="/produk/baru"
class="bg-C text-[#0a1a3c] px-4 py-2 rounded-md shadow hover:bg-C transition"
@ -44,6 +51,35 @@
Tambah Produk
</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>
<!-- Grid Produk -->
<div
@ -297,3 +333,15 @@ async function deleteProduk() {
}
}
</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>