📊

Dashboard Dinamis Berbasis Widget

Halaman utama setelah login. Sistem widget catalog: tiap widget = komponen self-contained yang baca dari DashboardData shared. Layout per role disimpan di DB (DashboardLayout) — admin atur via drag-drop editor di /settings/dashboard. Fallback ke preset hardcoded kalau role belum di-customize. Real-time update via WebSocket tanpa refresh.

Semua Role (preset berbeda) Admin (kelola layout) Manager (financial widgets)

Arsitektur Widget System

flowchart LR subgraph Frontend Page["dashboard page.tsx"] --> Hook[useDashboardLayout] Hook --> API1["GET /api/dashboard/layouts/:role"] API1 -->|null| Preset["presets.ts
hardcoded fallback"] API1 -->|dto| LayoutDB[("DashboardLayout")] Hook --> Grid[DashboardGrid] Page --> Data["DashboardData
fetched once, shared"] Grid --> Reg["registry.ts
20+ widgets"] Reg --> Widget1[KpiRevenue] Reg --> Widget2[ArAging] Reg --> Widget3[TrendChart] Reg --> WidgetN["..."] Widget1 --> Data Widget2 --> Data Widget3 --> Data end subgraph Editor SettingsPage["/settings/dashboard"] --> APIEdit["PUT /dashboard/layouts/:role"] APIEdit --> LayoutDB end style LayoutDB fill:#dbeafe,stroke:#3b82f6 style Reg fill:#fef3c7,stroke:#d97706 style Data fill:#f0fdf4,stroke:#16a34a

UI — Dashboard Manager & Layout Editor

bengkelpintar.app/dashboard

Bengkel
Pintar

Dashboard

Work Order

Inventory

💰

Rp 482jt

Revenue MTD ↑12%

📈

Rp 96jt

Net Profit · 19.9%

🔧

SPK Aktif

⚠️

Stok Kritis

Tren Revenue (12 Bln) · Target ┄ · ○ Forecast EOM

AR Aging — Umur Piutang

🟢 Lancar (0-30)Rp 28jt · 14 invoice

🟡 Perhatian (31-60)Rp 12jt · 6 invoice

🟠 Risiko (61-90)Rp 5jt · 3 invoice

🔴 Macet (>90)Rp 2jt · 1 invoice

bengkelpintar.app/settings/dashboard

Bengkel
Pintar

Pengaturan

Layout Dashboard

Admin Manager SA Kasir +4

Palet

KPI

Revenue MTD SM

SPK Aktif SM

CHART

Tren 12 Bln LG

FINANCE

AR Aging $ MD

Layout Admin (drag-drop)

1. Header & Quick ActionsFULL

2. Role Decision PanelFULL

3. KPI Revenue MTD $SM

4. TrendChart 12 BlnLG

5. AR AgingMD

Katalog Widget (20+ widget)

📋 Header

header — sambutan, tanggal, quick action sesuai role
alert-bar — notifikasi stok habis, PO transit, AR pending
role-panel — panel keputusan harian per role
Category: header / alert / action — selalu full-width

📊 KPI Cards (sm)

kpi-revenue 💲 · kpi-profit 💲 · kpi-spk · kpi-gross 💲
kpi-customer · kpi-ar 💲 · kpi-ap 💲 · kpi-stock
$ icon = sensitive (default disembunyikan untuk non-finance role)
Sparkline 6 bulan + delta vs bulan lalu

📈 Charts

chart-trend — Revenue + Profit 12 bln, target line, forecast EOM
spk-pipeline — donut status SPK + masuk/selesai hari ini
Forecast = MTD / dayOfMonth × daysInMonth
Target = avg 6 bln × 1.10 (heuristik growth 10%)

💰 Finance Widgets

ar-aging 💲 — bucket 0-30 / 31-60 / 61-90 / >90 hari
supplier-due 💲 — hutang outstanding
summary-12mo 💲 — tabel revenue/profit per bulan
Highlight risiko: AR > 60 hari → "prioritas penagihan minggu ini"

📃 List / Tabel

recent-spk — 8 SPK terbaru dengan status & total
mekanik-performance — utilisasi & rating per mekanik
top-jasa — top 5 layanan + ringkasan kas
po-transit · low-stock · summary-spk

📐 Size System

Grid 4-kolom; sm=1, md=2, lg=3, full=4
Default size dari widget meta — admin bisa override per layout
Layout (header/alert/action) selalu full-width otomatis
Saved size override di kolom widgetSizes (JSON)

Role Presets (Default Layout)

🛡️ Admin / Manager

Semua KPI + finance + chart + list = ~20 widget
TrendChart, AR Aging, Summary 12 bulan, mekanik performance
Sensitive widgets ($) terlihat semua

🛎️ Service Advisor (SA)

SPK aktif, customer, AR, stok
SPK pipeline donut, summary SPK, recent SPK
Tanpa widget profit / cogs / chart trend

💳 Kasir

Revenue, AR, AP, AR Aging
Pipeline + summary SPK + supplier due
Fokus collection & cash position

🔧 Mekanik / Karu / Gudang / Operator

Mekanik: SPK saya, stok kritis, pipeline
Karu: SPK + KPI tim + mekanik performance
Gudang: stok, PO transit, supplier due, AP
Operator: SPK aktif, customer, summary

Layout Editor (Admin Only) · /settings/dashboard

🎯 Tab Per Role

8 role: admin, manager, sa, kasir, mekanik, gudang, operator, karu
Tab horizontal di top untuk switch antar role
Loading: fetch dari API → fallback ke preset jika belum di-customize

📋 Palet Widget (Sticky Left)

Dikelompokkan per kategori dengan warna khas
Drag widget atau click untuk tambah
Widget yang sudah dipilih → opacity 0.55
Badge $ untuk sensitive (finance) widget

🎨 List Layout (Right)

Drag handle ⋮⋮ untuk reorder
Drop-zone biru di antara item saat drag
Size selector inline: S / M / L / Full
Badge "custom" muncul jika size override aktif
× untuk hapus widget dari layout

💾 Save / Reset

Indicator dirty state — "Ada perubahan belum disimpan"
Save → PUT /api/dashboard/layouts/:role
Reset to Default → DELETE /api/dashboard/layouts/:role (kembali ke preset hardcoded)
Status: "Custom layout" (hijau) atau "Default preset" (kuning)

API Endpoints

Method	Path	Permission	Deskripsi
`GET`	`/dashboard/layouts`	settings.dashboard:view	List semua layout terkonfigurasi (admin/manager)
`GET`	`/dashboard/layouts/:role`	any auth	Get layout role (non-admin hanya boleh role-nya sendiri)
`PUT`	`/dashboard/layouts/:role`	settings.dashboard:edit	Upsert layout role
`DELETE`	`/dashboard/layouts/:role`	settings.dashboard:delete	Reset ke default preset (admin only)
`GET`	`/dashboard`	rbac admin/manager/sa/karu	Aggregate KPI + alerts (legacy endpoint)
`GET`	`/dashboard/summary`	rbac	Today summary (revenue, bay, queue)
`GET`	`/dashboard/chart/revenue`	rbac	Revenue trend 30 hari
`GET`	`/dashboard/chart/wo-status`	rbac	Distribusi status WO
`GET`	`/dashboard/alerts`	rbac	Low stock, expiring STNK, budget

Tabel & Event

Tabel: DashboardLayout (role unique, widgetKeys[], widgetSizes JSON, audit fields)

Resource permission baru: settings.dashboard (view/create/edit/delete)

WS Events (real-time): wo:status_changed, wo:created, bay:occupied, bay:free, payment:closed, followup:created

Throttle: hook useSpkRealtime 300ms agar event burst tidak spam re-render

Performance: shared DashboardData dihitung sekali, semua widget tinggal pakai (mengurangi N+1 fetch)