<template>
  <section class="space-y-6 p-4 md:p-8">
    <ModuleHeader eyebrow="Accounts & Finance" title="Income, expense, payroll and ledgers" subtitle="Finance overview covering payroll expense, employee ledger, loan ledger, and transaction reports." action="New Transaction" />
    <div class="grid gap-4 md:grid-cols-4">
      <MetricCard label="Income" :value="money(summary.income)" helper="Current period" tone="ok" />
      <MetricCard label="Expense" :value="money(summary.expense)" helper="Operational cost" tone="warn" />
      <MetricCard label="Payroll Expense" :value="money(summary.payroll_expense)" helper="Salary liability" tone="live" />
      <MetricCard label="Loan Balance" :value="money(summary.loan_balance)" helper="Employee ledger" tone="risk" />
    </div>
    <DataPanel title="Transactions" :items="transactions" />
  </section>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import DataPanel from '../components/DataPanel.vue';
import MetricCard from '../components/MetricCard.vue';
import ModuleHeader from '../components/ModuleHeader.vue';
import { getJson } from '../services/api.js';

const summary = ref({});
const transactions = ref([]);
const money = (value) => `BDT ${Number(value || 0).toLocaleString()}`;

onMounted(async () => {
  const data = await getJson('/finance');
  summary.value = data.summary;
  transactions.value = data.transactions.map((row) => ({ ...row, amount: money(row.amount) }));
});
</script>
