StatCard

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

// Deretan StatCard di Beranda Finance. Angka uang di dashboard memakai format ringkas (compact).
// Grid auto-fill dengan lebar minimum agar kartu tidak terjepit di layar sempit.
export default function Example() {
  return (
    <div className="grid w-full grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-3">
      <StatCard
        label="Siap ditagih"
        value={formatMoney(84_000_000, { compact: true })}
        meta="1 termin · BAST lengkap"
        needsAttention
      />
      <StatCard label="Piutang" value={formatMoney(420_000_000, { compact: true })} meta="Rp 38 jt lewat jatuh tempo" />
      <StatCard
        label="Belum dicocokkan"
        value={formatMoney(83_500_000, { compact: true })}
        meta="2 mutasi bank · 3 Okt"
        needsAttention
      />
      <StatCard label="Hutang ≤ 7 hari" value={formatMoney(133_200_000, { compact: true })} meta="1 invoice distributor · 9 Okt" />
    </div>
  );
}

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

// Arah (ikon) dipisah dari makna (warna): pendapatan naik = baik, piutang naik = buruk,
// lama penagihan turun = baik. Pembaca layar mendengar kalimat lengkap,
// mis. "naik 12% dibanding bulan lalu, buruk".
export default function Example() {
  return (
    <div className="grid w-full grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-3">
      <StatCard
        label="Pendapatan Oktober"
        value={formatMoney(1_060_000_000, { compact: true })}
        trend={{ direction: 'up', sentiment: 'positive', value: '18%' }}
        comparison="vs bulan lalu"
      />
      <StatCard
        label="Piutang"
        value={formatMoney(420_000_000, { compact: true })}
        meta="Rp 38 jt lewat jatuh tempo"
        trend={{ direction: 'up', sentiment: 'negative', value: '12%' }}
        comparison="vs bulan lalu"
      />
      <StatCard
        label="Rata-rata lama penagihan"
        value="32 hari"
        trend={{ direction: 'down', sentiment: 'positive', value: '4 hari' }}
        comparison="vs Q2"
      />
      <StatCard
        label="PO berjalan"
        value="23"
        trend={{ direction: 'flat', sentiment: 'neutral', value: '0' }}
        comparison="vs minggu lalu"
      />
    </div>
  );
}

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

// Kepala daftar PO Customer: titik warning menandai angka yang menunggu tindakan pengguna.
// Meta menyebut dokumen yang dimaksud agar pengguna tahu harus membuka apa.
export default function Example() {
  return (
    <div className="grid w-full grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-3">
      <StatCard label="Perlu tindakan Anda" value="2" meta="verifikasi 0147 · invoice 0143" needsAttention />
      <StatCard label="Menunggu Direksi" value="1" meta="PO-2026-0148 · margin 3,8%" />
      <StatCard label="Menunggu BAST/DO" value="5" meta="dari Sales & PM" />
    </div>
  );
}