checkpro.vn

Hướng dẫn Quản lý Sản phẩm trên Mobile (CheckPro Manager)

Đối tượng: Business Admin
App: CheckPro Manager (React Native / Expo)
Cập nhật: 2026-04-21

1. Tổng quan

App CheckPro Manager hỗ trợ đầy đủ chức năng quản lý sản phẩm trên di động, bao gồm:

  • Xem danh sách + tìm kiếm + lọc
  • Thêm sản phẩm mới (trình hướng dẫn 5 bước)
  • Chỉnh sửa sản phẩm
  • Xem chi tiết sản phẩm
  • Quản lý mẫu mã & phiên bản
  • Quản lý lô sản xuất
  • Xem đánh giá sản phẩm
  • Xem hành trình sản phẩm

2. Danh sách sản phẩm

Truy cập

  • Từ tab bar → nhấn "Sản phẩm"
  • Hoặc từ Tổng quan → nhấn card "Sản phẩm"

Giao diện

Thanh tìm kiếm (thanh tìm kiếm):

  • Nhập tên sản phẩm → tìm kiếm tự động (debounce 350ms)
  • Nhấn 🔍 để công tắc hiện/ẩn

Thống kê nhanh (Nhãn trạng thái):

  • Hiển thị: Tổng | Hoạt động | Bản nháp | Ngừng hoạt động

Bộ lọc (bộ lọc):

  • Tabs: Tất cả | Hoạt động | Bản nháp | Ngừng KD

Danh sách (FlatList): Mỗi sản phẩm hiển thị:

  • Icon trạng thái + Tên sản phẩm + Mã SKU
  • Danh mục (tag) + Trạng thái (tag màu)
  • Ngày tạo
  • Menu ⋮ (dots-vertical) → Action Sheet

Action Sheet (menu ⋮)

Hành động Mô tả
Xem chi tiết Chuyển đến Detail screen
Sửa Chuyển đến Sửa screen
Xem lô Chuyển đến Lots screen
Mẫu mã Chuyển đến Variants screen
Xóa 🔴 Xóa sản phẩm (có xác nhận)

Xóa nhiều (Bulk Xóa)

  1. Nhấn giữ (long press) 1 sản phẩm → chuyển sang Selection Mode
  2. Tick các sản phẩm cần xóa
  3. Thanh ghim dưới cùng hiện: "Đã chọn X kết quả — [Xóa]"
  4. Nhấn Xóa → Xác nhận

3. Thêm sản phẩm (trình hướng dẫn 5 bước)

Truy cập

  • Nhấn nút ➕ (góc phải trên thanh navbar)

Các bước

Bước 1: Thông tin chung

Trường Bắt buộc UI Component
Tên sản phẩm ✅ Ô nhập
Danh mục ✅ Ô nhập + bảng chọn danh mục
Loại sản phẩm ❌ Nhãn trạng thái (focus/default)
SKU Code ❌ Ô nhập
Trạng thái ❌ Nhãn trạng thái (focus/default công tắc)

Bước 2: Sản xuất & OCOP

Trường Mô tả
Quốc gia Bảng chọn quốc gia
Nơi sản xuất Ô nhập
Giá Ô nhập number
OCOP Collapsible section (Pressable)

Bước 3: Nội dung mở rộng & SEO

Trường Mô tả
Thông tin SP Ô nhập multiline
Quy trình Ô nhập multiline
Kỹ thuật Ô nhập multiline
Câu chuyện Ô nhập multiline
Pháp lý/SEO Collapsible section

Bước 4: Hình ảnh

  • Nút "Chọn ảnh" → Camera hoặc Gallery
  • Grid ảnh: nhấn đặt primary (huy hiệu "Ảnh đại diện")
  • Nhấn ✕ để xóa ảnh

Bước 5: Phiên bản r1.0

Trường Mô tả
Tên phiên bản "Nguyên bản"
Loại thay đổi Nhãn trạng thái công tắc
Ngày áp dụng bộ chọn ngày
Thành phần Multiline text
Thông số KT Multiline text
Ảnh phiên bản Camera/Gallery tải lên

Thanh tiến trình

  • Hiển thị % hoàn thành dạng thanh bước
  • Điều hướng giữa các bước bằng nút ← Trước / Tiếp theo →
  • Bước cuối hiện nút "Lưu sản phẩm"

Sau khi lưu

  1. Tạo Product + Variant DEFAULT + Revision r1.0 (atomic)
  2. Tải lên ảnh sản phẩm (Promise.allSettled)
  3. Tải lên ảnh revision (tuần tự)
  4. thông báo nhanh thành công → chuyển đến trang Sửa

4. Chi tiết sản phẩm

Giao diện

Phần đầu: thanh điều hướng + tên SP + icons (pencil, archive)

Gallery ảnh: Cuộn ngang + chấm indicators

Thông tin chính:

  • Nhãn trạng thái trạng thái
  • Brand, Category, Origin (meta tags)
  • Các hàng thông tin chi tiết

KPI Cards (nếu có):

  • Giá bán, Số lượng bán, Tồn kho, Doanh thu

Quick Actions:

  • Nút: Lô sản xuất | Phiên bản | Đánh giá | Sửa

Đánh giá (nếu có):

  • Rating trung bình + Star visualization
  • Progress bars breakdown

Sections mở rộng:

  • Thông tin sản phẩm, Quy trình, Kỹ thuật, Câu chuyện

5. Chỉnh sửa sản phẩm

  • Giao diện tương tự trang Thêm (biểu mẫu 5 bước)
  • Dữ liệu sản phẩm được nạp sẵn vào biểu mẫu
  • Thông tin mở rộng được hiển thị lại trong biểu mẫu
  • Ảnh hiện có: hiển thị gallery + nút xóa
  • Thay đổi trạng thái: nút chuyển trạng thái Hoạt động/Ngừng/Bản nháp
  • Nhấn "Lưu" để cập nhật sản phẩm

Điều hướng nhanh (từ trang Sửa)

  • Phiên bản sản phẩm → /products/versions?productId={id}
  • Lô sản xuất → /products/lots?productId={id}

6. Quản lý Mẫu mã & Phiên bản (Mobile)

Truy cập

  • Từ Sửa → nhấn "Phiên bản sản phẩm"
  • Hoặc Action Sheet → "Product Versions"
  • Route: /products/versions?productId={id}

Giao diện

Danh sách mẫu mã (FlatList):

  • Tìm kiếm client-side +
  • Mỗi card hiển thị: code, name, status, isDefault huy hiệu
  • Mở rộng → lazy-load revisions (có cache)

Hành động mẫu mã (Action Sheet):

Hành động Điều kiện
Tạo mới Luôn hiện
Chỉnh sửa Luôn hiện
Đặt mặc định Chỉ khi Hoạt động & !isDefault
Bật/tắt Luôn hiện

Danh sách phiên bản (expandable):

  • Mỗi revision: revisionNo, name, status huy hiệu
  • huy hiệu 🔒 khi isLocked, ★ khi isCurrent
  • Action Sheet: Sửa (Bản nháp+!Bị khóa), Phát hành, Ngừng, Phát hành lại

Tạo phiên bản mới:

  • RevisionNo auto-suggest
  • Tên, loại thay đổi, ngày hiệu lực
  • Thành phần, thông số KT
  • bộ chọn ngày cho ngày

7. Quản lý Lô sản xuất

Truy cập

  • Từ Sửa → "Lô sản xuất"
  • Route: /products/lots?productId={id}

Chức năng

Hành động Mô tả
Xem danh sách FlatList: mã lô, ngày SX, HSD, số lượng
Tạo lô hộp thoại biểu mẫu: mã lô, ngày SX, HSD, số lượng, ghi chú
Sửa lô hộp thoại biểu mẫu (cấm đổi revision nếu đã có QR)

Lưu ý quan trọng

  • Khi tạo lô, hệ thống tự động gắn phiên bản hiện tại của mẫu mã mặc định
  • Phiên bản gắn lô sẽ bị khóa (IsLocked) → không sửa được nữa

8. Đánh giá sản phẩm

Truy cập

  • Route: /products/reviews

Chức năng

  • Xem danh sách đánh giá (paged)
  • Lọc theo trạng thái: Chờ duyệt, Đã duyệt, Từ chối
  • Xem chi tiết đánh giá
  • Duyệt / Từ chối đánh giá

9. Mẹo sử dụng trên Mobile

  1. Kéo để làm mới: Kéo xuống để làm mới danh sách
  2. Nhấn giữ để vào chế độ chọn nhiều để xóa hàng loạt
  3. Ảnh được nén tự động trước khi tải lên để tiết kiệm dung lượng
  4. Giao diện Sáng/Tối: tự động theo cài đặt hệ thống
  5. Dữ liệu tra cứu (danh mục, quốc gia, tiêu chuẩn) được lưu tạm để không phải tải lại mỗi lần mở biểu mẫu
  6. Thông báo nhanh: hiện ở trên cùng khi thao tác thành công hoặc lỗi