Compare commits
No commits in common. "4dd3c5188fbbe3a32d7a4f935c432446d29f2abc" and "0bb5b23ead63d0d97d3078e525df7096283d606c" have entirely different histories.
4dd3c5188f
...
0bb5b23ead
@ -1,83 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,33 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,31 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -3,7 +3,6 @@ import Home from '../pages/Home.vue'
|
|||||||
import Produk from '../pages/Produk.vue'
|
import Produk from '../pages/Produk.vue'
|
||||||
import Brankas from '../pages/Brankas.vue'
|
import Brankas from '../pages/Brankas.vue'
|
||||||
import Tray from '../pages/Tray.vue'
|
import Tray from '../pages/Tray.vue'
|
||||||
import Kasir from '../pages/Kasir.vue'
|
|
||||||
import InputProduk from '../pages/InputProduk.vue'
|
import InputProduk from '../pages/InputProduk.vue'
|
||||||
|
|
||||||
|
|
||||||
@ -33,11 +32,6 @@ const routes = [
|
|||||||
name: 'Nampan',
|
name: 'Nampan',
|
||||||
component: Tray
|
component: Tray
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: '/kasir',
|
|
||||||
name: 'Kasir',
|
|
||||||
component: Kasir
|
|
||||||
},
|
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user