Page Design: Tra cứu Từ điển Dữ liệu (Dictionary)¶

Follows MASTER.md — uses Domain-Specific Pattern "Search-centric". Applies to: SCR-DICT-10, SCR-DICT-20, SCR-DICT-30, SCR-DICT-40 Route: /[locale]/dictionary Users: Staff, Data Owner, Manager, Approver

SCR-DICT-10: Tra cứu Từ điển (Search)¶

Layout¶

+-----------------------------------------------------------+
|              (centered, max-w-4xl)                         |
|                                                           |
|         TRA CỨU DỮ LIỆU CHUẨN                           |
|   Tìm kiếm định nghĩa dữ liệu và đơn vị chủ quản       |
|                                                           |
|   🔍 [===== Large search input =====]                    |
|                                                           |
|   [Link: Duyệt theo Domain] [Link: Duyệt theo Tổ chức]  |
|                                                           |
|   ┌─────────────────┐  ┌─────────────────┐               |
|   │ 📊 Số CCCD      │  │ 📊 Mã số thuế   │               |
|   │ DE001-DM1.1     │  │ DE001-DM2.1     │               |
|   │ Chủ quản:       │  │ Chủ quản:       │               |
|   │ Công an Tỉnh    │  │ Cục Thuế        │               |
|   └─────────────────┘  └─────────────────┘               |
+-----------------------------------------------------------+

Components¶

Hero Search¶

/* Centered container */
max-w-4xl mx-auto space-y-12 pt-12

/* Title block */
text-center space-y-4
  h1.text-4xl.font-black.text-foreground.tracking-tighter
    "TRA CỨU DỮ LIỆU CHUẨN"
  p.text-muted-foreground.font-medium.text-lg
    "Tìm kiếm định nghĩa dữ liệu và đơn vị chủ quản cấp Tỉnh/Thành phố"

/* Search input — MASTER.md Large Search Input */
relative group
  input.w-full.px-10.py-6.pl-16.rounded-full
  .border.border-border.shadow-2xl.shadow-primary/10
  .outline-none.focus:ring-4.focus:ring-blue-100.dark:focus:ring-blue-900
  .focus:border-primary.transition-all.text-xl.font-medium
    placeholder="Nhập tên trường dữ liệu (ví dụ: CCCD, Mã số thuế...)"
  /* Search icon — left positioned */
  Search.absolute.left-7.top-1/2.-translate-y-1/2.h-7.w-7
  .text-muted-foreground.group-focus-within:text-primary.transition-colors

/* Browse links */
flex justify-center gap-6 text-sm
  a.text-primary.font-bold.hover:underline  "Duyệt theo Domain →"
  a.text-primary.font-bold.hover:underline  "Duyệt theo Tổ chức →"

Result Cards Grid¶

/* Grid — 2 columns */
grid grid-cols-1 md:grid-cols-2 gap-6

/* Each card — MASTER.md Large Interactive Card */
bg-card border border-border rounded-[32px] shadow-sm p-8
hover:shadow-xl hover:border-primary/20 transition-all cursor-pointer
flex items-start gap-6 group

  /* Icon container */
  p-5 bg-primary/10 text-primary rounded-3xl
  group-hover:bg-primary group-hover:text-white transition-all
    Database.h-6.w-6

  /* Content */
  div
    h4.font-black.text-foreground.text-xl.tracking-tight  /* DE name */
    p.text-xs.font-mono.text-muted-foreground.font-bold.mb-3.uppercase.tracking-widest
      /* "ID: DE001-DM1.1" */
    Badge.bg-primary/5.text-primary.border-primary/10.text-[11px].font-black
      /* "Chủ quản: Công an Tỉnh" */

No Results State¶

text-center py-12
  SearchX.h-12.w-12.text-muted-foreground/30.mx-auto
  p.text-lg.font-bold.text-muted-foreground.mt-4
    "Không tìm thấy kết quả"
  p.text-sm.text-muted-foreground.mt-2
    "Thử từ khóa khác hoặc duyệt theo Domain / Tổ chức"

Data & Business Rules¶

Rule	Detail
Search scope	Only PUBLISHED Data Elements
Search fields	DE name, DE description, DE code, owner unit name
Debounce	300ms debounce on keystroke
Results	Max 20, sorted by relevance

SCR-DICT-20: Chi tiết Data Element (Tra cứu)¶

Layout¶

+-----------------------------------------------------------+
| Breadcrumb: Từ điển > [DE name]                            |
+-----------------------------------------------------------+
| H1: [DE name]    Badges: [code] [PUBLISHED]               |
+-----------------------------------------------------------+
| Info Card (same pattern as SCR-ANCHOR-20)                  |
| + Owner unit info                                          |
| + Legal basis                                              |
| + Source system info                                       |
+-----------------------------------------------------------+
| Description section                                        |
+-----------------------------------------------------------+

Components¶

Same pattern as SCR-ANCHOR-20 detail page
Additional fields: Đơn vị chủ quản (with department detail), Cơ sở pháp lý, Hệ thống nguồn
Read-only for all roles (published data)
No edit button (only Approver can change via Quy hoạch workflow)
Back button: returns to search results

SCR-DICT-30: Duyệt theo Cây Domain¶

Layout¶

+-----------------------------------------------------------+
| "Duyệt theo Domain"                                       |
| Breadcrumb: Từ điển > Duyệt theo Domain                   |
+-----------------------------------------------------------+
| Tree view (expandable)                                     |
| ▼ Con người [DM1]                          3 sub, 15 DE   |
|   ├ Định danh [DM1.1]                           8 DE      |
|   │  • Số CCCD — Công an Tỉnh                             |
|   │  • Họ và tên — Công an Tỉnh                           |
|   └ Y tế & Sức khỏe [DM1.2]                     7 DE     |
| ▶ Tổ chức [DM2]                            2 sub, 10 DE   |
| ▶ Đất đai [DM3]                            4 sub, 22 DE   |
+-----------------------------------------------------------+

Components¶

Same tree table pattern as SCR-ANCHOR-10 but read-only (no CRUD actions)
Additional: each DE row shows owner unit name on the right
Click DE → navigate to SCR-DICT-20

Differences from SCR-ANCHOR-10¶

Aspect	SCR-ANCHOR-10	SCR-DICT-30
Users	Manager (CRUD)	All roles (read-only)
Actions column	"Sửa" links	None
Add button	"+ Thêm Domain"	None
Extra info	—	Owner unit shown per DE row

SCR-DICT-40: Duyệt theo Cây Tổ chức¶

Layout¶

+-----------------------------------------------------------+
| "Duyệt theo Tổ chức"                                      |
| Breadcrumb: Từ điển > Duyệt theo Tổ chức                  |
+-----------------------------------------------------------+
| Tree view (expandable)                                     |
| ▼ Công an Tỉnh                                    15 DE   |
|   ├ Phòng CS QLHC về TTXH                         8 DE    |
|   │  • Số CCCD [DE001-DM1.1]                              |
|   │  • Họ và tên [DE002-DM1.1]                            |
|   └ Phòng CSGT                                    7 DE    |
| ▶ Sở Tư pháp                                      10 DE   |
| ▶ Cục Thuế                                        12 DE   |
+-----------------------------------------------------------+

Components¶

Same tree table pattern but organized by Organization Unit instead of Domain
Level 1: Sở/Ban/Ngành (bold, expand icon)
Level 2: Phòng/Ban (indent, italic)
Level 3: Data Elements owned by that unit (deep indent, bullet)
Click DE → navigate to SCR-DICT-20

Responsive (all DICT screens)¶

Breakpoint	Changes
Mobile (< 768px)	Search: py-4 text-base (smaller). Cards: 1-col. Tree: reduce indent. p-4
Tablet (768-1023px)	Search: py-5 text-lg. Cards: 1-col. p-6
Desktop (>= 1024px)	Full layout. max-w-4xl for search, max-w-6xl for trees

Accessibility¶

Search: role="search", aria-label="Tìm kiếm Data Element"
Results announced: aria-live="polite" → "Tìm thấy 12 kết quả"
Card grid: aria-label on each card with DE name + owner
Tree views: role="tree", aria-expanded, keyboard arrow navigation

MASTER.md Overrides¶

What	MASTER.md	This Page	Reason
Content max-width (SCR-DICT-10)	`max-w-6xl`	`max-w-4xl`	Search-centric layout is narrower and centered
Content padding-top (SCR-DICT-10)	`p-10`	`pt-12`	Extra top space for hero search visual weight