Komponen / Tampilan data
Timeline
Riwayat aktivitas dokumen — siapa, melakukan apa, kapan — dengan penanda jenis: persetujuan, penolakan, menunggu, komentar.
Aktivitas dokumen
Kartu "Aktivitas" di detail PO: terbaru di atas, aksi otomatis memakai aktor "Sistem". Garis penghubung otomatis hilang di item terakhir.
Aktivitas
Disetujui: Dimas Prasetyo menyelesaikan instalasi
Aktivitas: Sistem mencatat pembayaran Termin 1
Aktivitas: Rina Kartika mencatat invoice distributor
Disetujui: Rina Kartika menerbitkan PO ke distributor
import { Card, Timeline } from '@divistant/circca-react';
// Kartu "Aktivitas" di detail PO-2026-0142: terbaru di atas, aksi sistem memakai aktor "Sistem".
export default function Example() {
return (
<Card className="max-w-[360px]" title="Aktivitas">
<Timeline>
<Timeline.Item type="approved" actor="Dimas Prasetyo" action="menyelesaikan instalasi" time={new Date(2026, 9, 3, 16, 40)} />
<Timeline.Item actor="Sistem" action="mencatat pembayaran Termin 1" time={new Date(2026, 8, 25, 16, 2)} />
<Timeline.Item actor="Rina Kartika" action="mencatat invoice distributor" time={new Date(2026, 8, 20, 9, 40)} />
<Timeline.Item type="approved" actor="Rina Kartika" action="menerbitkan PO ke distributor" time={new Date(2026, 8, 13, 14, 20)} />
</Timeline>
</Card>
);
}Riwayat persetujuan
Approved (hijau, centang), Rejected (merah, silang), Pending (oranye, putar), Comment (gelembung). Alasan penolakan dan komentar ditaruh sebagai isi item.
Menunggu: Rina Kartika belum meninjau pengajuan ulang
Menunggu sejak 3 Okt 2026
Komentar: Anisa Nugraha menambahkan komentar
PO yang sudah ditandatangani customer sudah saya unggah ulang.Ditolak: Rina Kartika mengembalikan PO ke Sales
PO customer yang dilampirkan belum bertanda tangan. Mohon unggah versi yang sudah ditandatangani customer.Disetujui: Budi Santoso menyetujui harga khusus
Aktivitas: Anisa Nugraha mengajukan PO ke Finance
import { Timeline } from '@divistant/circca-react';
// Riwayat persetujuan PO-2026-0146: semua jenis penanda, alasan penolakan & komentar di kotak abu.
export default function Example() {
return (
<Timeline className="max-w-md">
<Timeline.Item type="pending" actor="Rina Kartika" action="belum meninjau pengajuan ulang" time="Menunggu sejak 3 Okt 2026" />
<Timeline.Item type="comment" actor="Anisa Nugraha" action="menambahkan komentar" time={new Date(2026, 9, 3, 10, 42)}>
PO yang sudah ditandatangani customer sudah saya unggah ulang.
</Timeline.Item>
<Timeline.Item type="rejected" actor="Rina Kartika" action="mengembalikan PO ke Sales" time={new Date(2026, 9, 2, 15, 5)}>
PO customer yang dilampirkan belum bertanda tangan. Mohon unggah versi yang sudah ditandatangani customer.
</Timeline.Item>
<Timeline.Item type="approved" actor="Budi Santoso" action="menyetujui harga khusus" time={new Date(2026, 9, 1, 11, 18)} />
<Timeline.Item actor="Anisa Nugraha" action="mengajukan PO ke Finance" time={new Date(2026, 9, 1, 9, 30)} />
</Timeline>
);
}