Design Blueprint

Design blueprint

Khung trang quản lý InvoiceFlow

Dùng làm mẫu để dựng demo quản lý sau: scan OCR hóa đơn, lưu web, quản lý tài liệu, tổng hợp hóa đơn, lọc dữ liệu, xuất Excel định kỳ và khung vận hành.

01

Upload & OCR

Khu upload PDF/ảnh, trạng thái đang scan, cảnh báo OCR, nhận diện file trùng theo hash.

02

Review & Tổng hợp

Bảng editable kiểu Excel, tự lưu khi rời ô, xóa từng dòng scan nhầm, lọc theo nghiệp vụ.

03

Tài liệu & Lịch sử

Danh sách file đã xử lý, xóa tài liệu kéo theo rows, không scan lại tài liệu đã có.

04

Vận hành demo

Module placeholder cho sản phẩm, tồn kho, đồng bộ web bán hàng kiểu Sapo/Sales dashboard.

05

Báo cáo

KPI, lịch sử xuất Excel, báo cáo định kỳ và cảnh báo dữ liệu thiếu.

06

Cài đặt

Khung cấu hình OCR, lưu trữ Supabase, gợi ý nhanh và mẫu export.

Navigation mẫu
Dashboard
Scan hóa đơn
Tổng hợp hóa đơn
Tài liệu
Sản phẩm
Tồn kho
Lên đơn hàng
Báo cáo
Cài đặt
Bảng dữ liệu mẫu
NgàyNhà cung cấpSản phẩmSKUSLThành tiềnTrạng thái
07/06/2026Á Châu LogisticsVí cầm tayVCT0014507,144,200Đã lưu
07/06/2026ASMCuốn dính số 5LDN001961201,584,000Thiếu SKU
07/06/2026Mỹ ThanhSổ bìa cứngSDA00024560570,000Đã lưu

Nguyên tắc UI cho demo

Màu chính

Xanh cobalt cho hành động chính, vàng kem cho ô nhập tay hoặc dữ liệu thiếu.

Bảng

Header sticky, scroll ngang, input trong cell, autosave khi blur, có nút xóa dòng.

Form

Ngày dùng date picker, số dùng numeric input, trường nội bộ để trống và highlight.

Tài liệu

Mỗi file có lịch sử, trạng thái OCR, cảnh báo và xóa cascade.