```
Badge text:
```html
Status
```
Nguyên tắc:
- Heading đậm, ngắn, dễ scan.
- Label nhỏ, uppercase, tracking rộng.
- Nội dung bảng không quá lớn để giữ mật độ dữ liệu.
- Không dùng hero-scale type trong dashboard/tool view.
## 6. App Shell Pattern
Dùng shell này cho các app quản trị/dữ liệu.
```html
```
Sidebar style:
- Width desktop: `w-56`.
- Background: `bg-slate-100`.
- Border right: `border-outline-variant/10`.
- Group label: uppercase, `text-[10px]`, tracking rộng.
- Active nav: left border xanh, nền slate nhạt, text đậm.
- Nav item: icon + label, height vừa phải, hover nền slate.
Active nav example:
```html
dashboardTổng quan
```
Inactive nav:
```html
appsỨng dụng
```
## 7. Page Layout Pattern
Mỗi page nên theo cấu trúc:
```html
Page Title
Short explanation.
```
Nguyên tắc:
- Page padding luôn `p-4 md:p-6`.
- Header không quá cao.
- Action chính nằm bên phải.
- Filter nằm ngay trên bảng.
- Content panel chiếm hết phần còn lại.
- Không bọc section bằng quá nhiều card lồng nhau.
## 8. Dashboard Pattern
Dashboard nên có:
- Header ngắn.
- CTA chính.
- Metric grid.
- Recent activity hoặc bảng tóm tắt.
Metric card:
```html
Applications
2418 Active
```
Grid:
```html
```
Responsive:
- Desktop: 4 cột.
- Tablet/mobile: 2 cột.
- Mobile nhỏ: 1 cột.
## 9. Table Pattern
Đây là component quan trọng nhất của style này.
```html
Name
Actions
Example
...
Showing 1-10 of 50
Page 1 / 5
```
Quy ước table:
- Header sticky.
- Row hover nhẹ.
- Cell padding đều.
- Text trong bảng ưu tiên `text-sm`.
- Header dùng `text-[10px] uppercase`.
- Nếu nhiều cột, đặt `min-width` và cho horizontal scroll.
- Nếu có action column quan trọng, có thể sticky bên phải.
Sticky action column:
```html
```
## 10. Filter/Search Pattern
Filter bar:
```html
Status
Search
```
Nguyên tắc:
- Filter ngắn, đặt sát bảng.
- Search chiếm phần còn lại.
- Label filter nhỏ và uppercase.
- Trên mobile, filter chuyển thành column/full width.
## 11. Button Pattern
Primary:
```html
```
Secondary:
```html
```
Danger:
```html
```
Icon action:
```html
```
Disabled:
```html
```
## 12. Form Pattern
Form field:
```html
```
Readonly:
```html
```
Textarea:
```html
```
Field with icon:
```html
```
## 16. Responsive Rules
Recommended CSS:
```css
#mobileMenuBtn,
#sidebarBackdrop {
display: none;
}
@media (max-width: 900px) {
body.app-shell {
width: 100%;
min-height: 100dvh;
height: 100dvh;
overflow: hidden;
position: relative;
}
#mobileMenuBtn {
display: inline-flex;
align-items: center;
justify-content: center;
}
#sidebarBackdrop {
display: block;
position: fixed;
inset: 0;
z-index: 70;
background: rgba(15, 23, 42, 0.45);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease-in-out;
}
#appSidebar {
position: fixed;
inset: 0 auto 0 0;
height: 100dvh;
width: min(82vw, 16rem);
z-index: 80;
transform: translateX(-100%);
transition: transform 0.2s ease-in-out;
box-shadow: 0 20px 45px rgba(15, 23, 42, 0.35);
}
body.mobile-nav-open #sidebarBackdrop {
opacity: 1;
pointer-events: auto;
}
body.mobile-nav-open #appSidebar {
transform: translateX(0);
}
.page-header,
.page-filters,
.users-controls {
flex-direction: column;
align-items: stretch;
gap: 0.75rem;
}
.table-wrap {
overflow-x: auto;
}
.table-wrap table {
min-width: 700px;
}
.page-pager {
gap: 0.5rem;
flex-direction: column;
align-items: flex-start;
}
.modal-backdrop {
align-items: flex-end;
}
.modal-backdrop .modal-content {
width: calc(100% - 1rem);
max-height: min(88dvh, 700px);
margin: 0.5rem;
overflow-y: auto;
border-radius: 0.9rem;
}
}
@media (max-width: 560px) {
.dashboard-stats {
grid-template-columns: 1fr;
}
}
```
Mobile behavior:
- Sidebar thành off-canvas.
- Topbar gọn lại.
- Profile metadata nên ẩn.
- Header/filter chuyển column.
- Table luôn scroll ngang nếu nhiều cột.
- Modal gần bottom và giới hạn chiều cao.
## 17. UX Rules
Giữ những nguyên tắc này khi áp dụng sang dự án khác:
1. Mỗi màn dữ liệu cần có search hoặc filter nếu danh sách có thể dài.
2. Action chính luôn rõ ràng, nằm ở page header.
3. Action nguy hiểm luôn cần confirm.
4. Action theo quyền nên disabled trực quan, không chỉ báo lỗi sau khi bấm.
5. Table phải có empty state.
6. Table dài cần pagination.
7. Form dài nên chia grid 2 cột trên desktop, 1 cột mobile.
8. Modal dài phải scroll trong content, không làm tràn viewport.
9. Badge trạng thái phải thống nhất màu theo ý nghĩa.
10. Icon-only button phải có `title` hoặc accessible name.
11. Không dùng nhiều card trang trí trong dashboard vận hành.
12. Text không được overlap hoặc tràn button/card.
## 18. Accessibility Checklist
Khi port sang dự án mới, nên bổ sung:
- `aria-label` cho icon-only buttons.
- `role="dialog"` và `aria-modal="true"` cho modal.
- Focus trap trong modal.
- Đóng modal bằng phím `Escape`.
- `aria-expanded` cho mobile menu.
- `aria-selected` cho tabs.
- Label đầy đủ cho form input.
- Không chỉ dùng màu để truyền đạt trạng thái; nên có text status.
- Contrast đủ tốt cho text nhỏ.
## 19. Implementation Checklist
Khi bắt đầu dự án mới:
1. Cài Tailwind và plugin forms nếu cần.
2. Copy design tokens vào `tailwind.config.js`.
3. Thêm Google Fonts và Material Symbols.
4. Tạo app shell: sidebar, topbar, content area.
5. Tạo component base cho button, table, filter, modal, badge.
6. Tạo responsive sidebar theo breakpoint `900px`.
7. Áp dụng page layout pattern cho từng màn hình.
8. Kiểm tra table trên mobile với horizontal scroll.
9. Chuẩn hóa status color map.
10. Thêm empty/loading/error states.
## 20. Mapping Sang Dự Án Khác
Nếu dự án mới không phải quản lý tài khoản/tài sản, vẫn có thể dùng style này bằng cách đổi tên module:
| AccManager concept | Dự án mới có thể thay bằng |
| --- | --- |
| Applications | Products, Services, Modules, Integrations |
| Accounts | Records, Credentials, Customers, Contracts |
| Assets | Inventory, Devices, Documents, Items |
| Users | Members, Staff, Operators |
| Departments | Teams, Groups, Categories |
| Projects | Campaigns, Workspaces, Sites |
| Borrow/Return | Requests, Tickets, Approvals, Workflows |
Điều quan trọng là giữ cùng cấu trúc:
- Sidebar nhóm chức năng.
- Page header + actions.
- Filter/search.
- Table/list.
- Modal CRUD.
- Badge trạng thái.
- Toast feedback.
## 21. Những Gì Nên Tránh Khi Port
- Copy nguyên text nghiệp vụ AccManager nếu dự án mới khác domain.
- Copy table quá nhiều cột khi domain không cần.
- Lạm dụng modal cho mọi thứ nếu workflow mới cần full page editor.
- Dùng gradient nền cho app shell chính.
- Tăng border radius quá lớn làm mất chất admin console.
- Dùng font khác quá mềm hoặc decorative.
- Thêm quá nhiều shadow, glassmorphism, decorative blobs.
- Trộn nhiều style icon khác nhau.