Bỏ qua

Page Design: Chi tiết Data Element (Anchored Data)

Follows MASTER.md — detail/view page pattern. Applies to: SCR-ANCHOR-20 Route: /[locale]/anchored-data/[elementId] Users: Manager (full view + edit), Approver (read-only)

Layout

+-----------------------------------------------------------+
| Breadcrumb: Dữ liệu định vị > [Domain] > [Sub Domain]    |
+-----------------------------------------------------------+
| [Back ←]                                                   |
| H1: "Số CCCD"                                             |
| Badges: [DM1.1] [DRAFT] [INTERNAL]                        |
+-----------------------------------------------------------+
| Info Card                                                  |
| ┌───────────────────────┬───────────────────────┐         |
| │ Mã ID                 │ DE001-DM1.1           │         |
| │ Domain                │ Con người              │         |
| │ Sub Domain            │ Định danh              │         |
| │ Kiểu dữ liệu         │ Text                   │         |
| │ Mức độ nhạy cảm       │ INTERNAL               │         |
| │ Đơn vị chủ quản       │ (Chưa gán)             │         |
| │ Cơ sở pháp lý         │ Luật Căn cước 2014     │         |
| └───────────────────────┴───────────────────────┘         |
+-----------------------------------------------------------+
| Mô tả                                                     |
| "Số định danh cá nhân trên Căn cước công dân..."          |
+-----------------------------------------------------------+

Components

/* MASTER.md breadcrumb pattern */
flex items-center gap-2 text-sm text-muted-foreground mb-4
  a.hover:text-foreground  "Dữ liệu định vị"
  ChevronRight.h-4.w-4
  span  "[Domain name]"
  ChevronRight.h-4.w-4
  span.font-semibold.text-foreground  "[Sub Domain name]"

Page Header

space-y-3 mb-8
  /* Back button */
  Button(variant="ghost", size="sm")
    ArrowLeft.h-4.w-4.mr-2  "Quay lại"

  /* Title */
  h1.text-3xl.font-extrabold.text-foreground.tracking-tight  /* DE name */

  /* Badge row */
  flex items-center gap-2
    Badge(variant="outline").font-mono  /* code: DE001-DM1.1 */
    Badge  /* status: DRAFT/IN_REVIEW/APPROVED/PUBLISHED — color per MASTER.md */
    Badge  /* sensitivity: PUBLIC/INTERNAL/CONFIDENTIAL/SECRET */

Info Card (key-value pairs)

bg-card rounded-3xl border border-border shadow-sm p-8

/* Grid layout: 2 columns on desktop, 1 on mobile */
grid grid-cols-1 lg:grid-cols-2 gap-y-6 gap-x-12

  /* Each field */
  div
    dt.text-xs.font-bold.text-muted-foreground.uppercase.tracking-widest  /* label */
    dd.text-sm.font-semibold.text-foreground.mt-1  /* value */

  /* Empty value */
  dd.text-sm.text-muted-foreground.italic  "(Chưa gán)"

Fields displayed:

Label Value Notes
Mã ID DE001-DM1.1 font-mono
Domain Con người Link to domain in tree
Sub Domain Định danh Link to sub domain
Kiểu dữ liệu Text From enum
Mức độ nhạy cảm INTERNAL Badge colored
Trạng thái DRAFT Badge colored
Đơn vị chủ quản (Chưa gán) / Công an Tỉnh Italic if null
Cơ sở pháp lý Luật Căn cước 2014 Optional field
Ngày tạo 24/03/2026 Read-only
Ngày cập nhật 24/03/2026 Read-only

Description Section

mt-6
  h3.text-lg.font-semibold.text-foreground.mb-3  "Mô tả"
  p.text-sm.text-muted-foreground.leading-relaxed.bg-muted/30.rounded-2xl.p-6
    /* Full description text */

Action Bar (Manager only)

/* Fixed or at top-right of header area */
flex gap-3
  Button(variant="outline")  "Sửa"  /* opens SCR-ANCHOR-13 in edit mode */

Behaviors

State Trigger Display
Loading Page init Skeleton card
Default Data loaded Full detail view
Not found Invalid ID 404 with back link
Manager view role=Manager Edit button visible
Approver view role=Approver Edit button hidden, read-only

Responsive

Breakpoint Changes
Mobile (< 768px) Info card: 1-col. p-4. Breadcrumb truncated
Desktop (>= 1024px) Info card: 2-col. p-10. Full breadcrumb

Accessibility

  • Breadcrumb: nav with aria-label="Breadcrumb"
  • Badges: aria-label="Trạng thái: DRAFT", aria-label="Mức nhạy cảm: INTERNAL"
  • Back button: aria-label="Quay lại danh sách dữ liệu định vị"
  • Info card: <dl> semantic with <dt>/<dd> pairs

MASTER.md Overrides

No overrides — fully follows MASTER.md.