<template>
  <section class="space-y-6 p-4 md:p-8">
    <ModuleHeader eyebrow="Disciplinary Management" title="Warnings, penalties, suspensions" subtitle="Employee disciplinary history with notices, penalty records, and suspension tracking." action="Issue Notice" />
    <div class="grid gap-4 md:grid-cols-3">
      <MetricCard label="Warnings" :value="summary.warnings" helper="Notice records" tone="warn" />
      <MetricCard label="Penalties" :value="summary.penalties" helper="Payroll deduction candidates" tone="risk" />
      <MetricCard label="Suspensions" :value="summary.suspensions" helper="Active cases" tone="risk" />
    </div>
    <DataPanel title="Disciplinary History" :items="records" />
  </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 records = ref([]);

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