Layout Guide

Tài liệu mô tả các mẫu layout dùng chung trên toàn hệ thống ELS HRM. Mỗi module đều được xây dựng từ các pattern có sẵn — không sáng tạo layout mới. Áp dụng đúng pattern giúp UI nhất quán và rút ngắn thời gian triển khai.

01 App Shell — khung chung 02 List — Stats + Filter + Table 03 Detail — Profile + Tabs 04 Form — Sections + Sidebar 05 Split — Main + Right Panel 06 Full-width — Matrix / Org
shadcn/ui × Archivo Font: Archivo Variable Base: 16px / 4px grid Locale: vi-VN
01 App Shell — HRMShell Khung bao ngoài dùng cho mọi màn hình trong hệ thống. Gồm Sidebar cố định + Main area (Topbar → PageTitle → Content).
HRMShell hrm-shell.jsx Dùng cho: tất cả màn hình trong hệ thống
Content Area
Sidebar — 240px fixed Topbar — 52px PageTitle — auto height Content — flex:1, overflow:auto
HRMSidebar
width240px (15rem)
height100%
backgroundvar(--sidebar)
border-right1px var(--sidebar-border)
Brand padding14px 20px
Nav padding8px 12px 2px
Active indicator3px left border
Nav item height~30px (7px padding)
Section label10px / 700 / uppercase
Nav item font13.5px / 500
User footer pad10px 14px
HRMTopbar
height52px
padding0 24px
backgroundvar(--card)
border-bottom1px var(--border)
Search width320px
Action icons34×34px, r:6px
HRMPageTitle
padding13px 24px
backgroundvar(--card)
border-bottom1px var(--border)
h1 font-size21px / 700
Breadcrumb11.5px, muted
Content Area
flex1
overflowauto
padding20px
backgroundvar(--background)
02–06 Layout Patterns 5 pattern tái sử dụng trên toàn module. Chọn pattern phù hợp với mục đích màn hình.
Pattern A — List Stats + Filter Bar + Table Nhân viên · Nghỉ phép · Ứng viên · Người dùng · Phân quyền (roles)
Stat Card
1
Stat Card
2
Stat Card
3
Stat Card
4
🔍 Search Select ▾ Select ▾ 1–8/247
Trang 1/31
Cấu trúc
Layoutflex column
Stats gridrepeat(4,1fr)
Stats gap12px
Stats margin-bottom16px
Filter barcard, pad 10px 14px, mb 14px
Table wrap100% width
Filter Bar — nội dung trái → phải
1Search input (280px)
2Select dropdowns
3Button "Lọc nâng cao"
4flex:1 spacer
5View toggle (optional)
6Pagination info text
Table
thead bgvar(--muted)
thead font12px / 600 / uppercase
td padding12px 14px
row hovervar(--muted)
Col: Nhân viênAvatar + tên + mã/meta
Col: Actionsghost icon btns, 80px
Stats là tùy chọn — bỏ qua nếu module không có tổng hợp số liệu.
Pattern B — Detail Left Profile Panel + Right Tab Content Chi tiết Nhân viên · ESS Profile · Chi tiết Ứng viên
Profile
Quick Actions
Outer grid
grid-template-columns260px 1fr
gap16px
Variant (ESS, nhỏ hơn)240px 1fr
Left Profile Card
padding20px
Avatar zonecenter, border-bottom, pb:16px, mb:14px
Avatar sizexl (72px)
Avatar edit btn24×24px, absolute bottom-right
Info fieldsicon 13px + label 11px + val 12.5px
Info field gap9px margin-bottom each
Quick Actions Card
padding14px
Action rowicon + label + chevron-right
Row padding7px 6px
Separatorborder-bottom 1px var(--border)
Right Card — Tabs
Tab bar padding0 20px
Tab padding12px 14px
Content padding22px
Field grid1fr 1fr, gap: 6px 28px
Field separatorborder-bottom 1px, pad 9px 0
Field label11.5px, muted, mb:3px
Field value13.5px / 500
Pattern C — Form / Create Multi-section Form + Right Sidebar Thêm Nhân viên · Chấm dứt HĐ · Tạo Tin tuyển dụng
↑
Avatar
Progress
Outer grid
grid-template-columns1fr 300px
gap18px
Form Sections (trái)
Layoutflex column
Between sections gap16px
Section card padding22px
Section header28px icon-badge + title, mb:18px
Icon badge28×28px, r:8px, primary-soft
Section title14px / 700
Field row gapgap:14px, mb:14px
Field gridcustom widths (1fr,2fr,auto…)
Label12.5px / 500, mb:5px
Input heightvar(--h-md) = 36px
Right Sidebar — cards thường gặp
Avatar upload80×80px circle, dashed border
Account cardcheckbox + helper text
Progress checklist18×18px checkbox rows
Cards gap12px
Pattern D — Split Main List/Table + Right Summary Panel Nghỉ phép · Bảng công · Tuyển dụng Dashboard
Stat 1
Stat 2
Stat 3
Stat 4
Filter Bar
Summary
Leave Balance
Calendar
Content grid
grid-template-columns1fr 320px
gap16px
Stats (trên)repeat(4,1fr), gap:12px, mb:16px
Main (trái)
Filter barcard, pad:10px 14px, mb:12px
Nội dung chínhtable-wrap hoặc card list
Action buttons trong rowprimary "Duyệt" + outline "Từ chối"
Right Panel (phải)
width320px fixed
Layoutflex column, gap:12px
Cards thường gặpSummary · Balance · Calendar · Legend
Card padding16px
Right panel thường chứa context phụ trợ cho việc ra quyết định (số dư phép, lịch tháng, thống kê nhóm).
Pattern E — Full-width Không chia cột — chiếm toàn bộ content area Ma trận phân quyền · Cấu trúc tổ chức · Lịch phỏng vấn
Filter / Tab bar (tùy chọn)
Cấu trúc
Layoutflex column
Content1 card hoặc table-wrap 100%
Overflowhorizontal scroll nếu cần
Màn hình áp dụng
Org ChartSVG/drag tree, overflow-x:auto
RBAC Matrixsticky col/header table
Lịch phỏng vấncalendar grid 7-col
Bảng côngdate-scrollable table
Lưu ý kỹ thuật
Sticky headerposition:sticky, top:0, z-index:10
Sticky colposition:sticky, left:0
Min content widthmin-width: fit-content
03 Content Zones — Vùng tái sử dụng Các block nhỏ xuất hiện trong nhiều pattern. Implement một lần, dùng nhiều nơi.
StatCard stat, stat__* classes
247
+12 năm nay
Padding16px (1rem)
Border-radiusvar(--radius-lg)
Value fonttext-2xl / 700
Label fonttext-xs / 500 / uppercase
Icon area36×36px, radius-md
Delta upvar(--success)
Delta downvar(--destructive)
Filter Bar card, inline, pad 10px 14px
1–8 / 247
Heightauto (~40px)
Internal gap10px
Search width240–320px
Select width130–160px each
All inputsinput--sm (h-sm = 32px)
Empty State Full-card center, min-height 460px
Containercard, center, min-h:460px
IllustrationSVG 80×80, muted circle
Title20px / 700, mb:10px
Description14px, muted, max-w:440px
CTAsoutline + primary, gap:10px
Warning / Alert Banner Inline, trong card, không phải toast
Thao tác không thể hoàn tác
Sau khi xác nhận, tài khoản đăng nhập sẽ bị vô hiệu hóa.
Bạn chỉ có thể chỉnh sửa các trường được phép.
Padding12–14px 14–16px
Border-radius8–9px
Icon size14–16px, flex-shrink:0
Dangervar(--destructive-soft)
Infovar(--info-soft)
Warningvar(--warning-soft)
04 Spacing & Tokens Các giá trị kích thước và token màu sắc thường dùng nhất trong layout.
Layout Spacing
Nơi dùng Giá trị px
Content area padding 20px 20
Topbar / PageTitle padding 0 24px 24
Gap giữa stats 12px 12
Gap outer grid (pattern B/D) 16px 16
Gap outer grid (pattern C) 18px 18
Gap form field columns 28px 28
Card padding (default) 20–22px 20–22
Card padding (compact) 14–16px 14–16
Sidebar width 240px 240
Right panel width (pattern D) 320px 320
Height Scale & Radii
Component heights
--h-xs
24px — btn xs
--h-sm
32px — btn sm, input sm
--h-md
36px — default input/btn
--h-lg
40px — btn lg
Border radius
--radius-md 8px
--radius-lg 10px
--radius-xl 14px — card
Color tokens — Layout thường dùng
Surfaces
--background
--card
--muted
--sidebar
Brand
--primary
--primary-soft
--primary-hover
--ring
Status
--success
--warning
--destructive
--info
Text
--foreground
--muted-foreground
--border
--border-strong
05 Component Reference Mapping component → file và class CSS. Mỗi module import từ shared.jsx + hrm-shell.jsx.
HRMShell
Filehrm-shell.jsx
Propsactive, title, crumbs, actions, meta, dark
Childrencontent area slot
HRMSidebar
Filehrm-shell.jsx
CSS.sidebar, .sidebar__*
Width240px
HRMTopbar
Filehrm-shell.jsx
CSS.topbar, .topbar__*
Height52px
Icon
Fileshared.jsx
Propsname, size (default 16)
Libraryinline SVG paths
Avatar
Fileshared.jsx
Sizessm (24) · default (32) · lg (48) · xl (72)
CSS.avatar, .avatar--{size}
Badge
Fileshared.jsx
Variantssuccess · warning · info · danger · primary · neutral
Propdot (boolean)
Btn
Fileshared.jsx
Variantsprimary · outline · ghost · soft · destructive
Sizesxs · sm · (default) · lg
StatCard
Fileshared.jsx
CSS.stat, .stat__*
Propslabel, value, delta, deltaDir, icon, iconBg, iconColor
MiniChart / Bars / Donut
Fileshared.jsx
TypeSVG inline
Usagedashboard cards chỉ
Typography scale — Archivo Variable
Page Title 21px / 700 / -0.015em
Section Title 16px / 700
Card Title 14px / 700
Field Value 13.5px / 500
Body / Table Cell 13px / 400
Form Label 12.5px / 500
Meta / Secondary 12px / muted
Field Label 11.5px / muted
Section Label 10px / 700 / uppercase