106 lines
4.0 KiB
Vue
106 lines
4.0 KiB
Vue
<template>
|
|
<mainLayout>
|
|
<div class="lg:p-2 pt-6">
|
|
<div
|
|
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-3 sm:gap-2 mx-auto min-h-[75vh]"
|
|
>
|
|
<!-- Left Section - Form Kasir -->
|
|
<div class="lg:col-span-3">
|
|
<div
|
|
class="bg-white rounded-xl shadow-lg border border-B overflow-hidden h-auto lg:h-full"
|
|
>
|
|
<div class="p-2 sm:p-3 md:p-4 h-auto lg:h-full">
|
|
<KasirForm />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Section - Transaction List -->
|
|
<div class="lg:col-span-2">
|
|
<div
|
|
class="bg-white rounded-xl shadow-lg border border-B overflow-hidden lg:h-fit sticky top-4 max-h-[70vh] overflow-y-auto"
|
|
>
|
|
<div class="p-3 sm:p-4 md:p-6">
|
|
<!-- Loading -->
|
|
<div
|
|
v-if="loading"
|
|
class="flex items-center justify-center py-8"
|
|
>
|
|
<div
|
|
class="animate-spin rounded-full h-8 w-8 border-b-2 border-C"
|
|
></div>
|
|
<span class="ml-3 text-D/70"
|
|
>Memuat transaksi...</span
|
|
>
|
|
</div>
|
|
|
|
<!-- Empty -->
|
|
<div
|
|
v-else-if="!transaksi.length"
|
|
class="text-center py-8"
|
|
>
|
|
<svg
|
|
class="w-16 h-16 mx-auto text-B mb-4"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="1"
|
|
d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
|
|
/>
|
|
</svg>
|
|
<p class="text-[var(--color-D)]/60 text-sm">
|
|
Belum ada transaksi
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Transaction List -->
|
|
<KasirTransaksiList
|
|
v-else
|
|
:transaksi="transaksi"
|
|
@detail="lihatDetail"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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([]);
|
|
const loading = ref(true);
|
|
|
|
onMounted(async () => {
|
|
try {
|
|
loading.value = true;
|
|
const res = await axios.get("/api/transaksi?limit=10", {
|
|
headers: {
|
|
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
|
},
|
|
});
|
|
|
|
transaksi.value = res.data;
|
|
} catch (err) {
|
|
console.error("Gagal fetch transaksi:", err);
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
});
|
|
|
|
const lihatDetail = (trx) => {
|
|
alert(`Detail transaksi: ${trx.kode}`);
|
|
};
|
|
</script>
|