Bỏ qua

Page Design: Quản trị Hệ thống (System Admin)

Follows MASTER.md — CRUD List + Dialog + Tree patterns. Applies to: SCR-SYS-10, SCR-SYS-11, SCR-SYS-20, SCR-SYS-30, SCR-SYS-31, SCR-SYS-40 Route: /[locale]/admin Users: Admin

SCR-SYS-10: Danh sách Người dùng

Layout

+-----------------------------------------------------------+
| "Quản lý Người dùng"                                      |
|                                  [+ Thêm người dùng]      |
+-----------------------------------------------------------+
| [Filter: Vai trò ▼] [Filter: Đơn vị ▼] [Search...]       |
+-----------------------------------------------------------+
| Table                                                      |
| ┌──────┬──────────┬──────────┬──────────┬────────┬───────┐|
| │ Họ tên│ Email    │ Đơn vị   │ Vai trò  │Trạng thái│Thao tác│|
| ├──────┼──────────┼──────────┼──────────┼────────┼───────┤|
| │ Nguyễn│ ng@...  │ Sở TC    │ Manager  │ Active │ [...]│|
| │ Văn A │          │          │ D.Owner  │        │      │|
| └──────┴──────────┴──────────┴──────────┴────────┴───────┘|
+-----------------------------------------------------------+
| Pagination: 20 items/page                                  |
+-----------------------------------------------------------+

Components

  • Standard CRUD list following MASTER.md table pattern
  • Vai trò column: Multiple badges per user (multi-role support)
  • Manager (blue), Data Owner (cyan), Approver (violet), Staff (slate), Admin (red)
  • Trạng thái: Active (green), Inactive (slate), Chưa phân quyền (yellow)
  • Thao tác: DropdownMenu → Sửa, Phân quyền, Tạm dừng/Kích hoạt, Xóa
  • Xóa: AlertDialog. Cannot delete self.

SCR-SYS-11: Popup Thêm/Sửa Người dùng

Fields

Field Type Required Component Notes
Họ và tên Text Yes <Input />
Email Email Yes <Input type="email" /> Unique, SSO mapping key
Đơn vị Select Yes <Select /> tree Organization unit picker
Vai trò Multi-select No <Checkbox /> group Manager/Data Owner/Approver/Staff/Admin
Trạng thái Toggle Yes <Switch /> Active/Inactive

Components

/* Dialog — max-w-lg */

/* Role checkboxes — multi-select */
space-y-3
  label.flex.items-center.gap-3.p-3.rounded-xl.border.border-border
  .hover:bg-muted/50.cursor-pointer.has-[:checked]:bg-primary/5.has-[:checked]:border-primary
    Checkbox
    div
      p.font-semibold  /* role name */
      p.text-xs.text-muted-foreground  /* role description */

Business Rules

  • Email must be unique (duplicate check on save)
  • Pre-provisioning: Admin creates user before first SSO login
  • Cannot remove Admin role from self

SCR-SYS-20: Phân quyền Vai trò

Layout

+-----------------------------------------------------------+
| "Ma trận Phân quyền"                                      |
+-----------------------------------------------------------+
| Matrix: Vai trò (columns) × Chức năng (rows)              |
| ┌────────────────┬─────────┬──────────┬─────────┬───────┐|
| │ Chức năng      │ Manager │Data Owner│Approver │ Staff │|
| ├────────────────┼─────────┼──────────┼─────────┼───────┤|
| │ CRUD Anchor    │ ✅      │ ❌       │ 👁️ View │ ❌    │|
| │ Upload metadata│ ✅      │ ❌       │ ❌      │ ❌    │|
| │ Run matching   │ ✅      │ ❌       │ ❌      │ ❌    │|
| │ Confirm map    │ ❌      │ ✅       │ ❌      │ ❌    │|
| │ Approve        │ ❌      │ ❌       │ ✅      │ ❌    │|
| │ Search dict    │ ✅      │ ✅       │ ✅      │ ✅    │|
| └────────────────┴─────────┴──────────┴─────────┴───────┘|
+-----------------------------------------------------------+

Components

/* Read-only matrix (informational, not editable) */
bg-card rounded-3xl border border-border overflow-hidden shadow-sm

/* Cell states */
/* Full access */  CheckCircle.h-4.w-4.text-success
/* View only */    Eye.h-4.w-4.text-info
/* No access */    X.h-4.w-4.text-muted-foreground/30

Notes

  • This is a read-only reference matrix — roles are defined by system, not configurable by Admin
  • Matches role-matrix.md business document
  • Admin assigns roles to users (SCR-SYS-11), not modifies role permissions

SCR-SYS-30: Quản lý Cây tổ chức

+-----------------------------------------------------------+
| "Quản lý Cây tổ chức"                                     |
|                       [📥 Import CSV]  [+ Thêm đơn vị]    |
+-----------------------------------------------------------+
| Tree view (same pattern as SCR-ANCHOR-10 tree)             |
| ▼ Thành phố XYZ [ID01]                                    |
|   ├ Công an Tỉnh [ID01.01]                                |
|   │  ├ Phòng CS QLHC [ID01.01.01]               [Sửa][X] |
|   │  └ Phòng CSGT [ID01.01.02]                  [Sửa][X] |
|   ├ Sở Tư pháp [ID01.02]                                  |
|   └ Sở Y tế [ID01.03]                                     |
+-----------------------------------------------------------+

Components

  • Same tree table pattern as SCR-ANCHOR-10 but for org units
  • Level 1: Tỉnh/Thành phố (TINH)
  • Level 2: Sở/Ban/Ngành (SO)
  • Level 3: Phòng/Ban (PHONG)
  • Actions: "Sửa" (→ SCR-SYS-31), "Xóa" (AlertDialog, only if no users/DEs assigned)
  • ID codes: IDxx.xx.xx format in font-mono
  • "Import CSV" button (GAP-14): navigates to SCR-SYS-40 with "Cây tổ chức" data type pre-selected
/* Import CSV button — secondary, in header next to "+ Thêm đơn vị" */
Button(variant="outline")
  Upload.h-4.w-4.mr-2  "Import CSV"
  /* On click: navigate to /admin/master-data?type=org-tree */

SCR-SYS-31: Popup Thêm/Sửa Đơn vị

Fields

Field Type Required Component
Tên đơn vị Text Yes <Input />
Mã đơn vị Text — Auto-generated IDxx.xx.xx, read-only in edit
Đơn vị cha Select Yes Tree select (existing units)
Cấp Enum — Auto-determined from parent: TINH/SO/BAN/PHONG 
/* Dialog — max-w-lg */
/* Same shell as ANCHOR popups */

SCR-SYS-40: Quản lý Master Data & Import

Layout

+-----------------------------------------------------------+
| "Master Data & Import"                                     |
| "Import dữ liệu nền tảng khi triển khai hệ thống"        |
+-----------------------------------------------------------+
| [Tab: Import CSV] [Tab: Danh mục dùng chung]              |
+-----------------------------------------------------------+
| TAB 1: Import CSV                                          |
| ┌─────────────────────────────────────────────────┐       |
| │ Loại dữ liệu: [Select ▼]                       │       |
| │ (Cây tổ chức / Domain / Sub Domain / Data Elem) │       |
| │                                                 │       |
| │ [Download template CSV]                         │       |
| │                                                 │       |
| │ ┌─────────────────────────────────┐             │       |
| │ │  📂 Kéo thả file CSV hoặc click│             │       |
| │ │     để chọn file (max 10MB)     │             │       |
| │ └─────────────────────────────────┘             │       |
| │                                                 │       |
| │ Chiến lược trùng lặp:                          │       |
| │ (●) Bỏ qua dòng trùng  (○) Ghi đè  (○) Dừng  │       |
| │                                                 │       |
| │              [Import dữ liệu]                   │       |
| └─────────────────────────────────────────────────┘       |
+-----------------------------------------------------------+
| TAB 2: Danh mục dùng chung                                |
| Table: Kiểu dữ liệu, Sensitivity Level, Trạng thái       |
| (simple CRUD — inline editable)                            |
+-----------------------------------------------------------+
| Import History (recent imports table)                      |
+-----------------------------------------------------------+

Components

Import Tab

/* Data type selector */
Select.w-full  placeholder="Chọn loại dữ liệu để import..."

/* Template download */
Button(variant="outline", size="sm")
  Download.h-4.w-4.mr-2  "Download template CSV"

/* Drop zone — same as SCR-DISC-11 */
border-2.border-dashed.border-border.rounded-2xl.p-8.text-center
.hover:border-primary.hover:bg-primary/5.transition-all.cursor-pointer

/* Duplicate strategy — radio group inline */
RadioGroup.flex.gap-6
  /* Bỏ qua / Ghi đè / Dừng */

/* Import button */
Button(variant="default")  "Import dữ liệu"

/* Import result (after import) */
bg-muted/50 rounded-2xl p-6 space-y-2
  /* Success count */ CheckCircle + "X dòng import thành công"
  /* Error count */   AlertTriangle + "Y dòng bị lỗi"
  /* Error detail — expandable */
  Collapsible
    CollapsibleTrigger  "Xem chi tiết lỗi"
    CollapsibleContent
      /* Error table: line number, field, error message */

Catalog Tab

/* Simple table with inline edit */
/* Columns: Tên | Giá trị | Thao tác (Sửa/Xóa) */
/* These are system catalogs: data_type enum, sensitivity_level enum, status enum */
/* Pre-seeded on deploy, Admin can add/edit */

Import History

/* Table at bottom showing past imports */
/* Columns: Loại | File | Ngày | Kết quả (X success, Y error) | Status badge */

Business Rules

Rule Detail
Template CSV System provides downloadable CSV template per data type
Validation Check format, required fields, duplicate codes before import
Hierarchy Org tree import: parent must exist before child (ordered CSV)
Codes Auto-generated for new items, validated format for imports
Prerequisite This is the first step after system deploy — must complete before other Epics

Responsive (all SYS screens)

Breakpoint Changes
Mobile (< 768px) Tables: card view. Tree: reduced indent. Import: stacked. p-4
Desktop (>= 1024px) Full layout. p-10. max-w-6xl

Accessibility

  • User table: aria-label="Danh sách người dùng"
  • Role checkboxes: aria-label="Chọn vai trò Manager cho người dùng"
  • Org tree: role="tree", aria-expanded
  • Import drop zone: aria-label="Khu vực tải file CSV", keyboard Enter/Space
  • Import results: aria-live="polite" announcing success/error counts

MASTER.md Overrides

No overrides — fully follows MASTER.md patterns.