<template>
  <section class="rounded-3xl border border-white/10 bg-white/[0.04] p-6">
    <h2 class="text-3xl font-bold">Payroll Engine</h2>
    <p class="mt-2 text-slate-400">Salary, allowances, overtime, tax, PF, loans, advances, approvals, payslips, and bank sheets.</p>
    <div class="mt-6 grid gap-4 md:grid-cols-3">
      <MetricCard label="Gross Payroll" value="$286k" tone="cyan" />
      <MetricCard label="Deductions" value="$18.4k" tone="rose" />
      <MetricCard label="Net Payable" value="$267.6k" tone="emerald" />
    </div>
  </section>
</template>

<script setup>
import MetricCard from '../components/MetricCard.vue'
</script>
