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.

React · BetaFigma · siapFigma Sumber

Alur PO

Tahap BAST/DO menunggu pengguna yang login → actionNeeded memberi penanda segitiga peringatan (oranye). Meta tiap tahap menjawab kapan dan oleh siapa.

Diajukan, Selesai12 Sep 2026 · Budi Santoso
PO terbit, Selesai13 Sep 2026 · Rina Kartika
Invoice distributor, Selesai20 Sep 2026 · INV-DST-8812
BAST/DO, Menunggu tindakan AndaMenunggu Anda · hari ini
Ditagih, BelumTermin 2 · Rp 60.000.000

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

// PO-2026-0142: pengguna login adalah penanggung jawab BAST → actionNeeded (segitiga peringatan).
export default function Example() {
  return (
    <StagePath
      aria-label="Tahap PO-2026-0142"
      current="bast"
      actionNeeded
      stages={[
        { key: 'diajukan', label: 'Diajukan', meta: '12 Sep 2026 · Budi Santoso' },
        { key: 'po-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: 'ditagih', label: 'Ditagih', meta: 'Termin 2 · Rp 60.000.000' },
      ]}
    />
  );
}

Deal dengan aksi

Tahap berjalan menunggu customer (bukan pengguna): lingkaran aksen bernomor. Aksi di kanan; bila ruang sempit, aksi turun ke baris bawah.

Kualifikasi, Selesai2 Sep 2026 · Budi Santoso
Demo, Selesai9 Sep 2026 · Budi Santoso
Penawaran, Sedang berjalanQTN-0031 · menunggu customer
Negosiasi, BelumSetelah penawaran disetujui
PO customer, BelumTarget 31 Okt 2026

import { Button, StagePath } from '@divistant/circca-react';

// Deal Sales: tahap berjalan menunggu customer (bukan pengguna) → current (lingkaran aksen bernomor), dengan aksi di kanan.
export default function Example() {
  return (
    <StagePath
      aria-label="Tahap deal"
      current="penawaran"
      stages={[
        { key: 'kualifikasi', label: 'Kualifikasi', meta: '2 Sep 2026 · Budi Santoso' },
        { key: 'demo', label: 'Demo', meta: '9 Sep 2026 · Budi Santoso' },
        { key: 'penawaran', label: 'Penawaran', meta: 'QTN-0031 · menunggu customer' },
        { key: 'negosiasi', label: 'Negosiasi', meta: 'Setelah penawaran disetujui' },
        { key: 'po-customer', label: 'PO customer', meta: 'Target 31 Okt 2026' },
      ]}
      actions={
        <>
          <Button variant="secondary">Tandai kalah</Button>
          <Button variant="primary">Lanjut ke Negosiasi</Button>
        </>
      }
    />
  );
}

Menang & kalah

outcome menandai akhir proses di tahap current; tahap sesudahnya tetap "belum".

Kualifikasi, Selesai
Demo, Selesai
Penawaran, Selesai
Negosiasi, Selesai
Menang, Menang28 Sep 2026 · PO diterima

Kualifikasi, Selesai
Demo, Selesai
Kalah, KalahHarga di atas anggaran
Negosiasi, Belum
PO customer, Belum

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

const stages = [
  { key: 'kualifikasi', label: 'Kualifikasi' },
  { key: 'demo', label: 'Demo' },
  { key: 'penawaran', label: 'Penawaran' },
  { key: 'negosiasi', label: 'Negosiasi' },
  { key: 'po-customer', label: 'PO customer' },
];

export default function Example() {
  return (
    <div className="grid gap-8">
      <StagePath
        aria-label="Deal menang"
        current="po-customer"
        outcome="won"
        stages={stages.map(s => (s.key === 'po-customer' ? { ...s, label: 'Menang', meta: '28 Sep 2026 · PO diterima' } : s))}
      />
      <StagePath
        aria-label="Deal kalah"
        current="penawaran"
        outcome="lost"
        stages={stages.map(s => (s.key === 'penawaran' ? { ...s, label: 'Kalah', meta: 'Harga di atas anggaran' } : s))}
      />
    </div>
  );
}