# Đặc tả redesign UI CRM theo phong cách Velzon Modern

Ngày cập nhật: 2026-08-01  
Vai trò thực hiện: Product/UI Designer + Frontend implementer  
Phạm vi: Laravel Blade views, layout chung, CSS/JS public, các màn CRM chính trong repository hiện tại.  
Ràng buộc bắt buộc: chỉ thay đổi giao diện UI/UX, HTML layout, CSS và JavaScript hiển thị. Không thay đổi database, model, controller nghiệp vụ, permission logic, route xử lý, name/id form, dữ liệu gửi lên server hoặc thuật toán nghiệp vụ PHP.

## 0. Bổ sung nguồn Figma GTG Clinic

Link Figma được cung cấp:

- `https://www.figma.com/design/cTvBFfOdi7NgcxDN6bRu5Z/GTG-Clinic---Website?node-id=0-1&p=f&t=9sSYSFjMRQGSPm7J-0`

Trạng thái truy cập:

- Link public cho phép lấy metadata/oEmbed và thumbnail cover của file `GTG Clinic - Website`.
- Không có Figma API token hoặc quyền Dev Mode nên chưa lấy được layer tree, spacing token, component inspect, CSS export hoặc asset từng frame.
- Thumbnail/cover thể hiện định hướng brand: GTG Clinic, nền xanh/cyan/tím sáng, glassmorphism nhẹ, logo/brand màu đen nổi bật, cảm giác clinic hiện đại và sạch.

Ánh xạ vào CRM hiện tại:

- Giữ khung Velzon Modern cho dashboard CRM vì phù hợp màn nghiệp vụ dày dữ liệu.
- Chuyển token visual sang GTG: primary blue `#125cff`, cyan accent `#06b6d4`, nền xanh y tế rất nhẹ, surface trắng có blur nhẹ, border xanh nhạt.
- Dùng glass surface có kiểm soát cho topbar, page header, card lớn; table và form vẫn ưu tiên độ đọc, không dùng gradient nặng.
- Sidebar/topbar theo CRM app layout để xử lý dữ liệu nhanh; brand area dùng logo website nếu có, fallback `GTG Clinic`.
- Các màn danh sách và chi tiết khách hàng ưu tiên cân đối cột, chống vỡ table, chống float legacy và submenu click được.

## 1. Nguồn tham khảo Velzon đã khảo sát

Demo gốc:

- `https://themesbrand.com/velzon/html/modern/index.html`

Nhóm dashboard và CRM:

- `dashboard-crm.html`
- `apps-crm-contacts.html`
- `apps-crm-companies.html`
- `apps-crm-deals.html`
- `apps-crm-leads.html`
- `apps-ecommerce-orders.html`
- `apps-ecommerce-order-details.html`

Nhóm layout:

- `layouts-horizontal.html`
- `layouts-detached.html`
- `layouts-two-column.html`
- `layouts-vertical-hovered.html`

Nhóm table/grid:

- `tables-basic.html`
- `tables-datatables.html`
- `tables-gridjs.html`
- `tables-listjs.html`

Nhóm form:

- `forms-elements.html`
- `forms-select.html`
- `forms-select2.html`
- `forms-pickers.html`
- `forms-checkboxs-radios.html`
- `forms-file-uploads.html`
- `forms-advanced.html`
- `forms-validation.html`
- `forms-wizard.html`
- `forms-editors.html`

Nhóm base UI:

- `ui-buttons.html`
- `ui-cards.html`
- `ui-modals.html`
- `ui-offcanvas.html`
- `ui-dropdowns.html`
- `ui-tabs.html`
- `ui-badges.html`
- `ui-alerts.html`
- `ui-notifications.html`
- `ui-progress.html`
- `ui-placeholders.html`
- `ui-grid.html`
- `ui-typography.html`
- `ui-utilities.html`

Nhóm tương tác nâng cao:

- `advance-ui-sweetalerts.html`
- `advance-ui-scrollbar.html`
- `advance-ui-animation.html`
- `apps-calendar.html`
- `apps-chat.html`
- `apps-tasks-kanban.html`
- `apps-tasks-list-view.html`

## 2. Hướng visual mục tiêu

Phong cách cần đạt: Velzon Modern CRM.

Đặc điểm chính:

- App shell gồm sidebar trái, topbar cố định, content nền xám nhạt.
- Sidebar không quá tối, có active item rõ, icon + text dễ scan.
- Topbar trắng, có search nhanh, notification, user dropdown.
- Content dùng card trắng, border mảnh, shadow rất nhẹ.
- Table header nền xám nhạt, chữ đậm vừa, không dùng header xanh đậm toàn bảng.
- Button nhỏ gọn, radius thấp, màu primary xanh tím Velzon.
- Form control cao đều, label rõ, spacing tiết chế.
- Badge dùng nền nhạt + text đậm, không dùng quá nhiều nền đậm.
- Modal header trắng, body thoáng, footer nhẹ.
- Màu trạng thái dùng có chủ đích, không biến màn hình thành một bảng màu hỗn loạn.
- Màn dữ liệu dày ưu tiên hiệu quả vận hành: ít decoration, nhiều khả năng scan, hover/focus rõ.

Không nên dùng:

- Gradient nền toàn trang.
- Card lồng card nhiều tầng.
- Header table xanh đậm/chữ trắng ở mọi bảng.
- Shadow đậm hoặc border dày.
- Button toàn màu đặc làm nhiễu giao diện.
- Font quá mảnh cho dữ liệu quan trọng.
- Layout marketing/landing page cho màn CRM vận hành.

## 3. Nguyên tắc không phá logic hiện tại

Không đổi hoặc xóa:

- Route, URL AJAX, method, action, CSRF, `_method`.
- `name` của input/select/textarea.
- ID form và vùng AJAX: `gridForm`, `gridFormA`, `registration-form`, `search`, `page`, `status`.
- Hidden input filter: `invalid_account`, `group`, `group_product`, `source`, `telesales`, `search_value`, `btn_choose_time`, `birthday_tab`.
- Class hành vi: `.delete`, `.select2`, `.myCheck`, `.selectall`, `.view_modal`, `.status`, `.account_relation`, `.limiting`, `.choose_time`, `.other_time`, `.submit_other_time`, `.cancel_other_time`, `.dropdown_action`, `.saveFilter`, `.check`, `.paymentOrder`, `.edit-order`, `.add_note`, `.remove_row`, `.service`, `.quantity`, `.price`, `.CK1`, `.CK2`, `.total`.
- `data-*` mà JS đang đọc: `data-id`, `data-url`, `data-customer-id`, `data-phone`, `data-toggle`, `data-target`, `data-content`, `data-time`, `data-name`, `data-value`.
- Permission Blade hiện có, ví dụ `$roleGlobal->permission(...)`.
- Include/partial nghiệp vụ như modal import/export, modal đổi trạng thái, modal đơn hàng, task, schedule, comment.

Cách thay UI đúng:

```html
<button class="btn btn-primary crm-btn crm-btn-primary saveFilter">Lưu lại</button>
```

Cách thay UI rủi ro:

```html
<button class="crm-btn crm-btn-primary">Lưu lại</button>
```

Lý do rủi ro: mất `.btn`, `.saveFilter` hoặc class plugin/JS đang dùng.

## 4. Kiến trúc triển khai UI

Tạo lớp giao diện mới:

```text
public/css/crm-ui.css
```

Load sau tất cả CSS cũ trong `resources/views/layout/app.blade.php`.

Lý do:

- Giữ khả năng rollback nhanh.
- Không phải refactor toàn bộ CSS cũ một lần.
- Có thể override có kiểm soát.
- Không làm mất selector JavaScript cũ.

Naming:

- Token: `--crm-*`
- Shell: `.crm-app`, `.crm-shell`, `.crm-sidebar`, `.crm-topbar`
- Component: `.crm-card`, `.crm-btn`, `.crm-table`, `.crm-filter-bar`, `.crm-status-pill`, `.crm-modal`, `.crm-tabs`, `.crm-form-section`
- State: `.crm-is-active`, `.crm-is-danger`, `.crm-is-muted`
- Không thêm utility rời rạc kiểu `.mt5`, `.pl10`, `.bold2` vì hệ thống đã có quá nhiều utility cũ.

## 5. Design tokens theo Velzon Modern

Màu nền và surface:

```css
:root {
  --crm-bg: #f3f3f9;
  --crm-surface: #ffffff;
  --crm-surface-subtle: #f8f9fa;
  --crm-border: #e9ebec;
  --crm-border-strong: #dfe3e7;
}
```

Text:

```css
:root {
  --crm-text: #212529;
  --crm-text-muted: #878a99;
  --crm-text-soft: #adb5bd;
}
```

Brand và trạng thái:

```css
:root {
  --crm-primary: #405189;
  --crm-primary-hover: #364574;
  --crm-primary-soft: rgba(64, 81, 137, .10);

  --crm-success: #0ab39c;
  --crm-success-soft: rgba(10, 179, 156, .12);
  --crm-warning: #f7b84b;
  --crm-warning-soft: rgba(247, 184, 75, .14);
  --crm-danger: #f06548;
  --crm-danger-soft: rgba(240, 101, 72, .12);
  --crm-info: #299cdb;
  --crm-info-soft: rgba(41, 156, 219, .12);
}
```

Layout:

```css
:root {
  --crm-sidebar-width: 250px;
  --crm-topbar-height: 70px;
  --crm-radius-sm: 4px;
  --crm-radius-md: 6px;
  --crm-radius-lg: 8px;
  --crm-shadow-sm: 0 1px 2px rgba(56, 65, 74, .08);
  --crm-shadow-md: 0 5px 20px rgba(30, 41, 59, .10);
}
```

Typography:

- Font: `Poppins`, fallback system.
- Body: 13px, line-height 1.5.
- Page title: 20px, weight 600.
- Card title: 15px hoặc 16px, weight 600.
- Table cell: 13px.
- Table header: 12px, weight 600.
- KPI number: 22px đến 28px, weight 600 hoặc 700.
- Không dùng `font-weight: 300` cho table data.

## 6. App shell

Mục tiêu:

- Chuyển visual từ menu ngang cũ sang shell gần Velzon.
- Sidebar trái chứa module chính.
- Topbar chứa search, notification, user menu.
- Main content dùng `padding-left` theo sidebar, `padding-top` theo topbar.
- Mobile/tablet cho phép menu trở về dạng horizontal scroll hoặc offcanvas nếu cần.

File liên quan:

- `resources/views/layout/app.blade.php`
- `resources/views/menu/horizantal.blade.php`
- `resources/views/menu/navbar.blade.php`
- `resources/views/menu/menu_left.blade.php`

Quy tắc triển khai:

- Giữ `menu.horizantal.blade.php` vì chứa permission logic.
- Có thể đổi visual bằng CSS và thêm wrapper/brand/search nhỏ.
- Không rewrite menu thành array PHP mới ở giai đoạn này.
- Submenu phải mở được bằng hover và click.
- Submenu phải tràn ra ngoài sidebar, không bị `overflow` cắt.
- Notification/user dropdown phải có z-index cao hơn content.

Sidebar:

- Width desktop: 250px.
- Background: trắng hoặc gần trắng.
- Border-right: `1px solid #e9ebec`.
- Item height: 40-42px.
- Active item: nền `--crm-primary-soft`, text/icon `--crm-primary`.
- Icon width cố định 18px để text thẳng hàng.
- Submenu flyout: left `100%`, min-width 240px, shadow vừa.

Topbar:

- Height: 70px.
- Background trắng.
- Search width khoảng 400-520px trên desktop.
- Search background `#f3f3f9`.
- Notification button dạng icon circle.
- User avatar + name gọn, dropdown trắng.

## 7. Page layout

Page content:

- Nền app: `#f3f3f9`.
- Padding desktop: 24px.
- Padding tablet/mobile: 12-16px.
- Không để `.container` giới hạn 1140px ở màn table/report; CRM cần full width.

Page header:

- Title bên trái.
- Subtitle hoặc breadcrumb nhỏ nếu cần.
- Action bên phải.
- Không để title chỉ nằm trong `card-header`.

Mẫu:

```text
[Khách hàng]
Quản lý data, trạng thái chăm sóc, lịch hẹn và lịch sử tương tác.
                                      [Import] [Export] [Tạo khách hàng]
```

Breadcrumb:

- Chỉ dùng khi màn có cấp sâu: chi tiết khách hàng, chi tiết đơn hàng, settings.
- Breadcrumb nhỏ, không chiếm nhiều chiều cao.

## 8. Grid system

Áp dụng theo tinh thần `ui-grid.html`:

- Dùng Bootstrap grid hiện có, không thêm framework.
- Card grid dùng gap 16-24px.
- KPI grid:
  - Desktop: 4 cột.
  - Tablet: 2 cột.
  - Mobile: 1 cột.
- Detail screen:
  - Desktop: sidebar thông tin 300px + main content `minmax(0, 1fr)`.
  - Tablet/mobile: stack 1 cột.
- Không dùng float cho layout mới nếu có thể; các float cũ được override bằng CSS ở phạm vi `.crm-*`.

## 9. Card

Theo Velzon `ui-cards.html`:

- Background trắng.
- Border `1px solid #e9ebec`.
- Radius 6px.
- Shadow nhẹ `0 1px 2px rgba(...)`.
- Header card cao vừa phải, padding 16px.
- Title card 15-16px, weight 600.
- Body padding 16px.
- Footer nền trắng hoặc `#f8f9fa` rất nhẹ.

Không dùng:

- Card lồng card nếu chỉ để tạo khoảng cách.
- Header nền xanh đậm cho card thường.
- Shadow dày.

Các loại card trong project:

- `crm-card`: card chuẩn.
- `crm-filter-card`: filter.
- `crm-table-card`: table/list.
- `crm-kpi-card`: chỉ số dashboard.
- `crm-profile-card`: thông tin khách hàng.
- `crm-comment-card`: trao đổi/timeline.

## 10. Button

Theo Velzon `ui-buttons.html`:

Kích thước:

- Default height: 36px.
- Small/action in table: 30-32px.
- Radius: 4px.
- Icon gap: 6px.

Loại button:

- Primary: hành động chính như Tạo mới, Lưu, Tìm kiếm.
- Light/secondary: Đóng, Hủy, Export phụ.
- Ghost icon: xem, sửa, cài đặt cột, filter nhanh.
- Danger: xóa/hủy data.
- Success: hoàn thành/thanh toán.
- Warning: cảnh báo hoặc trạng thái cần xử lý.

Quy tắc:

- Mỗi màn chỉ nên có một primary action nổi bật.
- Các action phụ dùng `btn-light`, `btn-soft-*`, icon button.
- Link text trần không dùng cho hành động quan trọng.
- Icon-only phải có `title` hoặc tooltip.

## 11. Table

Theo Velzon `tables-basic.html`, `tables-datatables.html`, `tables-gridjs.html`.

Áp dụng cho:

- Khách hàng.
- Đơn hàng.
- Chi tiết đơn.
- Báo cáo.
- User/role.
- Campaign/marketing.
- Lịch sử ví, SMS, kho, công việc.

Visual:

- Header nền `#f3f6f9`, text `#495057`.
- Header font 12px, weight 600.
- Body font 13px, weight 400.
- Border chỉ dùng ngang, giảm border dọc.
- Row hover nhẹ `#f8f9fb`.
- Cell padding 10-12px.
- Table card có border ngoài.
- Số tiền canh phải, tabular number.
- Cột action icon button 30-32px.
- Empty state đẹp hơn dòng text trống.

Behavior:

- Sticky header cho table dài.
- Horizontal scroll cho table rộng.
- Không khóa scroll toàn body.
- Bulk action bar rõ khi có checkbox được chọn.
- Pagination nằm cuối card, thống nhất style.

Mapping:

- `resources/views/customers/ajax.blade.php`: table khách hàng pilot.
- `resources/views/order-details/ajax.blade.php`: table đơn hàng.
- `resources/views/customers/order.blade.php`: table đơn trong chi tiết khách hàng.
- `resources/views/tasks/ajax_statistical.blade.php`: table CSKH.
- `resources/views/users/ajax.blade.php`: table users.

## 12. Filter bar

Mục tiêu:

- Search chính nằm đầu.
- Filter thường dùng nằm cùng hàng.
- Filter nâng cao dùng collapse hoặc dropdown panel.
- Nút search/reset ở vị trí ổn định.

Visual:

- Filter card trắng.
- Form controls height 36px.
- Gap 8-10px.
- Search width 240-360px.
- Mobile: filter stack thành 1 cột hoặc drawer.

Giữ nguyên:

- `#gridForm`, `#gridFormA`.
- `.angleDoubleUp`, `.angleDoubleDown`, `.isShowView`.
- `.other_time`, `.submit_other_time`, `.cancel_other_time`.
- Hidden inputs filter.

## 13. Form controls

Theo `forms-elements.html`, `forms-select2.html`, `forms-pickers.html`, `forms-file-uploads.html`.

Input/select/textarea:

- Height 36px.
- Border `#dfe3e7`.
- Radius 4px.
- Focus ring primary soft.
- Label 13px weight 500/600.
- Error border danger + message nhỏ.

Select2:

- Cùng height với input.
- Border và focus giống form-control.
- Placeholder màu muted.
- Dropdown z-index cao hơn modal nếu nằm trong modal.

Datepicker/daterangepicker:

- Input cùng height.
- Panel trắng, border nhẹ, shadow Velzon.
- Selected date dùng primary.
- Quick range dùng chip/button group.

File upload:

- Button light + icon paperclip/upload.
- Preview có border dashed hoặc thumbnail rõ.
- Không để file upload làm vỡ layout modal/form.

Editor/CKEditor/rich text:

- Wrapper border nhẹ.
- Toolbar không dính sát input.
- Height tối thiểu rõ.

## 14. Checkbox, radio, toggle/switch

Theo `forms-checkboxs-radios.html`.

Checkbox/radio:

- Kích thước 16px.
- Primary color khi checked.
- Label click area đủ rộng.
- Bulk checkbox table canh giữa, không làm rộng cột.

Switch/toggle:

- Dùng cho setting nhị phân: active/inactive, xem tất cả KH, bật/tắt tính năng.
- Không dùng switch cho lựa chọn nhiều giá trị.
- Label đặt bên phải hoặc trên cùng tùy mật độ.
- State disabled phải rõ.

Mapping:

- `.check` trong user dropdown.
- `.myCheck`, `.selectall` trong table khách hàng.
- Các checkbox quyền trong role/settings.

## 15. Dropdown

Theo `ui-dropdowns.html`.

Visual:

- Menu trắng.
- Border `#e9ebec`.
- Radius 6px.
- Shadow vừa.
- Item height 34-38px.
- Hover nền primary soft.

Yêu cầu:

- Dropdown trong sidebar không bị cắt bởi overflow.
- Dropdown trong table không bị che bởi table responsive.
- Dropdown action phải mở đúng trên mobile.
- Giữ `data-toggle="dropdown"` vì dự án đang dùng Bootstrap 4.

Mapping:

- User dropdown.
- Notification dropdown.
- Bulk action dropdown.
- Column visibility dropdown.
- Pagination limit dropdown.
- Time range dropdown.

## 16. Badge, status, tag

Theo `ui-badges.html`.

Nguyên tắc:

- Badge trạng thái nên dùng nền nhạt + text đậm.
- Không dùng toàn bộ button/status nền đậm từ database nếu contrast kém.
- Nếu status có màu cấu hình, dùng màu đó làm viền/dot hoặc left accent, không bắt buộc làm nền đầy.

Các loại:

- Success: đã mua, đã thanh toán, hoàn thành.
- Warning: chờ xử lý, sắp quá hạn.
- Danger: quá hạn, hủy, nợ, xóa.
- Info: lịch hẹn, dữ liệu mới.
- Primary: trạng thái đang active/filter hiện tại.
- Muted: không rõ/chưa có dữ liệu.

Mapping:

- Status khách hàng.
- Trạng thái đơn hàng/thanh toán.
- Task status.
- Campaign status.
- User active/inactive.

## 17. Tabs

Theo `ui-tabs.html`.

Visual:

- Page/detail tabs dạng pill hoặc underline nhẹ.
- Active tab primary.
- Tab bar có thể horizontal scroll trên mobile.
- Không dùng border xanh dày.

Mapping:

- Chi tiết khách hàng: Trao đổi, Lịch hẹn, Đơn hàng, Lịch CSKH, Ví tiền, Tin nhắn, Quà tặng, Tổng đài, Albums, Hợp đồng.
- Báo cáo có nhiều tab.
- Settings.

Giữ nguyên:

- `data-toggle="tab"`.
- ID tab như `#tab5`, `#tab6`, `#tab7`.
- Click handler `#click_tab_6`, `#click_tab_7`, ...

## 18. Modal

Theo `ui-modals.html`.

Visual:

- Header trắng, title rõ.
- Không dùng modal header xanh đậm mặc định.
- Body padding 16-20px.
- Footer background `#f8f9fa`.
- Radius 8px.
- Shadow vừa.

Kích thước:

- Confirm: small/medium.
- Form tạo/sửa: medium/large.
- Import/export: large.
- Chi tiết/chat/order: large/xlarge.

Mobile:

- Modal gần full width.
- Body có scroll nội bộ nếu nội dung dài.
- Footer sticky nếu form dài.

Mapping:

- Modal import/export khách hàng.
- Modal đổi người phụ trách/trạng thái/chi nhánh.
- Modal task.
- Modal lịch hẹn.
- Modal thanh toán.
- Modal trừ liệu trình.
- Modal QR.

## 19. Offcanvas/drawer

Theo `ui-offcanvas.html`.

Ứng dụng phù hợp:

- Filter nâng cao trên mobile.
- Chi tiết nhanh khách hàng.
- Timeline hoặc ghi chú nếu modal quá nặng.
- Cài đặt cột.

Giai đoạn đầu:

- Không bắt buộc đổi modal sang offcanvas vì Bootstrap 4 chưa có offcanvas native.
- Có thể mô phỏng bằng custom drawer CSS nếu cần.

## 20. Alert, toast, notification, SweetAlert

Theo `ui-alerts.html`, `ui-notifications.html`, `advance-ui-sweetalerts.html`.

Alert session:

- Card alert nhỏ, radius 6px.
- Warning/danger/success dùng màu soft.
- Không chiếm quá nhiều chiều cao.

Toast/Alertify:

- Position không che table action.
- Success/danger rõ.
- Text ngắn, hành động cụ thể.

SweetAlert:

- Confirm xóa dùng danger.
- Primary/confirm button rõ.
- Cancel light.

## 21. Loading, empty, placeholder

Theo `ui-placeholders.html`.

Loading:

- Spinner nhỏ 32-40px.
- Overlay nhạt.
- Không dùng spinner 100px trong tab/table nếu không cần.

Empty:

- Icon nhỏ.
- Title: `Không có dữ liệu`.
- Mô tả: `Thử thay đổi bộ lọc hoặc tạo mới dữ liệu.`
- Action nếu phù hợp.

Skeleton:

- Có thể dùng cho dashboard/table sau.

## 22. Pagination

Theo table/list pattern Velzon:

- Pagination nằm footer card.
- Text tổng số bên trái.
- Page links bên phải.
- Mobile stack.
- Active page primary.
- Disabled rõ.

## 23. Chart/dashboard

Theo `dashboard-crm.html` và `charts-*`.

Dashboard nên có:

- KPI cards: khách mới, lịch hôm nay, doanh số, thực thu, công nợ, task quá hạn.
- Chart doanh thu theo thời gian.
- Funnel trạng thái khách hàng.
- Recent activities.
- Top nhân viên/nguồn/chi nhánh.

Visual:

- Card trắng.
- KPI icon nhỏ trong soft color square/circle.
- Trend badge nhỏ.
- Chart responsive width 100%.

Không giữ demo cũ như visitor/product sample.

## 24. Calendar

Theo `apps-calendar.html`.

Ứng dụng:

- Lịch hẹn spa.
- Lịch chăm sóc.

Yêu cầu:

- Có toggle Calendar/List.
- Filter ngày/chi nhánh/nhân viên rõ.
- Status color nhẹ, không quá chói.
- Mobile dùng list view ưu tiên.

## 25. Chat/Fanpage

Theo `apps-chat.html`.

Ứng dụng:

- `message_fb`, `marketing/chat_fanpage`.
- Tab tin nhắn trong chi tiết khách hàng.

Yêu cầu:

- Sidebar conversation list.
- Main chat area.
- Message bubble rõ incoming/outgoing.
- Composer sticky bottom.
- Avatar/name/time dễ scan.

## 26. Kanban/task

Theo `apps-tasks-kanban.html`, `apps-tasks-list-view.html`.

Ứng dụng:

- CSKH/task.
- Kanban board.

Yêu cầu:

- Board background xám nhạt.
- Column card trắng.
- Header có count.
- Task card có title, customer, owner, deadline, status.
- Quá hạn dùng accent danger.
- Không để card quá cao vì CRM cần mật độ dữ liệu.

## 27. Màn Khách hàng

File:

- `resources/views/customers/index.blade.php`
- `resources/views/customers/ajax.blade.php`
- `resources/views/customers/dropdownFilter.blade.php`
- `public/css/customer.css`

Thiết kế mới:

- Page header:
  - Title: `Khách hàng`.
  - Subtitle: quản lý data/trạng thái/lịch sử.
  - Actions: Nhập Excel, Xuất Excel, Tạo khách hàng.
- Filter card:
  - Search lớn: `Tìm tên, SĐT, mã khách hàng`.
  - Người phụ trách, nhóm dịch vụ, công việc, chi nhánh.
  - Advanced filter collapse giữ class cũ.
- Status toolbar:
  - Button `Tất cả`.
  - Status pill ngang.
  - Count badge nhỏ.
  - Nút thêm status icon button.
- Table:
  - Header xám nhạt.
  - Cột tên khách hàng đậm.
  - SĐT primary.
  - Status dạng pill/text.
  - Tiền canh phải.
  - Action icon 30px.
  - Row quá hạn có background danger soft hoặc left accent.
- Bulk actions:
  - Dropdown `Thao tác` rõ.
  - Không đổi ID/class cũ.

## 28. Màn Chi tiết khách hàng `/customers/{id}`

File:

- `resources/views/customers/view_account.blade.php`
- `resources/views/customers/order.blade.php`

Thiết kế mới:

- Hero card:
  - Avatar + tên + mã KH.
  - Action sửa/xóa dạng icon.
  - KPI: số dư ví, tổng giá trị, số đơn, liên hệ cuối.
  - Owner card: người phụ trách.
- Layout:
  - Sidebar 300px: thông tin khách hàng, nguồn, trạng thái, QR.
  - Main: tab content.
- Tabs:
  - Pill tabs: Trao đổi, Lịch hẹn, Đơn hàng, Lịch CSKH, Ví tiền, Tin nhắn, Quà tặng, Tổng đài, Albums, Hợp đồng.
  - Giữ ID tab và click handler.
- Tab Trao đổi:
  - Card nhập comment.
  - File upload gọn.
  - Timeline/comment list sạch.
- Tab Đơn hàng:
  - Filter bar: tất cả/dịch vụ/sản phẩm/SP&DV, còn nợ.
  - Table order Velzon style.
  - Action edit/trừ liệu trình/thanh toán/xóa icon button.

## 29. Màn Đơn hàng

File:

- `resources/views/order/index.blade.php`
- `resources/views/order/indexService.blade.php`
- `resources/views/order/order.blade.php`
- `resources/views/order-details/index.blade.php`
- `resources/views/order-details/ajax.blade.php`

Đề xuất:

- Tạo/sửa đơn:
  - Main form + payment summary sticky.
  - Bảng dịch vụ/sản phẩm compact.
  - Summary tổng tiền rõ.
- Chi tiết đơn:
  - Invoice card + side payment panel.
  - Bottom action bar trắng.
- Danh sách đơn:
  - Filter card.
  - Table tài chính canh phải.
  - Footer tổng cộng sticky nếu cần.

Giữ selector quan trọng:

- `#add_row`, `.order`, `.service`, `.quantity`, `.price`, `.CK1`, `.CK2`, `.total`, `.remove_row`, `.paymentOrder`, `.printOrder`, `.edit-order`.

## 30. Màn form CRUD

Áp dụng cho:

- Khách hàng.
- Dịch vụ.
- Sản phẩm.
- User.
- Campaign.
- Settings.

Form nên chia section:

- Thông tin chính.
- Liên hệ.
- Phân loại.
- Phụ trách/chi nhánh.
- Ghi chú/tài liệu.

Footer form:

- Sticky khi form dài.
- Button Lưu primary, Hủy/Quay lại light.

## 31. Màn báo cáo/thống kê

File:

- `resources/views/statistics/index.blade.php`
- `resources/views/statistics/ajax.blade.php`
- `resources/views/report_products/*`

Thiết kế:

- Filter bar đầu trang.
- KPI grid.
- Chart cards.
- Table report compact.
- Số tiền canh phải.
- Export action ở page header/card header.

## 32. Login

File:

- `resources/views/auth/login.blade.php`

Thiết kế:

- Nền sáng xám/tím nhẹ theo Velzon.
- Card login trắng.
- Logo rõ.
- Input height 38px.
- Button primary full width.
- Error alert soft danger.

## 33. Responsive

Desktop:

- Sidebar fixed.
- Topbar fixed.
- Content full width.
- Table horizontal scroll khi cần.

Tablet:

- Sidebar có thể collapsed/horizontal scroll.
- Filter wrap 2 dòng.
- Detail customer chuyển sidebar 280px hoặc stack.

Mobile:

- Menu chuyển thành horizontal scroll hoặc drawer.
- Filter stack.
- Table scroll ngang.
- Modal gần full width.
- Tabs horizontal scroll.

Không được:

- `body { overflow: hidden; }` làm mất scroll.
- Chart/table width cố định gây tràn.
- Dropdown bị cắt do parent overflow.

## 34. Accessibility và usability

- Focus state rõ cho input/button/dropdown.
- Icon-only có title/tooltip.
- Color contrast đủ đọc.
- Hit area tối thiểu 30-36px.
- Text không overlap.
- Không dùng font nhỏ hơn 12px cho dữ liệu chính.
- Table action không quá sát nhau.

## 35. Lộ trình triển khai

Phase 1:

- Tạo `public/css/crm-ui.css`.
- Load trong layout.
- Thêm `crm-app` vào body.
- Sidebar/topbar visual theo Velzon.
- Chuẩn hóa card/button/form/table/modal/tabs global.

Phase 2:

- Pilot màn Khách hàng.
- Pilot màn Chi tiết khách hàng.
- Sửa table đơn hàng trong chi tiết khách hàng.

Phase 3:

- Danh sách đơn hàng.
- Tạo/sửa đơn.
- Chi tiết đơn/thanh toán.

Phase 4:

- Dashboard/thống kê.
- Task/kanban/lịch hẹn.
- Chat/Fanpage.

Phase 5:

- Forms CRUD còn lại.
- Settings/users/roles.
- Cleanup inline style cũ nếu không ảnh hưởng logic.

## 36. Checklist QA sau mỗi màn

- Load màn không lỗi console.
- Search/filter hoạt động.
- Pagination hoạt động.
- Select2/date picker hoạt động.
- Modal mở/đóng đúng.
- Form submit đúng route.
- AJAX replace `#registration-form` không mất event.
- Delete confirm đúng route.
- Permission ẩn/hiện action đúng.
- Dropdown/submenu không bị cắt.
- Table scroll ngang được.
- Mobile không khóa scroll.
- Không đổi dữ liệu gửi lên server.

## 37. Quyền tự xử lý UI trong phạm vi được duyệt

Được tự chỉnh:

- CSS global và CSS module.
- HTML wrapper, class, layout card/grid/tab/modal.
- Icon hiển thị.
- Spacing, màu, border, shadow, radius.
- Responsive style.
- JS nhỏ phục vụ hiển thị menu/dropdown/toggle UI.

Không được tự chỉnh:

- Database/migration.
- Model/controller/service nghiệp vụ.
- Route xử lý hiện có.
- Query, tính toán tiền, công nợ, commission, permission.
- Tên field gửi form.
- ID/class JS hành vi nếu chưa gắn lại tương đương.

## 38. Tiêu chí hoàn thành

Một màn được coi là đạt khi:

- Nhìn cùng ngôn ngữ với Velzon Modern.
- Dễ scan hơn bản cũ.
- Table/form/action rõ hơn.
- Không phá thao tác cũ.
- Không phát sinh scroll lock/dropdown bị cắt.
- Không cần người dùng học lại luồng nghiệp vụ.