XPrivate · admin-MVP-1 · Wireframes — Dashboard + Command Palette ALIGNED aligned 2026-05-31
Index → admin-mvp-1-ia-handover.html · Stack: React 19 + TanStack Start (SPA) · shadcn amber b1MJ9vRwY6 · light-mode iter-1

Dashboard + Command Palette (⌘K)

Founder-facing daily · Dashboard role-scoped widget + "Tugas Hari Ini" flagship · ⌘K fast-nav across 51 pages (Linear-anchor) · light mode · Indonesian · WIB

Wireframe 7 / 10

Dashboard (role-scoped)

Route: /dashboard · widget role-scoped (Knob L) · "Tugas Hari Ini" flagship · Role: ADMIN (view ditampilkan)
Selamat pagi, Fahrul 👋
Minggu, 31 Mei 2026 · 5 hal butuh perhatian hari ini

⚡ Tugas Hari Ini

Tugas mendesak dari semua akses Anda, tergabung dalam satu tampilan. (View ADMIN = Operasional + Keuangan digabung)
3
Sesi menunggu persetujuan · Operasional
1
SLA lewat 24 jam ⚠ · Operasional
2
Konflik jadwal · Operasional
1
Tutup Periode Mei terblokir · Keuangan
5
Tagihan jatuh tempo 90+ hari ⚠ · Keuangan
Operasional butuh schedule:*
Antrian Persetujuan Buka →
3
menunggu persetujuan · 1 SLA >24 jam
Sesi Minggu Ini Kalender →
42 / 48
selesai · 4 berlangsung · 2 dibatalkan
Force Majeure Tinjau →
1
PENDING_L1 · 0 banding L2
Keuangan butuh finance:*
Outstanding Aging Detail →
0–30 hariRp 8,2 jt
31–60 hariRp 2,1 jt
90+ hari ⚠Rp 950 rb
Belum Ditandai Lunas Tandai lunas →
22
tagihan · 16 honor tutor menunggu transfer
Tutup Periode Mei Buka →
Terblokir
2 penghambat: 3 sesi berlangsung, 1 FM menunggu
💡 Widget ditentukan oleh izin akses, bukan peran (model permission-list + Negation ACL). Tampilan ini = ADMIN (superuser → semua bagian muncul). Multi-peran = otomatis melihat gabungan widget:
  • OPS murni → hanya bagian "Operasional" (Antrian/Sesi/FM). Bagian "Keuangan" tidak ditampilkan (tidak punya finance:*).
  • FINANCE murni → hanya bagian "Keuangan" (Aging/Tandai lunas/Tutup Periode).
  • OPS + FINANCE (multi-peran) → KEDUA bagian muncul (gabungan izin). Tanpa pengalih peran — Anda melihat semua yang dapat Anda akses, dikelompokkan per domain.
  • Hero "Tugas Hari Ini" juga ditentukan izin → tiap kartu tugas terikat ke izin akses. ADMIN (tampilan ini) = tugas Operasional (persetujuan/SLA/konflik) + tugas Keuangan (periode terblokir/tagihan 90+) digabung, tiap kartu ditandai domainnya. OPS murni = hanya 3 tugas Operasional (tanpa periode/tagihan). FINANCE murni = hanya tugas Keuangan (tanpa persetujuan/FM/konflik). Hero otomatis disaring per izin, sama seperti widget.
Tanpa pengalih peran — bertentangan dengan model gabungan (izin dilebur, bukan dialihkan). Bagian yang izinnya tidak dimiliki tidak ditampilkan sama sekali (bukan diabukan).

Komponen Kunci

"Tugas Hari Ini" hero (flagship, permission-gated)

Landing langsung kasih yang butuh aksi, di-tag per domain (ops/finance). Tiap card tied ke permission — ADMIN liat union (ops+finance), OPS liat ops-only, FINANCE finance-only. 1-tap ke action. Speed goal "less time di dashboard".

Permission-gated + multi-role union

Widget di-gate by PERMISSION (bukan role). Section per domain (Operasional schedule:* / Keuangan finance:*). Multi-role (OPS+FINANCE) = UNION section otomatis dari Negation ACL. No role-switcher — section tanpa permission gak di-render. Hero aggregate across semua permission.

Stat widgets + deep-link

Tiap widget = stat ringkas + "Buka →" link ke page detail. Antrian, Sesi minggu, FM, Aging (bucket bar), Mark-paid pending, Period close status.

Period close blocker surface

Widget Tutup Periode nampilin "Blocked" + alasan (3 sesi in-prog, 1 FM) → tau apa yang harus diberesin sebelum close.

Components

shadcn: Card (widget), Badge, Button, Progress/custom bar (aging), gradient hero (custom). Grid responsive 3-col → 2 (tablet) → 1 (mobile).

Greeting + date WIB

Personalisasi ringan ("Selamat pagi, Fahrul") + tanggal Indonesian + count "N hal butuh perhatian". Set tone harian.

Open Knobs

  • Hero task set: 4 fixed (approve/SLA/FM/konflik) atau configurable? Strawman = fixed iter-1, configurable iter-2.
  • Widget order: fixed atau drag-arrange? Strawman = fixed role-scoped iter-1 (Knob L), drag iter-2.
  • Greeting time-aware (pagi/siang/malam) — confirm pakai WIB clock.
Wireframe 8 / 10

Command Palette (⌘K)

Global · trigger ⌘K / Ctrl+K · fast-nav + action + entity search across 51 pages · Linear-anchor · Speed: result <500ms
Dashboard
(blur — palette di atasnya)
🔍esc
↑↓ navigasi↵ pilihesc tutup⌘K buka di mana saja

Komponen Kunci

Fast-nav 51 pages

Ketik partial → fuzzy match nav + action + entity. Power-user gak perlu klik sidebar — ⌘K, ketik, ↵. Speed goal "cepet execution".

4 jenis result

Navigasi (ke page) · Aksi cepat (Buat sesi, Approve next, Mark paid, Tutup periode) · Cari entity (tutor/siswa/sesi by nama/ID) · Bantuan (shortcut cheatsheet).

Recent (state kosong)

Baru buka palette (sebelum ngetik) → tampil recent visited + aksi sering dipakai. Toggle state di atas buat liat.

Entity search backend

Cari tutor/siswa/sesi by nama atau ID → Hyperdrive-cached query, hasil <500ms. Deep-link langsung ke detail.

Components

shadcn Command (cmdk-based) — Dialog + grouped list + keyboard nav built-in. Bind ke TanStack Router routes + entity search API.

Keyboard-first

↑↓ navigate, ↵ select, esc close. Plus chord shortcuts (G→S jadwal, G→P orang) buat power-user yang hapal.

Open Knobs

  • Entity search scope: tutor+siswa+sesi iter-1, atau tambah tagihan/honor? Strawman = 3 entity iter-1.
  • Aksi cepat dalam palette: berapa banyak? Strawman = top-6 (buat sesi, approve next, mark paid, tutup periode, clone TA, cari pengganti).
  • Fuzzy ranking: recent > exact > fuzzy. Confirm prioritas.
8 / 10 wireframes — Pricing · Approval · Schedule Detail · Calendar · Pembatalan · Tutup Periode · Dashboard · ⌘K Palette.
Sisa: Audit Log · Cron Jobs (settings-tier).