UI Docs
Dashboard Prototype

Statistik layanan yang lengkap untuk menguji navbar, sidebar, content, dan footer dalam satu alur.

Komposisi ini mengikuti arah dari UI kit dasar: nuansa civic modern, panel terang, data padat yang tetap mudah dipindai, dan ruang yang cukup untuk animasi ringan tanpa terasa ramai.

Lihat Statistik Cek Operasional

Pengajuan Masuk

1,284

+12.4% minggu ini

SLA Tercapai

94.8%

Target aman

Antrian Pending

87

Perlu tindak lanjut

Master Map

Peta UI Kit Master

Foundations States Forms Tables Feedback Templates

Foundations

Color, radius, spacing, typography

Primary

Gov Green

#4CAF50

Surface

Panels & page

White / green-tinted neutrals

Spacing

Base layout memakai ritme `16 / 24 / 32`. Section besar menggunakan padding lega, tapi row data tetap padat.

Radius

Typography

Headline, body, label, caption

Display

Satu Mimpi Civic Admin

Section Title

Dashboard Statistik Pelayanan

Body

Body copy dipakai untuk penjelasan panel, helper text form, dan konten informatif. Harus nyaman dibaca dalam panel data maupun halaman panjang.

Caption & label

System label Field label Helper / meta text
@php $highlights = [ ['title' => 'KTP Elektronik', 'value' => '246', 'trend' => '+18', 'icon' => 'identification', 'tone' => 'blue', 'meta' => 'Antrian tertinggi hari ini'], ['title' => 'Kartu Keluarga', 'value' => '188', 'trend' => '+9', 'icon' => 'user-group', 'tone' => 'green', 'meta' => 'Perlu loket tambahan siang'], ['title' => 'Pernikahan', 'value' => '64', 'trend' => '+6', 'icon' => 'heart', 'tone' => 'pink', 'meta' => 'Lonjakan akhir pekan'], ['title' => 'Surat Tanah', 'value' => '43', 'trend' => '-4', 'icon' => 'home-modern', 'tone' => 'orange', 'meta' => 'Waktu proses stabil'], ]; $toneClasses = [ 'blue' => 'bg-info-light text-info dark:bg-info/10', 'green' => 'bg-gov-50 text-gov-primary dark:bg-gov-primary/10', 'pink' => 'bg-pink-50 text-pink-600 dark:bg-pink-500/10 dark:text-pink-300', 'orange' => 'bg-orange-50 text-orange-600 dark:bg-orange-500/10 dark:text-orange-300', ]; @endphp @foreach ($highlights as $item)
{{ $item['trend'] }}

{{ $item['title'] }}

{{ $item['value'] }}

{{ $item['meta'] }}

@endforeach

Component States

Buttons, inputs, badges

Button states

Input states

Badge states

Overlay Patterns

Dropdown, modal, drawer behavior

Dropdown

Gunakan untuk aksi ringkas, filter, dan menu profil. Maksimal 6 item agar tetap cepat dipindai.

Modal

Dipakai untuk approval, confirmation, atau preview ringkas. Konten modal sebaiknya fokus pada satu keputusan utama.

Performa Bulanan Layanan

Data statis untuk menguji panel chart, legend, dan ritme header section.

12 Bulan Real-time mock

Distribusi Status

Satu ring donut untuk memeriksa komposisi visual widget kecil.

Approved

72%

Pending

18%

Kesehatan Operasional

Komponen progress dan timeline untuk test konsistensi informasi padat.

@php $operations = [ ['label' => 'Validasi berkas masuk', 'value' => 92, 'tone' => 'bg-gov-primary'], ['label' => 'Pencetakan dokumen', 'value' => 76, 'tone' => 'bg-info'], ['label' => 'Sinkronisasi loket', 'value' => 84, 'tone' => 'bg-warning'], ['label' => 'Pengiriman notifikasi', 'value' => 97, 'tone' => 'bg-success'], ]; @endphp
@foreach ($operations as $item)

{{ $item['label'] }}

{{ $item['value'] }}%
@endforeach

Catatan Sistem

Footer, CTA, toast, dan progress sengaja diletakkan dalam satu halaman ini supaya pengujian komponen terasa nyata sebelum kita pindah ke dashboard produksi.

Antrian Terbaru

Tabel statis untuk menguji kepadatan row, badge, dan alignment aksi.

@php $rows = [ ['code' => 'GOV-2026-1082', 'name' => 'Maya Lestari', 'service' => 'KTP Elektronik', 'status' => 'pending', 'eta' => '12 menit'], ['code' => 'GOV-2026-1081', 'name' => 'Raka Pratama', 'service' => 'Kartu Keluarga', 'status' => 'approved', 'eta' => 'Selesai'], ['code' => 'GOV-2026-1080', 'name' => 'Dian Saputra', 'service' => 'Surat Tanah', 'status' => 'processing', 'eta' => '34 menit'], ['code' => 'GOV-2026-1079', 'name' => 'Nisa Hani', 'service' => 'Pernikahan', 'status' => 'rejected', 'eta' => 'Revisi'], ['code' => 'GOV-2026-1078', 'name' => 'Bagas Permana', 'service' => 'Izin Kegiatan', 'status' => 'approved', 'eta' => 'Selesai'], ]; @endphp
@foreach ($rows as $row) @endforeach
Kode Pemohon Layanan Status ETA
{{ $row['code'] }} {{ $row['name'] }} {{ $row['service'] }} {{ $row['eta'] }}

Form Patterns

Form lengkap untuk layanan

Pilihan cepat

Upload berkas

Pattern dropzone sederhana untuk PDF, scan KTP, atau lampiran pendukung.

Form Rules

State dan aturan validasi

Do

  • Gunakan helper text singkat tepat di bawah field.
  • Kelompokkan field yang berhubungan dalam satu panel.
  • Tunjukkan error sedekat mungkin dengan field yang bermasalah.

Avoid

  • Jangan membuat semua field tampak sama penting.
  • Jangan sembunyikan state loading atau status simpan.
  • Jangan pakai modal untuk form panjang.

Sample validation block

Format nomor dokumen belum sesuai pola resmi.

Advanced Table

List page pattern yang siap dipakai

Mencakup search, filter, bulk action, selected rows, pagination, dan empty/loading references.

Semua Pending 24 Processing 8 Approved 81
3 baris dipilih • Bulk approve tersedia
@foreach ([['id' => 'GOV-1102', 'name' => 'Arga Kusuma', 'service' => 'KTP', 'status' => 'pending', 'updated' => '2 menit lalu'], ['id' => 'GOV-1101', 'name' => 'Mila Putri', 'service' => 'Surat Tanah', 'status' => 'processing', 'updated' => '14 menit lalu'], ['id' => 'GOV-1100', 'name' => 'Tio Darmawan', 'service' => 'Kartu Keluarga', 'status' => 'approved', 'updated' => '1 jam lalu']] as $row) @endforeach
Nomor Pemohon Layanan Status Updated Aksi
{{ $row['id'] }} {{ $row['name'] }} {{ $row['service'] }} {{ $row['updated'] }}

Menampilkan 1-3 dari 124 data

1 2 3

Pengumuman Layanan

Mock card konten informatif

Pemeliharaan singkat modul pencetakan dijadwalkan pukul 22.00 WIB. Layout card ini membantu kita cek ritme isi pendek vs panel data.

Aktivitas Petugas

Komponen feed ringkas

  • Loket 2 menyelesaikan 14 verifikasi dalam 1 jam terakhir.
  • Loket 4 mendekati batas SLA untuk surat tanah.

Next Step

Arah porting ke komponen nyata

Setelah layout ini cocok, kita pindahkan bagian hero, cards, dan section table ke dashboard utama dan halaman layanan satu per satu.

Loading

Skeleton states

Empty State

No data pattern

Belum ada data untuk filter ini

Kosong bukan berarti rusak. Empty state harus tetap memberi konteks dan arah tindakan berikutnya.

Alerts

Inline feedback

Dokumen berhasil divalidasi dan siap dicetak.
Ada 4 pengajuan yang mendekati batas SLA hari ini.
Sinkronisasi notifikasi sedang gagal dan perlu pemeriksaan.

Page Templates

Template halaman acuan

Ini daftar pola halaman yang harus konsisten saat kita mulai redesign produksi.

@foreach ([['title' => 'Dashboard', 'body' => 'Hero ringkas, KPI cards, chart, activity, operasional.'], ['title' => 'List / Index', 'body' => 'Page header, filters, table, bulk actions, pagination.'], ['title' => 'Detail / Show', 'body' => 'Status header, timeline, key-value info, action panel.'], ['title' => 'Create / Edit Form', 'body' => 'Sectioned form, sticky actions, validation, upload state.'], ['title' => 'Settings', 'body' => 'Tabs atau stacked groups dengan helper text yang jelas.'], ['title' => 'Auth', 'body' => 'Form tunggal, fokus tinggi, minim distraksi.'], ['title' => 'Empty / Error', 'body' => 'State khusus saat data kosong, akses gagal, atau maintenance.'], ['title' => 'Modal Flow', 'body' => 'Konfirmasi approval, reject, atau quick preview.']] as $template)

{{ $template['title'] }}

{{ $template['body'] }}

@endforeach

Base Comparison

Arah kedua dari `base2.html` sekarang ikut masuk ke UI kit

`base2.html` memberi rasa shell admin yang lebih operasional: sidebar penuh, top nav sticky, panel aksi cepat, dan kartu komponen yang lebih rapat. Bagian ini kita pakai sebagai pembanding terhadap fondasi dari `base.html`.

Preview Base 2 Buka base2.html

UI Kit Page 2

Shell yang lebih rapat dan operasional seperti `base2.html`.

Approval Actions

Nuansa panel aksi cepat dari `base2.html`.

2 urgent

Lencana Status

Aktif Menunggu Butuh Revisi Terjadwal

Complex Card Preview

Kartu lebih kaya seperti yang muncul di `base2.html`.

Featured

Panel Layanan Prioritas

Dipakai untuk service card, summary widget, atau CTA admin.

Draft

08

Review

14

Publish

21

Sidebar Master

`sidebar.html` sudah masuk ke UI Master sebagai acuan navigasi

Bagian ini merangkum dua state utama dari `sidebar.html`: expanded `280px` dan collapsed `80px`, termasuk active state, submenu terbuka, badge count, dan area profil pengguna.

Preview Sidebar Buka sidebar.html

Preview Modal Master

Contoh modal acuan untuk konfirmasi singkat.

Pengajuan: GOV-2026-1102

Pemohon akan dipindahkan ke status approved dan tercatat di audit log.

 @push('scripts') @endpush