ProportionBar

import { Card, ProportionBar, formatMoney } from '@divistant/circca-react';

// Monitoring payroll › Beban per komponen: total besar + satu batang bertumpuk + legenda nominal & persen.
// Warna mengikuti urutan Figma (cat-1, cat-5, cat-3, cat-2, cat-7, neutral).
const data = [
  { label: 'Gaji pokok', value: 14_124_000, tone: 'cat-1' },
  { label: 'Tunjangan tetap (UT/UK)', value: 3_800_000, tone: 'cat-5' },
  { label: 'Variabel (Additional Salary)', value: 3_401_000, tone: 'cat-3' },
  { label: 'Lembur', value: 4_200_000, tone: 'cat-2' },
  { label: 'Tunjangan PPh 21', value: 730_000, tone: 'cat-7' },
  { label: 'Iuran BPJS perusahaan', value: 881_338, tone: 'neutral' },
] as const;

export default function Example() {
  const total = data.reduce((s, d) => s + d.value, 0);
  return (
    <Card
      className="w-full"
      title="Beban per komponen · 5 slip draf"
      subtitle="1 orang belum punya slip (Raka, tanpa SSA), jadi belum masuk beban."
      action={
        <a href="#salary-slip" className="type-footnote-default text-accent-fg hover:underline">
          Salary Slip ›
        </a>
      }
    >
      <ProportionBar
        label="Beban per komponen"
        total={formatMoney(total)}
        totalCaption="total beban perusahaan periode ini"
        formatValue={v => formatMoney(v)}
        tableColumns={['Komponen', 'Nominal', 'Persen']}
        data={[...data]}
      />
    </Card>
  );
}

import { Card, ProportionBar } from '@divistant/circca-react';

// Monitoring payroll › Gender: split bar dua segmen tebal, label "jumlah · kelompok" di dalam,
// persen di bawah ujung masing-masing.
export default function Example() {
  return (
    <Card
      className="w-full max-w-[548px]"
      title="Gender"
      subtitle="Orang aktif."
      action={
        <a href="#karyawan" className="type-footnote-default text-accent-fg hover:underline">
          Daftar Karyawan ›
        </a>
      }
    >
      <ProportionBar
        variant="split"
        label="Gender orang aktif"
        tableColumns={['Gender', 'Orang', 'Persen']}
        data={[
          { label: 'Laki-laki', value: 2, tone: 'cat-1' },
          { label: 'Perempuan', value: 3, tone: 'cat-7' },
        ]}
      />
    </Card>
  );
}

import { Card, ProportionBar, formatMoney } from '@divistant/circca-react';

// Data semua nol = empty state: batang abu + pesan, tanpa legenda 0%.
// Segmen kecil (Tunjangan PPh 21 ±1%) tetap terlihat berkat lebar minimum 4 px.
export default function Example() {
  return (
    <div className="grid w-full gap-4 md:grid-cols-2">
      <Card title="Beban per komponen" subtitle="Belum ada slip draf.">
        <ProportionBar
          label="Beban per komponen"
          total={formatMoney(0)}
          totalCaption="total beban perusahaan periode ini"
          emptyMessage="Beban muncul setelah slip draf dibuat."
          data={[
            { label: 'Gaji pokok', value: 0 },
            { label: 'Lembur', value: 0 },
          ]}
        />
      </Card>
      <Card title="Segmen kecil" subtitle="Satu komponen jauh lebih kecil.">
        <ProportionBar
          label="Beban per komponen"
          formatValue={v => formatMoney(v, { compact: true })}
          legendLayout="list"
          data={[
            { label: 'Gaji pokok', value: 64_000_000 },
            { label: 'Tunjangan PPh 21', value: 730_000, tone: 'cat-7' },
          ]}
        />
      </Card>
    </div>
  );
}