<template>
  <div class="space-y-6">
    <h2 class="text-3xl font-bold">Super Admin Portal</h2>
    <div class="grid gap-4 md:grid-cols-3">
      <MetricCard label="Online Clients" value="86" tone="emerald" />
      <MetricCard label="Online Devices" value="312" tone="cyan" />
      <MetricCard label="Due Renewals" value="14" tone="amber" />
    </div>
    <div class="rounded-3xl border border-white/10 bg-white/[0.04] p-6">
      <h3 class="mb-4 text-xl font-semibold">Package and Module Control</h3>
      <div class="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
        <span v-for="module in modules" :key="module" class="rounded-2xl bg-slate-900 p-4 text-sm">{{ module }}</span>
      </div>
    </div>
  </div>
</template>

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

const modules = ['Payroll', 'Attendance', 'Leave', 'Loan', 'Finance', 'GPS Attendance', 'Face Recognition', 'Multi Branch']
</script>
