Bỏ qua

Page Design: Báo cáo & Thống kê (Reports)

Follows MASTER.md — Dashboard + Table + Heatmap patterns. Applies to: SCR-RPT-10, SCR-RPT-20, SCR-RPT-30, SCR-RPT-40, SCR-RPT-50 Route: /[locale]/reports Users: Manager, Approver

SCR-RPT-10: Báo cáo Tổng quan

Layout

+-----------------------------------------------------------+
| "Báo cáo & Thống kê"                                      |
+-----------------------------------------------------------+
| KPI Row: [Total DE] [% Mapped] [% Published] [Overlap cnt]|
+-----------------------------------------------------------+
| Quick Links — Card Grid (2x2)                              |
| ┌─────────────────────┐ ┌─────────────────────┐          |
| │ 📊 Báo cáo chồng chéo│ │ 📊 Báo cáo phân mảnh │          |
| │ 12 DE chồng chéo     │ │ 8 DE phân mảnh      │          |
| └─────────────────────┘ └─────────────────────┘          |
| ┌─────────────────────┐ ┌─────────────────────┐          |
| │ 📊 Tiến độ quy hoạch │ │ 📊 Maturity Score    │          |
| │ 65% hoàn thành       │ │ Heatmap tổng quan    │          |
| └─────────────────────┘ └─────────────────────┘          |
+-----------------------------------------------------------+

Components

  • KPI row: 4 stat cards (same MASTER.md KPI pattern)
  • Quick link cards: Interactive cards → navigate to detail reports
  • Each card shows icon + title + summary stat + arrow icon

SCR-RPT-20: Báo cáo Chồng chéo

Layout

+-----------------------------------------------------------+
| Breadcrumb: Báo cáo > Chồng chéo                          |
| "Báo cáo Chồng chéo"                     [Export ▼]       |
+-----------------------------------------------------------+
| [Filter: Domain ▼]                                        |
+-----------------------------------------------------------+
| Table                                                      |
| ┌────────────┬────────┬──────────────────┬───────────────┐|
| │ Data Element│ Mã ID │ Đơn vị lưu trữ  │ Số đơn vị     │|
| ├────────────┼────────┼──────────────────┼───────────────┤|
| │ Số CCCD    │DE001...│ Công an, Sở TC,  │ 3 (chồng chéo)│|
| │            │        │ BHXH             │               │|
| └────────────┴────────┴──────────────────┴───────────────┘|
+-----------------------------------------------------------+

Components

  • Table: MASTER.md table. Sorted by overlap count DESC
  • "Số đơn vị" column: Badge with count. Red if >= 3 (severe), yellow if 2 (moderate)
  • "Đơn vị lưu trữ" column: Comma-separated unit names, each as inline badge
  • Export: DropdownMenu → CSV, Excel, PDF
  • Only shows DEs stored by >= 2 units

SCR-RPT-30: Báo cáo Phân mảnh

Layout & Components

  • Same pattern as SCR-RPT-20 but inverse metric
  • Shows DEs stored by only 1 unit (fragmentation risk)
  • Column "Đơn vị duy nhất" instead of "Đơn vị lưu trữ"
  • Badge: Orange for single-source DEs

SCR-RPT-40: Báo cáo Tiến độ Quy hoạch

Layout

+-----------------------------------------------------------+
| "Tiến độ Quy hoạch"                      [Export ▼]       |
+-----------------------------------------------------------+
| [Tab: Theo đơn vị] [Tab: Theo Domain]                     |
+-----------------------------------------------------------+
| TAB 1: Theo đơn vị                                        |
| ┌──────────┬─────────┬─────────┬─────────┬──────────────┐|
| │ Đơn vị   │ Đã chốt │ Đang xử │ Chưa bắt│ Tiến độ      │|
| │          │ CQ      │ lý      │ đầu     │ (progress bar)│|
| ├──────────┼─────────┼─────────┼─────────┼──────────────┤|
| │ Công an  │ 12      │ 3       │ 0       │ ████████░░ 80%│|
| │ Sở TC    │ 5       │ 8       │ 2       │ ████░░░░░░ 33%│|
| └──────────┴─────────┴─────────┴─────────┴──────────────┘|
+-----------------------------------------------------------+

| TAB 2: Theo Domain — same table but rows = Domains        |
+-----------------------------------------------------------+

Components

  • Tabs: MASTER.md tabs pattern. "Theo đơn vị" and "Theo Domain"
  • Progress bar in table cell: Mini progress bar (h-2, colored)

  • = 80%: bg-success

  • 50-79%: bg-warning
  • < 50%: bg-destructive
  • Sort: By progress % DESC (least complete first for attention)

SCR-RPT-50: Dashboard Maturity Score

Layout

+-----------------------------------------------------------+
| "Dashboard Maturity Score"                [Export ▼]       |
| "Mức độ trưởng thành chuẩn hoá dữ liệu"                  |
+-----------------------------------------------------------+
| Legend: 🟢 ≥80%  🟡 50-79%  🔴 <50%  ⬜ N/A              |
+-----------------------------------------------------------+
| Heatmap Matrix                                             |
| ┌──────────┬──────────┬──────────┬──────────┬────────────┐|
| │          │ Con người│ Tổ chức  │ Đất đai  │ Avg Score  │|
| ├──────────┼──────────┼──────────┼──────────┼────────────┤|
| │ Công an  │ 🟢 85%  │ 🟡 60%  │ ⬜ N/A   │ 72%        │|
| │ Sở TC    │ 🟡 55%  │ 🟢 90%  │ 🔴 30%  │ 58%        │|
| │ Cục Thuế │ 🔴 20%  │ 🟢 95%  │ 🟡 50%  │ 55%        │|
| └──────────┴──────────┴──────────┴──────────┴────────────┘|
+-----------------------------------------------------------+
| Click cell to drill-down                                   |
+-----------------------------------------------------------+

Components

Heatmap Matrix

/* Container */
bg-card rounded-3xl border border-border overflow-hidden shadow-sm overflow-x-auto

/* Table structure — similar to MAP matrix but with colored backgrounds */
/* Sticky first column (Đơn vị names) */

/* Cell coloring — based on Maturity Score % */
/* High (>= 80%) */
bg-green-100 dark:bg-green-950 text-green-800 dark:text-green-300 font-bold text-center

/* Medium (50-79%) */
bg-yellow-100 dark:bg-yellow-950 text-yellow-800 dark:text-yellow-300 font-bold text-center

/* Low (< 50%) */
bg-red-100 dark:bg-red-950 text-red-800 dark:text-red-300 font-bold text-center

/* N/A (no data) */
bg-slate-50 dark:bg-slate-800 text-muted-foreground text-center italic

/* Cell content: percentage number, bold */
text-sm font-black

/* Hover: cursor-pointer, slight scale/shadow */
hover:ring-2 hover:ring-primary hover:z-10 transition-all cursor-pointer

Legend Bar

flex items-center gap-6 mb-4 text-sm font-medium
  /* Each legend */
  flex items-center gap-2
    div.w-4.h-4.rounded-sm  /* colored square */
    span.text-muted-foreground

Average Column

/* Last column — average score per unit */
bg-muted/30 font-black text-foreground
/* Color-coded same as other cells */

Drill-down Detail (on cell click) — GAP-12, GAP-13

Instead of navigating away, use a slide-out Sheet panel (UX IMPROVEMENT):

/* Sheet (slide from right, w-[600px]) */
/* Triggered by clicking any heatmap cell or table row in SCR-RPT-20/30/40 */

/* Sheet header */
px-6 py-4 border-b border-border
  h3.font-bold.text-lg  "Công an Tỉnh × Con người"
  Badge.text-success  "85% trưởng thành"

/* Sheet body — DE list table */
px-6 py-4 overflow-y-auto
  /* Table: DE name | Status | Owner | Score */
  /* Each row shows individual DE completion */
  /* Color-coded status per DE */

/* Sheet footer — export */
px-6 py-4 border-t border-border flex justify-end
  Button(variant="outline", size="sm")
    Download.h-4.w-4.mr-2  "Export"

Why Sheet instead of page navigation: - User keeps context (heatmap visible behind) - Can quickly click another cell without back-navigation - Drill-down is exploratory — Sheet supports quick scanning

Shared Export Component (GAP-13)

/* Standardized export dropdown — used across all RPT screens */
DropdownMenu
  trigger: Button(variant="outline")
    Download.h-4.w-4.mr-2  "Export ▼"
  content:
    DropdownMenuLabel  "Chọn định dạng"
    DropdownMenuItem  FileSpreadsheet icon + "Excel (.xlsx)"
    DropdownMenuItem  FileText icon + "CSV (.csv)"
    DropdownMenuItem  FileIcon icon + "PDF (.pdf)"
    DropdownMenuSeparator
    DropdownMenuLabel  "Phạm vi"
    DropdownMenuRadioGroup
      "Trang hiện tại"
      "Tất cả (bao gồm bộ lọc)"

Data & Business Rules

Rule Detail
Score calculation Avg of: % with owner, % with full definition, % PUBLISHED
Thresholds ≥80% green, 50-79% yellow, <50% red, no data = gray N/A
Horizontal scroll Sticky first column (unit names)
Drill-down Click cell → filtered DE list for that intersection

Responsive (all RPT screens)

Breakpoint Changes
Mobile (< 768px) Tables: card view. Heatmap: horizontal scroll. KPIs: 2-col. p-4
Tablet (768-1023px) Tables: horizontal scroll. Heatmap: horizontal scroll. p-6
Desktop (>= 1024px) Full layout. Heatmap all visible (or scroll if many domains). p-10

Accessibility

  • Heatmap cells: aria-label="Công an Tỉnh, Domain Con người: 85% trưởng thành" — not color alone
  • Progress bars in tables: role="progressbar" with aria-valuenow
  • Export buttons: aria-label="Xuất báo cáo" with format options
  • Color legend: textual labels accompany color squares
  • Drill-down: aria-label="Xem chi tiết Maturity Score: [Unit] × [Domain]"

MASTER.md Overrides

What MASTER.md This Page Reason
Content max-width (SCR-RPT-50) max-w-6xl max-w-full Heatmap needs full width for many Domain columns