Page Design: Dashboard Tổng Quan¶

Follows MASTER.md — no overrides needed. Applies to: SCR-DASH-10 Route: /[locale]/dashboard Users: Manager, Data Owner, Approver, Staff, Admin (content varies by role)

Layout¶

+----------------------------------------------------------+
| Page Title: "Tổng quan hệ thống"        [Date badge]     |
+----------------------------------------------------------+
| KPI Card 1   | KPI Card 2   | KPI Card 3  | KPI Card 4  |
| (Domains)    | (Sub-Domains)| (Data Elem) | (Đơn vị)    |
+----------------------------------------------------------+
| Progress Chart (wide)       | Notifications Panel        |
| "Trạng thái quy hoạch"     | "Thông báo & Sự kiện"      |
| - Published: 65%            | - Alert items               |
| - Review: 20%               | - Activity log              |
| - Draft: 15%                |                             |
+----------------------------------------------------------+

Desktop: 4-column grid for KPI, 2-column for charts. max-w-6xl mx-auto
Tablet: 2-column grid for KPI, stacked charts
Mobile: 1-column everything
Content area: space-y-8

Components¶

flex justify-between items-center
  /* Title */
  text-3xl font-extrabold text-foreground tracking-tight
  /* Date badge */
  bg-card px-4 py-2 rounded-xl border border-border text-sm font-medium shadow-sm

KPI Cards (grid of 4)¶

/* Grid container */
grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6

/* Each KPI card — follows MASTER.md Stat/KPI Card */
bg-card p-6 rounded-3xl shadow-sm border border-border
  /* Label */
  text-[11px] font-bold text-muted-foreground uppercase tracking-widest
  /* Value */
  text-4xl font-black mt-2
  /* Description */
  text-xs text-muted-foreground mt-2 font-medium

KPI Data:

Card	Label	Value Color	Icon
Domains	"DOMAINS"	`text-primary` (blue-600)	Database
Sub-Domains	"SUB-DOMAINS"	`text-info` (cyan-600)	Layers
Data Elements	"DATA ELEMENTS"	`text-violet-600`	FileText
Đơn vị tham gia	"ĐƠN VỊ THAM GIA"	`text-success` (emerald-600)	Building2

Progress Chart Panel¶

/* Card container */
bg-card p-8 rounded-3xl border border-border shadow-sm

/* Section title */
text-xl font-bold mb-6 text-foreground

/* Progress bar group */
space-y-6
  /* Each bar */
  flex justify-between text-sm mb-2 font-bold text-muted-foreground
    span /* label */
    span /* percentage — colored by status */
  /* Bar track */
  h-3 bg-muted rounded-full overflow-hidden
    /* Bar fill */
    h-full rounded-full /* bg-primary for Published, bg-warning for Review, bg-muted-foreground for Draft */

Progress Data:

Status	Color	Example
Published	`bg-primary` (blue-600)	65%
Review	`bg-warning` (yellow-500)	20%
Draft	`bg-muted-foreground/30` (slate-300)	15%

Notifications Panel¶

/* Card container */
bg-card p-8 rounded-3xl border border-border shadow-sm flex flex-col

/* Section title */
text-xl font-bold mb-6 text-foreground

/* Notification list */
space-y-4 flex-1

/* Notification item (unread) */
flex gap-4 p-4 bg-primary/5 rounded-2xl border border-primary/10
  /* Pulse dot */ w-2 h-2 bg-primary rounded-full mt-2 animate-pulse
  /* Content */
  p.font-bold.text-sm.text-primary-foreground  /* title — use primary dark shade */
  p.text-sm.text-muted-foreground               /* description */

/* Notification item (read) */
flex gap-4 p-4 bg-muted/50 rounded-2xl
  /* Static dot */ w-2 h-2 bg-muted-foreground rounded-full mt-2
  /* Content — all muted colors */

Role-Specific Content (UX IMPROVEMENT — UXI-03: Smarter Dashboard)¶

Each role sees a tailored "Action Items" section above KPI cards — the most important thing they need to do RIGHT NOW.

Manager Dashboard¶

+-----------------------------------------------------------+
| ⚡ Action Items (collapsible)                              |
| ┌─────────────┐ ┌─────────────┐ ┌─────────────┐         |
| │ 📥 3 batch   │ │ 🤖 42 fields│ │ 📝 5 đề xuất│         |
| │ chờ matching │ │ chờ rà soát │ │ chờ duyệt   │         |
| │ [Xử lý →]   │ │ [Review →]  │ │ [Xem →]     │         |
| └─────────────┘ └─────────────┘ └─────────────┘         |
+-----------------------------------------------------------+
| KPI Cards (4) | Progress Chart | Notifications            |
+-----------------------------------------------------------+

- 3 action cards: Clickable, navigate to relevant screen - Shows counts that need Manager attention - Replaces static KPIs as the first thing Manager sees

Data Owner Dashboard¶

+-----------------------------------------------------------+
| 🔔 Yêu cầu Xác nhận Hiện trạng                           |
| ┌─────────────────────────────────────────────────────┐   |
| │ Đơn vị: Sở Y tế | 15 field cần xác nhận            │   |
| │                                                     │   |
| │ ✅ 8 đã xác nhận  ⏳ 5 chờ xử lý  ❌ 2 tranh chấp  │   |
| │                                                     │   |
| │ [Mở danh sách xác nhận →]                           │   |
| │                                                     │   |
| │ Deadline: 05/04/2026 (còn 7 ngày)                   │   |
| │ ██████████████░░░░░░░░░ 53%                         │   |
| └─────────────────────────────────────────────────────┘   |
+-----------------------------------------------------------+
| Đề xuất của tôi (3) | Tra cứu nhanh                       |
+-----------------------------------------------------------+

- Hero action card: One big card — the single thing Data Owner needs to do - Shows progress toward deadline — urgency indicator - [Mở danh sách] → navigates to dedicated SCR-MAP-10-OWNER (see below)

Approver Dashboard¶

+-----------------------------------------------------------+
| ⚡ Cần phê duyệt                                          |
| ┌───────────┐ ┌────────────┐ ┌────────────┐              |
| │ 🔴 3 ô    │ │ 📋 Bảng C  │ │ 📊 2 DE    │              |
| │ DISPUTED  │ │ 75% xác nhận│ │ chờ chốt CQ│              |
| │ [Giải quyết]│ │ [Xem tổng quan]│ │ [Xem →]   │              |
| └───────────┘ └────────────┘ └────────────┘              |
+-----------------------------------------------------------+
| KPI Cards | Maturity Score mini-heatmap | Notifications    |
+-----------------------------------------------------------+

- 3 action cards: DISPUTED count, Bảng C readiness, Pending ownership - Mini heatmap: Thumbnail of SCR-RPT-50 — click to expand

Staff Dashboard¶

+-----------------------------------------------------------+
|                                                           |
|         🔍 Tra cứu Dữ liệu Chuẩn                        |
|         [========= Search input =========]                |
|                                                           |
|         Kết quả gần đây:                                  |
|         • Số CCCD — Công an Tỉnh                          |
|         • Mã số thuế — Cục Thuế                           |
|                                                           |
+-----------------------------------------------------------+

- Search-first: Staff chỉ cần tra cứu → đưa search ngay lên Dashboard - Recent searches for quick access

Admin Dashboard¶

+-----------------------------------------------------------+
| ⚡ Cần xử lý                                              |
| ┌─────────────┐ ┌─────────────┐                          |
| │ 👤 3 user    │ │ 📊 Hệ thống │                          |
| │ chưa phân quyền│ │ 24 users    │                          |
| │ [Phân quyền →]│ │ 5 roles     │                          |
| └─────────────┘ └─────────────┘                          |
+-----------------------------------------------------------+
| Recent activity | Import status                            |
+-----------------------------------------------------------+

Role	Primary Focus	Secondary
Manager	Action items (3 cards: matching, review, proposals)	KPIs + Progress + Notifications
Data Owner	Hero confirmation card with deadline + progress	Proposals list + Quick search
Approver	Action items (DISPUTED, Bảng C readiness, ownership)	KPIs + Mini heatmap + Notifications
Staff	Search-first (hero search)	Recent searches
Admin	Unassigned users + system stats	Recent activity + import status

Data Owner: Confirmation Alert Bar¶

/* Full-width alert at top of content, before KPI cards */
bg-primary rounded-3xl text-primary-foreground shadow-xl p-6
flex justify-between items-center

  /* Left: icon + text */
  flex items-center gap-4
    /* Icon container */ w-12 h-12 bg-white/20 rounded-2xl flex items-center justify-center
      /* CheckCircle icon */
    div
      p.font-black.text-lg  "Yêu cầu xác nhận hiện trạng!"
      p.text-primary-foreground/70.text-sm  "Vui lòng rà soát..."

  /* Right: CTA button */
  bg-white text-primary px-8 py-3 rounded-2xl font-black shadow-lg
  hover:bg-primary-foreground transition-all

/* Replaces progress chart area for Staff role */
bg-card p-8 rounded-3xl border border-border shadow-sm text-center
  h3.text-xl.font-bold.mb-4  "Tra cứu nhanh"
  /* Search input — simplified version of DICT search */
  w-full px-6 py-4 rounded-full border border-border
  text-base font-medium placeholder:text-muted-foreground
  focus:ring-2 focus:ring-ring

Empty State¶

/* When system is freshly deployed, no data yet */
flex flex-col items-center justify-center py-16 text-center
  BarChart3.h-12.w-12.text-muted-foreground/30
  p.text-lg.font-bold.text-muted-foreground.mt-4  "Chưa có dữ liệu"
  p.text-sm.text-muted-foreground.mt-2  "Hệ thống mới triển khai. Hãy bắt đầu bằng việc import Master Data."
  /* CTA button to SCR-SYS-40 (Admin only) */

Error State¶

bg-destructive/5 border border-destructive/20 rounded-2xl p-6
flex items-center gap-4
  AlertTriangle.h-6.w-6.text-destructive
  div
    p.font-bold.text-destructive  "Không thể tải dữ liệu"
    p.text-sm.text-muted-foreground  "Vui lòng thử lại sau."
  Button(variant="outline")  "Thử lại"

Loading State¶

/* KPI cards: 4 skeleton cards */
grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6
  /* Each */ bg-card p-6 rounded-3xl border border-border
    Skeleton.h-3.w-20.rounded  /* label */
    Skeleton.h-10.w-16.mt-2.rounded  /* value */
    Skeleton.h-3.w-32.mt-2.rounded  /* desc */

/* Charts: 2 skeleton panels */
grid grid-cols-1 lg:grid-cols-2 gap-8
  bg-card p-8 rounded-3xl border border-border
    Skeleton.h-6.w-40.rounded.mb-6
    Skeleton.h-3.w-full.rounded.mb-4  /* x3 bars */

Data & Business Rules¶

Rule	Detail
Default sort	N/A (dashboard, no table)
Auto-refresh	Every 60 seconds (or on focus)
Date format	Vietnamese locale: "Thứ Ba, 24/03/2026"
Number format	Locale-aware: "1.234" (Vietnamese thousand separator)
KPI values	Real-time aggregated from server
Notifications	Latest 5, sorted by created_at DESC

Behaviors¶

State	Trigger	Display
Loading	Page init	Skeleton cards + panels
Empty	No master data imported	Empty state with CTA to import
Error	API failure	Error banner with retry
Default	Data loaded	Full dashboard
Role switch	User changes role in sidebar	Dashboard content re-renders for new role
New notification	Real-time event	Toast + pulse dot on new item

Responsive¶

Breakpoint	Changes
Mobile (< 768px)	KPI: 1-col. Charts: stacked. Alert bar: stacked (text above, button below). p-4
Tablet (768-1023px)	KPI: 2-col. Charts: stacked. p-6
Desktop (>= 1024px)	KPI: 4-col. Charts: 2-col side by side. p-10. max-w-6xl

Accessibility¶

KPI values: aria-label="Domains: 3" on each card
Progress bars: role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"
Notification pulse dot: prefers-reduced-motion → stop animation
Alert bar button: aria-label="Xác nhận hiện trạng đơn vị"
Heading hierarchy: H1 (page title) → H2 (section titles: "Trạng thái quy hoạch", "Thông báo")
Skip-to-content link targets this page's main content

MASTER.md Overrides¶

No overrides — fully follows MASTER.md.