ActivityRings

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

// Tiga cakupan terhadap populasi yang sama (6 orang di PE) dalam satu gambar.
// Catatan merah hanya untuk sisa yang menahan proses; yang boleh kosong diberi catatan netral.
export default function Example() {
  return (
    <ChartCard
      className="w-full"
      title="Bekal slip draf"
      description="Persen orang di PE yang sudah punya sumber. SSA wajib; AS & OT boleh kosong."
      link={{ label: 'Payroll Entry', href: '#payroll-entry' }}
    >
      <ActivityRings
        aria-label="Bekal slip draf"
        rings={[
          { label: 'Punya SSA', value: 5, max: 6, tone: 'success', note: 'sisa 1 · menahan pengajuan', noteTone: 'danger' },
          { label: 'Punya Additional Salary', value: 3, max: 6, tone: 'accent', note: 'boleh 0' },
          { label: 'Punya Overtime', value: 3, max: 6, tone: 'cat-7', note: 'boleh 0' },
        ]}
      />
    </ChartCard>
  );
}

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

// Ukuran lebih kecil untuk kartu setengah lebar; tebal cincin ikut disesuaikan.
// Di layar sempit legenda turun ke bawah cincin.
export default function Example() {
  return (
    <ActivityRings
      className="w-full max-w-[548px]"
      aria-label="Bekal slip draf"
      size={120}
      thickness={14}
      rings={[
        { label: 'Punya SSA', value: 5, max: 6, tone: 'success', note: 'sisa 1 · menahan pengajuan', noteTone: 'danger' },
        { label: 'Punya Additional Salary', value: 3, max: 6, tone: 'accent' },
        { label: 'Punya Overtime', value: 3, max: 6, tone: 'cat-7' },
      ]}
    />
  );
}

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

// Belum ada orang di PE (populasi 0): semua cincin akan kosong, jadi kartu memakai keadaan kosong.
export default function Example() {
  return (
    <ChartCard
      className="w-full"
      title="Bekal slip draf"
      description="Persen orang di PE yang sudah punya sumber."
      link={{ label: 'Payroll Entry', href: '#payroll-entry' }}
      empty
      emptyTitle="Belum ada orang di PE"
      emptyDescription="Tarik karyawan ke Payroll Entry dulu; bekal SSA, AS, dan OT dihitung dari daftar itu."
    />
  );
}