Komponen / Grafik & jadwal

EventTimeline

Linimasa horizontal kejadian dalam satu rentang tanggal (perubahan basis remun di jendela cut-off), dengan ringkasan jumlah per jenis. Berbeda dengan Timeline (riwayat aktivitas vertikal).

React · BetaFigma · siapFigma Sumber

Perubahan basis remun

Ringkasan "1 Promosi · 0 Mutasi · 1 Rotasi · 0 Perubahan data" (nol abu), sumbu 11 Agu – 10 Sep, titik per kejadian berwarna per jenis dengan nama + "Rotasi · 11 Agu".

Perubahan basis remun

Dokumen efektif di jendela cut-off 11 Agu – 10 Sep 2026.

Riwayat Perubahan ›

1 Promosi
0 Mutasi
1 Rotasi
0 Perubahan data

Cek SSA dan cost center 2 orang ini sebelum mengajukan persetujuan.

import { Card, EventTimeline } from '@divistant/circca-react';

// Monitoring payroll › Perubahan basis remun: dokumen efektif di jendela cut-off 11 Agu – 10 Sep 2026.
// Ringkasan menghitung semua jenis (yang nol abu); titik diposisikan sebanding tanggal.
const types = [
  { value: 'promosi', label: 'Promosi', tone: 'accent' },
  { value: 'mutasi', label: 'Mutasi', tone: 'cat-2' },
  { value: 'rotasi', label: 'Rotasi', tone: 'cat-7' },
  { value: 'data', label: 'Perubahan data', tone: 'cat-3' },
] as const;

export default function Example() {
  return (
    <Card
      className="w-full max-w-[548px]"
      title="Perubahan basis remun"
      subtitle="Dokumen efektif di jendela cut-off 11 Agu – 10 Sep 2026."
      action={
        <a href="#riwayat" className="type-footnote-default text-accent-fg hover:underline">
          Riwayat Perubahan ›
        </a>
      }
      footer="Cek SSA dan cost center 2 orang ini sebelum mengajukan persetujuan."
    >
      <EventTimeline
        label="Perubahan basis remun, 11 Agustus – 10 September 2026"
        start="2026-08-11"
        end="2026-09-10"
        types={[...types]}
        events={[
          { id: 'hr-0091', date: '2026-08-11', label: 'Maya Kusuma', type: 'rotasi' },
          { id: 'hr-0104', date: '2026-09-02', label: 'Andi Wijaya', type: 'promosi' },
        ]}
      />
    </Card>
  );
}

Kejadian berdekatan & kosong

Label yang bertabrakan naik ke baris di atasnya dengan garis penunjuk. Tanpa kejadian = empty state; ringkasan tetap menulis 0.

Perubahan basis remun

Jendela cut-off 11 Sep – 10 Okt 2026.

1 Promosi
1 Mutasi
1 Rotasi
1 Perubahan data

Perubahan basis remun

Jendela cut-off 11 Okt – 10 Nov 2026.

0 Promosi
0 Mutasi
0 Rotasi
0 Perubahan data

Tidak ada promosi, mutasi, rotasi, atau perubahan data di jendela ini.

import { Card, EventTimeline } from '@divistant/circca-react';

// Kejadian berdekatan: label yang bertabrakan naik ke baris berikutnya dengan garis penunjuk ke titiknya.
// Kanan: tidak ada kejadian di jendela = empty state, ringkasan tetap menulis 0 per jenis.
const types = [
  { value: 'promosi', label: 'Promosi', tone: 'accent' },
  { value: 'mutasi', label: 'Mutasi', tone: 'cat-2' },
  { value: 'rotasi', label: 'Rotasi', tone: 'cat-7' },
  { value: 'data', label: 'Perubahan data', tone: 'cat-3' },
] as const;

export default function Example() {
  return (
    <div className="grid w-full gap-4">
      <Card title="Perubahan basis remun" subtitle="Jendela cut-off 11 Sep – 10 Okt 2026.">
        <EventTimeline
          label="Perubahan basis remun, 11 September – 10 Oktober 2026"
          start="2026-09-11"
          end="2026-10-10"
          types={[...types]}
          events={[
            { id: 'a', date: '2026-09-15', label: 'Sinta Rahayu', type: 'mutasi' },
            { id: 'b', date: '2026-09-16', label: 'Dewi Lestari', type: 'data' },
            { id: 'c', date: '2026-09-18', label: 'Budi Santoso', type: 'promosi' },
            { id: 'd', date: '2026-10-01', label: 'Raka Pratama', type: 'rotasi' },
          ]}
        />
      </Card>
      <Card className="max-w-[548px]" title="Perubahan basis remun" subtitle="Jendela cut-off 11 Okt – 10 Nov 2026.">
        <EventTimeline
          label="Perubahan basis remun, 11 Oktober – 10 November 2026"
          start="2026-10-11"
          end="2026-11-10"
          types={[...types]}
          events={[]}
          emptyMessage="Tidak ada promosi, mutasi, rotasi, atau perubahan data di jendela ini."
        />
      </Card>
    </div>
  );
}