Page Design: Đề xuất Mở rộng Anchored Data (Proposal Workflow)¶

NEW screens — Covers GAP-02, GAP-03, GAP-04. Applies to: SCR-ANCHOR-14 (propose popup), SCR-ANCHOR-15 (proposal list), SCR-ANCHOR-16 (approve popup) Features: EP-02-004 (Data Owner đề xuất), EP-02-005 (Manager phê duyệt)

Route: Dialog overlay — triggered from Tra cứu Từ điển or Bản đồ Hiện trạng Users: Data Owner Trigger: "Đề xuất Data Element mới" button (visible on SCR-DICT-10 no-results, SCR-MAP-10 context menu)

Layout¶

+------------------------------------------+
| "Đề xuất mở rộng Anchored Data"         |
| "Đề xuất Sub Domain hoặc Data Element    |
|  mới trong Domain đã có"                 |
+------------------------------------------+
| Loại đề xuất:                             |
| [Tab: Data Element] [Tab: Sub Domain]     |
| ─────────────────────────────────────    |
| TAB 1: Đề xuất Data Element mới          |
|                                          |
| Domain: [Select ▼]                        |
| Sub Domain: [Select ▼] (filtered)         |
|                                          |
| Tên Data Element: [Input]                 |
| Mô tả: [Textarea]                        |
| Kiểu dữ liệu: [Select ▼]               |
| Lý do đề xuất: [Textarea]               |
| ─────────────────────────────────────    |
| ⚠️ "Số CCCD" đã tồn tại (DE001-DM1.1)  |
| (similar name warning)                    |
+------------------------------------------+
|              [Hủy] [Gửi đề xuất]        |
+------------------------------------------+

Key UX Decisions (CREATIVE — not from mockup)¶

1. Smart Similar Name Detection

/* When user types DE name, system checks for similar names in real-time */
/* Warning banner appears below name field if similar found */
bg-warning/10 border border-warning/20 rounded-xl p-3 mt-2
flex items-center gap-3
  AlertTriangle.h-4.w-4.text-warning
  div.text-sm
    span.font-semibold.text-warning  "Tên tương tự đã tồn tại:"
    span.text-muted-foreground  "Số CCCD (DE001-DM1.1)"
    Button(variant="link", size="sm")  "Xem chi tiết"

2. Context-Aware Entry - If triggered from SCR-DICT-10 search (no results) → pre-fill search term as DE name - If triggered from SCR-MAP-10 (unmatched field) → pre-fill field name + source metadata - Reduces typing, speeds up proposal

3. Submission Behavior - Toast: "Đề xuất đã được gửi cho Manager phê duyệt" - Status: PENDING → visible in "Đề xuất của tôi" section

SCR-ANCHOR-15: Danh sách Đề xuất (Manager Review)¶

Route: /[locale]/anchored-data/proposals Users: Manager Access: Tab or link within ANCHOR module sidebar

Layout — UX IMPROVEMENT (not from mockup)¶

+-----------------------------------------------------------+
| "Đề xuất mở rộng Anchored Data"                           |
| Badge: "5 đề xuất chờ phê duyệt"                         |
+-----------------------------------------------------------+
| [Tab: Chờ phê duyệt (5)] [Tab: Đã xử lý]                |
+-----------------------------------------------------------+
|                                                           |
| ┌─ Proposal Card ─────────────────────────────────────┐  |
| │ 📝 "Chỉ số AQI"                        [PENDING] 🟡│  |
| │ Đề xuất bởi: Chị Lan (Sở TNMT) — 2 giờ trước       │  |
| │ Loại: Data Element → DM3 (Môi trường) > DM3.2       │  |
| │ Kiểu: Number | Lý do: "Cần theo dõi chất lượng..." │  |
| │                                                     │  |
| │ [✅ Phê duyệt]  [❌ Từ chối]  [👁 Xem chi tiết]   │  |
| └─────────────────────────────────────────────────────┘  |
|                                                           |
| ┌─ Proposal Card ─────────────────────────────────────┐  |
| │ 📝 "Mã vùng địa lý"                    [PENDING] 🟡│  |
| │ ...                                                 │  |
| │ [✅ Phê duyệt]  [❌ Từ chối]  [👁 Xem chi tiết]   │  |
| └─────────────────────────────────────────────────────┘  |
+-----------------------------------------------------------+

Key UX Decisions (CREATIVE)¶

1. Card-based instead of Table — Each proposal is a card with inline actions - Why: Proposals have rich context (proposer, domain, reason) that reads better as cards than compressed table rows - Quick approve/reject right on the card — fewer clicks

2. Inline Quick Actions

/* Approve button — direct action, no popup for simple cases */
Button(variant="outline", size="sm").text-success.border-success.hover:bg-success.hover:text-white
  Check.h-4.w-4.mr-1  "Phê duyệt"

/* Reject button — opens rejection reason popup (SCR-ANCHOR-16) */
Button(variant="outline", size="sm").text-destructive.border-destructive.hover:bg-destructive.hover:text-white
  X.h-4.w-4.mr-1  "Từ chối"

/* View detail — expands card inline */
Button(variant="ghost", size="sm")
  Eye.h-4.w-4.mr-1  "Xem chi tiết"

3. Approve Flow - Click "Phê duyệt" → small inline confirmation: "Mã tự động sinh: DE047-DM3.2. Xác nhận?" - No popup needed — inline expand with [Xác nhận] [Hủy] buttons - After confirm: card slides out with success animation, count updates - Toast: "Đề xuất đã được phê duyệt. Mã: DE047-DM3.2"

Proposal Card Component¶

bg-card rounded-2xl border border-border p-5 space-y-3
hover:border-primary/20 transition-all

/* Header row */
flex items-center justify-between
  /* Title + icon */
  flex items-center gap-3
    FileText.h-5.w-5.text-primary
    h3.font-bold.text-lg.text-foreground  /* proposed name */
  /* Status badge */
  Badge  /* PENDING (yellow) / APPROVED (green) / REJECTED (red) */

/* Meta row */
flex items-center gap-4 text-sm text-muted-foreground
  /* Proposer */ User.h-4.w-4 + name + role badge
  /* Time */ Clock.h-4.w-4 + relative time
  /* Type */ Tag.h-4.w-4 + "Data Element" or "Sub Domain"

/* Context row */
text-sm
  /* Domain path */ "DM3 (Môi trường) > DM3.2 (Chất lượng)"
  /* Data type */ "Kiểu: Number"
  /* Reason preview — truncated, expand for full */

/* Action row */
flex items-center gap-2 pt-2 border-t border-border
  /* Approve / Reject / View buttons */

Trigger: Click "Từ chối" on proposal card Simple rejection dialog

+------------------------------------------+
| "Từ chối đề xuất"                        |
| "[Proposed DE name]" từ [proposer name]   |
+------------------------------------------+
| Lý do từ chối: *                          |
| [Textarea — required]                     |
|                                          |
| ⓘ Data Owner sẽ nhận thông báo về       |
|   quyết định từ chối kèm lý do.          |
+------------------------------------------+
|               [Hủy] [Xác nhận từ chối]   |
+------------------------------------------+

Data Owner: "Đề xuất của tôi" Section¶

Visible on SCR-ANCHOR-10 (if Data Owner has access) or as a standalone mini-page

/* Section within Dashboard or as tab in ANCHOR module */
space-y-3

h3.font-semibold.text-lg  "Đề xuất của tôi"

/* Proposal status cards — compact */
flex flex-col gap-2
  /* Each mini-card */
  flex items-center justify-between p-3 bg-muted/50 rounded-xl
    div.flex.items-center.gap-3
      FileText.h-4.w-4.text-muted-foreground
      span.font-medium.text-sm  /* proposed name */
    Badge(size="sm")  /* PENDING / APPROVED / REJECTED */

Accessibility¶

Proposal cards: role="article", aria-label="Đề xuất [name] từ [proposer]"
Quick actions: aria-label="Phê duyệt đề xuất [name]"
Inline confirmation: aria-live="polite" announcing auto-generated code
Similar name warning: role="alert"
Tab counts: aria-label="Chờ phê duyệt, 5 đề xuất"

MASTER.md Overrides¶

What	MASTER.md	This Page	Reason
List layout	Table pattern	Card list pattern	Proposals have rich context better suited to cards. Inline actions reduce clicks
Approve flow	Dialog pattern	Inline expand	Simple approval doesn't warrant full dialog. Fewer clicks.