# Kế hoạch nâng cấp giao diện CRM thẩm mỹ 2026 ## 1. Mục tiêu Tài liệu này lập kế hoạch nâng cấp giao diện CRM thẩm mỹ đang vận hành trên nền Laravel 5.8, Blade, Ren Dashboard Template V2.0, Bootstrap 4.x, jQuery 3.2.1 và Font Awesome 5.3.1. Mục tiêu chính: - Làm mới CRM theo hướng luxury, hiện đại, sắc nét, phù hợp lĩnh vực thẩm mỹ. - Giữ ổn định nghiệp vụ hiện có: khách hàng, chi tiết khách hàng, đơn hàng, thanh toán, lịch hẹn, CSKH, kho, báo cáo, phân quyền. - Chuẩn hóa layout, màu sắc, typography, modal, form, table, card, badge, alert và trạng thái tương tác. - Giảm CSS inline, giảm override toàn cục khó kiểm soát, tạo hệ thống UI có thể tái sử dụng. - Triển khai từng giai đoạn để hạn chế rủi ro với Laravel 5.8 và các plugin cũ. ## 2. Hiện trạng kỹ thuật Stack hiện tại: - Backend: Laravel 5.8, Blade template. - Frontend base: Ren Dashboard Template V2.0. - CSS: Bootstrap 4.3.1 từ CDN, thêm nhiều CSS trong `public/css` và `public/assets/css`. - JS: Bootstrap bundle 4.0.0, jQuery 3.2.1, Select2, Alertify, SweetAlert, C3 chart, datepicker, clockpicker, tableHeadFixer. - Asset build: Laravel Mix 4, Sass, Vue 2 ở mức hỗ trợ một số component. Các file nền tảng cần chú ý: - `resources/views/layout/app.blade.php` - `resources/views/layout/assets_head.blade.php` - `resources/views/layout/assets_script.blade.php` - `resources/views/menu/navbar.blade.php` - `resources/views/menu/horizantal.blade.php` - `resources/views/menu/menu_left.blade.php` - `resources/sass/app.scss` - `resources/sass/_variables.scss` - `public/css/common.css` - `public/css/style.css` - `public/css/customer.css` - `public/css/order-new-design.css` Vấn đề hiện tại: - Giao diện dày, nhiều đường viền, nhiều màu trạng thái chưa đồng nhất. - Table đang là thành phần trung tâm nhưng hiển thị nặng, khó scan, nhiều border ngang dọc. - Header modal dùng màu xanh cứng, chưa phù hợp định vị luxury. - Nhiều style inline trong Blade làm khó bảo trì và khó đổi theme. - Bootstrap CSS và Bootstrap JS khác phiên bản, dễ sinh lỗi nhỏ ở modal, dropdown, tooltip. - Font Awesome 5.3.1 đã cũ, icon thiếu độ sắc nét so với UI mới. - Layout chưa có design token rõ ràng: màu, spacing, radius, shadow, typography, z-index, state. - Các màn nghiệp vụ có nhiều pattern lặp lại nhưng chưa được component hóa. ## 3. Định hướng giao diện mới Dựa trên mockup `docs/Vietnamese_Beauty_CRM_UI:UX_Proposal.png`, giao diện mới nên đi theo hướng: - Nền tổng thể sáng, sạch, ít nhiễu. - Sidebar tối, gọn, có icon rõ ràng, trạng thái active nổi bật. - Header trên cùng có tìm kiếm nhanh, thông báo, hồ sơ người dùng và chi nhánh. - Nội dung chính dùng card trắng, shadow nhẹ, border mỏng, radius nhất quán. - Màu nhấn tím premium kết hợp hồng thẩm mỹ, xanh dương công nghệ, xanh lá thành công, vàng cảnh báo. - Bảng dữ liệu thoáng hơn, dòng cao hơn, badge trạng thái dễ nhận diện. - Form và modal ưu tiên thao tác nhanh, label rõ, input sắc nét, lỗi nhập liệu dễ đọc. - Các số liệu quan trọng như doanh thu, khách mới, lịch hẹn, tỷ lệ hài lòng được đưa lên card KPI. Tinh thần thiết kế: - Sang trọng nhưng không rườm rà. - Hiện đại nhưng không phá thói quen sử dụng của nhân viên. - Tối ưu cho CRM vận hành mỗi ngày, không biến thành landing page. - Ưu tiên độ đọc, tốc độ thao tác, trạng thái dữ liệu và khả năng mở rộng. ## 4. Design system đề xuất ### 4.1. Bảng màu Màu chính đề xuất: - Primary: `#7C3AED` - tím premium, dùng cho CTA chính, active menu, tab active. - Primary soft: `#F1EAFF` - nền nhẹ cho selected state. - Accent pink: `#EC4899` - điểm nhấn ngành thẩm mỹ, VIP, ưu đãi, chăm sóc. - Info: `#0EA5E9` - thông tin, link phụ, lịch hẹn. - Success: `#10B981` - đã điều trị, đã thanh toán, hoàn tất. - Warning: `#F59E0B` - chờ thanh toán, cần gọi lại, lịch sắp tới. - Danger: `#EF4444` - hủy, nợ quá hạn, lỗi. - Background: `#F8FAFC` hoặc `#F8F6FF` - nền app. - Surface: `#FFFFFF` - card, modal, table. - Border: `#E5E7EB` - đường viền chính. - Border soft: `#EEF2F7` - chia khối nhẹ. - Text strong: `#0F172A` - tiêu đề, số liệu chính. - Text body: `#334155` - nội dung. - Text muted: `#64748B` - mô tả, meta. Nguyên tắc dùng màu: - Mỗi màn chỉ có 1 màu CTA chính. - Không dùng màu nền header table quá đậm trên toàn bộ bảng. - Badge trạng thái dùng nền nhạt và chữ đậm, không dùng block màu đặc quá chói. - Màu đỏ chỉ dành cho lỗi, hủy, nguy cơ, thao tác phá hủy. ### 4.2. Typography Font đề xuất: - Ưu tiên: Inter. - Phương án tối ưu tiếng Việt: Be Vietnam Pro. - Fallback: system UI font stack. Thang chữ: - Page title: 22-24px, weight 700. - Section title: 16-18px, weight 700. - Card KPI number: 24-30px, weight 700. - Body/table: 13-14px, weight 400-500. - Label/form: 12-13px, weight 600. - Meta/help text: 12px, weight 400. Nguyên tắc: - Không dùng chữ quá mảnh trong table. - Không dùng letter-spacing âm. - Số tiền, số lượng, mã đơn nên dùng tabular number nếu font hỗ trợ. - Tiêu đề trong card không dùng hero-scale type. ### 4.3. Spacing, radius, shadow Spacing token: - `--space-1: 4px` - `--space-2: 8px` - `--space-3: 12px` - `--space-4: 16px` - `--space-5: 20px` - `--space-6: 24px` - `--space-8: 32px` Radius: - Input/button/badge nhỏ: 6px. - Card/table container/modal: 8px. - Avatar: 50%. - Không lạm dụng bo tròn pill nếu không phải badge hoặc avatar. Shadow: - Card thường: shadow rất nhẹ. - Dropdown/modal: shadow sâu hơn để phân lớp. - Không dùng shadow xanh dày như giao diện cũ. ### 4.4. Icon Phương án khuyến nghị: - Giai đoạn 1: nâng Font Awesome lên bản 6 local hoặc CDN ổn định, giữ class tương thích ở mức cần thiết. - Giai đoạn 2: chuẩn hóa icon theo map dùng chung cho menu, action button, status. Nguyên tắc: - Button thao tác nhanh dùng icon kèm tooltip. - CTA chính có thể dùng icon + text. - Các thao tác như gọi điện, sửa, xóa, xem chi tiết, tải Excel, nhập Excel nên có icon cố định toàn hệ thống. ## 5. Kiến trúc CSS đề xuất Không nên thay toàn bộ template ngay. Nên thêm một lớp theme mới nằm trên hệ thống cũ, sau đó migrate dần. Cấu trúc đề xuất: ```text resources/sass/ app.scss _variables.scss crm-2026/ _tokens.scss _base.scss _layout.scss _buttons.scss _forms.scss _tables.scss _cards.scss _modals.scss _badges.scss _alerts.scss _select2.scss _datepicker.scss _utilities.scss ``` CSS output đề xuất: ```text public/css/crm-2026.css ``` Quy tắc triển khai: - Thêm class root vào body: `crm-2026`. - Mọi CSS mới scope dưới `.crm-2026` để tránh phá màn chưa migrate. - Hạn chế sửa trực tiếp `assets/css/dashboard.css` của template Ren. - Di chuyển dần CSS inline trong Blade về Sass. - Không override global kiểu `tr th, td` vì sẽ làm hỏng table/modal ở nhiều màn. Ví dụ root: ```blade ``` ## 6. Layout shell mới ### 6.1. Sidebar Mục tiêu: - Tạo cảm giác premium ngay từ viewport đầu. - Menu rõ nhóm nghiệp vụ, dễ scan với nhân viên spa/thẩm mỹ. Thiết kế: - Nền sidebar: `#111827` hoặc navy đậm gần đen. - Active item: nền tím nhẹ, thanh chỉ báo bên trái, icon/tên menu màu trắng. - Menu item thường: chữ `#CBD5E1`, hover nền `rgba(255,255,255,.06)`. - Logo/brand ở đầu sidebar, có thể hiển thị tên CRM và chi nhánh. - Hỗ trợ trạng thái collapsed trên màn nhỏ. Nhóm menu đề xuất: - Tổng quan - Khách hàng - Marketing - Bán hàng - Lịch hẹn - CSKH - Kho vận - Báo cáo - Nhân sự - Cài đặt ### 6.2. Topbar Thành phần: - Ô tìm kiếm global: tên khách hàng, số điện thoại, mã đơn. - Nút thông báo. - Nút lịch hôm nay hoặc nhắc việc. - Avatar người dùng, tên, chi nhánh. - Dropdown tài khoản. UX: - Search có phím tắt sau này nhưng không cần hiển thị text hướng dẫn trong UI. - Sticky topbar khi cuộn table dài. - Mobile: search thu gọn thành icon, sidebar chuyển drawer. ### 6.3. Content area Quy chuẩn: - Max width linh hoạt, ưu tiên full width cho table CRM. - Padding desktop: 24px. - Padding tablet/mobile: 16px. - Page header gồm title, mô tả ngắn nếu cần, action chính bên phải. - Breadcrumb chỉ dùng ở màn sâu như chi tiết khách hàng, đơn hàng. ## 7. Component chuẩn ### 7.1. Button Các biến thể: - Primary: tạo mới, lưu, thanh toán. - Secondary: hủy, quay lại. - Outline: lọc nâng cao, xuất file. - Ghost icon: xem, sửa, gọi, ghi chú. - Danger: xóa, hủy đơn. Quy chuẩn: - Chiều cao button thường: 36-40px. - Button icon vuông: 36x36px. - Disabled state rõ, không chỉ giảm opacity quá thấp. - Loading state có spinner nhỏ, không làm đổi kích thước button. ### 7.2. Form/input/select Chuẩn mới: - Input height: 38-40px. - Border: `1px solid #DDE3EA`. - Focus: border tím + ring nhẹ. - Label nằm trên input, rõ ràng. - Required dùng dấu `*` đỏ nhưng không làm label quá nặng. - Error text dưới input, màu danger. - Select2 theme cần được restyle đồng bộ với input. Áp dụng cho: - Form khách hàng. - Form đơn hàng/dịch vụ. - Modal thêm dịch vụ. - Modal đổi chi nhánh/người phụ trách/trạng thái. - Bộ lọc danh sách. ### 7.3. Table Table là phần quan trọng nhất của CRM, cần cải thiện mạnh. Thiết kế: - Header nền rất nhạt hoặc trắng, chữ đậm, sticky nếu bảng dài. - Bỏ border dọc dày, chỉ giữ border-bottom nhẹ. - Row height 48-56px. - Hover row nền tím rất nhạt. - Zebra row chỉ dùng khi dữ liệu quá dày. - Cột action sticky phải nếu có nhiều cột. - Số tiền căn phải, ngày giờ căn giữa hoặc căn trái tùy ngữ cảnh. - Trạng thái dùng badge. Tính năng UX: - Empty state có icon và action phù hợp. - Loading skeleton cho table Ajax. - Bulk action khi chọn nhiều khách hàng. - Filter bar sticky, có chip hiển thị điều kiện lọc đang áp dụng. - Pagination rõ số trang, tổng bản ghi, số dòng mỗi trang. ### 7.4. Card KPI Dùng ở dashboard và đầu màn danh sách: - Khách hàng mới hôm nay. - Lịch hẹn hôm nay. - Doanh thu tháng. - Công nợ. - Tỷ lệ khách quay lại. - Tỷ lệ hài lòng. Card gồm: - Icon nhỏ trong ô nền nhạt. - Label. - Số liệu chính. - Tỷ lệ tăng/giảm nếu có. - Không nhồi quá nhiều chữ trong card. ### 7.5. Badge/status Chuẩn hóa trạng thái: - `Đang tư vấn`: info. - `Đã điều trị`: success. - `Tái khám`: primary. - `Chờ thanh toán`: warning. - `Đã thanh toán`: success. - `Hủy`: danger. - `VIP`: pink/gold. - `Nợ`: danger soft. Badge: - Font 12px, weight 600. - Padding 4px 8px. - Radius 999px chỉ cho badge trạng thái. ### 7.6. Modal Modal mới cần thay đổi rõ nhất vì giao diện cũ đang dùng header xanh cứng. Thiết kế: - Modal radius 8px. - Header nền trắng, title text strong. - Close button dạng icon rõ, hover nhẹ. - Body padding 20-24px. - Footer nền trắng hoặc `#F8FAFC`, border-top nhẹ. - Action chính nằm bên phải. - Width theo tác vụ: - Small: xác nhận xóa/hủy. - Medium: thêm dịch vụ, đổi trạng thái. - Large: chi tiết khách hàng, thanh toán, lịch sử. UX: - Focus vào input đầu tiên khi mở modal. - Esc/close hoạt động đúng. - Validate lỗi không làm modal nhảy layout quá mạnh. - Modal dài có body scroll, footer sticky. ### 7.7. Alert/notification Chuẩn: - Toast góc phải trên cho thao tác nhanh. - Alert inline cho lỗi form hoặc cảnh báo quan trọng. - Màu nền nhẹ, icon rõ, text ngắn. - Không tự biến mất quá nhanh với lỗi quan trọng. ## 8. Kế hoạch nâng cấp từng màn ### 8.1. Dashboard/Tổng quan Mục tiêu: - Tạo màn mở đầu hiện đại, hiển thị sức khỏe kinh doanh. Thành phần: - KPI cards: khách mới, lịch hẹn, doanh thu, tỷ lệ hài lòng. - Biểu đồ doanh thu 7 ngày hoặc 30 ngày. - Lịch hẹn hôm nay. - Nhắc việc cần xử lý. - Danh sách khách hàng mới/khách cần gọi lại. File liên quan: - `resources/views/dashboard/index.blade.php` - `resources/views/statistics/index.blade.php` - `resources/views/statistics/ajax_home.blade.php` ### 8.2. Danh sách khách hàng Mục tiêu: - Giảm cảm giác dày đặc. - Tăng tốc tìm kiếm, lọc, xem trạng thái khách. Cải tiến: - Header màn có title, số lượng khách, nút tạo mới. - Search lớn hơn, placeholder rõ: `Tìm tên, SĐT, mã khách hàng`. - Filter chuyển thành bar gọn + nút lọc nâng cao. - Các filter đang áp dụng hiển thị chip có nút xóa. - Table mới có avatar/tên khách, SĐT, nguồn, người phụ trách, trạng thái, lịch gần nhất, action. - Gọi điện dùng button icon cố định. - Export/import đặt trong menu action, tránh chiếm chỗ. File liên quan: - `resources/views/customers/index.blade.php` - `resources/views/customers/ajax.blade.php` - `resources/views/customers/dropdownFilter.blade.php` - `public/css/customer.css` ### 8.3. Chi tiết khách hàng Mục tiêu: - Biến màn chi tiết thành hồ sơ khách hàng chuyên nghiệp. Layout đề xuất: - Header profile: avatar, tên, badge VIP/trạng thái, SĐT, chi nhánh, người phụ trách. - KPI nhỏ: tổng chi tiêu, số đơn hàng, số lịch hẹn, công nợ. - Tabs: Tổng quan, Lịch hẹn, Đơn hàng, CSKH, Ghi chú, Tệp/ảnh nếu có. - Timeline hoạt động: tư vấn, đặt lịch, thanh toán, điều trị, gọi lại. Cải tiến: - Thông tin quan trọng đưa lên đầu. - Không để dữ liệu nằm rải rác trong nhiều bảng nhỏ. - Action nhanh: gọi, nhắn, tạo lịch, tạo đơn, thêm ghi chú. File liên quan: - `resources/views/customers/view_account.blade.php` - `resources/views/customers/modal_view.blade.php` - `resources/views/customers/order.blade.php` ### 8.4. Đơn hàng/Dịch vụ Mục tiêu: - Làm form bán hàng rõ ràng, ít lỗi nhập liệu, dễ kiểm tra tiền. Cải tiến: - Chia 2 vùng: thông tin khách hàng và giỏ dịch vụ/sản phẩm. - Table dịch vụ có cột số lượng, đơn giá, chiết khấu, thành tiền rõ. - Tổng tiền sticky ở cuối hoặc panel bên phải. - Trạng thái thanh toán nổi bật. - Nút thêm dịch vụ dùng primary/outline rõ. - Icon xóa dòng dùng button icon danger soft thay cho ảnh delete. File liên quan: - `resources/views/order/index.blade.php` - `resources/views/order/order.blade.php` - `resources/views/order/modal.blade.php` - `resources/views/order/modalVoucher.blade.php` - `public/css/order-new-design.css` ### 8.5. Thanh toán/Hóa đơn Mục tiêu: - Tạo cảm giác chuyên nghiệp, đáng tin cậy khi thu tiền và in/xuất hóa đơn. Cải tiến: - Header hóa đơn: mã đơn, khách hàng, ngày, trạng thái. - Bảng chi tiết dịch vụ rõ, số tiền căn phải. - Tổng tiền, giảm giá, đã thanh toán, còn lại nằm trong summary box. - Trạng thái `Đã thanh toán`, `Chờ thanh toán`, `Còn nợ` dùng badge chuẩn. - Nút in/xuất PDF/thanh toán hiển thị rõ theo quyền. File liên quan: - `resources/views/order/payment-history.blade.php` - `resources/views/order/order-pdf.blade.php` - `resources/views/payment_wallet/payment-history.blade.php` - `resources/views/payment_wallet/order-pdf.blade.php` ### 8.6. Lịch hẹn Mục tiêu: - Lịch hẹn trực quan, dễ nhìn theo ngày/tuần/tháng và theo chi nhánh. Cải tiến: - Calendar màu nhẹ, không dùng block vàng dày. - Event card có màu theo trạng thái: tư vấn, điều trị, tái khám, hủy. - Sidebar nhỏ cho mini calendar và filter nhân viên/chi nhánh. - Quick create appointment modal. - Tooltip/popover khi hover event: khách, SĐT, dịch vụ, nhân viên, trạng thái. File liên quan: - `resources/views/schedules/index.blade.php` - `resources/views/schedules/ajax.blade.php` - `resources/views/schedules/modal.blade.php` - `resources/views/schedules/home.blade.php` - `resources/views/schedules/home2.blade.php` ### 8.7. Modal nghiệp vụ Các modal cần chuẩn hóa trước: - Thêm/sửa khách hàng. - Import/export khách hàng. - Thêm dịch vụ/sản phẩm. - Thanh toán. - Đổi chi nhánh. - Đổi người phụ trách. - Gửi SMS/Zalo. - Xác nhận xóa/hủy. Quy chuẩn: - Tách partial modal header/body/footer nếu lặp lại nhiều. - Dùng class mới như `crm-modal`, `crm-modal-header`, `crm-modal-footer`. - Không style trực tiếp trong tag nếu có thể đưa vào Sass. - Validate lỗi đồng bộ với jQuery Validation hiện có. ## 9. Kế hoạch kỹ thuật triển khai ### Giai đoạn 0: Audit và đóng băng phạm vi Thời lượng đề xuất: 2-3 ngày. Việc cần làm: - Liệt kê toàn bộ màn đang dùng layout `layout.app`. - Liệt kê CSS inline trong layout và các màn chính. - Kiểm tra màn nào dùng plugin đặc biệt: Select2, datepicker, chart, tableHeadFixer, Pitel SDK. - Chụp baseline giao diện cũ cho desktop/tablet/mobile. - Xác định top 5 màn ưu tiên theo tần suất sử dụng. Kết quả: - Danh sách màn migrate. - Danh sách component lặp lại. - Rủi ro JS/CSS theo từng màn. ### Giai đoạn 1: Xây theme nền `crm-2026` Thời lượng đề xuất: 4-6 ngày. Việc cần làm: - Tạo folder Sass `resources/sass/crm-2026`. - Tạo token màu, spacing, radius, shadow, typography. - Build file `public/css/crm-2026.css`. - Thêm CSS mới vào `assets_head.blade.php` sau CSS cũ. - Thêm class `crm-2026` vào body. - Restyle base: body, link, card, table, form-control, button, modal, badge, alert. - Scope toàn bộ CSS dưới `.crm-2026`. Kết quả: - UI nền mới có thể bật/tắt bằng class. - Không phá các màn chưa migrate. ### Giai đoạn 2: Nâng layout shell Thời lượng đề xuất: 5-8 ngày. Việc cần làm: - Thiết kế lại sidebar. - Thiết kế lại topbar. - Chuẩn hóa page header. - Chuẩn hóa container content. - Kiểm tra responsive: desktop 1440px, laptop 1366px, tablet 768px, mobile 390px. - Tối ưu sticky header/filter/table. Kết quả: - Toàn CRM có khung giao diện mới. - Các màn cũ vẫn chạy được bên trong layout mới. ### Giai đoạn 3: Component hóa UI chung Thời lượng đề xuất: 6-10 ngày. Việc cần làm: - Tạo Blade partial/component cho: - Page header. - KPI card. - Status badge. - Empty state. - Table action buttons. - Modal shell. - Filter chips. - Chuẩn hóa class helper: - `crm-card` - `crm-table` - `crm-button` - `crm-badge` - `crm-page-header` - `crm-filter-bar` - `crm-modal` - Viết guideline cách dùng component trong Blade. Kết quả: - Dev không phải copy style thủ công. - Màn mới đồng bộ nhanh hơn. ### Giai đoạn 4: Migrate màn khách hàng Thời lượng đề xuất: 7-12 ngày. Phạm vi: - Danh sách khách hàng. - Filter khách hàng. - Modal import/export. - Modal đổi quan hệ, đổi chi nhánh, đổi người phụ trách. - Hồ sơ khách hàng. Việc cần làm: - Làm lại filter bar. - Làm lại table khách hàng. - Chuẩn hóa action icon. - Chuẩn hóa badge trạng thái. - Thêm loading/empty state cho Ajax. - Tối ưu mobile/tablet bằng horizontal scroll có sticky action. Kết quả: - Màn khách hàng là màn mẫu để nhân rộng sang các module khác. ### Giai đoạn 5: Migrate đơn hàng và thanh toán Thời lượng đề xuất: 8-14 ngày. Phạm vi: - Tạo/sửa đơn hàng. - Thêm dịch vụ/sản phẩm. - Voucher/chiết khấu. - Lịch sử thanh toán. - Hóa đơn/PDF view nếu có xem HTML trước khi in. Việc cần làm: - Làm lại form order theo nhóm thông tin. - Restyle Select2 trong table. - Tạo payment summary. - Chuẩn hóa trạng thái tiền. - Kiểm thử kỹ tính toán tiền, chiết khấu, số lượng. Kết quả: - Luồng bán hàng rõ, nhanh, giảm lỗi nhập liệu. ### Giai đoạn 6: Migrate lịch hẹn Thời lượng đề xuất: 6-10 ngày. Phạm vi: - Danh sách lịch hẹn. - Calendar view. - Modal tạo/sửa lịch. - Filter theo chi nhánh, nhân viên, trạng thái. Việc cần làm: - Đổi palette event. - Tạo quick view cho event. - Chuẩn hóa modal lịch hẹn. - Kiểm tra overlap event trên màn nhỏ. Kết quả: - Lịch hẹn trực quan hơn, phù hợp vận hành spa nhiều chi nhánh. ### Giai đoạn 7: Migrate các module còn lại Thời lượng đề xuất: 2-4 tuần tùy số màn. Nhóm ưu tiên: - CSKH, tasks, SMS/Zalo/Facebook message. - Kho, sản phẩm, dịch vụ, combo, package. - Báo cáo, thống kê, hoa hồng. - Cài đặt, phân quyền, người dùng. Chiến lược: - Migrate theo component đã có. - Không làm lại logic nghiệp vụ nếu không cần. - Mỗi module có checklist nghiệm thu riêng. ### Giai đoạn 8: Cleanup và tối ưu Thời lượng đề xuất: 5-8 ngày. Việc cần làm: - Gỡ CSS inline đã thay thế. - Gỡ CSS chết hoặc trùng. - Chuẩn hóa version Bootstrap CSS/JS đang dùng. - Kiểm tra lại z-index modal/dropdown/select2. - Tối ưu bundle CSS/JS. - Kiểm tra trình duyệt Chrome, Edge, Safari. Kết quả: - Code frontend dễ bảo trì hơn. - UI ổn định sau migrate. ## 10. Chiến lược nâng cấp thư viện Khuyến nghị không nâng toàn bộ major version ngay trong lần đầu vì CRM đang chạy Laravel 5.8 và nhiều plugin jQuery cũ. Phương án an toàn: - Giữ Bootstrap 4 trong giai đoạn đầu, nhưng đồng bộ CSS/JS về cùng nhánh 4.x. - Nâng Font Awesome từ 5.3.1 lên 6.x nếu kiểm tra class icon tương thích ổn. - Thay font Google từ Poppins/Nunito rời rạc sang Inter hoặc Be Vietnam Pro. - Restyle Select2 thay vì thay thư viện select ngay. - Giữ jQuery trong ngắn hạn vì nhiều màn Ajax/modal đang phụ thuộc. Phương án trung hạn: - Tách dần JS inline ra file module riêng. - Nâng Laravel Mix nếu môi trường Node cho phép. - Cân nhắc Bootstrap 5 hoặc Tailwind chỉ khi có kế hoạch refactor rộng hơn. - Với calendar, nếu hiện tại đang dùng plugin cũ khó mở rộng, cân nhắc FullCalendar bản phù hợp môi trường hiện tại. ## 11. Quy chuẩn Blade khi migrate Nguyên tắc: - Không thêm style inline mới trừ trường hợp bất khả kháng. - Không thêm selector global ảnh hưởng toàn hệ thống. - Mỗi màn nên có class root riêng, ví dụ `customers-page`, `orders-page`, `schedules-page`. - Component dùng chung đặt ở `resources/views/components` hoặc partial theo convention hiện có. - Action quan trọng phải kiểm tra quyền hiện tại trước khi hiển thị. - Không đổi route/controller khi chỉ nâng UI. Ví dụ cấu trúc màn: ```blade @extends('layout.app') @section('_style') @endsection @section('content')
@include('components.crm.page-header', [ 'title' => 'Khách hàng', 'actionLabel' => 'Tạo mới' ])
@include('customers.filters') @include('customers.ajax')
@endsection ``` ## 12. Responsive Desktop: - Sidebar cố định. - Topbar sticky. - Table full width, action sticky phải. - Filter nằm ngang, có wrap hợp lý. Tablet: - Sidebar có thể thu gọn. - Filter chuyển 2-3 cột. - KPI card 2 cột. Mobile: - Sidebar thành drawer. - Table dùng horizontal scroll. - Action quan trọng đưa vào menu icon. - Modal full width gần mép, padding giảm. - Form 1 cột. Breakpoint đề xuất: - Mobile: `<576px` - Tablet: `576px - 991px` - Desktop: `>=992px` - Large desktop: `>=1200px` ## 13. Accessibility và usability Cần đảm bảo: - Contrast chữ/nền đạt mức đọc tốt. - Focus state rõ cho input, button, select. - Button icon có `title` hoặc tooltip. - Modal trap focus ở mức Bootstrap hỗ trợ. - Không dùng màu làm tín hiệu duy nhất cho trạng thái, cần kèm text badge. - Vùng click tối thiểu 36x36px. - Loading state không làm người dùng bấm lặp nhiều lần. ## 14. Performance Rủi ro hiện tại: - Nhiều CSS/JS plugin load toàn cục. - Table lớn có thể chậm khi DOM quá nhiều. - Inline script nhiều làm khó cache. Giải pháp: - Chỉ load plugin theo màn nếu có thể. - Dùng CSS scoped để tránh repaint không cần thiết. - Tối ưu table Ajax: phân trang server-side, giữ số dòng hợp lý. - Dùng skeleton nhẹ thay vì spinner lớn toàn màn. - Minify CSS production qua Laravel Mix. ## 15. QA và nghiệm thu Mỗi màn migrate cần kiểm tra: - Desktop 1440x900. - Laptop 1366x768. - Tablet 768x1024. - Mobile 390x844. - Chrome, Edge, Safari. - Modal mở/đóng, validate, submit. - Select2 dropdown trong modal không bị khuất. - Datepicker không bị sai z-index. - Table sticky không che dropdown. - Permission button vẫn đúng. - Ajax search/filter/pagination vẫn hoạt động. - Export/import không bị mất sự kiện. - Luồng gọi điện Pitel SDK không bị ảnh hưởng ở màn khách hàng. Tiêu chí nghiệm thu UI: - Không còn cảm giác bảng dày đặc như giao diện cũ. - Các trạng thái chính nhìn được trong 1-2 giây. - Modal mới đồng bộ, không còn header xanh cứng toàn hệ thống. - Button, input, badge, card dùng đúng design system. - Không phát sinh lỗi JS console trong các luồng chính. - Nhân viên cũ vẫn thao tác được mà không phải học lại nghiệp vụ. ## 16. Rủi ro và cách xử lý Rủi ro: CSS mới phá màn cũ. - Xử lý: scope dưới `.crm-2026`, migrate từng màn, test visual trước/sau. Rủi ro: Bootstrap CSS/JS lệch version. - Xử lý: kiểm kê version thực tế, đồng bộ trong giai đoạn cleanup, test modal/dropdown. Rủi ro: Select2 trong modal lỗi z-index. - Xử lý: chuẩn hóa `dropdownParent` cho Select2 trong modal, thêm CSS z-index riêng. Rủi ro: Table nhiều cột khó responsive. - Xử lý: horizontal scroll, sticky action, ẩn cột phụ trên mobile nếu phù hợp. Rủi ro: Người dùng quen giao diện cũ. - Xử lý: giữ logic và vị trí action chính tương đối quen thuộc, đổi hình thức theo từng module. Rủi ro: Nâng thư viện gây lỗi dây chuyền. - Xử lý: không nâng major version hàng loạt; ưu tiên theme layer trước. ## 17. Checklist triển khai Giai đoạn chuẩn bị: - [ ] Chốt danh sách màn ưu tiên. - [ ] Chụp baseline giao diện cũ. - [ ] Kiểm kê CSS/JS/plugin theo màn. - [ ] Chốt bảng màu, font, icon. Giai đoạn nền: - [ ] Tạo Sass token `crm-2026`. - [ ] Build `crm-2026.css`. - [ ] Thêm body class `crm-2026`. - [ ] Restyle button, input, card, table, modal, badge. - [ ] Kiểm tra không phá layout cũ. Giai đoạn layout: - [ ] Làm mới sidebar. - [ ] Làm mới topbar. - [ ] Chuẩn hóa page header. - [ ] Kiểm tra responsive shell. Giai đoạn màn chính: - [ ] Migrate danh sách khách hàng. - [ ] Migrate chi tiết khách hàng. - [ ] Migrate đơn hàng/dịch vụ. - [ ] Migrate thanh toán/hóa đơn. - [ ] Migrate lịch hẹn. - [ ] Migrate modal nghiệp vụ phổ biến. Giai đoạn hoàn thiện: - [ ] Chuẩn hóa CSS inline còn lại. - [ ] Kiểm tra z-index modal/select/datepicker. - [ ] Kiểm tra console error. - [ ] Kiểm tra performance table. - [ ] Nghiệm thu với người dùng nội bộ. ## 18. Ưu tiên triển khai đề xuất Thứ tự nên làm: 1. Theme nền `crm-2026`. 2. Layout shell: sidebar, topbar, content. 3. Component table/form/modal/button/badge. 4. Danh sách khách hàng. 5. Chi tiết khách hàng. 6. Đơn hàng và thanh toán. 7. Lịch hẹn. 8. Các module phụ. Lý do: - Khách hàng, đơn hàng, thanh toán, lịch hẹn là nhóm màn có tác động trực tiếp tới vận hành mỗi ngày. - Khi hoàn thiện được các màn này, design system đã đủ thực tế để nhân rộng. - Tránh rủi ro rewrite UI toàn bộ nhưng chưa kiểm chứng với người dùng thật. ## 19. Kết luận CRM mới nên được nâng cấp theo hướng premium, sắc nét và vận hành tốt hơn, nhưng vẫn bám hệ thống Laravel/Blade hiện tại. Cách triển khai phù hợp nhất là xây một lớp design system `crm-2026`, áp dụng lên layout shell, sau đó migrate từng module quan trọng. Ưu tiên không phải là thay template cho đẹp trong một lần, mà là tạo một hệ thống giao diện mới có quy chuẩn rõ, dễ mở rộng, dễ bảo trì và phù hợp với nghiệp vụ thẩm mỹ trong giai đoạn 2026 trở đi.