Admin Dashboard

1. Kiểm soát Tài liệu

Thuộc tính	Giá trị
Gói	`@nx-app/client`
Mô tả	`[APP-00910-CLIENT] NX-Seller App - Client (Admin Dashboard)`
Phiên bản	0.0.1-0
Loại	Ứng dụng Web (SPA)
Runtime	Trình duyệt / Bun (dev)
Cổng Dev Server	3001 (Vite, `strictPort`)
Triển khai	Docker / Nginx

2. Phạm vi & Mục tiêu

2.1. Phạm vi

Admin Dashboard (@nx-app/client) là ứng dụng web quản trị cho nền tảng BANA. Nó dẫn người dùng từ bước xác thực và onboarding vào không gian làm việc Organizer → Merchant, nơi các chủ doanh nghiệp, người vận hành và quản trị viên quản lý toàn bộ hoạt động của họ thông qua trình duyệt web.

Cổng back-office hướng tới merchant là một ứng dụng riêng, @nx-app/bo ("Back Office"). Ứng dụng này (@nx-app/client) là Admin Dashboard.

2.2. Mục tiêu

Điều hướng Không gian làm việc: Organizer launchpad → Không gian làm việc Merchant với điều hướng theo từng module.
Quản lý Toàn diện: Sản phẩm, danh mục, kho, bán hàng, tài chính, đội ngũ và báo cáo.
Trực quan hóa Dữ liệu: Biểu đồ và bảng phong phú cho thông tin kinh doanh chuyên sâu.
Thiết kế Responsive: Hoạt động tốt trên trình duyệt máy tính để bàn, máy tính bảng và điện thoại di động.
An toàn kiểu dữ liệu: An toàn kiểu từ đầu đến cuối với TypeScript và xác thực schema thời gian chạy.

3. Ngăn xếp Công nghệ

Các phiên bản dưới đây được phản chiếu từ apps/client/package.json. Phiên bản các thư viện dùng chung được ghi trong Platform Facts.

3.1. Framework Cốt lõi

Công nghệ	Phiên bản	Mục đích
React	^19.2.1	Thư viện Thành phần UI
React DOM	^19.2.1	Kết xuất DOM
react-router-dom	^7.9.4	Định tuyến phía Client
TypeScript	~6.0.2	An toàn kiểu dữ liệu

3.2. Quản lý Trạng thái

Công nghệ	Phiên bản	Mục đích
Redux Toolkit	^2.9.1	Quản lý Trạng thái Toàn cục
React Redux	^9.2.0	Liên kết React-Redux
TanStack Query	^5.90.5	Trạng thái Server & Caching
ra-core	^5.13.2	Lõi Framework Admin

3.3. Thành phần UI

Công nghệ	Phiên bản	Mục đích
@nx-app/admin-ui-kit	workspace:*	Thư viện Thành phần UI dùng chung
radix-ui	^1.4.3	Các thành phần cơ sở dễ tiếp cận
Tailwind CSS	^4.1.16	Utility-first Styling
Lucide React	^0.552.0	Thư viện Biểu tượng
next-themes	^0.4.6	Chuyển đổi giao diện

3.4. Biểu mẫu & Xác thực

Công nghệ	Phiên bản	Mục đích
React Hook Form	^7.66.0	Quản lý Trạng thái Biểu mẫu
@hookform/resolvers	^5.2.2	Tích hợp Xác thực Schema

3.5. Bảng Dữ liệu & Kéo-Thả

Công nghệ	Phiên bản	Mục đích
TanStack Table	^8.21.3	Bảng dữ liệu Headless
TanStack Virtual	^3.13.12	Danh sách ảo hóa
@dnd-kit/core	^6.3.1	Lõi Kéo-Thả
@dnd-kit/sortable	^10.0.0	Danh sách có thể sắp xếp

3.6. Build & Phát triển

Công nghệ	Phiên bản	Mục đích
Vite	^7.1.7	Công cụ Build & Dev Server
@vitejs/plugin-react	^5.0.4	Tích hợp React
vite-plugin-pwa	^1.1.0	Hỗ trợ PWA
ESLint	^9.36.0	Kiểm tra lỗi mã nguồn
Prettier	^3.8.3	Định dạng mã nguồn
terser	^5.44.0	Minify cho bản production

4. Kiến trúc

4.1. Các lớp Ứng dụng

4.2. Context Providers

Ứng dụng khởi tạo một DI container và bao bọc cây thành phần bằng các provider trạng thái và giao diện (xem application/ApplicationContext.tsx và App.tsx):

4.3. Tích hợp Core Admin

Thành phần App gắn CoreAdminContext từ ra-core với các provider được phân giải từ DI container:

Provider	Triển khai	Nguồn	Mục đích
dataProvider	`DefaultRestDataProvider`	`@minimaltech/ra-core-infra`	Giao tiếp REST API
authProvider	`AuthProvider`	`@nx-app/admin-ui-kit`	Luồng Xác thực
i18nProvider	`DEFAULT_I18N_PROVIDER`	`@minimaltech/ra-core-infra`	Đa ngôn ngữ (en/vi)

5. Cấu trúc Dự án

apps/client/
├── src/
│   ├── application/              # DI container, khởi tạo app & providers
│   │   └── services/
│   │       ├── apis/             # API cục bộ của client (OAuth2Api)
│   │       └── networks/         # Dịch vụ mạng (NxOAuthNetworkService)
│   ├── assets/                   # Tài sản tĩnh (svgs, images)
│   ├── components/
│   │   └── core/                 # adaptive, breadcrumb, button, card, category,
│   │                             #   chart, common, dnd, icon, input, loading,
│   │                             #   modal, notification, resource, skeleton,
│   │                             #   table, title, tour
│   ├── constants/                # Hằng số ứng dụng (routes, sidebar, theo miền:
│   │                             #   commerce, finance, inventory, sale, team, …)
│   ├── helpers/                  # Các hàm tiện ích
│   ├── hooks/                    # api, onboarding, redux, socket, table, view,
│   │                             #   workspace + hooks cấp gốc
│   ├── interfaces/               # Interface TS cục bộ của client (4 tệp)
│   ├── layout/                   # AppLayout, CheckOnboarding, main, root, basic,
│   │                             #   common, form, launchpad, no-auth, screen
│   ├── libs/                     # Cấu hình thư viện ngoài (tanstack)
│   ├── redux/                    # Store + slices
│   ├── screens/                  # Nhóm route auth / no-auth / errors
│   ├── socket/                   # Trình quản lý kết nối socket
│   ├── themes/                   # Context giao diện & tỉ lệ giao diện
│   ├── utilities/                # Tiện ích khác
│   ├── App.tsx                   # Gốc định tuyến + CoreAdminContext
│   └── main.tsx                  # Điểm vào
├── scripts/                      # Script build
└── public/                       # Tài sản tĩnh / PWA

6. Màn hình & Định tuyến

Màn hình được tổ chức thành ba nhóm route trong src/screens/: no-auth (công khai), auth (đã xác thực), và errors. Các module nghiệp vụ không còn là một danh sách phẳng - chúng nằm bên trong không gian làm việc Merchant.

6.1. Route Cấp cao nhất (`App.tsx`)

Route	Thành phần	Nhóm
`/login`	`SignInScreen`	no-auth
`/verify-email`	`VerifyScreen`	no-auth
`/sign-up`	`SignUpScreen`	no-auth
`/forgot-password`	`ForgotPasswordScreen`	no-auth
`/reset-password`	`ResetPassScreen`	no-auth
`/*`	`AuthRoutes` (được bảo vệ)	auth

6.2. Route Đã xác thực (`auth/Auth.route.tsx`)

Được bảo vệ bằng useAuthState; các yêu cầu chưa xác thực sẽ chuyển hướng về /login. Cây con được bao bởi OnboardingStateProvider + CheckOnboarding.

Route	Thành phần	Ghi chú
`/*`	`RootRoutes`	Dashboard trang chủ + Organizer launchpad
`/organizer/onboarding/*`	`OrganizerCreateScreen`	Tạo Organizer (v2)
`/settings/*`	`AccountSettingsRoutes`	Cài đặt tài khoản
`/merchant/:merchantId/*`	`MerchantRoutes`	Không gian làm việc Merchant
`/authentication-error`	`Page401`	-
`/access-denied`	`Page403`	-
`*`	`Page404`	-

RootRoutes (auth/root/Root.route.tsx) gắn /organizer → OrganizerScreen (launchpad/danh sách organizer) và / (HOME) → HomeScreen.

6.3. Module Không gian làm việc Merchant (`auth/merchant/$merchant-id/Merchant.route.tsx`)

Được gắn tại /merchant/:merchantId/* và bao bởi MainLayout. Các module được định danh bằng MerchantModules:

Module	Đường dẫn	Màn hình con
sale	`/sale/*`	dashboard, sale-order, sale-customer, sale-channel, transaction, space-tables, sale-restaurant-floor/room/table
product	`/product/*`	dashboard, product, product-variant, category, fare, fare-set
inventory	`/inventory/*`	dashboard, stock, material, vendor, unit-of-measure, inventory-location, tax, promotion, devices
customer	`/customer/*`	dashboard
finance	`/finance/*`	dashboard, finance-account, finance-category, finance-transaction, finance-wallet, finance-voucher
team	`/team/*`	dashboard, employee, role, policy-definition
report	`/report/*`	revenue, ledger, hd-tickets
settings	`/settings/*`	general, merchant, payment-settings, shift

Một route /launchpad (MerchantLaunchpadScreen) nằm ngoài MainLayout để chọn module.

6.4. Onboarding, Organizer & Importation (`auth/`)

Khu vực	Thư mục	Nội dung
Onboarding	`auth/onboarding/`	welcome, business, verify-identity, pricing-plan, common - được kiểm soát bởi `CheckOnboarding`
Organizer	`auth/organizer/`	create, create-v2 (`OrganizerCreateScreen`), `$organizer-id/settings`
Cài đặt Tài khoản	`auth/account-settings/`	profile, change-password, appearance
Importation	`auth/importation/`	Trình nhập CSV: upload → mapping → review → previewImport

6.5. Trang Lỗi (`errors/`)

Page401, Page403, Page404, Page500, Page503, CrashError (CrashErrorPage), OrganizerAccessDenied, BaseErrorPage.

6.6. Mẫu Cấu trúc Màn hình CRUD

Các màn hình con CRUD (ví dụ product/product, team/role) tuân theo một cấu trúc thư mục nhất quán:

{module}/{entity}/
├── index.ts                     # Export của module
├── {Entity}.screen.tsx          # Màn hình danh sách (hoặc list/{Entity}.screen.tsx)
├── list/
│   ├── index.tsx                # Xem danh sách
│   └── {Entity}Table.tsx        # Bảng dữ liệu
├── create/
│   ├── index.tsx
│   └── {Entity}Create.screen.tsx
├── edit/
│   ├── index.tsx
│   └── {Entity}Edit.screen.tsx
├── form/                        # Form dùng chung (ví dụ {Entity}Form.tsx)
└── common/                      # Hooks, sections, utils dùng chung

7. Dịch vụ API

7.1. Kiến trúc Dịch vụ

Các lớp dịch vụ API kế thừa BaseApiService từ @minimaltech/ra-core-infra, cung cấp các thao tác CRUD tiêu chuẩn trên một resource:

typescript

export class OAuth2Api extends BaseApiService {
  constructor(
    @inject({ key: CoreBindings.DEFAULT_REST_DATA_PROVIDER })
    protected dataProvider: IDataProvider,
    @inject({ key: 'services.NxOAuthNetworkService' })
    protected nxOAuthNetworkService: NxOAuthNetworkService,
  ) {
    super({ scope: OAuth2Api.name, resource: RestEndpoints.OAUTH2 });
  }
}

Toàn bộ danh mục các lớp API theo miền được định nghĩa trong @nx-app/admin-ui-kit (xem Admin UI Kit). Client import chúng và đăng ký vào DI container của mình qua RaApplication.bindingList() (application/application.ts). Chỉ OAuth2Api là cục bộ của client.

7.2. Dịch vụ Đăng ký qua DI (`bindingList()`)

Miền	Dịch vụ API đã đăng ký
Định danh & Truy cập	AuthApi, UserApi, UserIdentifierApi, UserConfigurationApi, EmployeeApi, RoleApi, PermissionApi, PolicyApi, PolicyDefinitionApi, LicenseApi
Tổ chức	OrganizerApi, MerchantApi
Commerce / Sản phẩm	ProductApi, ProductVariantApi, VariantApi, CategoryApi, FareApi, FareSetApi, AssetsApi, MetaLinkApi
Bán hàng	SaleChannelApi, SaleOrderApi, SaleCustomerApi, TransactionApi, SalesReportApi, AllocationLayoutApi, AllocationZoneApi, AllocationUnitApi
Kho	InventoryItemApi, InventoryStockApi, InventoryTrackingApi, InventoryLocationApi, MaterialApi, UnitOfMeasureApi, VendorApi, VendorItemApi, PurchaseOrderApi, CostApi, PromotionApi
Tài chính / Sổ cái	FinanceAssetApi, FinanceTransactionApi, FinanceCategoryApi, FinanceVoucherApi, FinanceWalletApi, FinanceAccountApi, LedgerBatchApi, LedgerActionApi, LedgerIdentifierApi
Thuế / Hóa đơn	TaxApi, TaxSetApi, TaxTypeApi, TaxGroupApi, InvoiceApi, InvoiceTaxInfoApi, DiscriminationTypeApi
Thanh toán & Thiết bị	PaymentApi, DeviceApi
Cấu hình / Cài đặt	SettingApi, ConfigurationApi, IIApiConfigApi, RuleApi
Dữ liệu Tham chiếu	VnProvinceApi, VnWardApi
Help Desk	HelpDeskTicketApi, HelpDeskTicketCategoryApi, HelpDeskTicketTagApi
Agent	AgentApi
Cục bộ của client	OAuth2Api, EnvironmentService, NxOAuthNetworkService, SocketConnectionManager, SocketSubscriptionManager

8. Quản lý Trạng thái

8.1. Cấu hình Redux Store

Redux store (redux/store.ts) gộp các slice reducer và reset khi đăng xuất (ReduxActionTypes.RESET_APP):

typescript

const appReducer = combineReducers({
  workspace: workspaceReducer,
  temporary: temporaryReducer,
  common: commonReducer,
  product: productReducer,
  fare: fareReducer,
  listView: listViewReducer,
  saleOrder: saleOrderReducer,
  transaction: transactionReducer,
  financeVoucher: financeVoucherReducer,
  merchant: merchantReducer,
  permissionTree: permissionTreeReducer,
  stock: stockReducer,
  spaceTables: spaceTablesReducer,
  revenueFilter: revenueFilterReducer,
});

8.2. Redux Slices

Slice	Mục đích
workspace	Không gian làm việc hiện tại (ngữ cảnh organizer/merchant, dữ liệu org & merchant đã tải)
temporary	Dữ liệu tạm theo khóa (bản nháp form, thay đổi chưa lưu)
common	Trạng thái UI ứng dụng dùng chung
product	Trạng thái chỉnh sửa sản phẩm
fare	Trạng thái chỉnh sửa fare / fare-set
listView	Tùy chọn xem bảng/danh sách (bộ lọc, sắp xếp, phân trang)
saleOrder	Trạng thái làm việc đơn bán hàng
transaction	Trạng thái xem giao dịch
financeVoucher	Trạng thái voucher tài chính
merchant	Trạng thái chỉnh sửa merchant
permissionTree	Trạng thái cây quyền của vai trò
stock	Trạng thái xem tồn kho
spaceTables	Trạng thái bố cục không gian/bàn nhà hàng
revenueFilter	Trạng thái bộ lọc báo cáo doanh thu

8.3. Trạng thái Server với TanStack Query

Trạng thái server (dữ liệu API) được quản lý riêng bằng các hook TanStack Query (hooks/api/):

Hook	Mục đích
useGetData	Lấy một tài nguyên với caching
useInfiniteGetData	Lấy dữ liệu vô tận / phân trang
useMutationData	Tạo / Cập nhật / Xóa
useRefresh	Vô hiệu hóa cache truy vấn
useVirtualAutocomplete	Tự động hoàn thành ảo hóa
useVirtualAutocompleteArray	Tự động hoàn thành đa chọn ảo hóa
useCategoryDescendants	Lấy cây con danh mục
useLedgerIdentifier	Tra cứu định danh sổ cái

9. Giao diện TypeScript

Các interface theo miền hiện nằm trong @nx-app/admin-ui-kit và @nx-app/core. Client chỉ giữ một số tệp interface cục bộ trong src/interfaces/:

Tệp Giao diện	Mục đích
`workspace.interface.ts`	Kiểu trạng thái workspace (organizer/merchant)
`redux.interface.ts`	Các kiểu action/state Redux
`sidebar.interface.ts`	Các kiểu mục điều hướng / sidebar
`launchpad-module.interface.ts`	Các kiểu mô tả module launchpad

10. Custom Hooks

10.1. API Hooks (`hooks/api/`)

Hook	Mục đích
`useGetData`	Lấy dữ liệu với caching
`useInfiniteGetData`	Lấy dữ liệu phân trang
`useMutationData`	Thay đổi dữ liệu
`useRefresh`	Làm mới cache truy vấn
`useVirtualAutocomplete`	Tự động hoàn thành ảo hóa
`useVirtualAutocompleteArray`	Tự động hoàn thành đa chọn
`useCategoryDescendants`	Lấy cây con danh mục
`useLedgerIdentifier`	Tra cứu định danh sổ cái

10.2. View Hooks (`hooks/view/`)

Hook	Mục đích
`useViewController` / `useViewControllerV2`	Bộ điều khiển view
`useListViewController`	Bộ điều khiển list view
`useViewConfig`	Cấu hình view
`useViewState`	Quản lý trạng thái view
`useViewTableAutosave`	Tự động lưu bảng view
`buildWhere` / `mergeWhere` / `buildFilterMeta`	Trình dựng bộ lọc

10.3. Table & Redux Hooks

Hook	Thư mục	Mục đích
`useDataTableController`	`hooks/table/`	Quản lý instance bảng
`useDataTableState`	`hooks/table/`	Đồng bộ trạng thái bảng
`useBaseTableAutosave`	`hooks/table/`	Tự động lưu bảng cơ sở
`useBlinkedCell`	`hooks/table/`	Làm nổi ô
`useAppDispatch`	`hooks/redux/`	Dispatch có kiểu
`useAppSelector`	`hooks/redux/`	Selector có kiểu

10.4. Workspace, Socket & Utility Hooks

Hook	Thư mục / Tệp	Mục đích
`useWorkspaceMerchantData`	`hooks/workspace/`	Nạp dữ liệu workspace merchant
`useWorkspaceOrganizerData`	`hooks/workspace/`	Nạp dữ liệu workspace organizer
`useWorkspaceSidebar`	`hooks/workspace/`	Mô hình điều hướng sidebar
`useOnboardingState`	`hooks/onboarding/`	Trạng thái luồng onboarding
`useSocketReconnect`	`hooks/socket/`	Xử lý kết nối lại socket
`useDataProviderHeaders`	`useDataProviderHeaders.ts`	Tiêm header API
`useMerchantIdHeaders`	`useMerchantIdHeaders.ts`	Header `x-merchant-id`
`useWarnUnsavedChanges` / `useWarnExitDirty`	cấp gốc	Cảnh báo thay đổi chưa lưu
`useLogout`	`useLogout.ts`	Xử lý đăng xuất
`useUserProfile` / `useUserLicense` / `useUserPreferences`	cấp gốc	Dữ liệu người dùng hiện tại

11. Luồng Xác thực

11.1. Auth Provider

AuthProvider (từ @nx-app/admin-ui-kit, bound dưới khóa DEFAULT_AUTH_PROVIDER) triển khai:

Phương thức	Mục đích
`login()`	Xử lý đăng nhập với thông tin xác thực
`logout()`	Xóa trạng thái auth và chuyển hướng
`checkAuth()`	Xác minh tính hợp lệ của token
`checkError()`	Xử lý lỗi HTTP (401, 403)
`getIdentity()`	Lấy người dùng hiện tại
`getPermissions()`	Lấy quyền người dùng
`getRoles()`	Lấy vai trò người dùng

11.2. Trạng thái Xác thực

12. Hệ thống Giao diện

12.1. Theme Provider Stack

ThemeProvider (next-themes)
└── ActiveThemeProvider (màu nhấn)
    └── ThemeScaleProvider (tỉ lệ UI)
        └── Tailwind CSS v4 (chế độ tối qua class)

12.2. Tính năng Giao diện

Chế độ Tối/Sáng: Chuyển đổi qua next-themes (mặc định light, thuộc tính class)
Tùy chọn Hệ thống: Tôn trọng cài đặt hệ điều hành
Lưu trữ: Lưu tùy chọn trong localStorage
Biến CSS: Thuộc tính tùy chỉnh của Tailwind CSS

13. Build & Triển khai

13.1. Script Build

Script	Lệnh	Mục đích
`dev`	`vite --mode dev`	Development server (cổng 3001)
`build`	`sh ./scripts/build.sh`	Build sản xuất
`build:develop`	`sh ./scripts/rebuild.sh development`	Build phát triển
`build:staging`	`sh ./scripts/rebuild.sh staging`	Build staging
`build:production`	`sh ./scripts/rebuild.sh production`	Build sản xuất
`build:alpha`	`sh ./scripts/rebuild.sh alpha`	Build alpha
`clean:build`	`sh ./scripts/clean-build.sh`	Dọn dẹp artifact build
`lint`	`sh ./scripts/lint.sh`	Chạy ESLint
`prettier:cli`	`prettier "*/.{js,ts,jsx,tsx}" -l`	Liệt kê lỗi định dạng
`preview`	`vite preview --port 4173 --host 0.0.0.0`	Xem trước build sản xuất

Dev server và preview server được cấu hình với strictPort trong vite.config.ts (server.port / preview.port = 3001).

13.2. Triển khai Docker

dockerfile

# Giai đoạn Build
FROM node:20-alpine AS builder
COPY . .
RUN bun install && bun run build

# Giai đoạn Runtime
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf

13.3. Cấu hình Môi trường

Biến môi trường được tải qua hệ thống env của Vite (ví dụ VITE_NODE_ENV cho chế độ runtime, đọc trong App.tsx qua EnvironmentService).

14. Phụ thuộc

14.1. Phụ thuộc Nội bộ

Gói	Mục đích
`@nx-app/admin-ui-kit`	Thành phần UI dùng chung & dịch vụ API theo miền
`@nx-app/core`	Tiện ích, models & locales dùng chung

14.2. Cơ sở hạ tầng Bên ngoài

Gói	Mục đích
`@minimaltech/ra-core-infra`	Cơ sở hạ tầng React Admin (providers, base API)
`@venizia/ignis-inversion`	IoC Container
`@loopback/filter`	Xây dựng bộ lọc truy vấn (peer dependency)

15. Ảnh chụp Cấu trúc

Các con số trôi dạt khi mã nguồn tiến hóa - hãy đối chiếu với source. Các giá trị dưới đây là ảnh chụp (2026-06).

Chỉ số	Số lượng
Nhóm route màn hình	3 (`auth`, `no-auth`, `errors`)
Module không gian làm việc Merchant	8
Redux slices	14
Tệp interface cục bộ của client	4
Dịch vụ API cục bộ của client	1 (`OAuth2Api`); API theo miền trong `@nx-app/admin-ui-kit`

Nhà cung cấp

Các loại Hóa đơn

Admin Dashboard ​

1. Kiểm soát Tài liệu ​

2. Phạm vi & Mục tiêu ​

2.1. Phạm vi ​

2.2. Mục tiêu ​

3. Ngăn xếp Công nghệ ​

3.1. Framework Cốt lõi ​

3.2. Quản lý Trạng thái ​

3.3. Thành phần UI ​

3.4. Biểu mẫu & Xác thực ​

3.5. Bảng Dữ liệu & Kéo-Thả ​

3.6. Build & Phát triển ​

4. Kiến trúc ​

4.1. Các lớp Ứng dụng ​

4.2. Context Providers ​

4.3. Tích hợp Core Admin ​

5. Cấu trúc Dự án ​

6. Màn hình & Định tuyến ​

6.1. Route Cấp cao nhất (App.tsx) ​

6.2. Route Đã xác thực (auth/Auth.route.tsx) ​

6.3. Module Không gian làm việc Merchant (auth/merchant/$merchant-id/Merchant.route.tsx) ​

6.4. Onboarding, Organizer & Importation (auth/) ​

6.5. Trang Lỗi (errors/) ​

6.6. Mẫu Cấu trúc Màn hình CRUD ​

7. Dịch vụ API ​

7.1. Kiến trúc Dịch vụ ​

7.2. Dịch vụ Đăng ký qua DI (bindingList()) ​

8. Quản lý Trạng thái ​

8.1. Cấu hình Redux Store ​

8.2. Redux Slices ​

8.3. Trạng thái Server với TanStack Query ​

9. Giao diện TypeScript ​

10. Custom Hooks ​

10.1. API Hooks (hooks/api/) ​

10.2. View Hooks (hooks/view/) ​

10.3. Table & Redux Hooks ​

10.4. Workspace, Socket & Utility Hooks ​

11. Luồng Xác thực ​

11.1. Auth Provider ​

11.2. Trạng thái Xác thực ​

12. Hệ thống Giao diện ​

12.1. Theme Provider Stack ​

12.2. Tính năng Giao diện ​

13. Build & Triển khai ​

13.1. Script Build ​

13.2. Triển khai Docker ​

13.3. Cấu hình Môi trường ​

14. Phụ thuộc ​

14.1. Phụ thuộc Nội bộ ​

14.2. Cơ sở hạ tầng Bên ngoài ​

15. Ảnh chụp Cấu trúc ​