Bỏ qua

Page Design: Hoạch định Dữ liệu Tương lai (Future)

Follows MASTER.md — CRUD List + Dialog + Detail patterns. Applies to: SCR-FUTURE-10, SCR-FUTURE-11, SCR-FUTURE-20 Route: /[locale]/future-data Users: Manager (CRUD), Approver (view + approve)

SCR-FUTURE-10: Danh sách Data Element Tương lai

Layout

+-----------------------------------------------------------+
| "Hoạch định Dữ liệu Tương lai"                            |
| "Data Element cần tạo lập cho phát triển Thành phố"       |
|                                  [+ Thêm DE tương lai]    |
+-----------------------------------------------------------+
| [Filter: Domain ▼] [Filter: Mức ưu tiên ▼] [Search...]   |
+-----------------------------------------------------------+
| Table                                                      |
| ┌────────────┬──────────┬────────────┬──────────┬────────┐|
| │ Tên DE     │ Domain   │ Mục tiêu   │ Ưu tiên  │Trạng thái│|
| ├────────────┼──────────┼────────────┼──────────┼────────┤|
| │ Chỉ số AQI │ Môi trường│ QH đô thị │ Cao      │ Draft  │|
| └────────────┴──────────┴────────────┴──────────┴────────┘|
+-----------------------------------------------------------+

Components

  • Table: MASTER.md pattern. Click row → SCR-FUTURE-20
  • Priority badge: Cao (red), Trung bình (yellow), Thấp (slate)
  • "+ Thêm" button: Manager only → opens SCR-FUTURE-11
  • Approver view: No add button, but can see all items

Data & Business Rules

Rule Detail
Default sort Priority DESC, then name ASC
These are Data Elements with is_future = true
Approver can approve/reject items (status change)

SCR-FUTURE-11: Popup Thêm/Sửa DE Tương lai

Fields

Field Type Required Component
Tên Data Element Text Yes <Input />
Domain Select Yes <Select /> from existing domains
Sub Domain Select Yes <Select /> filtered by domain
Mô tả Textarea Yes <Textarea /> min 10 chars
Mục tiêu phát triển Textarea Yes <Textarea /> — future_objective field
Kiểu dữ liệu Enum Yes <Select />
Mức ưu tiên Enum No <Select /> Cao/Trung bình/Thấp

Components

/* Dialog — max-w-xl */
/* Same dialog shell as ANCHOR popups */
/* Domain → Sub Domain cascading select */

Business Rules

  • Creates Data Element with is_future = true, status = DRAFT, owner = NULL
  • future_objective is required (entity spec BR)
  • Auto-generated code: DE{NNN}-DM{N}.{M}

SCR-FUTURE-20: Chi tiết DE Tương lai

Components

  • Same pattern as SCR-ANCHOR-20 detail page
  • Additional fields: Mục tiêu phát triển, Mức ưu tiên
  • Badge: "Dữ liệu Tương lai" special badge (blue-violet)
  • Manager actions: "Sửa" button
  • Approver actions: "Phê duyệt" / "Từ chối" buttons (if status = DRAFT)

SCR-FUTURE-21: Popup Phê duyệt/Từ chối (GAP-11)

Trigger: Approver clicks "Phê duyệt" or "Từ chối" on SCR-FUTURE-20 or SCR-FUTURE-10

+------------------------------------------+
| "Phê duyệt Dữ liệu Tương lai"          |
| [DE name] — [Domain path]                |
+------------------------------------------+
| Mục tiêu: [objective text]               |
| Đề xuất bởi: [Manager name]              |
|                                          |
| Quyết định:                              |
| (●) Phê duyệt — chuyển sang APPROVED    |
| (○) Từ chối — yêu cầu chỉnh sửa        |
|                                          |
| Ghi chú: [Textarea]                      |
| (bắt buộc khi từ chối)                   |
+------------------------------------------+
|            [Hủy] [Xác nhận]             |
+------------------------------------------+

/* Dialog — max-w-lg */
/* Same pattern as SCR-PLAN-21 (Chốt/Từ chối chủ quản) */

/* Radio options with colored borders */
RadioGroup.space-y-3
  /* Approve */
  label.has-[:checked]:bg-success/5.has-[:checked]:border-success
    p.font-bold.text-success  "Phê duyệt"
  /* Reject */
  label.has-[:checked]:bg-destructive/5.has-[:checked]:border-destructive
    p.font-bold.text-destructive  "Từ chối — yêu cầu chỉnh sửa"

/* Rejection reason — required when reject selected, hidden when approve */
/* Animated show/hide with transition */

MASTER.md Overrides

No overrides — fully follows MASTER.md patterns.