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

Merge branch 'production' of https://git.abbauf.com/Magang-2025/Kasir into production

Browse Source
This commit is contained in:
Baghaztra 2025-08-28 15:13:21 +07:00
commit 2f72c40788
4 changed files with 153 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
resources/js/components/KasirForm.vue Normal file
View File

@ -0,0 +1,83 @@
<template>
<div>
<!-- Input Grid -->
<div class="grid grid-cols-2 gap-4 mb-4">
<div>
<label class="block text-sm font-medium text-gray-700">Kode Item *</label>
<input v-model="kodeItem" type="text"
class="mt-1 block w-full rounded-md bg-[#f9f5f0] border border-gray-300 focus:border-blue-500 focus:ring focus:ring-blue-200" />
</div>
<br>
<div>
<!-- Total -->
<div class="flex justify-center items-baseline gap-2 mb-1 ml-130">
<span class="text-gray-600 font-medium">Total:</span>
<span class="text-3xl font-bold text-[#0f1d4a]">Rp{{ total.toLocaleString() }},-</span>
</div>
<label class="block text-sm font-medium text-gray-700">Harga Jual</label>
<input v-model="hargaJual" type="number"
class="mt-1 block w-full rounded-md bg-[#f9f5f0] border border-gray-300 focus:border-blue-500 focus:ring focus:ring-blue-200" />
</div>
</div>
<!-- Buttons -->
<div class="flex gap-4 mb-6">
<button @click="tambahItem"
class="px-4 py-2 rounded-md bg-[#f1ede8] text-[#0f1d4a] font-medium hover:bg-[#e4dfd8] transition">
Tambah Item
</button>
<button
class="px-6 py-2 rounded-md bg-[#c6a77d] text-[#0f1d4a] font-semibold hover:bg-[#b09065] transition">
Lanjut
</button>
</div>
<!-- Table -->
<table class="w-full border-collapse border border-gray-200 text-sm rounded-lg overflow-hidden">
<thead class="bg-gray-100 text-[#0f1d4a]">
<tr>
<th class="border border-gray-200 p-2">No</th>
<th class="border border-gray-200 p-2">Item</th>
<th class="border border-gray-200 p-2">Jml</th>
<th class="border border-gray-200 p-2">Harga</th>
<th class="border border-gray-200 p-2">Total</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in pesanan" :key="index" class="hover:bg-gray-50">
<td class="border border-gray-200 p-2 text-center">{{ index + 1 }}</td>
<td class="border border-gray-200 p-2">{{ item.kode }}</td>
<td class="border border-gray-200 p-2 text-center">{{ item.jumlah }}</td>
<td class="border border-gray-200 p-2">Rp{{ item.harga.toLocaleString() }}</td>
<td class="border border-gray-200 p-2">Rp{{ (item.harga * item.jumlah).toLocaleString() }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
const kodeItem = ref('')
const hargaJual = ref(0)
const pesanan = ref([])
const tambahItem = () => {
if (!kodeItem.value || !hargaJual.value) return
pesanan.value.push({
kode: kodeItem.value,
jumlah: 1,
harga: parseFloat(hargaJual.value),
})
kodeItem.value = ''
hargaJual.value = 0
}
const total = computed(() =>
pesanan.value.reduce((sum, item) => sum + item.harga * item.jumlah, 0)
)
</script>

33
resources/js/components/KasirTransaksiList.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<h3 class="text-lg font-semibold mb-4 text-gray-800">Transaksi</h3>
<table class="w-full border-collapse border border-gray-200 text-sm">
<thead class="bg-gray-100">
<tr>
<th class="border border-gray-200 p-2">Tanggal</th>
<th class="border border-gray-200 p-2">Kode Transaksi</th>
<th class="border border-gray-200 p-2">Pendapatan</th>
<th class="border border-gray-200 p-2">Detail Item</th>
</tr>
</thead>
<tbody>
<tr v-for="trx in transaksi" :key="trx.id">
<td class="border border-gray-200 p-2">{{ trx.tanggal }}</td>
<td class="border border-gray-200 p-2">{{ trx.kode }}</td>
<td class="border border-gray-200 p-2">Rp{{ trx.pendapatan.toLocaleString() }}</td>
<td class="border border-gray-200 p-2 text-center">
<button @click="$emit('detail', trx)"
class="px-3 py-1 rounded-md bg-[#c6a77d] text-white hover:bg-[#b09065] transition">Detail</button>
</td>
</tr>
</tbody>
</table>
</template>
<script setup>
const props = defineProps({
transaksi: {
type: Array,
default: () => []
}
})
</script>

31
resources/js/pages/Kasir.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<mainLayout>
<div class="p-6 grid grid-cols-3 gap-6">
<!-- Left Section -->
<div class="col-span-2 bg-white p-4 rounded-lg shadow-md border border-gray-200 flex flex-col">
<KasirForm />
</div>
<!-- Right Section -->
<div class="bg-white p-4 rounded-lg shadow-md border border-gray-200">
<KasirTransaksiList :transaksi="dummyTransaksi" @detail="lihatDetail" />
</div>
</div>
</mainLayout>
</template>
<script setup>
import mainLayout from '../layouts/mainLayout.vue'
import KasirForm from '../components/KasirForm.vue'
import KasirTransaksiList from '../components/KasirTransaksiList.vue'
const dummyTransaksi = [
{ id: 1, tanggal: '06/08/2025', kode: 'xx-xxx-xxx', pendapatan: 21200000 },
{ id: 2, tanggal: '06/08/2025', kode: 'xx-xxx-xxx', pendapatan: 18000000 },
{ id: 3, tanggal: '06/08/2025', kode: 'xx-xxx-xxx', pendapatan: 18000000 },
]
const lihatDetail = (trx) => {
alert(`Detail transaksi: ${trx.kode}`)
}
</script>

6
resources/js/router/index.js
View File

@ -3,6 +3,7 @@ import Home from '../pages/Home.vue'
import Produk from '../pages/Produk.vue'
import Brankas from '../pages/Brankas.vue'
import Tray from '../pages/Tray.vue'
import Kasir from '../pages/Kasir.vue'
import InputProduk from '../pages/InputProduk.vue'
@ -32,6 +33,11 @@ const routes = [
name: 'Nampan',
component: Tray
},
{
path: '/kasir',
name: 'Kasir',
component: Kasir
},
]