Komponen / Navigasi
StagePath
Perjalanan dokumen atau deal per tahap, lengkap dengan tanggal · pelaku. Berbeda dengan Steps (wizard form): StagePath adalah status proses bisnis yang berjalan berhari-hari.
Import
tsx
import { StagePath } from '@divistant/circca-react';Props
getStageStates(stages, current, { actionNeeded, outcome }) diekspor untuk menghitung state yang sama di luar komponen (mis. kartu Kanban).
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| stages | { key: string; label: ReactNode; meta?: ReactNode }[] | — | Daftar tahap berurutan. Sama dengan kolom Kanban pipeline agar konsisten. |
| current | string | — | Kunci tahap yang sedang berjalan (atau tempat proses berakhir bila outcome diisi). Tahap sebelumnya otomatis Selesai, sesudahnya Belum. |
| actionNeeded | boolean | false | Tahap berjalan menunggu tindakan pengguna yang login → penanda segitiga peringatan. Hanya bila sistem tahu siapa yang harus bertindak (workflow + role, atau Assignment). |
| outcome | 'won' | 'lost' | — | Akhir proses: tahap current menjadi Menang (hijau) atau Kalah (merah). |
| actions | ReactNode | — | Aksi di kanan, mis. tombol maju tahap dan "Tandai kalah". |
| aria-label | string | 'Tahap' | Nama daftar tahap untuk pembaca layar, mis. "Tahap PO-2026-0142". |
| className | string | — | Kelas tambahan (digabung aman dengan tailwind-merge). |
Sumber
Kode komponen ada di packages/react/src/components/stage-path. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.