import {
  BreadcrumbItem,
  Breadcrumbs,
  Button,
  IconButton,
  PageHeader,
  StateLabel,
  formatMoney,
} from '@divistant/circca-react';
import { DotsThree, Printer } from '@phosphor-icons/react';

// Detail dokumen (baca) — Figma BizOps for IT Services › Template · Detail · PO-2026-0142.
// Aksi: Secondary · Aksi lain · Primary paling kanan.
export default function Example() {
  return (
    <PageHeader
      breadcrumbs={
        <Breadcrumbs>
          <BreadcrumbItem href="#order">Order &amp; pengadaan</BreadcrumbItem>
          <BreadcrumbItem href="#po-customer">PO Customer</BreadcrumbItem>
        </Breadcrumbs>
      }
      title="PO-2026-0142"
      status={<StateLabel tone="warning">Menunggu BAST/DO</StateLabel>}
      description={`PT Pelanggan Contoh A · Lisensi + jasa · termin · ${formatMoney(150_000_000)} · Pemilik Anisa Nugraha`}
      actions={
        <>
          <Button leadingVisual={Printer}>Cetak</Button>
          <IconButton icon={DotsThree} label="Aksi lain" />
          <Button variant="primary">Terbitkan BAST</Button>
        </>
      }
    />
  );
}

import { BreadcrumbItem, Breadcrumbs, Button, PageHeader, StateLabel, formatMoney } from '@divistant/circca-react';

// Form (isi) — Figma BizOps for IT Services › Template · Form · PO-2026-0146 dikembalikan.
// Teks status simpan di depan aksi; Batal · Simpan draf · aksi utama paling kanan.
export default function Example() {
  return (
    <PageHeader
      breadcrumbs={
        <Breadcrumbs>
          <BreadcrumbItem href="#order">Order &amp; pengadaan</BreadcrumbItem>
          <BreadcrumbItem href="#po-customer">PO Customer</BreadcrumbItem>
        </Breadcrumbs>
      }
      title="PO-2026-0146"
      status={<StateLabel tone="warning">Dikembalikan</StateLabel>}
      description={`PT Mitra Energi Persada · ${formatMoney(45_000_000)} · Dikembalikan Finance, 2 Okt 2026`}
      actions={
        <>
          <span role="status" className="type-caption-default text-muted">
            Draf tersimpan otomatis · 10.42
          </span>
          <Button variant="ghost">Batal</Button>
          <Button>Simpan draf</Button>
          <Button variant="primary">Ajukan ulang ke Finance</Button>
        </>
      }
    />
  );
}

import { BreadcrumbItem, Breadcrumbs, Button, PageHeader } from '@divistant/circca-react';
import { DownloadSimple, Plus } from '@phosphor-icons/react';

// Halaman daftar: tanpa status; deskripsi berisi ringkasan isi daftar.
export default function Example() {
  return (
    <PageHeader
      breadcrumbs={
        <Breadcrumbs>
          <BreadcrumbItem href="#order">Order &amp; pengadaan</BreadcrumbItem>
        </Breadcrumbs>
      }
      title="PO Customer"
      description="128 PO aktif · 14 menunggu BAST/DO · 6 siap ditagih"
      actions={
        <>
          <Button leadingVisual={DownloadSimple}>Ekspor</Button>
          <Button variant="primary" leadingVisual={Plus}>
            Buat PO
          </Button>
        </>
      }
    />
  );
}