✦ Sellyra — Design Review Hub

Mockup HTML/CSS thuần · Palette "Midnight Gold" (chốt 260714) · Space Grotesk + Inter · Web = bản đầy đủ, Mobile = tác vụ hiện trường. Click card để mở màn hình thật.

8 màn hình Web5 màn hình Mobile tokens.css dùng chungTiếng Việt + dữ liệu mẫu thật

🖥 Web — Desktop Dashboard (bản đầy đủ)

Sidebar midnight + gold · bảng mật độ cao · 3 signature: state-machine timeline · graduated-pricing meter · auto đối soát lệch tồn
Tổng quan
KPI + sparklines, chart 7 ngày, sync status kênh, checklist onboarding, sự cố cần chú ý
Đơn hàng
10 tab trạng thái canonical, SLA countdown, bulk actions bar, filter kênh/kho/ngày
Chi tiết đơn ★
State-machine timeline ngang (signature), event log append-only, panel kênh/thanh toán/vận đơn
Sản phẩm & Listing
Mapping chip theo kênh, ma trận SKU × sàn, banner "⚡ Tự động đối soát" lệch tồn
Tồn kho
Thực tế / Đang giữ / Khả dụng theo kho, ledger drawer, modal điều chỉnh tồn
Vận chuyển
Lịch lấy hàng theo carrier (GHN/GHTK/SPX/J&T), in nhãn A6 hàng loạt, giao lại đơn fail
Kênh bán
Shop cards + token health, last-sync theo loại dữ liệu, OAuth modal, Lazada "Sắp ra mắt"
Gói cước & Hóa đơn ★
Graduated-pricing meter (signature), best-price badge, adjustment âm, SePay/VietQR

📱 Mobile — Companion App (tác vụ đơn giản)

Bottom tabs + nút quét amber nổi (signature) · KPI hero midnight · icon-grid launcher kiểu BigSeller
Trang chủ
Hero "Hôm nay" midnight + gold, strip kênh, icon-grid: Đơn hàng / Tồn kho / Khác
Đơn hàng
Search + scan, tab trạng thái cuộn ngang, order cards + hạn xử lý, FAB quét mã
Chi tiết đơn
Timeline dọc, breakdown tiền, sticky action bar "Xác nhận đơn"
Quét mã ★
Viewfinder + scan-line animation (signature), mode Kiểm đơn/Giao hàng/Kiểm kho
Tài khoản
Profile + gói cước, usage mini-card kỳ này, settings rows