Page Design: Mapping & AI Review Screens¶

Follows MASTER.md — Dialog + List patterns. Applies to: SCR-MAP-11, SCR-MAP-20, SCR-MAP-21, SCR-MAP-30, SCR-MAP-31 Users: Manager

Route: Dialog overlay on SCR-MAP-10 Trigger: Manager clicks a cell in the matrix

Layout¶

+------------------------------------------+
| "Chỉnh sửa Mapping"                     |
| Context: [DE name] × [Unit name]         |
+------------------------------------------+
| Trạng thái hiện tại: [DATABASE] ●        |
|                                          |
| Data Element đích:                        |
| [Select: search & choose DE]             |
|                                          |
| Ghi chú:                                 |
| [Textarea]                               |
+------------------------------------------+
|                     [Hủy] [Lưu mapping]  |
+------------------------------------------+

Components¶

/* Dialog — max-w-lg */
/* Header shows context: DE name + Unit name as badges */
px-8 py-6 border-b border-border
  h2.text-xl.font-bold  "Chỉnh sửa Mapping"
  div.flex.items-center.gap-2.mt-2
    Badge(variant="outline")  /* DE name */
    X.h-3.w-3.text-muted-foreground
    Badge(variant="outline")  /* Unit name */

/* Current status indicator */
flex items-center gap-3 p-4 bg-muted/50 rounded-2xl
  div.w-4.h-4.rounded-sm  /* colored dot matching current status */
  span.text-sm.font-semibold  /* status label */

/* DE target selector — shadcn Combobox (searchable select) */
/* Allows searching all Data Elements from Anchored Data */

/* Notes textarea */
Textarea.rounded-2xl  placeholder="Ghi chú về mapping này..."

Behaviors¶

Save: Update cell in matrix, close dialog, toast success
Clear mapping: Button to remove mapping (cell → EMPTY)

SCR-MAP-20: Gợi ý AI Matching & Review¶

Route: /[locale]/current-state-map/ai-matching Trigger: Navigate from sidebar, Dashboard action card, or SCR-DISC-10 Covers GAP-05 (matching trigger), GAP-06 (progress display), UXI-04 (inline review)

Layout — UX REDESIGN (creative, not from mockup)¶

+-----------------------------------------------------------+
| "AI Matching & Rà soát"                                    |
+-----------------------------------------------------------+
| Workflow Stepper (UXI-02):                                 |
| [1. Discovery ✅] → [2. Matching ●] → [3. Rà soát] →     |
| [4. Xác nhận] → [5. Phê duyệt]                           |
+-----------------------------------------------------------+
| ┌─ Batch Controls ──────────────────────────────────────┐ |
| │ Đơn vị: [Select ▼ Sở TC]  Batch: schema.ddl (42 fields)│|
| │                                                       │ |
| │ [▶ Khởi động Matching]  hoặc  [🔄 Re-match tất cả]   │ |
| └───────────────────────────────────────────────────────┘ |
+-----------------------------------------------------------+
| ┌─ Progress (khi đang chạy) ────────────────────────────┐ |
| │ ████████████████░░░░░░░░░░ 67% — 28/42 fields         │ |
| │ Tầng 1 (Rule): 20 done | Tầng 2 (AI): 8 processing   │ |
| │ ETA: ~2 phút                                          │ |
| └───────────────────────────────────────────────────────┘ |
+-----------------------------------------------------------+
| ┌─ Results (inline review — UXI-04) ────────────────────┐ |
| │ [Tab: Cần rà soát (14)] [Tab: Đã xử lý (28)] [All]   │ |
| │                                                       │ |
| │ ┌ ho_ten → Họ và tên (DE002)  ██████████ 0.95  AI+Rule│|
| │ │ Lý do: "Tên trường khớp ngữ nghĩa..."              │ |
| │ │                    [✅ Chấp nhận] [✏️ Sửa] [⏭ Bỏ qua]│|
| │ └─────────────────────────────────────────────────────│ |
| │                                                       │ |
| │ ┌ dia_chi → ? (no match)  ░░░░░░░░░░ 0.32  AI        │ |
| │ │ Gợi ý: Địa chỉ (0.32), Nơi ở (0.28)               │ |
| │ │            [🔍 Chọn DE] [📝 Đề xuất mới] [⏭ Bỏ qua] │|
| │ └─────────────────────────────────────────────────────│ |
| │                                                       │ |
| │ [✅ Chấp nhận tất cả score ≥ 0.8 (12 fields)]        │ |
| └───────────────────────────────────────────────────────┘ |
+-----------------------------------------------------------+

Key UX Decisions (CREATIVE — not from mockup)¶

1. Workflow Stepper (UXI-02)

/* Horizontal stepper showing BPF-01 progress */
flex items-center gap-2 py-4 px-6 bg-muted/30 rounded-2xl mb-6

  /* Each step */
  flex items-center gap-2
    /* Completed */ div.w-7.h-7.bg-success.text-white.rounded-full.flex.items-center.justify-center
      Check.h-4.w-4
    /* Current */  div.w-7.h-7.bg-primary.text-white.rounded-full.flex.items-center.justify-center.ring-4.ring-primary/20
      span.text-xs.font-black  "2"
    /* Upcoming */ div.w-7.h-7.bg-muted.text-muted-foreground.rounded-full.flex.items-center.justify-center
      span.text-xs.font-semibold  "3"
    span.text-sm.font-semibold  /* step label */

  /* Connector line between steps */
  div.h-[2px].w-8.bg-border  /* or bg-success if previous completed */

2. Batch Controls — Matching Trigger (GAP-05)

bg-card rounded-2xl border border-border p-5 flex items-center justify-between

  /* Left: batch info */
  div.flex.items-center.gap-4
    Select  /* Unit picker */
    div.text-sm.text-muted-foreground
      span.font-semibold  /* file name */
      span  /* field count */

  /* Right: action buttons */
  div.flex.gap-3
    Button(variant="default")
      Play.h-4.w-4.mr-2  "Khởi động Matching"
    Button(variant="outline")
      RefreshCw.h-4.w-4.mr-2  "Re-match tất cả"

3. Progress Display (GAP-06)

/* Visible only while matching is running */
bg-primary/5 border border-primary/20 rounded-2xl p-5 space-y-3

  /* Progress bar */
  div.space-y-2
    div.flex.justify-between.text-sm.font-bold
      span  "67% — 28/42 fields"
      span.text-muted-foreground  "ETA: ~2 phút"
    div.h-3.bg-muted.rounded-full.overflow-hidden
      div.h-full.bg-primary.rounded-full.transition-all  /* animated width */

  /* Tier breakdown */
  div.flex.gap-6.text-xs.text-muted-foreground
    span  "Tầng 1 (Rule): 20 done"
    span  "Tầng 2 (AI): 8 processing"
    span  "Manual: 0"

4. Inline Review Cards (UXI-04 — replaces table + popup)

/* Each field result as an expandable card — NOT a table row */
space-y-2

  /* Result card — high confidence (suggested-high) */
  bg-card border border-border rounded-xl p-4
  hover:border-primary/30 transition-all

    /* Header row */
    flex items-center justify-between
      /* Left: field → DE mapping */
      div.flex.items-center.gap-3
        span.font-mono.font-bold.text-sm  "ho_ten"
        ArrowRight.h-4.w-4.text-muted-foreground
        span.font-semibold.text-sm  "Họ và tên"
        Badge.font-mono.text-[10px]  "DE002-DM1.1"
      /* Right: score + source + actions */
      div.flex.items-center.gap-3
        /* Score bar */
        div.flex.items-center.gap-2
          div.h-2.w-12.bg-muted.rounded-full
            div.h-full.bg-success.rounded-full  /* width by score */
          span.font-mono.text-xs.font-bold  "0.95"
        Badge.text-[10px]  "AI+Rule"
        /* INLINE quick actions — no popup needed! */
        Button(variant="outline", size="sm").text-success.border-success
          Check.h-3.w-3  "Chấp nhận"
        Button(variant="ghost", size="sm")
          Pencil.h-3.w-3  /* edit — expands card */
        Button(variant="ghost", size="sm")
          SkipForward.h-3.w-3  /* skip */

    /* Expandable detail (on click "edit" or low-confidence items) */
    /* Shows: AI reasoning, alternatives, DE selector */

  /* Result card — no match (needs attention) */
  bg-card border border-warning/30 rounded-xl p-4
  /* Same structure but warning-themed, shows alternatives */

/* BATCH ACTION — bottom sticky bar */
sticky bottom-0 bg-card/95 backdrop-blur border-t border-border p-4
flex items-center justify-between
  span.text-sm.font-medium  "14 fields cần rà soát"
  Button(variant="default")
    CheckCheck.h-4.w-4.mr-2  "Chấp nhận tất cả score ≥ 0.8 (12 fields)"

Why this is better than the mockup approach: - Inline actions = 1 click instead of 3 (open popup → review → confirm) - Batch accept for high-confidence matches = saves 12 individual clicks - Cards instead of table = AI reasoning visible at a glance, not hidden behind a click - Workflow stepper = Manager always knows where they are in the process

Components¶

Suggestion Table¶

/* MASTER.md table pattern */
bg-card rounded-3xl border border-border overflow-hidden shadow-sm

/* Columns */
/* Field name: font-mono font-bold */
/* Gợi ý DE: font-semibold, with code badge below */
/* Score: progress-like display */
/* Nguồn: badge (Rule-based / AI / Combined) */
/* Trạng thái: badge (suggested-high / pending-review / no-match) */
/* Thao tác: Button "Xử lý" → opens SCR-MAP-21 */

Confidence Score Display¶

/* Score cell — visual bar + number */
flex items-center gap-2
  /* Mini progress bar */
  div.h-2.w-16.bg-muted.rounded-full.overflow-hidden
    div.h-full.rounded-full
    /* >= 0.8: bg-success */
    /* 0.5-0.79: bg-warning */
    /* < 0.5: bg-destructive */
  /* Score text */
  span.text-xs.font-bold.font-mono

Source Badge¶

Badge.text-[10px].font-black.uppercase
  /* rule-based */ bg-slate-100 text-slate-600
  /* ai */         bg-violet-100 text-violet-700
  /* combined */   bg-blue-100 text-blue-700

Status Badge¶

/* suggested-high */ bg-green-100 text-green-700 border-green-200
/* pending-review */ bg-yellow-100 text-yellow-700 border-yellow-200
/* no-match */       bg-slate-100 text-slate-500 border-slate-200

Data & Business Rules¶

Rule	Detail
Default sort	Score DESC (highest confidence first)
Default filter	Status = "Chờ xử lý" (pending-review + suggested-high)
Pagination	20 items per page
Score display	0.00–1.00, 2 decimal places
No auto-accept	All items require Manager review (ASM-INT-012)

Trigger: Click "Xử lý" on a row in SCR-MAP-20

Layout¶

+------------------------------------------+
| "Xử lý gợi ý matching"                  |
+------------------------------------------+
| Field gốc: [ho_ten]  Đơn vị: [Sở TC]    |
| ─────────────────────────────────────    |
| Gợi ý AI:                                |
| ● Họ và tên (DE002-DM1.1) — Score: 0.95 |
|   Nguồn: AI + Rule-based                 |
|   Lý do: "Tên trường khớp ngữ nghĩa..." |
| ─────────────────────────────────────    |
| Gợi ý thay thế:                          |
| ○ Tên tổ chức (DE001-DM2.1) — 0.42      |
| ○ Tên đường (DE003-DM3.1) — 0.35        |
| ─────────────────────────────────────    |
| Quyết định:                              |
| ( ) Chấp nhận gợi ý chính                |
| ( ) Chọn gợi ý thay thế: [Select]       |
| ( ) Chọn DE khác: [Combobox search]      |
| ( ) Bỏ qua (field nội bộ)               |
| ( ) Đề xuất DE mới                       |
|                                          |
| Ghi chú: [textarea]                      |
+------------------------------------------+
|                    [Hủy] [Xác nhận]      |
+------------------------------------------+

Components¶

/* Dialog — max-w-2xl (needs room for alternatives) */

/* Field context */
bg-muted/50 rounded-2xl p-4
  grid grid-cols-2 gap-4
    dt.text-xs.font-bold.text-muted-foreground.uppercase + dd.font-semibold

/* Primary suggestion — highlighted */
bg-primary/5 border border-primary/20 rounded-2xl p-4
  flex items-center gap-3
    Radio(checked)
    div
      span.font-bold  /* DE name */
      Badge.font-mono.text-[10px]  /* DE code */
      span.font-mono.text-sm.font-bold.ml-2  /* score */
    div.mt-2.text-xs.text-muted-foreground  /* AI reasoning */

/* Alternative suggestions */
space-y-2
  /* Each: same layout but bg-transparent, Radio unchecked */

/* Decision radio group */
RadioGroup.space-y-3
  /* Each option: flex items-center gap-3 p-3 rounded-xl hover:bg-muted/50 */

Behaviors¶

Chấp nhận: match_status → ACCEPTED, log to ai_feedback_log
Chọn thay thế: match_status → ACCEPTED with different DE
Bỏ qua: match_status → REJECTED (field is internal)
Đề xuất DE mới: Opens mini-form to propose new Data Element

SCR-MAP-30: Chi tiết Mapping Data Element¶

Route: /[locale]/current-state-map/element/[elementId]

Layout¶

+-----------------------------------------------------------+
| Breadcrumb: Bản đồ hiện trạng > [DE name]                 |
+-----------------------------------------------------------+
| H1: [DE name]    Badges: [code] [status]                  |
+-----------------------------------------------------------+
| Mapping Summary Card                                       |
| ┌─────────────────────────────────────────────┐           |
| │ Đơn vị lưu trữ: Công an, Sở TC, BHXH      │           |
| │ Chồng chéo: 3 đơn vị                       │           |
| │ Confident score (avg): 0.87                 │           |
| │ Đề xuất chủ quản: [Button "Đề xuất"]       │           |
| └─────────────────────────────────────────────┘           |
+-----------------------------------------------------------+
| Unit Detail Table                                          |
| ┌────────┬──────────┬───────┬─────────┬────────┐         |
| │ Đơn vị │ Field gốc│ Score │ Nguồn   │Trạng thái│        |
| └────────┴──────────┴───────┴─────────┴────────┘         |
+-----------------------------------------------------------+

Components¶

Summary card: MASTER.md card with key-value pairs
Unit table: Standard MASTER.md table showing all units storing this DE
Đề xuất chủ quản button: Opens SCR-MAP-31

Trigger: Click "Đề xuất chủ quản" on SCR-MAP-30

Layout¶

+------------------------------------------+
| "Đề xuất đơn vị chủ quản"               |
| Data Element: [DE name] [code]            |
+------------------------------------------+
| Đơn vị đang lưu trữ:                     |
| ● Công an Tỉnh — Phòng CS QLHC          |
| ○ Sở Tư pháp — Phòng Hộ tịch            |
| ○ BHXH — Phòng Quản lý sổ               |
|                                          |
| Lý do đề xuất: [textarea]                |
+------------------------------------------+
|                [Hủy] [Đề xuất chủ quản]  |
+------------------------------------------+

Components¶

/* Dialog — max-w-lg */
/* RadioGroup of units that currently store this DE */
RadioGroup.space-y-3
  /* Each unit */
  label.flex.items-center.gap-3.p-4.rounded-2xl.border.border-border
  .hover:bg-muted/50.cursor-pointer.transition-all
  .has-[:checked]:bg-primary/5.has-[:checked]:border-primary
    RadioGroupItem
    div
      p.font-black.text-primary.italic  /* Unit name */
      p.text-xs.text-muted-foreground  /* Department */

/* Reason textarea — required */
Textarea.rounded-2xl  min 20 chars

Business Rules¶

Only units that currently store the DE shown as options
Reason is required (min 20 chars)
Ownership is at Phòng/Ban level (IDxx.xx.xx)
Save → toast success, return to SCR-MAP-30

Accessibility (all screens)¶

Dialog focus trap and Escape to close
Radio groups: arrow keys to navigate options
Suggestion scores: aria-label="Điểm tin cậy: 0.95 trên 1.00"
Table: sortable headers with aria-sort
Loading states: aria-busy="true" on containers

MASTER.md Overrides¶

What	MASTER.md	This Page	Reason
Dialog max-width (SCR-MAP-21)	`max-w-lg`	`max-w-2xl`	AI suggestions with alternatives need more space

Page Design: Mapping & AI Review Screens¶

SCR-MAP-11: Popup Chỉnh sửa Mapping¶

Layout¶

Components¶

Behaviors¶

SCR-MAP-20: Gợi ý AI Matching & Review¶

Layout — UX REDESIGN (creative, not from mockup)¶

Key UX Decisions (CREATIVE — not from mockup)¶

Components¶

Suggestion Table¶

Confidence Score Display¶

Source Badge¶

Status Badge¶

Data & Business Rules¶

SCR-MAP-21: Popup Xử lý Gợi ý AI¶

Layout¶

Components¶

Behaviors¶

SCR-MAP-30: Chi tiết Mapping Data Element¶

Layout¶

Components¶

SCR-MAP-31: Popup Đề xuất Chủ quản¶

Layout¶

Components¶

Business Rules¶

Accessibility (all screens)¶

MASTER.md Overrides¶