<template>
  <section class="space-y-6 p-4 md:p-8">
    <ModuleHeader eyebrow="Leave Management" title="Balances, requests, approvals" subtitle="Casual, sick, earn, maternity, unpaid leave with carry forward and encashment support." action="New Leave Request" />
    <div class="grid gap-4 md:grid-cols-4">
      <MetricCard label="Pending" :value="summary.pending" helper="Awaiting approval" tone="warn" />
      <MetricCard label="Approved Today" :value="summary.approved_today" helper="HR accepted" tone="ok" />
      <MetricCard label="Rejected Today" :value="summary.rejected_today" helper="Policy mismatch" tone="risk" />
      <MetricCard label="Encashment Due" :value="summary.encashment_due" helper="Earn leave cases" tone="live" />
    </div>
    <DataPanel title="Leave Requests" :items="requests" :badge="types.join(', ')" />
  </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 requests = ref([]);
const types = ref([]);

onMounted(async () => {
  const data = await getJson('/leaves');
  summary.value = data.summary;
  requests.value = data.requests;
  types.value = data.types;
});
</script>
