ObjectSummary

import { DescriptionList, IconButton, ObjectSummary, StateLabel, formatMoney } from '@divistant/circca-react';
import { ArrowSquareOut, FileText } from '@phosphor-icons/react';

// Kepala panel inspector: ikon jenis dokumen, nomor PO, customer · nilai, status — lalu detail di bawahnya.
export default function Example() {
  return (
    <aside aria-label="Inspector PO" className="grid max-w-[340px] gap-4 rounded-xl border-[0.5px] border-muted bg-subtle p-4">
      <ObjectSummary
        icon={FileText}
        name="PO-2026-0142"
        meta={['PT Mitra Energi Persada', formatMoney(186_000_000)]}
        status={<StateLabel tone="success" size="sm">Disetujui</StateLabel>}
        actions={<IconButton icon={ArrowSquareOut} label="Buka PO-2026-0142" variant="ghost" size="sm" />}
      />
      <DescriptionList
        items={[
          { label: 'No. PO customer', value: 'PO/MEP/X/2026/0311' },
          { label: 'Cara penagihan', value: 'Termin 60 / 40' },
          { label: 'Pemilik', value: 'Rina Kartika' },
        ]}
      />
    </aside>
  );
}

import { Avatar, ObjectSummary, StateLabel, formatMoney } from '@divistant/circca-react';
import { Briefcase, Receipt } from '@phosphor-icons/react';

// Tone kotak ikon mengikuti jenis objek; customer memakai Avatar persegi lewat `media`.
// Di dalam kartu yang sudah berjudul, pakai headingLevel={false} agar nama tidak menjadi heading.
export default function Example() {
  return (
    <div className="grid max-w-[340px] gap-5">
      <ObjectSummary
        icon={Receipt}
        tone="warning"
        name="INV-2026-0192"
        meta={['Termin 2 dari 2', formatMoney(74_400_000)]}
        status={<StateLabel tone="danger" size="sm">Terlambat 4 hari</StateLabel>}
        headingLevel={3}
      />
      <ObjectSummary
        media={<Avatar size={40} shape="square" name="PT Mitra Energi Persada" decorative />}
        name="PT Mitra Energi Persada"
        meta="Customer sejak 2024 · Jakarta Selatan"
        headingLevel={3}
      />
      <ObjectSummary
        icon={Briefcase}
        tone="info"
        name="Implementasi SIEM — Mitra Energi"
        meta={['Proyek', 'PO-2026-0142']}
        status={<StateLabel tone="info" size="sm">Berjalan</StateLabel>}
        headingLevel={false}
      />
    </div>
  );
}