41 lines
1.1 KiB
Vue
41 lines
1.1 KiB
Vue
<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="transaksi" @detail="lihatDetail" />
|
|
</div>
|
|
</div>
|
|
</mainLayout>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from "vue"
|
|
import axios from "axios"
|
|
|
|
import mainLayout from '../layouts/mainLayout.vue'
|
|
import KasirForm from '../components/KasirForm.vue'
|
|
import KasirTransaksiList from '../components/KasirTransaksiList.vue'
|
|
|
|
const transaksi = ref([])
|
|
|
|
onMounted(async () => {
|
|
try {
|
|
const res = await axios.get("/api/transaksi") // GANTI URL SESUAI API
|
|
|
|
transaksi.value = res.data
|
|
} catch (err) {
|
|
console.error("Gagal fetch transaksi:", err)
|
|
}
|
|
})
|
|
|
|
const lihatDetail = (trx) => {
|
|
alert(`Detail transaksi: ${trx.kode}`)
|
|
}
|
|
</script>
|