43 lines
1.4 KiB
Vue
43 lines
1.4 KiB
Vue
<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 props.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 || 0).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>
|
|
import { ref, onMounted } from "vue"
|
|
|
|
const props = defineProps({
|
|
transaksi: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
})
|
|
|
|
defineEmits(['detail'])
|
|
|
|
onMounted(() => {
|
|
console.log(props.transaksi);
|
|
|
|
})
|
|
</script>
|