VPPOS Admin — Tổng quan
VPPOS Admin là hệ thống quản trị dành cho nền tảng VPPOS, được xây dựng theo kiến trúc Micro-Frontend (MFE) với Vite Module Federation.
Công nghệ chính
| Công nghệ | Mục đích |
|---|---|
| React 18 + TypeScript | UI framework |
| Vite + Module Federation | Build tool + MFE runtime |
| pnpm workspaces | Package manager (monorepo) |
| Turborepo | Build orchestrator |
| Redux Toolkit + RTK Query | State management + API |
| React Hook Form + Zod | Form + validation |
| Tailwind CSS v4 | Styling |
| dayjs | Date/time utilities |
Kiến trúc tổng thể
┌────────────────────────────────────────────────────────┐
│ Container (Host :8080) │
│ ┌──────────┐ ┌────────── ┐ ┌──────────┐ ┌──────────┐ │
│ │ Auth │ │Dashboard │ │ Content │ │Inventory │ │
│ │ :8082 │ │ :8081 │ │ :8083 │ │ :8084 │ │
│ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │Analytics │ │Role-Perm │ │Sale Mgmt │ │ Setting │ │
│ │ :8085 │ │ :8086 │ │ :8087 │ │ :8088 │ │
│ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │Workforce │ │E-Invoice │ │ Payment │ │ CRM │ │
│ │ :8089 │ │ :8091 │ │ :8092 │ │ :8093 │ │
│ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ Mobile │ │ Partner │ │Accounting│ ┌──────────┐ │
│ │ :8094 │ │ :8095 │ │ :8096 │ │E-Sign │ │
│ └──────────┘ └──────────┘ └──────────┘ │ :8097 │ │
│ └──────────┘ │
│ @vppos/core (shared library) │
└────────────────────────────────────────────────────────┘
Các module
| Module | Port | Mô tả |
|---|---|---|
| Container | 8080 | Host app — layout, sidebar, auth guard, MFE loader |
| Dashboard | 8081 | Tổng quan kinh doanh |
| Auth | 8082 | Đăng nhập, đăng ký, quên mật khẩu |
| Content | 8083 | Tin tức, danh mục, banner |
| Inventory | 8084 | Hàng hóa, kho hàng, nhà cung cấp |
| Analytics | 8085 | Báo cáo & phân tích |
| Role & Permission | 8086 | Phân quyền, gói đăng ký, chi nhánh |
| Sale Manage | 8087 | Quản lý bán hàng, đơn hàng |
| Setting | 8088 | Cài đặt hệ thống |
| Workforce | 8089 | Quản lý nhân sự, chấm công, phiên ca |
| E-Invoice | 8091 | Hóa đơn điện tử |
| Payment | 8092 | Thanh toán, ngân hàng, ví điện tử |
| CRM | 8093 | Khách hàng, loyalty, thẻ thành viên |
| Mobile | 8094 | WebView cho app mobile |
| Partner | 8095 | Quản lý đối tác, hợp đồng, đặt loa |
| Accounting | 8096 | Sổ kế toán, kê khai thuế |
| E-Signature | 8097 | Chữ ký số, chứng thư số |
thông tin
Port 8090 được dự trữ cho module Marketing (chưa triển khai).
Shared package
@vppos/core chứa toàn bộ UI components, hooks, utils, types, constants dùng chung. Mọi module đều import từ core — không duplicate code.
import { Button, Input, Modal } from "@vppos/core/ui/react";
import { useDebounce } from "@vppos/core/hooks";
import { toastUtils } from "@vppos/core/utils";