Tổng quan Frontend

TÓM TẮT

Frontend SPA sử dụng React 19 + TypeScript + Vite 6, deploy trên Cloudflare Pages. Gồm 33 trang UI, 5 nhóm service modules, và i18n 3 ngôn ngữ (EN/VI/TH).

Cấu trúc thư mục

src/
├── App.tsx                     # Main routing (33 routes, HashRouter)
├── index.tsx                   # Entry point
├── index.css                   # Global styles
├── i18n.ts                     # i18next config
├── types.ts                    # 300 dòng type definitions
│
├── pages/                      # 33 pages
│   ├── Dashboard.tsx
│   ├── Forecast.tsx            # 41KB — trang forecast chính
│   ├── Workforce.tsx           # 32KB — workforce planning
│   ├── WorkforcePlanV2.tsx     # Enhanced plan view
│   ├── Settings.tsx            # 46KB — system config
│   ├── BSINForecast.tsx        # 37KB — SKU forecasting
│   ├── CustomerDetail.tsx      # 35KB — customer detail
│   └── ...                     # 26 trang khác
│
├── components/                 # UI Components
│   ├── Layout.tsx              # 27KB — main layout + sidebar
│   ├── WorkforceSettingsTab.tsx # 24KB
│   ├── AISettingsTab.tsx       # 19KB — AI model config
│   ├── ShiftPlan/              # Shift planning components
│   └── ui/                     # Reusable UI primitives (Toast, etc.)
│
├── services/                   # Business logic & API
│   ├── api.ts                  # Supabase client wrapper
│   ├── mappers.ts              # Data transformation
│   ├── modules/                # 5 module groups (33 files)
│   │   ├── forecast/           # 15 files — forecast engine + helpers
│   │   ├── workforce/          # 6 files — workforce planning
│   │   ├── config/             # 8 files — configuration
│   │   ├── data/               # 5 files — BSIN, customers, events
│   │   └── analytics/          # 5 files — dashboards, audit
│   ├── helpers/                # Utility functions
│   └── ml/                     # ML client
│
├── contexts/                   # React Contexts
│   ├── AuthContext.tsx          # Supabase Auth
│   └── WarehouseContext.tsx     # Warehouse selection state
│
├── hooks/                      # Custom hooks
│   ├── useQueries.ts           # TanStack Query hooks
│   ├── useFormAutoSave.ts      # Auto-save form state
│   └── useNavigationGuard.ts   # Unsaved changes guard
│
├── lib/                        # Library configs
│   ├── supabase.ts             # Supabase client init
│   └── queryClient.ts          # TanStack Query client
│
├── locales/                    # i18n translations
│   ├── en.ts                   # English (55KB)
│   ├── vi.ts                   # Tiếng Việt (63KB)
│   └── th.ts                   # Thai (78KB)
│
└── types/                      # Extended type definitions
    └── workforcePlanning.ts    # 17KB workforce types

Architecture Patterns

Pattern	Áp dụng
Lazy Loading	Tất cả pages lazy-loaded via React.lazy()
Error Boundary	Wrap mỗi page trong <ErrorBoundary>
Protected Routes	<ProtectedRoute> check auth/dev bypass
Context Providers	Auth + Warehouse + Toast (3 levels)
TanStack Query	Server state management, caching
Hash Router	/#/path cho Cloudflare Pages compatibility
Code Splitting	Manual chunks: vendor, charts, i18n, supabase

Build Configuration

Vite config (vite.config.ts) chia chunks:

rollupOptions: {
  output: {
    manualChunks: {
      vendor: ['react', 'react-dom', 'react-router-dom'],
      charts: ['recharts'],
      i18n: ['i18next', 'react-i18next'],
      supabase: ['@supabase/supabase-js']
    }
  }
}

Tài liệu liên quan

• Forecast Engine (TS) — Frontend forecast logic
• Workforce Engine — 5-layer workforce planner
• Components & Pages — Danh sách components
• Config Registry — Centralized config
• i18n — Multi-language support