Status & tahap dokumen

import { Button, StagePath, StateLabel, formatMoney, formatNumber, type StateLabelTone } from '@divistant/circca-react';
import { DotsThree } from '@phosphor-icons/react';

// Pola status dokumen — Figma BizOps for IT Services › 07 Template › Detail PO-2026-0142.
// Status = teks + tone yang sama di daftar dan di header. Tahap proses = StagePath bertanggal.

const DAFTAR: { no: string; customer: string; nilai: number; status: string; tone: StateLabelTone }[] = [
  { no: 'PO-2026-0142', customer: 'PT Pelanggan Contoh A', nilai: 150_000_000, status: 'Menunggu BAST/DO', tone: 'warning' },
  { no: 'PO-2026-0144', customer: 'PT Samudra Farma', nilai: 128_000_000, status: 'Menunggu BAST/DO', tone: 'warning' },
  { no: 'PO-2026-0146', customer: 'PT Mitra Energi Persada', nilai: 45_000_000, status: 'Dikembalikan', tone: 'warning' },
  { no: 'PO-2026-0139', customer: 'PT Cakra Media Digital', nilai: 38_000_000, status: 'Siap ditagih', tone: 'highlight' },
  { no: 'PO-2026-0131', customer: 'PT Andalan Finance', nilai: 210_000_000, status: 'Selesai', tone: 'success' },
];

export default function Example() {
  return (
    <div className="grid gap-8">
      {/* Header detail: nomor + status di satu baris, meta, aksi di kanan, lalu tahap */}
      <section className="grid gap-5">
        <header className="flex flex-wrap items-start gap-x-6 gap-y-3">
          <div className="grid min-w-0 flex-1 gap-1">
            <div className="flex flex-wrap items-center gap-2">
              <h3 className="type-heading-large text-default">PO-2026-0142</h3>
              <StateLabel tone="warning">Menunggu BAST/DO</StateLabel>
            </div>
            <p className="type-callout-default text-muted">PT Pelanggan Contoh A · Lisensi + jasa · {formatMoney(150_000_000)} · Pemilik Anisa Nugraha</p>
          </div>
          <div className="flex items-center gap-2">
            <Button>Cetak</Button>
            <Button aria-label="Aksi lain" leadingVisual={DotsThree} className="px-1.5" />
            <Button variant="primary">Terbitkan BAST</Button>
          </div>
        </header>
        <StagePath
          aria-label="Tahap PO-2026-0142"
          current="bast"
          actionNeeded
          stages={[
            { key: 'diajukan', label: 'Diajukan', meta: '12 Sep 2026 · Budi Santoso' },
            { key: 'terbit', label: 'PO terbit', meta: '13 Sep 2026 · Rina Kartika' },
            { key: 'invoice', label: 'Invoice distributor', meta: '20 Sep 2026 · INV-DST-8812' },
            { key: 'bast', label: 'BAST/DO', meta: 'Menunggu Anda · hari ini' },
            { key: 'tagih', label: 'Ditagih', meta: `Termin 2 · ${formatMoney(60_000_000)}` },
          ]}
        />
      </section>

      {/* Daftar: label status yang sama, ukuran Small */}
      <section className="overflow-x-auto rounded-2xl border-[0.5px] border-default bg-default">
        <table className="w-full border-collapse text-left">
          <thead>
            <tr className="type-footnote-medium text-muted">
              <th className="px-4 py-2 font-[inherit]">No. PO</th>
              <th className="px-4 py-2 font-[inherit]">Customer</th>
              <th className="px-4 py-2 text-right font-[inherit]">Nilai (Rp)</th>
              <th className="px-4 py-2 font-[inherit]">Status</th>
            </tr>
          </thead>
          <tbody className="type-body-default">
            {DAFTAR.map(po => (
              <tr key={po.no} className="border-t-[0.5px] border-muted">
                <td className="px-4 py-2.5 whitespace-nowrap text-accent-fg">{po.no}</td>
                <td className="px-4 py-2.5 text-default">{po.customer}</td>
                <td className="px-4 py-2.5 text-right whitespace-nowrap tabular-nums text-default">{formatNumber(po.nilai)}</td>
                <td className="px-4 py-2.5 whitespace-nowrap">
                  <StateLabel tone={po.tone} size="sm">
                    {po.status}
                  </StateLabel>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </section>
    </div>
  );
}