41 lines
1.3 KiB
Vue
41 lines
1.3 KiB
Vue
<template>
|
|
<div class="overflow-x-auto">
|
|
<h3 class="text-lg font-semibold mb-4 text-gray-800">Transaksi</h3>
|
|
<table class="w-full min-w-[500px] border border-B rounded-lg text-sm">
|
|
<thead class="bg-A text-D">
|
|
<tr>
|
|
<th class="border border-B p-2 text-left">Tanggal</th>
|
|
<th class="border border-B p-2 text-left">Kode Transaksi</th>
|
|
<th class="border border-B p-2 text-left">Pendapatan</th>
|
|
<th class="border border-B p-2 text-center">Detail Item</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="trx in props.transaksi" :key="trx.id" class="hover:bg-A">
|
|
<td class="border border-B p-2">{{ trx.tanggal }}</td>
|
|
<td class="border border-B p-2">{{ trx.kode }}</td>
|
|
<td class="border border-B p-2">Rp{{ (trx.pendapatan || 0).toLocaleString() }}</td>
|
|
<td class="border border-B p-2 text-center">
|
|
<button
|
|
@click="$emit('detail', trx)"
|
|
class="px-3 py-1 rounded-md bg-D text-A hover:bg-D/80 transition">
|
|
Detail
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
transaksi: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
})
|
|
|
|
defineEmits(['detail'])
|
|
</script>
|