Page Design: Application Shell (Sidebar + Header + Role Switcher)¶
Cross-cutting layout — applies to ALL screens. Covers GAP-08 (shell design), GAP-01 (role selection), Story EP-01-003-004/005 (role switching + menu)
Shell Structure¶
+---------------------------------------------------------------+
| Sidebar (w-72) | Header (h-20, sticky) |
| | ┌─────────────────────────────┐ |
| ┌─────────────────────────┐ | │ [≡ mobile] Đơn vị: ... │ |
| │ 🔷 GovData │ | │ [🔔 3] [🌐] [👤]│ |
| │ Platform V1.1 │ | └─────────────────────────────┘ |
| ├─────────────────────────┤ +─────────────────────────────────+
| │ ▶ Tổng quan (all) │ | |
| │ Dữ liệu định vị (M) │ | Content Area |
| │ Khám phá DL (M) │ | (scrollable, role-aware) |
| │ Bản đồ hiện trạng(MDA)│ | |
| │ Dữ liệu tương lai(MA)│ | |
| │ Tra cứu Từ điển (MDAS)│ | |
| │ Quy hoạch DL (A) │ | |
| │ Báo cáo (MA)│ | |
| │ Quản trị HT (Adm) │ | |
| ├─────────────────────────┤ | |
| │ 🔀 Vai trò: Manager ▼ │ | |
| │ ┌─────────────────────┐ │ | |
| │ │ ● Manager (active) │ │ | |
| │ │ ○ Data Owner │ │ | |
| │ │ ○ Approver │ │ | |
| │ └─────────────────────┘ │ | |
| └─────────────────────────┘ | |
+---------------------------------------------------------------+
Header Components¶
Left: Context Info¶
flex flex-col
span.text-[10px].text-muted-foreground.font-bold.uppercase.tracking-widest
"Đơn vị công tác"
span.font-bold.text-foreground.text-sm.truncate.max-w-[300px]
/* Dynamic: unit name based on active role */
Right: Action Icons¶
flex items-center gap-4
/* Notification bell — with unread count badge */
relative cursor-pointer
Bell.h-5.w-5.text-muted-foreground.hover:text-foreground.transition-colors
/* Unread badge */
absolute.-top-1.-right-1 bg-destructive text-destructive-foreground
text-[10px] font-black w-4 h-4 rounded-full flex items-center justify-center
/* Notification dropdown (on click) */
/* Popover with recent notifications list */
w-80 max-h-[400px] overflow-y-auto
/* Header */ "Thông báo" + "Đánh dấu tất cả đã đọc"
/* Items — same as SCR-DASH-10 notification items */
/* Footer */ "Xem tất cả thông báo"
/* Language toggle */
Button(variant="ghost", size="icon")
Globe.h-4.w-4
/* Toggle VI ↔ EN */
/* User menu — Avatar + Dropdown */
DropdownMenu
trigger: Avatar.h-9.w-9 /* user initials */
content:
/* User name + email */
/* "Thông tin cá nhân" */
Separator
/* "Đăng xuất" — text-destructive */
Sidebar — Role Switcher (Bottom)¶
Single Role User¶
/* No role switcher needed — fixed display */
bg-primary/5 border border-primary/10 rounded-2xl p-4
span.text-[10px].font-bold.text-primary.uppercase.tracking-tighter "Vai trò"
p.text-sm.font-bold.text-primary "Manager"
Multi-Role User¶
/* Expandable role selector */
bg-primary/5 border border-primary/10 rounded-2xl p-4 cursor-pointer
/* Collapsed — shows active role */
flex items-center justify-between
div
span.text-[10px].font-bold.text-primary/60.uppercase.tracking-tighter "Vai trò hiện tại"
p.text-sm.font-bold.text-primary "Manager"
ChevronsUpDown.h-4.w-4.text-primary/60
/* Expanded — role list (Popover or inline expand) */
space-y-1 mt-2
/* Each role option */
flex items-center gap-3 px-3 py-2 rounded-xl cursor-pointer transition-all
hover:bg-primary/10
/* Active role */
bg-primary text-primary-foreground rounded-xl
Circle.h-3.w-3.fill-current /* filled dot */
span.font-semibold "Manager"
/* Inactive role */
text-primary/70
Circle.h-3.w-3 /* empty dot */
span.font-medium "Data Owner"
Role Switch Behavior¶
- Click role → immediate switch, no page reload
- Menu items update dynamically based on new role
- Header "Đơn vị công tác" updates to new role's unit
- If current page not accessible in new role → redirect to Dashboard
- Toast: "Đã chuyển sang vai trò [role name]"
Sidebar — Menu Items Per Role¶
| Menu Item | Icon | Manager | Data Owner | Approver | Staff | Admin |
|---|---|---|---|---|---|---|
| Tổng quan | LayoutDashboard | ✅ | ✅ | ✅ | ✅ | ✅ |
| Dữ liệu định vị | Database | ✅ | ✅ (view) | |||
| Khám phá DL | Search | ✅ | ||||
| Bản đồ hiện trạng | Map | ✅ | ✅ (badge) | ✅ | ||
| Dữ liệu tương lai | Sparkles | ✅ | ✅ | |||
| Tra cứu Từ điển | BookOpen | ✅ | ✅ | ✅ | ✅ | |
| Quy hoạch DL | UserCheck | ✅ | ||||
| Báo cáo | BarChart3 | ✅ | ✅ | |||
| Quản trị HT | Settings | ✅ |
Data Owner — Notification Badge on "Bản đồ hiện trạng"¶
/* When pending confirmation exists */
flex items-center justify-between w-full
span "Bản đồ hiện trạng"
/* Badge */ bg-destructive text-destructive-foreground
text-[10px] font-black w-5 h-5 rounded-full flex items-center justify-center
"!" /* or count */
First Login — Role Assignment Gate¶
Covers GAP-01: When SSO auto-provisions a new user with "chưa phân quyền" status
+-----------------------------------------------------------+
| (centered, max-w-md) |
| |
| 🔷 GovData |
| |
| Chào mừng bạn đến hệ thống! |
| |
| Tài khoản của bạn đã được tạo tự động |
| nhưng chưa được phân quyền. |
| |
| Vui lòng liên hệ Admin để được gán vai trò. |
| |
| Email: admin@govdata.vn |
| Hotline: 1900-xxxx |
| |
| [Đăng xuất] |
+-----------------------------------------------------------+
MASTER.md Overrides¶
No overrides — this file defines the shell that MASTER.md Layout Pattern references.