DueDate

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

// Status dihitung dari tanggal terhadap "hari ini" (8 Okt 2026). Ambang "dekat" bawaan 3 hari.
const today = new Date(2026, 9, 8);

const rows = [
  { label: 'Normal · masih jauh', date: new Date(2026, 9, 25) },
  { label: 'Soon · 3 hari lagi atau kurang', date: new Date(2026, 9, 10) },
  { label: 'Overdue · sudah lewat', date: new Date(2026, 9, 6) },
  { label: 'Done · sudah selesai', date: new Date(2026, 9, 3), done: true },
];

export default function Example() {
  return (
    <dl className="grid max-w-md gap-3">
      {rows.map(r => (
        <div key={r.label} className="flex items-center justify-between gap-4">
          <dt className="type-callout-default text-muted">{r.label}</dt>
          <dd>
            <DueDate date={r.date} done={r.done} today={today} />
          </dd>
        </div>
      ))}
    </dl>
  );
}

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

// Kolom "Jatuh tempo" di tabel termin PO-2026-0142. Termin lunas memakai `done`, sisanya dihitung otomatis.
const today = new Date(2026, 9, 8);

const termin = [
  { nama: 'Termin 1 · 60% saat PO terbit', nilai: 90_000_000, jatuhTempo: '2026-09-25', lunas: true },
  { nama: 'Termin 2 · 40% setelah BAST', nilai: 60_000_000, jatuhTempo: '2026-10-10', lunas: false },
  { nama: 'Perpanjangan lisensi 2027', nilai: 12_500_000, jatuhTempo: '2026-10-05', lunas: false },
];

export default function Example() {
  return (
    <table className="w-full max-w-2xl type-callout-default">
      <thead>
        <tr className="border-b-[0.5px] border-default text-left type-caption-default text-muted">
          <th className="py-2 pr-3 font-normal">Termin</th>
          <th className="py-2 pr-3 text-right font-normal">Nilai</th>
          <th className="py-2 pr-3 font-normal">Jatuh tempo</th>
          <th className="py-2 font-normal">Status</th>
        </tr>
      </thead>
      <tbody>
        {termin.map(t => (
          <tr key={t.nama} className="border-b-[0.5px] border-muted last:border-b-0">
            <td className="py-2.5 pr-3 text-default">{t.nama}</td>
            <td className="py-2.5 pr-3 text-right tabular-nums text-default">{formatMoney(t.nilai)}</td>
            <td className="py-2.5 pr-3">
              <DueDate date={t.jatuhTempo} done={t.lunas} today={today} />
            </td>
            <td className="py-2.5">
              <StateLabel size="sm" tone={t.lunas ? 'success' : 'warning'}>
                {t.lunas ? 'Lunas' : 'Belum ditagih'}
              </StateLabel>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

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

// `relative` mengatur teks relatif; `soonDays` mengatur ambang "dekat"; `state` memaksa status.
const today = new Date(2026, 9, 8);

export default function Example() {
  return (
    <div className="grid max-w-md gap-3 type-callout-default text-muted">
      <div className="flex items-center justify-between gap-4">
        <span>relative=&quot;auto&quot; (bawaan)</span>
        <DueDate date="2026-10-20" today={today} />
      </div>
      <div className="flex items-center justify-between gap-4">
        <span>relative · selalu tampil</span>
        <DueDate date="2026-10-20" today={today} relative />
      </div>
      <div className="flex items-center justify-between gap-4">
        <span>soonDays=14 · BAST perlu disiapkan lebih awal</span>
        <DueDate date="2026-10-20" today={today} soonDays={14} />
      </div>
      <div className="flex items-center justify-between gap-4">
        <span>Hari ini</span>
        <DueDate date="2026-10-08" today={today} />
      </div>
      <div className="flex items-center justify-between gap-4">
        <span>state=&quot;overdue&quot; · dipaksa dari server</span>
        <DueDate date="2026-10-01" state="overdue" today={today} />
      </div>
    </div>
  );
}