Xây một content system vừa đẹp vừa dễ mở rộng
Từ token, layout, component đến dữ liệu động: cách giữ trải nghiệm nhất quán khi số lượng trang và dự án tăng lên.
8 phút đọc · 29/07/2026Đọc bài viếtCROCO UI · ANT DESIGN SYSTEM
Component native, sẵn sàng cho site thật
Bộ component dùng Inter và token Ant Design, có thể chỉnh trực tiếp trong CrocoBuilder và tái sử dụng cho nhiều dự án.
Khám phá tính năng
Tabs tổ chức nội dung theo ngữ cảnh; Progress phản hồi trạng thái theo thời gian thực.
NỘI DUNG SẢN PHẨM
Giới thiệu ngắn gọn về sản phẩm, giá trị chính và đối tượng phù hợp.
Các tính năng được nhóm rõ ràng để người dùng quét nội dung nhanh.
Quy trình triển khai minh bạch từ tiếp nhận đến bàn giao.
Thông tin hỗ trợ, tài liệu và phương thức liên hệ sau bàn giao.
Phản hồi hệ thống
Result dành cho trạng thái hoàn tất; Notification dùng cho phản hồi ngắn không làm gián đoạn luồng.
HOÀN TẤT
Hồ sơ đã được ghi nhận
Chúng tôi đã nhận đầy đủ thông tin. Bạn có thể tiếp tục theo dõi tiến độ hoặc quay lại trang tổng quan.
Hành trình triển khai
Timeline dùng repeater native để quản lý dữ liệu theo từng cột mốc ngay trong Builder.
Khám phá nhu cầu
Xác định mục tiêu kinh doanh, cấu trúc nội dung và hành vi cần có.
Thiết kế hệ thống
Áp token Ant Design, font Inter và chuẩn hóa contract component.
Xây dựng native
Đóng gói component để chỉnh sửa trực tiếp trong CrocoBuilder.
QA & tái sử dụng
Kiểm tra responsive, accessibility và đưa vào thư viện chung.
Khối CTA nổi bật
Border Beam phù hợp cho gói nổi bật, ưu đãi hoặc lời kêu gọi hành động cuối trang.
ĐỀ XUẤT
Bắt đầu dự án với bộ UI đã chuẩn hóa
Tái sử dụng component, token và runtime chung để rút ngắn thời gian triển khai.
Khám phá thư việnANT DESIGN · FOUNDATION BATCH
Trạng thái & dữ liệu
Các pattern nền tảng cho biểu mẫu, dashboard, onboarding và màn hình bất đồng bộ — dùng chung token Ant Design và contract có thể mở rộng.
FORM FEEDBACK · ALERT
Kiểm tra trước khi gửi
Còn 2 trường cần hoàn thiện
Vui lòng bổ sung số điện thoại và đồng ý điều khoản trước khi gửi hồ sơ.
Xem trường còn thiếuDASHBOARD · STATISTIC
Lượt truy cập tháng này
12840
ZERO STATE · EMPTY
Không tìm thấy kết quả
Hãy thử từ khóa khác hoặc xóa bớt bộ lọc đang áp dụng.
Xóa bộ lọcASYNC STATE · SKELETON
Danh sách đang tải
ONBOARDING · STEPS
Thiết lập dự án
Thông tin
Tên và phạm vi dự án.
Cấu hình
Token và component.
Xuất bản
QA trước khi bàn giao.
SUPPORT · COLLAPSE
Câu hỏi thường gặp
Tôi có thể dùng lại ở dự án khác không?
Có. Component, token và BEM contract được thiết kế để tái sử dụng giữa nhiều site.
Dữ liệu repeater chỉnh ở đâu?
Bạn thêm, xóa và sắp xếp item trực tiếp trong control của component ở CrocoBuilder.
Có hỗ trợ accessibility không?
Header dùng button native, liên kết panel bằng aria-controls và cập nhật aria-expanded khi tương tác.
ANT DESIGN · ACTIONS & DECISIONS
Hành động & quyết định
Một Button contract duy nhất với variation có kiểm soát, semantic link/action, Lucide icon và state đầy đủ — dùng từ landing page đến dashboard phức tạp.
Thứ bậc hành động
Trạng thái hệ thống
Kích thước & chiều rộng
Quản lý dự án
SPLIT ACTION · DROPDOWN BUTTON
Xuất bản nội dung
RISKY ACTION · TOOLTIP & POPCONFIRM
Giải thích trước, xác nhận sau
Tooltip dành cho trợ giúp ngắn; Popconfirm chỉ dùng khi người dùng sắp thực hiện hành động có rủi ro.
Chỉ quản trị viên và biên tập viên mới có thể xuất bản.
Bạn có chắc muốn xóa?Hành động này không thể hoàn tác.
ANT DESIGN · P1 COMPONENTS
Cộng tác, dữ liệu & tương tác
Các component cho dashboard, hồ sơ, upload và nội dung tương tác — có repeater native, Lucide icon, keyboard contract và responsive behavior.
TEAM · AVATAR & GROUP
Nhóm dự án
REVIEWS · RATE
Đánh giá trải nghiệm
Chọn số sao bằng chuột hoặc phím mũi tên.
4,5 trên 5
ACTIVITY · LIST
Hoạt động gần đây
FORM · UPLOAD / DRAGGER
Tải hồ sơ dự án
ASYNC · SPIN OVERLAY
Đồng bộ dữ liệu
Báo cáo dự án
Dữ liệu được cập nhật mà không làm nhảy bố cục.
UTILITY · FLOAT BUTTON
Hành động nhanh
Nhắn tin, gọi điện và nút về đầu trang hiển thị cố định ở góc màn hình.
CONTENT · CAROUSEL
Điểm nổi bật của hệ thống
CONTENT SYSTEM · BLOG
Blog & bài viết
Article Card là component tái sử dụng, sẵn sàng đặt trong query-loop khi lấy bài viết động từ WordPress.
WordPress
Thiết kế article card tối ưu cho query-loop
Một ví dụ nội dung thực tế để kiểm tra cấu trúc, khoảng cách và khả năng tái sử dụng trong query-loop.
Design System
Design token giúp nhiều dự án vẫn đồng nhất
Một ví dụ nội dung thực tế để kiểm tra cấu trúc, khoảng cách và khả năng tái sử dụng trong query-loop.
Quality
Checklist UI/UX trước khi xuất bản website
Một ví dụ nội dung thực tế để kiểm tra cấu trúc, khoảng cách và khả năng tái sử dụng trong query-loop.
SOCIAL PROOF · TESTIMONIALS
Khách hàng nói gì
Một component group dùng repeater native, tự chuyển 3–2–1 cột theo kích thước màn hình.
“Cấu trúc component rõ ràng giúp đội ngũ chúng tôi triển khai nhanh hơn rất nhiều.”
“Mọi section đều có thể tái sử dụng mà vẫn giữ được cảm giác của một website thật.”
“Desktop và mobile nhất quán, việc chỉnh sửa nội dung cũng trực quan hơn trước.”
“”
“”
“”
“”
“”
“”
COMMERCE · PRICING
Bảng giá có variation
Mỗi gói là một Pricing Card độc lập; danh sách quyền lợi bên trong dùng repeater để scale an toàn.
Starter
Cho cá nhân và website nội dung nhỏ.
đ490.000/ tháng
Chọn Starter- 30 bài viết mỗi tháng
- Component nội dung cơ bản
- Hỗ trợ ưu tiên
Professional
Cho đội ngũ cần hệ thống nội dung linh hoạt.
đ1.490.000/ tháng
Bắt đầu ngay- Không giới hạn bài viết
- Tất cả component và variation
- Hỗ trợ ưu tiên
Scale
Cho nhiều website và quy trình phức tạp.
đ3.990.000/ tháng
Liên hệ tư vấn- Nhiều website và workspace
- Design system riêng
- SLA và hỗ trợ chuyên biệt
RUNTIME V2 · MERGED LIBRARY
Data display, overlay & utility
Các component từ trang Runtime v2 đã được gom vào thư viện chính, phân nhóm theo ngữ cảnh sử dụng và dùng chung một runtime.
DATA DISPLAY · FOUNDATION
Hiển thị dữ liệu & trạng thái
Các khối nền tảng cho dashboard, bảng thuộc tính, badge và thao tác sao chép.
STATUS · TAG / KBD / COPY
Trạng thái và thao tác nhỏ
Kiểm tra các component inline trong cùng một ngữ cảnh thực tế.
Runtime v2 · Stable
Runtime đang hoạt động
Ctrl / ⌘K
SURFACE · CARD
Card variation dùng chung
Card nền tảng giữ typography, spacing và hover state nhất quán.
Design system
Card nền tảng
Card dùng chung với variant, size và hover state nhất quán.
Xem componentDATA · DESCRIPTIONS
Thông tin có cấu trúc
Danh sách label/value dùng repeater native.
Thông tin runtime
- Phiên bản
- 2.1.0
- Contract
- croco-ui-runtime/2
- Chế độ
- Production DB
- Trạng thái
- Ready
- Styling
- Homepage-aligned
DATA · TABLE
Ma trận component
Bảng có density, stripe, sort và vùng cuộn an toàn trên mobile.
| Dialog | Overlay | v2 | Focus trap | Ready |
| Drawer | Overlay | v2 | Focus return | Ready |
| Popover Menu | Navigation | v2 | Arrow keys | Ready |
| Command Palette | Utility | v2 | Combobox | Ready |
CONTENT · UTILITY
Thông báo, trích dẫn & công cụ
Các component bổ trợ cho trang nội dung, dashboard và tài liệu nội bộ.
Một design system tốt giúp đội ngũ đưa ra quyết định nhất quán.
Tài liệu nội bộ
Watermark không chặn tương tác và vẫn giữ nội dung có thể đọc.
TIME · COUNTDOWN
Đếm ngược theo duration
Hỗ trợ duration hoặc thời điểm đích, có trạng thái hoàn tất.
Countdown QA
00Ngày00Giờ00Phút00Giây
Đã hoàn tất
FORM SYSTEM · NATIVE FIELDS
Thu thập brief dự án
Input, Select và Textarea dùng chung BEM contract, trạng thái validation, kích thước control và accessibility.
PROJECT INTAKE
Bắt đầu từ một brief rõ ràng
Cho chúng tôi biết mục tiêu, phạm vi và loại dự án. Bộ field này có thể nối với form backend của từng site mà không đổi lớp trình bày.
Gửi thông tin dự án
Các trường có dấu * là bắt buộc.
FEEDBACK UX · PRODUCT COMMERCE
Phản hồi hệ thống & trải nghiệm mua hàng
Message, Loading và Feedback Panel dùng chung event system; Product Rail, Quick View, Product Detail và Checkout được đóng thành component native để tái sử dụng.
EVENT · MESSAGE
Thông báo gọn
Dùng window.CrocoUIMessage() hoặc event croco:message.
STATE · FEEDBACK PANEL
Sẵn sàng kiểm tra
Chọn Loading, Empty, Error hoặc Success để xem state chuyển đổi.
ASYNC · LOADING OVERLAY
COMMERCE · PRODUCT BLOCK
Giảm giá cực sâu
Xem tất cả →
Giảm 56%Serum Vitamin C dưỡng sáng
135.520 đ/Hộp308.000 đ
Giảm 40%Kem chống nắng dưỡng ẩm
168.000 đ/Tuýp420.000 đ
Giảm 20%Viên uống Vitamin C
383.400 đ/Chai639.000 đ
Chọn sản phẩm
Miễn phí vận chuyển cho mọi đơn hàng
Serum Vitamin C dưỡng sáng
Giảm 56%
135.520 đ/Hộp308.000 đ
Giá đã bao gồm thuế. Phí vận chuyển và các chi phí khác sẽ hiển thị khi đặt hàng.
TEMPLATE · PRODUCT DETAIL
Serum Vitamin C dưỡng sáng da
Miễn phí vận chuyển
Giảm 56%
135.520 đ/Hộp
308.000 đ
Product Detail tập trung hình ảnh, lợi ích, giá bán và hành động mua.
✓ Đổi trả trong 30 ngày
✓ Thanh toán an toàn
✓ Tư vấn sản phẩm
TEMPLATE · CHECKOUT
Hoàn tất đơn hàng
Checkout là composition native; Order Item là slot component lặp lại.
Danh sách sản phẩm
Serum Vitamin C dưỡng sángPhân loại: Hộp
x1135.520 ₫Kem chống nắng dưỡng ẩmPhân loại: Tuýp
x2168.000 ₫Thông tin đặt hàng
Họ và tên · Nhập họ và tên
Số điện thoại · Nhập số điện thoại
Địa chỉ · Nhập số nhà, tên đường
Tỉnh/Thành phố · Chọn Tỉnh/Thành phố
Ghi chú đơn hàng · Không bắt buộc
Phương thức thanh toán
◉ Tiền mặt
○ Chuyển khoản
○ Ví điện tử
COMMERCE · PRODUCT SYSTEM
Product building blocks
Các component nhỏ cho filter, variant, gallery, cart flow và order state. Layout bên ngoài vẫn là block/grid native.
FILTER BAR
VARIANT SELECTOR
Chọn phân loại
QUANTITY STEPPER
MEDIA GALLERY
COUPON CODE
SHIPPING METHOD
PAYMENT OPTION
REVIEW SUMMARY
4.8★★★★★128 đánh giá
Đóng gói đẹp, giao hàng nhanh.
Sản phẩm đúng mô tả.
ORDER · RESULT
Đặt hàng thành công
Đơn hàng của bạn đã được tiếp nhận.
#WG-2026-001WISHLIST
CONTENT SYSTEM · ONLINE COURSE
Trang khóa học online
Component LMS nhỏ, có repeater và trạng thái thật để ghép thành course landing, curriculum sidebar hoặc lesson player.
KHÓA HỌC ONLINE
Bán chạy
Xây dựng Design System thực chiến
Từ token, component API đến responsive QA: xây một hệ thống native có thể mở rộng cho nhiều website phức tạp.
- 32 bài họcTrung cấp
- 08 giờ 30 phútHọc theo tốc độ của bạn
- 1.248 học viênĐã tham gia
Tiến độ khóa học0%12/32bài đã hoàn thành
Tiếp theo: Cấu trúc token và semantic layer
Tiếp tục họcCOURSE · CURRICULUM
Nội dung khóa học
Mở từng chương để xem bài học. Các trạng thái completed/current/unlocked/locked được cấu hình độc lập.
BẠN SẼ HỌC ĐƯỢC GÌ
Kết quả sau khóa học
Xây hệ token rõ semantic và dễ đổi theme.
Thiết kế component có variation, state và contract.
Tổ chức curriculum và dữ liệu bằng repeater.
Audit responsive, accessibility và performance.
GIẢNG VIÊN
Hoàng Xuân Hòa
Design System InstructorHướng dẫn xây dựng hệ thống website native, dễ mở rộng và tối ưu cho đội ngũ.12 khóa học · 8.500+ học viênXem hồ sơLESSON · STATES
Lesson item variations
HOÀN THÀNH KHÓA HỌC
Chúc mừng bạn đã hoàn thành!
92%
Bạn đã hoàn tất toàn bộ bài học và đủ điều kiện nhận chứng chỉ.Nhận chứng chỉ ASSESSMENT · MULTIPLE CHOICE
Bài trắc nghiệm nhiều phương án
Hỗ trợ single/multiple answer, đánh dấu câu hỏi, kiểm tra đúng sai, giải thích đáp án và điều hướng trạng thái.
Câu 01 / 10
Những thành phần nào nên được quản lý bằng design token?
Chọn tất cả đáp án đúng.
KẾT QUẢ BÀI TRẮC NGHIỆM
Bạn đã vượt qua bài kiểm tra
80%8/10 câu đúng
Bạn có thể tiếp tục sang chương tiếp theo.DISCOVERY · COURSE CATALOG
Danh sách khóa học
Course Card là component nhỏ; danh sách bên ngoài dùng Grid native để đổi số cột, thứ tự hoặc kết nối query-loop về sau.
LEARNING EXPERIENCE · VIDEO
Video lesson player
Player hỗ trợ resume tiến độ, tốc độ phát, mute, fullscreen và nhận sự kiện chọn bài từ Lesson Playlist repeater.
00:00 / 00:00
BÀI 03 · VIDEO
Cấu trúc token và semantic layer
ACCOUNT · USER DASHBOARD
Dashboard người dùng & Referral Rewards
Bộ component cho khu vực thành viên: thống kê học tập, mời bạn bè, theo dõi điều kiện mở khóa và trải nghiệm nhận quà.
Khóa học đang tham gia
4
+1 khóa học tháng này
Chuỗi ngày học
12 ngày
Kỷ lục cá nhân: 18 ngày
Bạn bè đủ điều kiện
3/5
Còn 2 lượt để mở khóa
GROWTH LOOP · REFERRAL
Mời bạn bè để mở khóa khóa học
Invite Friends xử lý copy/share; Referral Progress tự tính phần trăm và trạng thái từng mốc thưởng.
REFERRAL PROGRAM
Mời bạn học cùng, mở khóa quà tặng
Chia sẻ liên kết cá nhân. Khi bạn bè hoàn thành đăng ký, tiến độ mở khóa của bạn sẽ được cập nhật.
https://new.wegreat.vn/?ref=MINHANH
Mã giới thiệuMINHANH
Đã sao chép liên kết
TIẾN ĐỘ MỜI BẠN
Còn 2 lượt mời để mở khóa khóa học
Bạn đã có 3 người bạn hoàn tất đăng ký.
- 1Khởi động+100 điểm
- 3Quà đầu tiênVoucher 20%
- 5Mở khóa khóa họcUI Foundation
REWARDS · UNLOCK & OPEN
Kho phần thưởng
Mỗi Reward Unlock là một component độc lập với ba trạng thái locked, unlocked và opened.
MỐC 1 NGƯỜI BẠN
100 điểm thưởng
Điểm đã được cộng vào tài khoản của bạn.
+100 điểmĐã hoàn thành100 điểm thưởng+100 điểm
MỐC 3 NGƯỜI BẠN
Voucher giảm 20%
Phần quà đã mở khóa và đang chờ bạn nhận.
Giảm tối đa 500.000đĐã đủ điều kiệnVoucher giảm 20%Giảm tối đa 500.000đ
MỐC 5 NGƯỜI BẠN
Khóa UI Foundation
Hoàn thành thử thách giới thiệu để mở khóa khóa học.
Trị giá 990.000đCần thêm 2 lượt mời hợp lệKhóa UI FoundationTrị giá 990.000đ
Bạn bè đã mời
3/5 người đã hoàn tất- LALan AnhTham gia hôm nayĐủ điều kiện
- HNHoàng NamTham gia 2 ngày trướcĐủ điều kiện
- MTMinh ThuĐăng ký hôm quaĐã đăng ký
- ĐAĐức AnhĐã gửi lời mờiĐang chờ
DASHBOARD CORE · COMPOSITION
Dashboard Core P1
Account Header, Navigation, Notification và Activity là component mới; Continue Learning và các trạng thái hệ thống tái sử dụng component hiện có.
Chào buổi sáng
Minh Anh
Thành viên ProThông báo
2 chưa đọcHoạt động gần đây
Xem tất cảSYSTEM STATES · REUSED COMPONENTS
Loading, empty và error state
Ba slot dưới đây dùng lại Skeleton, Empty và Alert thay vì tạo component dashboard trùng chức năng.
LOADING
EMPTY
Chưa có hoạt động
Hoạt động học tập mới sẽ xuất hiện tại đây.
Khám phá khóa họcERROR
Không thể tải dữ liệu
Vui lòng kiểm tra kết nối và thử lại.
Thử lạiDASHBOARD P2 · LEARNING & ACCOUNT
Lịch học, thành tích và tài khoản
Các module dữ liệu dùng repeater; hồ sơ cá nhân được ghép từ Avatar, Progress, Input Field và Button hiện có.
Lịch học sắp tới
GMT+7 · Hồ Chí Minh
Thành tích của bạn
2/4 huy hiệu đã mở khóa
- Khởi đầu mạnh mẽ
Hoàn thành bài học đầu tiên
1/1 - Học tập bền bỉ
Duy trì chuỗi học 7 ngày
7/7 - Người kết nối
Mời 5 người bạn hợp lệ
3/5 - Chuyên gia UI
Hoàn thành 10 khóa học
4/10 - /
- /
- /
- /
- /
- /
- /
- /
Chứng chỉ
1 chứng chỉ đã cấp
- UI Foundation
WeGreat Academy · 28/07/2026
Mã: WG-UIF-260728 - Design System thực chiến
WeGreat Academy · Đang học · 38%
Mã: Chưa cấp ·
Mã:·
Mã:·
Mã:·
Mã:·
Mã:·
Mã:
Nguyễn Minh Anh
Thành viên Pro · Cấp 8
minhanh@example.com
Hồ sơ đã hoàn thiện 76%
Mức độ hoàn thiện hồ sơ
Lịch sử điểm
1.850 điểm khả dụng
- Hoàn thành bài học+50
30/07/2026 · UI Foundation
- Mời bạn bè thành công+100
29/07/2026 · Referral
- Đổi voucher giảm giá−200
28/07/2026 · Rewards
- Chuỗi học 7 ngày+70
27/07/2026 · Achievement
·
·
·
·
·
·
GAMIFICATION P2 · ENGAGEMENT
Chuỗi học, nhiệm vụ và bảng xếp hạng
Progress, Tag và Button được tái sử dụng; Streak, Quest và Leaderboard là các component repeater độc lập.
Cấp 8
Nhà thiết kế hệ thống
1.850 XP tích lũy
Tiến độ lên cấp 9
Còn 650 XP để đạt Cấp 9 và mở khóa bộ template nâng cao.
Chuỗi học tập
Kỷ lục: 14 ngày
- T224
- T325
- T426
- T527
- T628
- T729
- CN30
Học ít nhất một bài hôm nay để duy trì chuỗi.
Nhiệm vụ học tập
Hoàn thành nhiệm vụ để nhận XP
- Học 20 phút
Hoàn thành thời lượng học hôm nay
20/20 - Hoàn thành 3 bài học
Tiến độ nhiệm vụ hằng ngày
2/3 - Giữ chuỗi 7 ngày
Nhiệm vụ tuần
5/7 - /
- /
- /
- /
- /
Bảng xếp hạng
Tuần này
- 1LALan Anh2.840 XP
Cấp 12
- 2HNHoàng Nam2.420 XP
Cấp 10
- 3MAMinh Anh1.850 XP
Cấp 8
- 4MTMinh Thu1.690 XP
Cấp 7
- XP
- XP
- XP
- XP
- XP
- XP
AUTH P3 · SIGN IN
Đăng nhập và tài khoản
Luồng đăng nhập được tinh gọn cho site thật: email, Google/Apple và trạng thái đăng nhập/đăng xuất.
Đăng nhập
Sử dụng email hoặc tài khoản liên kết để tiếp tục đăng nhập.
Nguyễn Minh Anh
minhanh@wegreat.vn
Đã đăng nhập
Phiên hiện tại đang hoạt động. Các thao tác hồ sơ và đăng xuất dùng component Button Group tái sử dụng.
BILLING P4 · SUBSCRIPTION
Gói thành viên và thanh toán
Card được tách theo header/content/footer; bảng hóa đơn chỉ phụ trách hiển thị để sẵn sàng nối dữ liệu động.
WeGreat Pro
Dành cho học viên muốn truy cập toàn bộ khóa học và quyền lợi thành viên.
đ490.000/ tháng
Quản lý gói- Không giới hạn khóa học
- Tài liệu và bài trắc nghiệm
- Quà thành viên mỗi tháng
Thông tin đăng ký
Chu kỳ hiện tại: 30/07/2026 – 30/08/2026
Đang hoạt động
Phương thức thanh toán
Thẻ được mã hóa và lưu an toàn
- VisaMặc định
•••• 4242 · Hết hạn 08/29
- MastercardMặc định
•••• 8899 · Hết hạn 11/28
- Mặc định
•••• · Hết hạn
- Mặc định
•••• · Hết hạn
- Mặc định
•••• · Hết hạn
- Mặc định
•••• · Hết hạn
- Mặc định
•••• · Hết hạn
- Mặc định
•••• · Hết hạn
Mã ưu đãi và hóa đơn
Áp dụng mã trước kỳ thanh toán tiếp theo hoặc cập nhật thông tin xuất hóa đơn.
| INV-2026-0730 | 30/07/2026 | WeGreat Pro | 490.000 đ | Đã thanh toán |
| INV-2026-0630 | 30/06/2026 | WeGreat Pro | 490.000 đ | Đã thanh toán |
| INV-2026-0530 | 30/05/2026 | WeGreat Pro | 490.000 đ | Đã thanh toán |
ORDERS P5 · ACCESS
Đơn hàng và quyền truy cập
Theo dõi giao dịch, tải hóa đơn và quản lý nội dung đã mua trong cùng một luồng.
Đơn hàng gần đây
Theo dõi trạng thái, tải hóa đơn và xem chi tiết từng đơn.
- #WG-2026-0730Đang xử lý
WeGreat Pro · 1 tháng
30/07/2026 · 1 sản phẩm
Tổng tiền490.000 đ - #WG-2026-0628Hoàn tất
Khóa học UI Foundation
28/06/2026 · 1 khóa học
Tổng tiền1.290.000 đ - #WG-2026-0512Đã hoàn tiền
Bộ tài liệu Design System
12/05/2026 · 3 tài liệu
Tổng tiền390.000 đ ·
Tổng tiền·
Tổng tiền·
Tổng tiền·
Tổng tiền·
Tổng tiền
Không có đơn phù hợp
Thử chọn một trạng thái khác.
Quyền truy cập của bạn
Sản phẩm, khóa học và tài liệu đã được mở khóa.
- Tiếp tục họcKHÓA HỌCĐã mở khóa
UI Foundation từ cơ bản đến nâng cao
68% hoàn thành
- Tải tài liệuTÀI LIỆUCó thể tải
Bộ tài liệu Design System thực chiến
100% hoàn thành
- Mở khóaKHÓA HỌCCần thêm 2 lượt mời
Motion Design chuyên sâu
0% hoàn thành
% hoàn thành
% hoàn thành
% hoàn thành
% hoàn thành
% hoàn thành
NOTIFICATIONS P6 · INBOX
Trung tâm thông báo
Một hệ thống thống nhất cho badge, popover, danh sách đầy đủ và các trạng thái dữ liệu.
Điểm vào thông báo
Badge phản ánh số chưa đọc; popover đóng bằng ESC hoặc click ra ngoài.
Thông báo gần đây
3 chưa đọcTrạng thái dữ liệu
Bạn đã đọc hết
Thông báo mới sẽ xuất hiện tại đây.
Về tổng quanKhông thể tải thông báo
Kiểm tra kết nối rồi thử lại.
Thử lạiThanh toán chuyển khoản
Luồng QR theo mẫu SePay, có trạng thái chờ, thành công, hết hạn và hiệu ứng quét hỗ trợ reduced-motion.
Bạn đang ở chế độ thử nghiệm
Đang chờ thanh toán![Mã VietQR động cho đơn hàng #12345]()
Không thể tải mã QR⌗ Quét bằng ứng dụng ngân hàng
Quét mã để thanh toán anh Tuấn
Mở ứng dụng ngân hàng và quét mã QR bên dưới
Số tiền thanh toán
50.000 ₫
- Mã đơn hàng
- #12345
- Ngân hàng thụ hưởng
- Ngân hàng TMCP Việt Nam
- Chủ tài khoản
- CONG TY WEGREAT
- Số tài khoản
- 0123456789
Nội dung chuyển khoản
WG 12345
◷ Thời gian giữ mã QRMã thanh toán còn hiệu lực trong 5 phút
00Ngày00Giờ00Phút00Giây
Mã QR đã hết hạn
Vui lòng giữ nguyên số tiền và nội dung chuyển khoản để hệ thống xác nhận tự động.
← Quay lại đơn hàngGiao dịch hoàn tất
Thanh toán thành công
Đơn hàng của bạn đã được thanh toán. Quyền truy cập khóa học đang được kích hoạt.
Số tiền đã thanh toán50.000 ₫
- Mã đơn hàng
- #12345
- Phương thức
- Chuyển khoản ngân hàng
- Mã giao dịch
- SPY-20260730-001234
- Hoàn tất lúc
- 14:25 · 30/07/2026
Phiên thanh toán đã hết hạn
Vui lòng tạo lại mã QR để tiếp tục thanh toán.
Tạo lại mã thanh toánTrạng thái thanh toán thành công
Biên nhận hoàn tất dùng lại cùng component checkout; backend chỉ cần chuyển payment_state sang success và truyền dữ liệu giao dịch.
Bạn đang ở chế độ thử nghiệm
Đang chờ thanh toán![Mã QR chuyển khoản cho đơn hàng]()
Không thể tải mã QR⌗ Quét bằng ứng dụng ngân hàng
Quét mã để thanh toán
Mở ứng dụng ngân hàng và quét mã QR bên dưới
Số tiền thanh toán
50.000 ₫
- Mã đơn hàng
- #12345
- Ngân hàng thụ hưởng
- Ngân hàng TMCP Việt Nam
- Chủ tài khoản
- CONG TY WEGREAT
- Số tài khoản
- 0123456789
Nội dung chuyển khoản
WG 12345
◷ Thời gian giữ mã QRMã thanh toán còn hiệu lực trong 5 phút
00Ngày00Giờ00Phút00Giây
Mã QR đã hết hạn
Vui lòng giữ nguyên số tiền và nội dung chuyển khoản để hệ thống xác nhận tự động.
← Quay lại đơn hàngGiao dịch hoàn tất
Thanh toán thành công
Chúng tôi đã nhận được khoản thanh toán. Quyền truy cập khóa học của bạn đã được kích hoạt.
Số tiền đã thanh toán50.000 ₫
- Mã đơn hàng
- #12345
- Phương thức
- Chuyển khoản ngân hàng
- Mã giao dịch
- SPY-20260730-001234
- Hoàn tất lúc
- 14:25 · 30/07/2026
Phiên thanh toán đã hết hạn
Vui lòng tạo lại mã QR để tiếp tục thanh toán.
Tạo lại mã thanh toánHEROUi · SCROLL SHADOW
Vùng cuộn có chỉ dẫn thị giác
Shadow tự đổi theo vị trí cuộn, giúp người dùng nhận ra còn nội dung mà không cần nút điều hướng. Component dùng repeater, hỗ trợ ngang/dọc, bàn phím và có thể lồng trong card, tab, bảng hoặc dashboard.
CONTENT RAIL · HORIZONTAL
Khám phá hệ thống component
Vuốt ngang trên mobile hoặc dùng trackpad. Shadow đầu/cuối tự biến mất theo vị trí.
ACTIVITY · VERTICAL
Cập nhật gần đây
Phù hợp notification panel, activity feed và danh sách trong sidebar.
HEROUi PRO · DASHBOARD
Premade Dashboard
Mẫu ứng dụng quản trị được dựng bằng layout native. Chỉ Navigation Rail, Account Header, Stat Card, Trend Chart, Toolbar, Progress và Data Table là component tái sử dụng.
Chào buổi sáng
Kate Moore
Quản trị viênDoanh thu
228,4 triệu
+3,3% so với kỳ trước
Chi phí
25,1 triệu
−1,4% so với kỳ trước
Lợi nhuận
203,1 triệu
+4,1% so với kỳ trước
SALES PERFORMANCE
30 ngày gần nhấtHiệu suất bán hàng
228.441.000đ+3,3%
TRAFFIC SOURCE
Nguồn truy cập
231.856 phiên trong 30 ngày
Organic · 68%
Quảng cáo · 21%
Giới thiệu · 11%
TEAM · DATA TABLE
Thành viên đang hoạt động
| #4586936 | Alex Turner | Product Manager | Nhân viên | Đang làm |
| #4586937 | Emma Davis | Senior Designer | Nhân viên | Đang làm |
| #4586933 | John Smith | CTO | Quản lý | Online |
| #4586932 | Kate Moore | CEO | Quản lý | Online |
| #4586935 | Mike Wilson | VP Engineering | Nhân viên | Nghỉ phép |
HEROUi PRO · FINANCES
Premade Finances
Mẫu tài chính tái sử dụng cùng Navigation Rail, Account Header, Stat Card, Trend Chart, Toolbar, Progress và Data Table. Dữ liệu minh họa có thể thay bằng Query Builder hoặc API ở dự án thật.
Chào buổi chiều
Fred Palmer
Nhà đầu tưTổng số dư
5.427,48 USD
+5,32% tháng này
Thay đổi 24 giờ
+120,18 USD
+2,24% hôm nay
Tăng tốt nhất · SOL
+4,72%
Giá trị 195,54 USD
PORTFOLIO
1 thángGiá trị danh mục
5.427,48 USD+8,16%
ASSET ALLOCATION
Phân bổ tài sản
Tỷ trọng hiện tại của danh mục
BTC · 24%
USDC · 38%
ETH · 20%
SOL & khác · 18%
RECENT ACTIVITY
Giao dịch gần đây
| 0xaa2bf905… | Tương tác hợp đồng | ETH | 320,65 USD | 08/12 · 12:32 |
| 0xbb4e0d71… | Đã nhận | USDC | 500,00 USD | 07/12 · 11:43 |
| 0xcc1a2f4e… | Đã gửi | ETH | 3.384,10 USD | 28/11 · 08:14 |
| 0xdd6b5a16… | Hoán đổi | BTC | 9.385,22 USD | 05/10 · 06:21 |
| 0xee7c6f54… | Đã nhận | SOL | 2.692,16 USD | 02/10 · 02:12 |
PREMADE · ANALYTICS
Analytics Overview
Lõi báo cáo dùng layout native và KPI BEM; chỉ biểu đồ, progress và toolbar là component tái sử dụng.
Lượt truy cập
2,4 triệu
+18,2% so với kỳ trước
Tỷ lệ chuyển đổi
4,82%
+0,74 điểm phần trăm
Thời lượng phiên
05:42
+38 giây mỗi phiên
PERFORMANCE
30 ngày gần nhấtXu hướng truy cập
2.401.820+18,2%
Kênh chuyển đổi
Tỷ trọng hiện tại theo dữ liệu minh họa.
Tìm kiếm tự nhiên
Quảng cáo
Giới thiệu
PREMADE · WALLET
Wallet & Transactions
Mẫu ví tập trung vào số dư, biến động, phân bổ và lịch sử giao dịch mà không đóng gói toàn bộ trang thành component.
Số dư khả dụng
128.450.000đ
+6,8% tháng này
Thay đổi hôm nay
+2.840.000đ
+2,24% trong 24 giờ
Đang xử lý
3 giao dịch
Hoàn tất trong hôm nay
PERFORMANCE
12 tuầnGiá trị tài sản
128.450.000đ+6,8%
Phân bổ tài sản
Tỷ trọng hiện tại theo dữ liệu minh họa.
Tiền mặt
Quỹ tích lũy
Đầu tư
| Nhận từ Minh Anh | Nhận | Hoàn tất | Hôm nay · 09:42 | +2.500.000đ |
| Thanh toán khóa học | Chi | Hoàn tất | Hôm qua · 16:08 | −890.000đ |
| Nạp qua ngân hàng | Nạp | Đang xử lý | 29/07 · 11:20 | +5.000.000đ |
PREMADE · BILLING
Invoice & Billing Management
KPI là composition native; bảng hóa đơn giữ component vì cấu trúc cột và repeater dữ liệu được dùng lại.
Cần thu
84.200.000 ₫
12 hóa đơn đang mở
Đã thu tháng này
216.850.000 ₫
+14,6% so với tháng trước
Quá hạn
18.400.000 ₫
3 hóa đơn cần xử lý
| #INV-2038 | Công ty An Nhiên | Chờ thanh toán | 05/08/2026 | 24.800.000 ₫ |
| #INV-2037 | Học viện Sống Đẹp | Đã thanh toán | 02/08/2026 | 18.500.000 ₫ |
| #INV-2036 | Nguyễn Minh Anh | Quá hạn | 28/07/2026 | 6.400.000 ₫ |
PREMADE · CRM
Customer & Member Management
Mẫu quản lý thành viên dùng native KPI và một bảng dữ liệu có thể nối Query Builder hoặc API ở dự án thật.
Thành viên mới
1.284
+12,8% trong 30 ngày
Đang hoạt động
8.942
76% tổng thành viên
Tỷ lệ rời bỏ
2,18%
−0,32 điểm phần trăm
| Nguyễn Minh Anh | WeGreat Pro | Đang hoạt động | 5 phút trước | 4.900.000đ |
| Trần Bảo Ngọc | Học viên | Mới tham gia | 1 giờ trước | 1.290.000đ |
| Lê Hoàng Nam | WeGreat Pro | Cần chăm sóc | 12 ngày trước | 3.600.000đ |
PREMADE · COMMERCE
Order Management
Mẫu quản lý đơn hàng ưu tiên khả năng quét nhanh, lọc trạng thái và đọc bảng tốt trên mobile.
Đơn hôm nay
248
+18 đơn so với hôm qua
Doanh thu hôm nay
186.420.000đ
+9,4% so với hôm qua
Tỷ lệ hoàn tất
94,8%
236 đơn đúng hạn
| #WG-84291 | Nguyễn Minh Anh | Đang giao | Đã thanh toán | 1.680.000đ |
| #WG-84290 | Trần Bảo Ngọc | Đang xử lý | COD | 890.000đ |
| #WG-84289 | Lê Hoàng Nam | Hoàn tất | Đã thanh toán | 2.450.000đ |