ChartCard

import { ChartCard, DonutChart } from '@divistant/circca-react';

// Kartu Monitoring payroll: judul = pertanyaan kartu, keterangan = cara membaca angka,
// tautan kanan ke daftar sumber, footnote menjelaskan arti kategori.
export default function Example() {
  return (
    <ChartCard
      className="w-full max-w-[548px]"
      title="Status orang di PE"
      description="Satu orang = hasil cek paling berat."
      link={{ label: 'Payroll Entry', href: '#payroll-entry' }}
      footnote="Menahan = SSA atau rekening belum ada. Peringatan dicek tetapi tidak memblokir."
    >
      <DonutChart
        label="Status orang di PE"
        centerValue={3}
        centerLabel="belum bersih"
        data={[
          { label: 'Bersih', value: 3, tone: 'success' },
          { label: 'Peringatan', value: 1, tone: 'warning' },
          { label: 'Menahan', value: 2, tone: 'danger' },
        ]}
      />
    </ChartCard>
  );
}

import { ChartCard } from '@divistant/circca-react';

// Data semua-nol = keadaan kosong, bukan grafik datar. Satu kalimat untuk kartu kecil;
// kotak berjudul bila perlu menyebut apa saja yang nol. Saat memuat, Skeleton setinggi grafik.
export default function Example() {
  return (
    <div className="grid w-full grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-3">
      <ChartCard
        title="Pipeline keluar periode depan"
        description="Kontrak berakhir atau resign efektif bulan depan."
        link={{ label: 'Daftar Karyawan', href: '#karyawan' }}
        empty
        emptyTitle="Tidak ada nama di jendela berikutnya."
      />
      <ChartCard
        title="Tunjangan tidak tetap"
        description="Subset musiman: PKWT prepaid, rapel cuti, rapel/koreksi."
        link={{ label: 'Additional Salary', href: '#additional-salary' }}
        empty
        emptyTitle="Belum ada baris musiman"
        emptyDescription="PKWT prepaid · Rapel cuti · Rapel/koreksi — semuanya 0 periode ini."
        footnote="Wajar di luar bulan kontrak/cuti. Tambahkan lewat Additional Salary bila ada."
      />
      <ChartCard title="Status orang di PE" description="Satu orang = hasil cek paling berat." loading />
    </div>
  );
}

import { KpiCard } from '@divistant/circca-react';

// Deretan KPI Monitoring: angka "x dari y" dengan ring kecil cakupan di kanan.
// Ring hanya untuk angka yang punya populasi; angka tanpa populasi tampil tanpa ring (tanpa KPI dekoratif).
export default function Example() {
  return (
    <div className="grid w-full grid-cols-[repeat(auto-fill,minmax(220px,1fr))] gap-3">
      <KpiCard label="Slip draf" value={5} note="dari 6 orang di PE" progress={{ value: 5, max: 6 }} />
      <KpiCard label="Siap diajukan" value={3} note="dari 6 orang di PE" progress={{ value: 3, max: 6, tone: 'warning' }} />
      <KpiCard label="Orang aktif" value={6} note="periode Okt 2026" />
    </div>
  );
}