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│ │Inventory│ │ Content │ │
│ │ :8082 │ │ :8081 │ │ :8084 │ │ :8083 │ │
│ └─────────┘ └─────────┘ └─────────┘ └───────────┘ │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌───────────┐ │
│ │Analytics│ │Workforce│ │ CRM │ │Role-Perm │ │
│ │ :8085 │ │ :8089 │ │ :8093 │ │ :8086 │ │
│ └─────────┘ └─────────┘ └─────────┘ └───────────┘ │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌───────────┐ │
│ │Sale Mgmt│ │E-Invoice│ │ Payment │ │ Setting │ │
│ │ :8087 │ │ :8091 │ │ :8092 │ │ :8088 │ │
│ └─────────┘ └─────────┘ └─────────┘ └───────────┘ │
│ │
│ @vppos/core (shared library) │
└──────────────────────────────────────────────────────┘
Các module
| Module | Port | Mô tả |
|---|---|---|
| Container | 8080 | Host app — layout, sidebar, auth guard, MFE loader |
| Auth | 8082 | Đăng nhập, đăng ký, quên mật khẩu |
| Dashboard | 8081 | Tổng quan kinh doanh |
| Inventory | 8084 | Hàng hóa, kho hàng, sản phẩm |
| Content | 8083 | Tin tức, danh mục, banner |
| Analytics | 8085 | Báo cáo & phân tích |
| Workforce | 8089 | Quản lý nhân sự, chấm công |
| CRM | 8093 | Khách hàng, loyalty, thẻ thành viên |
| 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 |
| E-Invoice | 8091 | Hóa đơn điện tử |
| Payment | 8092 | Thanh toán, ngân hàng, ví điện tử |
| Setting | 8088 | Cài đặt hệ thống |
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";