Tampilan Data
Timeline (Riwayat Pelacakan)
Pelacak kronologis perjalanan berkas dan status permohonan layanan warga.
Timeline memberikan transparansi kepada warga mengenai di dinas atau meja mana berkas permohonan mereka sedang diverifikasi.
Pratinjau Komponen
-
Tanda Tangan Elektronik TerbitHari ini, 10:45 WIB • Kepala DinasDokumen perizinan telah ditandatangani secara digital dan siap diunduh oleh pemohon.
-
Verifikasi Teknis Lapangan16 September 2026, 14:00 WIB • Tim Teknis DPMPTSPKesesuaian lokasi usaha dinyatakan memenuhi syarat ketentuan tata ruang.
-
Pendaftaran Permohonan15 September 2026, 09:12 WIB • Pemohon OnlineBerkas persyaratan lengkap telah diunggah melalui portal resmi.
Penggunaan CSS Murni
<ul class="mjl-timeline">
<li class="mjl-timeline__item mjl-timeline__item--active">
<span class="mjl-timeline__marker"></span>
<div class="mjl-timeline__title">Berkas Disetujui</div>
<div class="mjl-timeline__time">17 September 2026</div>
<div class="mjl-timeline__desc">Menunggu pengambilan fisik.</div>
</li>
<li class="mjl-timeline__item">
<span class="mjl-timeline__marker"></span>
<div class="mjl-timeline__title">Pengajuan Masuk</div>
<div class="mjl-timeline__time">16 September 2026</div>
</li>
</ul>
Penggunaan di Berbagai Teknologi
Salin contoh sesuai teknologi proyek Anda. Semua versi memakai class dari @majalengka/css. Komponen siap pakai tersedia di @majalengka/vue; untuk React, Angular, Laravel, dan PHP, contoh di bawah sudah berupa pembungkus kecil yang bisa langsung disalin ke proyek.
<ol class="mjl-timeline">
<li class="mjl-timeline__item mjl-timeline__item--active" aria-current="step">
<span class="mjl-timeline__marker" aria-hidden="true"></span>
<div class="mjl-timeline__title">Verifikasi data</div>
<time class="mjl-timeline__time" datetime="2026-09-18T10:40">18 Sep 2026, 10.40</time>
</li>
<li class="mjl-timeline__item">
<span class="mjl-timeline__marker" aria-hidden="true"></span>
<div class="mjl-timeline__title">Berkas diterima</div>
<time class="mjl-timeline__time" datetime="2026-09-17T09:12">17 Sep 2026, 09.12</time>
<div class="mjl-timeline__desc">Loket Kecamatan Kadipaten</div>
</li>
</ol>
<script setup lang="ts">
import { MjlTimeline } from '@majalengka/vue';
const riwayat = [
{ title: 'Verifikasi data', time: '18 Sep 2026, 10.40', datetime: '2026-09-18T10:40', active: true },
{ title: 'Berkas diterima', time: '17 Sep 2026, 09.12', datetime: '2026-09-17T09:12', desc: 'Loket Kecamatan Kadipaten' },
];
</script>
<template>
<MjlTimeline :items="riwayat" />
</template>
type Item = { title: string; time: string; datetime: string; desc?: string; active?: boolean };
export function MjlTimeline({ items }: { items: Item[] }) {
return (
<ol className="mjl-timeline">
{items.map((item) => (
<li key={item.datetime} className={`mjl-timeline__item ${item.active ? 'mjl-timeline__item--active' : ''}`}
aria-current={item.active ? 'step' : undefined}>
<span className="mjl-timeline__marker" aria-hidden="true" />
<div className="mjl-timeline__title">{item.title}</div>
<time className="mjl-timeline__time" dateTime={item.datetime}>{item.time}</time>
{item.desc && <div className="mjl-timeline__desc">{item.desc}</div>}
</li>
))}
</ol>
);
}
import { Component, input } from '@angular/core';
import { DatePipe } from '@angular/common';
@Component({
selector: 'mjl-timeline',
standalone: true,
imports: [DatePipe],
template: `
<ol class="mjl-timeline">
@for (item of items(); track item.at) {
<li class="mjl-timeline__item" [class.mjl-timeline__item--active]="item.active" [attr.aria-current]="item.active ? 'step' : null">
<span class="mjl-timeline__marker" aria-hidden="true"></span>
<div class="mjl-timeline__title">{{ item.title }}</div>
<time class="mjl-timeline__time" [attr.datetime]="item.at">{{ item.at | date: 'd MMM y, HH.mm' }}</time>
</li>
}
</ol>
`,
})
export class MjlTimeline {
items = input.required<{ title: string; at: string; active?: boolean }[]>();
}
<ol class="mjl-timeline">
@foreach ($permohonan->riwayat()->latest()->get() as $log)
<li @class(['mjl-timeline__item', 'mjl-timeline__item--active' => $loop->first]) @if ($loop->first) aria-current="step" @endif>
<span class="mjl-timeline__marker" aria-hidden="true"></span>
<div class="mjl-timeline__title">{{ $log->judul }}</div>
<time class="mjl-timeline__time" datetime="{{ $log->created_at->toIso8601String() }}">
{{ $log->created_at->translatedFormat('d M Y, H.i') }}
</time>
@if ($log->keterangan)<div class="mjl-timeline__desc">{{ $log->keterangan }}</div>@endif
</li>
@endforeach
</ol>
<ol class="mjl-timeline">
<?php foreach ($riwayat as $i => $log): ?>
<li class="mjl-timeline__item<?= $i === 0 ? ' mjl-timeline__item--active' : '' ?>" <?= $i === 0 ? 'aria-current="step"' : '' ?>>
<span class="mjl-timeline__marker" aria-hidden="true"></span>
<div class="mjl-timeline__title"><?= htmlspecialchars($log['judul']) ?></div>
<time class="mjl-timeline__time" datetime="<?= date('c', strtotime($log['waktu'])) ?>"><?= date('d M Y, H.i', strtotime($log['waktu'])) ?></time>
</li>
<?php endforeach; ?>
</ol>
Tahap dengan active: true ditandai aria-current="step".