docs: dịch 22 file Markdown còn lại sang tiếng Việt có dấu (TEC-2881)
Some checks failed
CI / Lint → Typecheck → Test → Build (22) (push) Failing after 18s
CI / E2E Tests (push) Has been skipped
CodeQL Analysis / CodeQL (javascript-typescript) (push) Failing after 2m15s
Deploy / Build API Image (push) Failing after 28s
Deploy / Build Web Image (push) Failing after 16s
Deploy / Build AI Services Image (push) Failing after 17s
E2E Tests / Playwright E2E (push) Failing after 31s
Security Scanning / Dependency Audit (pnpm) (push) Failing after 3s
Security Scanning / Trivy Scan — API Image (push) Failing after 1m46s
Security Scanning / Trivy Scan — Web Image (push) Failing after 1m7s
Security Scanning / Trivy Scan — AI Services Image (push) Failing after 53s
Security Scanning / Trivy Filesystem Scan (push) Failing after 35s
Deploy / Deploy to Staging (push) Has been skipped
Deploy / Smoke Test Staging (push) Has been skipped
Deploy / Deploy to Production (push) Has been skipped
Deploy / Smoke Test Production (push) Has been skipped
Security Scanning / Security Gate (push) Failing after 0s
Deploy / Rollback Staging (push) Has been skipped
Deploy / Rollback Production (push) Has been skipped

Hoàn tất đợt cuối của nhiệm vụ chuyển toàn bộ tài liệu sang tiếng Việt.
Đã dịch 22 file `.md` còn sót (~9.7k dòng) — gồm RUNBOOK, audits,
docs/architecture, docs/load-testing, libs READMEs và các quick references.
Giữ nguyên code blocks, đường dẫn, identifier kỹ thuật, URL và biến môi trường.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Ho Ngoc Hai
2026-04-19 03:26:14 +07:00
parent 11f2bf26e6
commit d8b409a9ab
22 changed files with 3697 additions and 3703 deletions

View File

@@ -1,11 +1,11 @@
# GoodGo Platform — Comprehensive Codebase Overview
# Nền tảng GoodGo — Tổng quan toàn diện về Codebase
**Generated:** April 12, 2026
**Project Status:** MVP Complete — Phase 7 Wave 14 ✅ Build Green
**Được tạo:** Ngày 12 tháng 4 năm 2026
**Trạng thái dự án:** MVP hoàn thành — Phase 7 Wave 14 ✅ Build Green
---
## 1. TOP-LEVEL DIRECTORY STRUCTURE
## 1. CẤU TRÚC THƯ MỤC CẤP CAO NHẤT
```
goodgo-platform-ai/
@@ -39,69 +39,69 @@ goodgo-platform-ai/
---
## 2. API MODULES (`apps/api/src/modules/`) — 18 MODULES
## 2. CÁC MODULE API (`apps/api/src/modules/`) — 18 MODULE
### Core Authentication & Authorization
- **auth/** — JWT, OAuth (Google/Zalo), MFA, TOTP backup codes
- Subdirs: application, domain, infrastructure, presentation, __tests__
- Key: JWT guards, passport strategies, role-based access
### Xác thực & Phân quyền cốt lõi
- **auth/** — JWT, OAuth (Google/Zalo), MFA, mã dự phòng TOTP
- Thư mục con: application, domain, infrastructure, presentation, __tests__
- Chính: JWT guards, passport strategies, phân quyền dựa trên vai trò
### Listings & Properties
- **listings/** — CRUD, status management, media, AI price estimates
- Moderation scoring, featured listings, expiration logic
- Media upload with pre-signed URLs (AWS S3)
### Listings & Bất động sản
- **listings/** — CRUD, quản lý trạng thái, media, AI ước tính giá
- Chấm điểm kiểm duyệt, listing nổi bật, logic hết hạn
- Upload media với pre-signed URL (AWS S3)
### Search & Discovery
- **search/** — Typesense integration (full-text), geospatial (PostGIS)
- Resilient repository with fallback to PostgreSQL
- Filters: location, price, property type, bedrooms
### Search & Khám phá
- **search/** — Tích hợp Typesense (full-text), geospatial (PostGIS)
- Repository có khả năng phục hồi với fallback về PostgreSQL
- Bộ lọc: vị trí, giá, loại bất động sản, số phòng ngủ
### Transactions & Inquiries
- **inquiries/** — Buyer-to-seller messages for specific listings
- **leads/** — Agent CRM (lead scoring, status tracking, notes)
### Giao dịch & Inquiry
- **inquiries/** — Tin nhắn người mua-người bán cho listing cụ thể
- **leads/** — CRM dành cho agent (chấm điểm lead, theo dõi trạng thái, ghi chú)
### Monetization
- **payments/** — VNPay, MoMo, ZaloPay, Bank Transfer
- Idempotency keys, webhook callbacks, refund handling
- 4 payment types: subscription, listing fee, deposit, featured
### Kiếm tin
- **payments/** — VNPay, MoMo, ZaloPay, Chuyển khoản ngân hàng
- Khóa idempotency, webhook callback, xử lý hoàn tiền
- 4 loại thanh toán: subscription, phí listing, đặt cọc, nổi bật
- **subscriptions/** — Plans (FREE, AGENT_PRO, INVESTOR, ENTERPRISE)
- Usage tracking, quota management, billing cycles
- **subscriptions/** — Các gói (FREE, AGENT_PRO, INVESTOR, ENTERPRISE)
- Theo dõi sử dụng, quản lý hạn ngạch, chu kỳ thanh toán
### Operations
- **agents/** — Agent profiles, quality scores, service areas, verification
- **admin/** — User bans, KYC approval, listing moderation, audit logs
### Vận hành
- **agents/** — Hồ sơ agent, điểm chất lượng, khu vực phục vụ, xác minh
- **admin/** — Cấm người dùng, duyệt KYC, kiểm duyệt listing, audit log
- **notifications/** — Email, SMS, Push (FCM), Zalo OA
- Preferences per user/channel, template system
- Tùy chọn theo người dùng/kênh, hệ thống template
### Analytics & Intelligence
- **analytics/** — Market reports, price index by district/city/type
- Valuation engine integration (AI/ML service)
### Analytics & Trí tuệ
- **analytics/** — Báo cáo thị trường, chỉ số giá theo quận/thành phố/loại
- Tích hợp engine định giá (dịch vụ AI/ML)
### Infrastructure & System
- **health/** — Liveness/readiness probes, Kubernetes hooks
- **metrics/** — Prometheus metrics, HTTP latency, error rates
- **mcp/** — Model Context Protocol server for AI tools
- **shared/** — Domain primitives, encryption, logging, error handling
### Hạ tầng & Hệ thống
- **health/** — Probe liveness/readiness, hook Kubernetes
- **metrics/** — Metrics Prometheus, độ trễ HTTP, tỷ lệ lỗi
- **mcp/** — Model Context Protocol server cho công cụ AI
- **shared/** — Domain primitives, mã hóa, logging, xử lý lỗi
**Code Metrics:**
- ~845 TypeScript files
- Layered DDD architecture: presentation → application → domain → infrastructure
- Uses NestJS modules, CQRS pattern for complex operations
**Số liệu code:**
- ~845 file TypeScript
- Kiến trúc DDD phân lớp: presentation → application → domain → infrastructure
- Sử dụng module NestJS, pattern CQRS cho các thao tác phức tạp
---
## 3. FRONTEND STRUCTURE (`apps/web/`)
## 3. CẤU TRÚC FRONTEND (`apps/web/`)
### Root Layout
- **app/layout.tsx** — Root wrapper
- **app/[locale]/** — i18n routing (Vietnamese + English)
- **app/[locale]/** — Định tuyến i18n (Tiếng Việt + Tiếng Anh)
### Page Groups (Route Groups with Shared Layouts)
- **(public)/** — Landing, listings, search (no auth required)
- **(auth)/** — Login, register, OAuth callbacks
- **(dashboard)/** — Seller/agent dashboard
- **(admin)/** — Admin moderation, KYC review, user management
### Nhóm trang (Route Groups với Layout dùng chung)
- **(public)/** — Landing, listings, search (không yêu cầu xác thực)
- **(auth)/** — Login, register, OAuth callback
- **(dashboard)/** — Dashboard người bán/agent
- **(admin)/** — Kiểm duyệt admin, duyệt KYC, quản lý người dùng
### Components (`components/`)
```
@@ -132,81 +132,81 @@ goodgo-platform-ai/
```
### i18n (`i18n/`)
- Vietnamese & English message files
- next-intl integration
- File messages tiếng Việt & tiếng Anh
- Tích hợp next-intl
**Frontend Metrics:**
- ~245 TypeScript/TSX files
- Built on: Next.js 15, React 18, Tailwind CSS, Shadcn/ui
**Số liệu Frontend:**
- ~245 file TypeScript/TSX
- Xây dựng trên: Next.js 15, React 18, Tailwind CSS, Shadcn/ui
- State: Zustand + React Query
- Forms: React Hook Form + Zod validation
- Forms: React Hook Form + validation Zod
---
## 4. PRISMA SCHEMA — DATA MODEL
## 4. PRISMA SCHEMA — MÔ HÌNH DỮ LIỆU
**Database:** PostgreSQL 16 + PostGIS extension
**Database:** PostgreSQL 16 + extension PostGIS
### Total Models: 31
### Tổng số Model: 31
#### Authentication (5)
| Model | Purpose |
#### Xác thực (5)
| Model | Mục đích |
|-------|---------|
| User | Main user profile + KYC status, MFA fields |
| RefreshToken | JWT refresh token chain management |
| OAuthAccount | Google/Zalo OAuth linkage |
| Agent | Seller/Agent extended profile |
| MfaChallenge | TOTP/backup code verification tracking |
| User | Hồ sơ người dùng chính + trạng thái KYC, các trường MFA |
| RefreshToken | Quản lý chuỗi JWT refresh token |
| OAuthAccount | Liên kết OAuth Google/Zalo |
| Agent | Hồ sơ mở rộng cho người bán/Agent |
| MfaChallenge | Theo dõi xác minh TOTP/mã dự phòng |
#### Listings & Properties (4)
| Model | Purpose |
#### Listings & Bất động sản (4)
| Model | Mục đích |
|-------|---------|
| Property | Physical property details + geolocation |
| PropertyMedia | Images/videos per property |
| Listing | Listing instance (sale/rent) + status |
| SavedSearch | User's saved search preferences |
| Property | Chi tiết bất động sản vật lý + định vị địa lý |
| PropertyMedia | Hình ảnh/video cho mỗi bất động sản |
| Listing | Phiên bản listing (bán/cho thuê) + trạng thái |
| SavedSearch | Tùy chọn tìm kiếm đã lưu của người dùng |
#### Transactions (4)
| Model | Purpose |
#### Giao dịch (4)
| Model | Mục đích |
|-------|---------|
| Transaction | Buyer-seller transaction flow (inquiry → completed) |
| Inquiry | Buyer questions on specific listings |
| Lead | Agent CRM lead records |
| Review | User reviews of agents/transactions |
| Transaction | Luồng giao dịch người mua-người bán (inquiry → hoàn thành) |
| Inquiry | Câu hỏi người mua về listing cụ thể |
| Lead | Bản ghi lead CRM của agent |
| Review | Đánh giá người dùng về agent/giao dịch |
#### Payments (2)
| Model | Purpose |
#### Thanh toán (2)
| Model | Mục đích |
|-------|---------|
| Payment | Payment records (all providers) |
| Plan | Subscription tier definitions |
| Payment | Bản ghi thanh toán (tất cả nhà cung cấp) |
| Plan | Định nghĩa cấp subscription |
#### Orders & Escrow (3)
| Model | Purpose |
#### Đơn hàng & Escrow (3)
| Model | Mục đích |
|-------|---------|
| Order | Auction settlement order |
| Escrow | Escrow holding for transactions |
| Subscription | User's active subscription |
| Order | Lệnh thanh toán đấu giá |
| Escrow | Giữ ký quỹ cho giao dịch |
| Subscription | Subscription đang hoạt động của người dùng |
#### Analytics (2)
| Model | Purpose |
| Model | Mục đích |
|-------|---------|
| Valuation | AI-generated property valuations |
| MarketIndex | Market statistics per district/city |
| Valuation | Định giá bất động sản do AI tạo |
| MarketIndex | Thống kê thị trường theo quận/thành phố |
#### Operations (6)
| Model | Purpose |
#### Vận hành (6)
| Model | Mục đích |
|-------|---------|
| NotificationLog | Sent notification records |
| NotificationPreference | User notification opt-in/out |
| AdminAuditLog | Admin action audit trail |
| UsageRecord | Subscription usage tracking |
| NotificationLog | Bản ghi thông báo đã gửi |
| NotificationPreference | Tùy chọn nhận thông báo của người dùng |
| AdminAuditLog | Audit trail hành động admin |
| UsageRecord | Theo dõi sử dụng subscription |
**Index Strategy:**
- Single-column indexes on foreign keys, status fields, dates
- Compound indexes for common query patterns (e.g., `[role, isActive, createdAt DESC]`)
- GIST index on PostGIS location geometry
**Chiến lược Index:**
- Index một cột trên foreign key, các trường trạng thái, ngày tháng
- Index ghép cho các pattern truy vấn phổ biến (ví dụ: `[role, isActive, createdAt DESC]`)
- Index GIST trên hình học vị trí PostGIS
**Key Enums:**
**Các Enum chính:**
- UserRole: BUYER, SELLER, AGENT, ADMIN
- PropertyType: APARTMENT, VILLA, TOWNHOUSE, LAND, OFFICE, SHOPHOUSE
- TransactionType: SALE, RENT
@@ -215,32 +215,32 @@ goodgo-platform-ai/
---
## 5. DOCUMENTATION & TRACKING
## 5. TÀI LIỆU & THEO DÕI
### Root-Level Planning Docs
- **PROJECT_TRACKER.md** — 7 phases, 40+ issues, current status (Phase 7 Wave 14)
- **IMPLEMENTATION_PLAN.md** — Feature roadmap with priority/status
- **COMPREHENSIVE_AUDIT_2026-04-12.md** — Full system audit with implementation notes
### Tài liệu lập kế hoạch ở cấp Root
- **PROJECT_TRACKER.md** — 7 phase, 40+ issue, trạng thái hiện tại (Phase 7 Wave 14)
- **IMPLEMENTATION_PLAN.md** — Lộ trình tính năng với ưu tiên/trạng thái
- **COMPREHENSIVE_AUDIT_2026-04-12.md** — Audit toàn hệ thống với ghi chú triển khai
### Technical Docs (`docs/`)
- **architecture.md** — DDD layering, CQRS, module boundaries
- **api-endpoints.md** — Swagger-generated endpoint reference
- **api-error-codes.md** — Structured error code taxonomy
- **deployment.md** — Docker, K8s, CI/CD pipeline steps
- **RUNBOOK.md** — Operational procedures, troubleshooting
- **PRODUCTION_READINESS.md** — Security, compliance, performance checklist
### Tài liệu kỹ thuật (`docs/`)
- **architecture.md** — Phân lớp DDD, CQRS, ranh giới module
- **api-endpoints.md** — Tham chiếu endpoint do Swagger tạo
- **api-error-codes.md** — Phân loại mã lỗi có cấu trúc
- **deployment.md** — Docker, K8s, các bước CI/CD
- **RUNBOOK.md** — Quy trình vận hành, xử lý sự cố
- **PRODUCTION_READINESS.md** — Checklist bảo mật, tuân thủ, hiệu năng
### Audit Directory (`docs/audits/`)
- 80+ audit files documenting feature implementations
- Pricing audit, checkout flow, KYC, payment gateway testing
### Thư mục Audit (`docs/audits/`)
- 80+ file audit tài liệu hóa các triển khai tính năng
- Audit pricing, luồng checkout, KYC, test cổng thanh toán
---
## 6. DEPENDENCIES & TOOLING
## 6. PHỤ THUỘC & CÔNG CỤ
### Monorepo Setup
- **pnpm** v10.27.0 (workspace) — faster, strict peer deps
- **Turbo** v2.9.4 — task orchestration & caching
### Thiết lập Monorepo
- **pnpm** v10.27.0 (workspace) — nhanh hơn, peer deps nghiêm ngặt
- **Turbo** v2.9.4 — điều phối tác vụ & cache
- **Node** ≥22.0.0
### Backend (NestJS)
@@ -269,7 +269,7 @@ Maps: mapbox-gl ^3.21
Monitoring: @sentry/nextjs
```
### Testing & Quality
### Testing & Chất lượng
```
Test: vitest ^4.1.3, @playwright/test ^1.59
Lint: eslint ^9.39, prettier ^3.8, typescript-eslint
@@ -278,20 +278,20 @@ Dependencies: dependency-cruiser (architecture validation)
---
## 7. TEST COVERAGE & QUALITY
## 7. ĐỘ BAO PHỦ TEST & CHẤT LƯỢNG
### Test Files: 242 total
### Tổng số file Test: 242
#### API Tests
- **Unit tests:** Payment gateways (VNPay, MoMo, ZaloPay), Money value objects, Platform fee logic
- **Integration tests:** Auth flows, health checks, notifications
- Located in `__tests__` subdirs within each module
- **Unit tests:** Cổng thanh toán (VNPay, MoMo, ZaloPay), Money value objects, logic phí nền tảng
- **Integration tests:** Luồng auth, health check, notifications
- Nằm trong các thư mục con `__tests__` trong từng module
#### Frontend Tests
- **Unit tests:** Auth store, comparison store, currency formatting, validations
- **E2E tests (Playwright):** 15+ web tests, 16+ API tests
- **Unit tests:** Auth store, comparison store, định dạng tiền tệ, validation
- **E2E tests (Playwright):** 15+ web test, 16+ API test
#### E2E Test Coverage
#### Độ bao phủ E2E Test
**Web Tests (15):**
- auth-login, auth-register, auth-oauth-callback
- homepage, navigation, responsive
@@ -310,57 +310,57 @@ Dependencies: dependency-cruiser (architecture validation)
- mcp, admin
**Load Tests (K6):**
- Baseline benchmarks for search, listings, auth endpoints
- Concurrency testing up to 1000 virtual users
- Benchmark cơ sở cho các endpoint search, listings, auth
- Test đồng thời lên đến 1000 virtual users
---
## 8. IMPLEMENTATION STATUS
## 8. TRẠNG THÁI TRIỂN KHAI
### ✅ COMPLETE (Phase 7 MVP)
1. **Foundation** — Monorepo, Docker, Prisma schema, CI/CD
2. **Auth** — JWT, OAuth, MFA/TOTP, session management
3. **Listings**Full CRUD, media upload, status workflow
4. **Search** — Typesense + PostGIS geo-search
5. **Payments** — 3 VN payment gateways, webhook handling
6. **Subscriptions** — 4 tiers, quota tracking
### ✅ HOÀN THÀNH (Phase 7 MVP)
1. **Foundation** — Monorepo, Docker, schema Prisma, CI/CD
2. **Auth** — JWT, OAuth, MFA/TOTP, quản lý phiên
3. **Listings**CRUD đầy đủ, upload media, workflow trạng thái
4. **Search** — Typesense + tìm kiếm địa lý PostGIS
5. **Payments** — 3 cổng thanh toán VN, xử lý webhook
6. **Subscriptions** — 4 cấp, theo dõi quota
7. **Notifications** — Email, SMS, Push, Zalo OA
8. **Admin Panel**Moderation, user management, audit logs
9. **Agents** — Portal, inquiries, lead CRM, quality metrics
10. **Analytics**Market reports, AI valuation service
11. **Security** — Rate limiting, CSRF, field encryption, PII masking
12. **Monitoring** — Prometheus, Grafana, Sentry, log aggregation
13. **Testing** — Unit tests, E2E tests (Playwright), load tests (K6)
8. **Admin Panel**Kiểm duyệt, quản lý người dùng, audit log
9. **Agents** — Portal, inquiries, lead CRM, chỉ số chất lượng
10. **Analytics**Báo cáo thị trường, dịch vụ định giá AI
11. **Security** — Rate limiting, CSRF, mã hóa trường, che PII
12. **Monitoring** — Prometheus, Grafana, Sentry, tổng hợp log
13. **Testing** — Unit test, E2E test (Playwright), load test (K6)
### 🔄 IN PROGRESS / REMAINING
- Per Wave 14:
- TEC-1650: Listing detail non-existent ID error handling
- TEC-1652: Full E2E test suite validation
- TEC-1657: Comprehensive audit logging
### 🔄 ĐANG TIẾN HÀNH / CÒN LẠI
- Theo Wave 14:
- TEC-1650: Xử lý lỗi ID không tồn tại trên trang chi tiết listing
- TEC-1652: Xác thực bộ test E2E đầy đủ
- TEC-1657: Audit logging toàn diện
### Database Migrations
- 7+ migrations applied
### Migration Database
- 7+ migration đã được áp dụng
- Connection pooling (PgBouncer)
- PostGIS extension enabled
- Đã bật extension PostGIS
---
## 9. PROJECT MATURITY INDICATORS
## 9. CHỈ SỐ TRƯỞNG THÀNH DỰ ÁN
| Dimension | Status | Evidence |
| Khía cạnh | Trạng thái | Bằng chứng |
|-----------|--------|----------|
| **Architecture** | Production-Ready | DDD, CQRS, layered modules, clear boundaries |
| **Code Quality** | High | 242 tests, ESLint enforcement, module cruiser |
| **Security** | Hardened | JWT, MFA, encryption, rate limiting, CSRF, PII masking |
| **Documentation** | Comprehensive | 80+ audit files, runbooks, error codes, architecture |
| **Performance** | Optimized | Redis caching, Typesense search, query optimization, load tests |
| **Monitoring** | Complete | Prometheus, Grafana, Sentry, structured logging |
| **DevOps** | Mature | Docker, Kubernetes config, CI/CD pipelines, smoke tests |
| **Scaling** | Prepared | Connection pooling, caching layer, resilient services |
| **Kiến trúc** | Sẵn sàng Production | DDD, CQRS, các module phân lớp, ranh giới rõ ràng |
| **Chất lượng code** | Cao | 242 test, ESLint thực thi, module cruiser |
| **Bảo mật** | Đã được củng cố | JWT, MFA, mã hóa, rate limiting, CSRF, che PII |
| **Tài liệu** | Toàn diện | 80+ file audit, runbook, mã lỗi, kiến trúc |
| **Hiệu năng** | Đã tối ưu | Cache Redis, tìm kiếm Typesense, tối ưu truy vấn, load test |
| **Monitoring** | Hoàn chỉnh | Prometheus, Grafana, Sentry, structured logging |
| **DevOps** | Trưởng thành | Docker, cấu hình Kubernetes, pipeline CI/CD, smoke test |
| **Khả năng mở rộng** | Đã chuẩn bị | Connection pooling, lớp cache, dịch vụ có khả năng phục hồi |
---
## 10. KEY STATISTICS
## 10. THỐNG KÊ CHÍNH
```
Backend Files: ~845 TypeScript files
@@ -378,9 +378,9 @@ Lines of Code: ~50,000+ (excluding node_modules)
---
## 11. TECH STACK SUMMARY
## 11. TÓM TẮT TECH STACK
| Layer | Technology |
| Lớp | Công nghệ |
|-------|-----------|
| **Frontend** | Next.js 15, React 18, Tailwind CSS, Shadcn/ui |
| **Backend** | NestJS 11, TypeScript 6 |
@@ -397,16 +397,15 @@ Lines of Code: ~50,000+ (excluding node_modules)
| **Package Manager** | pnpm 10.27 |
| **Orchestration** | Turbo |
| **Containerization** | Docker + Docker Compose |
| **i18n** | next-intl (Vietnamese + English) |
| **i18n** | next-intl (Tiếng Việt + Tiếng Anh) |
---
## 12. NEXT STEPS FOR DEVELOPERS
1. **Local Setup:** `docker-compose up` → database + API + frontend
2. **Run Tests:** `pnpm test` (unit), `pnpm test:e2e` (E2E)
3. **Check Status:** Review PROJECT_TRACKER.md for ongoing issues
4. **Architecture:** Read docs/architecture.md for module boundaries
5. **API:** Browse docs/api-endpoints.md (Swagger-generated)
6. **Deploy:** Follow docs/deployment.md for production setup
## 12. CÁC BƯỚC TIẾP THEO CHO LẬP TRÌNH VIÊN
1. **Thiết lập cục bộ:** `docker-compose up` → database + API + frontend
2. **Chạy Test:** `pnpm test` (unit), `pnpm test:e2e` (E2E)
3. **Kiểm tra trạng thái:** Xem PROJECT_TRACKER.md để biết các issue đang diễn ra
4. **Kiến trúc:** Đọc docs/architecture.md để biết ranh giới module
5. **API:** Duyệt docs/api-endpoints.md (do Swagger tạo)
6. **Deploy:** Theo dõi docs/deployment.md để thiết lập production

View File

@@ -1,16 +1,16 @@
# GoodGo Frontend: File-by-File i18n & A11y Implementation Guide
# GoodGo Frontend: Hướng dẫn triển khai i18n & A11y theo từng file
## 📋 Complete File Mapping
## 📋 Ánh xạ file đầy đủ
### PHASE 1: INFRASTRUCTURE SETUP
### GIAI ĐOẠN 1: THIẾT LẬP HẠ TẦNG
#### 1. `middleware.ts` (CRITICAL)
**Current:** Auth routing only
**Changes:**
- Add locale detection from URL pathname
- Add cookie-based locale storage
- Redirect `/en/*` and `/vi/*` paths appropriately
- Add Accept-Language header fallback
#### 1. `middleware.ts` (QUAN TRỌNG)
**Hiện tại:** Chỉ định tuyến xác thực
**Thay đổi:**
- Thêm phát hiện locale từ pathname URL
- Thêm lưu trữ locale dựa trên cookie
- Chuyển hướng các đường dẫn `/en/*` `/vi/*` một cách phù hợp
- Thêm dự phòng dựa trên header Accept-Language
**Pseudo-code:**
```typescript
@@ -32,15 +32,15 @@ export function middleware(request: NextRequest) {
}
```
#### 2. `app/layout.tsx` (CRITICAL)
**Current:** Thai providers, hardcoded Vietnamese metadata
**Changes:**
- Change `lang="vi"` to dynamic locale
- Update metadata to be i18n-aware
- Wrap with `NextIntlClientProvider` from next-intl
- Keep existing providers (ThemeProvider, QueryProvider, AuthProvider)
#### 2. `app/layout.tsx` (QUAN TRỌNG)
**Hiện tại:** Các provider chính, metadata tiếng Việt được hardcode
**Thay đổi:**
- Thay đổi `lang="vi"` thành locale động
- Cập nhật metadata để hỗ trợ i18n
- Bao bọc bằng `NextIntlClientProvider` từ next-intl
- Giữ nguyên các provider hiện có (ThemeProvider, QueryProvider, AuthProvider)
**Key changes:**
**Các thay đổi chính:**
```typescript
import { getLocale, getTranslations } from 'next-intl/server';
@@ -59,8 +59,8 @@ export async function generateMetadata(): Promise<Metadata> {
}
```
#### 3. `i18n/config.ts` (NEW)
**Create new file** with i18n configuration:
#### 3. `i18n/config.ts` (MỚI)
**Tạo file mới** với cấu hình i18n:
```typescript
export const locales = ['en', 'vi'] as const;
export const defaultLocale = 'vi';
@@ -68,8 +68,8 @@ export const defaultLocale = 'vi';
export const timeZone = 'Asia/Ho_Chi_Minh';
```
#### 4. `public/locales/en.json` (NEW - LARGE FILE)
**Structure:**
#### 4. `public/locales/en.json` (MỚI - FILE LỚN)
**Cấu trúc:**
```json
{
"common": {
@@ -179,16 +179,16 @@ export const timeZone = 'Asia/Ho_Chi_Minh';
}
```
#### 5. `public/locales/vi.json` (NEW - LARGE FILE)
Same structure as en.json but with Vietnamese translations.
#### 5. `public/locales/vi.json` (MỚI - FILE LỚN)
Cấu trúc giống en.json nhưng với bản dịch tiếng Việt.
---
### PHASE 2: CORE COMPONENT UPDATES
### GIAI ĐOẠN 2: CẬP NHẬT COMPONENT CỐT LÕI
#### Files Requiring Translation Hook Integration
#### Các file cần tích hợp Translation Hook
##### Layout Files
##### Các file Layout
1. **`app/(public)/layout.tsx`**
```typescript
@@ -220,20 +220,20 @@ const toggleLabel = theme === 'light'
```
3. **`app/(auth)/layout.tsx`**
Update any error messages or labels to use translations.
Cập nhật mọi thông báo lỗi hoặc nhãn để sử dụng bản dịch.
##### Page Files
##### Các file Page
1. **`app/(public)/page.tsx` (LARGE FILE)**
**Areas to update:**
- Hero section (title, subtitle)
- Search form (placeholder)
- Property type badges
- Price ranges
- City options
- Section headings
- Stats labels
- CTA buttons
1. **`app/(public)/page.tsx` (FILE LỚN)**
**Các phần cần cập nhật:**
- Phần hero (tiêu đề, phụ đề)
- Form tìm kiếm (placeholder)
- Các badge loại bất động sản
- Các khoảng giá
- Tùy chọn thành phố
- Tiêu đề các phần
- Nhãn thống kê
- Các nút CTA
```typescript
export default function LandingPage() {
@@ -268,32 +268,32 @@ const OAUTH_ERROR_MESSAGES = {
```
3. **`app/(auth)/register/page.tsx`**
Same pattern as login page.
Tương tự như trang login.
4. **`app/(dashboard)/dashboard/page.tsx`** and all other dashboard pages
Update section titles, empty states, button labels.
4. **`app/(dashboard)/dashboard/page.tsx`** và tất cả các trang dashboard khác
Cập nhật tiêu đề các phần, trạng thái rỗng, nhãn các nút.
##### Search & Listing Pages
##### Các trang Search & Listing
1. **`app/(public)/search/page.tsx`**
Update search results headings, empty states, filter labels.
Cập nhật tiêu đề kết quả tìm kiếm, trạng thái rỗng, nhãn bộ lọc.
2. **`app/(public)/listings/[id]/page.tsx`**
Update property detail labels.
Cập nhật nhãn chi tiết bất động sản.
3. **`app/(dashboard)/listings/page.tsx`**
Update table headers, status labels, action labels.
Cập nhật tiêu đề bảng, nhãn trạng thái, nhãn hành động.
4. **`app/(dashboard)/listings/new/page.tsx`**
Uses listing-form-steps component (see below).
Sử dụng component listing-form-steps (xem bên dưới).
---
#### Component Files
#### Các file Component
##### Critical Components (Do First)
##### Các component quan trọng (Làm trước)
1. **`components/search/filter-bar.tsx` (HIGH PRIORITY)**
1. **`components/search/filter-bar.tsx` (ƯU TIÊN CAO)**
```typescript
// Current: Hardcoded arrays
const CITIES = ['Hồ Chí Minh', 'Hà Nội', 'Đà Nẵng', ...];
@@ -310,14 +310,14 @@ const PRICE_RANGES = [
];
```
2. **`components/listings/listing-form-steps.tsx` (HIGH PRIORITY - LARGE FILE)**
This multi-step form has many labels to translate:
- Step 1: Transaction type, property type, title, description
- Step 2: Address fields, location
- Step 3: Area, rooms, bathrooms, direction, year built, etc.
- Step 4: Pricing
2. **`components/listings/listing-form-steps.tsx` (ƯU TIÊN CAO - FILE LỚN)**
Form đa bước này có nhiều nhãn cần dịch:
- Bước 1: Loại giao dịch, loại bất động sản, tiêu đề, mô tả
- Bước 2: Các trường địa chỉ, vị trí
- Bước 3: Diện tích, phòng, phòng tắm, hướng, năm xây dựng, v.v.
- Bước 4: Giá
All field labels should use `t('form.field_name')` pattern.
Tất cả nhãn các trường nên sử dụng pattern `t('form.field_name')`.
3. **`components/auth/oauth-buttons.tsx`**
```typescript
@@ -330,7 +330,7 @@ All field labels should use `t('form.field_name')` pattern.
</Button>
```
##### Medium Priority Components
##### Các component ưu tiên trung bình
1. **`components/search/property-card.tsx`**
```typescript
@@ -361,21 +361,21 @@ const LISTING_STATUSES = {
```
3. **`components/valuation/valuation-form.tsx`**
Update form labels and buttons.
Cập nhật nhãn form và các nút.
4. **`components/listings/image-upload.tsx`**
Update button text and error messages.
Cập nhật văn bản nút và thông báo lỗi.
5. **All `components/ui/*.tsx` files with text**
- Button: any default text
- Dialog: Close button aria-label
- Input: placeholder attrs if hardcoded
- Label: any default text
- Others: similar
5. **Tất cả các file `components/ui/*.tsx` có văn bản**
- Button: bất kỳ văn bản mặc định nào
- Dialog: aria-label nút Đóng
- Input: thuộc tính placeholder nếu được hardcode
- Label: bất kỳ văn bản mặc định nào
- Khác: tương tự
---
### PHASE 3: VALIDATION & ERROR MESSAGES
### GIAI ĐOẠN 3: VALIDATION & THÔNG BÁO LỖI
#### 1. `lib/validations/auth.ts`
```typescript
@@ -394,21 +394,21 @@ const schema = z.object({
});
```
#### 2. `lib/validations/listings.ts` (LARGE FILE)
Update all Zod validation error messages:
#### 2. `lib/validations/listings.ts` (FILE LỚN)
Cập nhật tất cả thông báo lỗi validation Zod:
- "Vui lòng chọn loại giao dịch" → `t('validation.transaction_required')`
- "Tiêu đề tối thiểu 5 ký tự" → `t('validation.title_min_length')`
- All other validation messages
- Tất cả các thông báo validation khác
#### 3. `lib/validations/valuation.ts`
Similar pattern to listings.
Mẫu tương tự như listings.
---
### PHASE 4: UTILITY UPDATES
### GIAI ĐOẠN 4: CẬP NHẬT TIỆN ÍCH
#### 1. `lib/utils.ts`
No changes (already minimal).
Không thay đổi (đã tối giản).
#### 2. `lib/auth-store.ts`
```typescript
@@ -417,17 +417,17 @@ No changes (already minimal).
```
#### 3. `lib/api-client.ts`
Check if error messages from API need i18n wrapping.
Kiểm tra xem các thông báo lỗi từ API có cần bao bọc i18n hay không.
#### 4. All `lib/*-api.ts` files
Update error message handling if needed.
#### 4. Tất cả các file `lib/*-api.ts`
Cập nhật xử lý thông báo lỗi nếu cần.
---
### PHASE 5: ACCESSIBILITY UPDATES
### GIAI ĐOẠN 5: CẬP NHẬT KHẢ NĂNG TIẾP CẬN
#### 1. `components/ui/dialog.tsx` (CRITICAL A11y)
**Add focus management:**
#### 1. `components/ui/dialog.tsx` (A11y QUAN TRỌNG)
**Thêm quản lý focus:**
```typescript
// Add focus trap
// Save initial focus element
@@ -466,7 +466,7 @@ function Dialog() {
```
#### 2. `components/ui/input.tsx`
Add aria-describedby for error messages:
Thêm aria-describedby cho thông báo lỗi:
```typescript
export function Input({ error, ...props }) {
const errorId = `${props.id}-error`;
@@ -484,8 +484,8 @@ export function Input({ error, ...props }) {
```
#### 3. `components/ui/button.tsx`
Ensure all buttons have visible focus indicator (already in CSS likely).
Add aria-busy for loading state if used:
Đảm bảo tất cả các nút có chỉ báo focus rõ ràng (có thể đã có trong CSS).
Thêm aria-busy cho trạng thái loading nếu được sử dụng:
```typescript
export function Button({ disabled, isLoading, ...props }) {
return (
@@ -500,15 +500,15 @@ export function Button({ disabled, isLoading, ...props }) {
}
```
#### 4. Form Components
Update all forms to use aria-describedby for error messages:
- `app/(auth)/login/page.tsx`Already has role="alert" ✓ but could use aria-describedby
- `app/(auth)/register/page.tsx`Same
- `components/listings/listing-form-steps.tsx`Add aria-describedby
- `components/search/filter-bar.tsx`Ensure accessible labels
#### 4. Các component Form
Cập nhật tất cả các form để sử dụng aria-describedby cho thông báo lỗi:
- `app/(auth)/login/page.tsx`Đã có role="alert" ✓ nhưng có thể dùng aria-describedby
- `app/(auth)/register/page.tsx`Tương tự
- `components/listings/listing-form-steps.tsx`Thêm aria-describedby
- `components/search/filter-bar.tsx`Đảm bảo nhãn dễ tiếp cận
#### 5. All Icon-Only Buttons
Find all buttons with only icons and add aria-label:
#### 5. Tất cả các nút chỉ có biểu tượng
Tìm tất cả các nút chỉ có biểu tượng và thêm aria-label:
```typescript
// Search in components for: <Button> with only SVG children
// Add aria-label={t('...')}
@@ -524,7 +524,7 @@ Find all buttons with only icons and add aria-label:
```
#### 6. Loading Spinners
Add aria-busy and aria-label:
Thêm aria-busy aria-label:
```typescript
// In app/(public)/page.tsx and similar:
<div aria-busy={loadingFeatured} aria-label={t('common.loading')}>
@@ -533,7 +533,7 @@ Add aria-busy and aria-label:
```
#### 7. `components/listings/image-gallery.tsx`
Add keyboard navigation (arrow keys):
Thêm điều hướng bằng bàn phím (phím mũi tên):
```typescript
// Add keyboard event handler for arrow keys
// Left/Right arrows to navigate images
@@ -541,7 +541,7 @@ Add keyboard navigation (arrow keys):
---
### PHASE 6: TEST SETUP UPDATES
### GIAI ĐOẠN 6: CẬP NHẬT THIẾT LẬP TEST
#### 1. `vitest.setup.ts`
```typescript
@@ -564,35 +564,35 @@ vi.mock('next-intl', () => ({
```
#### 2. `vitest.config.ts`
May need to add path aliases or test environment setup.
Có thể cần thêm path alias hoặc thiết lập môi trường test.
#### 3. Update all test files in `__tests__/` folders
- Add locale prop to component renders
- Test both English and Vietnamese if applicable
- Mock i18n translations
#### 3. Cập nhật tất cả các file test trong thư mục `__tests__/`
- Thêm prop locale khi render component
- Test cả tiếng Anh và tiếng Việt nếu có thể
- Mock các bản dịch i18n
---
## 📊 Summary: Files by Update Complexity
## 📊 Tóm tắt: Các file theo độ phức tạp cập nhật
### Trivial (5 min each)
### Đơn giản (5 phút mỗi file)
- `app/robots.ts`
- `app/sitemap.ts`
- `components/ui/badge.tsx`
- `components/ui/card.tsx`
- `components/ui/tabs.tsx`
### Simple (15-30 min each)
- `app/(admin)/*.tsx` files (3 files)
### Đơn giản (15-30 phút mỗi file)
- Các file `app/(admin)/*.tsx` (3 file)
- `app/(dashboard)/analytics/page.tsx`
- `app/(dashboard)/profile/page.tsx`
- `app/(dashboard)/subscription/page.tsx`
- `app/(dashboard)/payments/page.tsx`
- `components/ui/*.tsx` (8 files)
- `components/ui/*.tsx` (8 file)
- `components/auth/oauth-buttons.tsx`
- `components/listings/listing-status-badge.tsx`
### Medium (30-60 min each)
### Trung bình (30-60 phút mỗi file)
- `app/(public)/layout.tsx`
- `app/(auth)/login/page.tsx`
- `app/(auth)/register/page.tsx`
@@ -602,47 +602,47 @@ May need to add path aliases or test environment setup.
- `components/search/property-card.tsx`
- `components/search/filter-bar.tsx`
- `components/listings/image-upload.tsx`
- `components/valuation/*.tsx` (3 files)
- `components/valuation/*.tsx` (3 file)
### Complex (1-2 hours each)
- `app/(public)/page.tsx` (landing page - many sections)
- `components/listings/listing-form-steps.tsx` (multi-step form)
- `components/map/listing-map.tsx` (if has labels)
- `components/charts/*.tsx` (3 files - chart labels)
### Phức tạp (1-2 giờ mỗi file)
- `app/(public)/page.tsx` (trang landing - nhiều phần)
- `components/listings/listing-form-steps.tsx` (form đa bước)
- `components/map/listing-map.tsx` (nếu có nhãn)
- `components/charts/*.tsx` (3 file - nhãn biểu đồ)
### Critical Infrastructure
- `middleware.ts` (30-45 min)
- `app/layout.tsx` (30 min)
- `lib/validations/*.ts` (3 files - 45 min)
### Hạ tầng quan trọng
- `middleware.ts` (30-45 phút)
- `app/layout.tsx` (30 phút)
- `lib/validations/*.ts` (3 file - 45 phút)
---
## ✅ Validation Checklist
## ✅ Checklist xác minh
Before considering i18n + A11y complete:
Trước khi xem xét i18n + A11y hoàn tất:
### i18n Verification
- [ ] Both `/en/*` and `/vi/*` routes work
- [ ] All text from messages files, not hardcoded
- [ ] Metadata changes with locale
- [ ] Cookies/headers work for locale selection
- [ ] Validation messages use i18n
- [ ] All enums use translations
- [ ] Tests mock i18n correctly
### Xác minh i18n
- [ ] Cả route `/en/*` `/vi/*` đều hoạt động
- [ ] Tất cả văn bản từ file messages, không hardcode
- [ ] Metadata thay đổi theo locale
- [ ] Cookie/header hoạt động cho việc chọn locale
- [ ] Thông báo validation sử dụng i18n
- [ ] Tất cả các enum sử dụng bản dịch
- [ ] Test mock i18n đúng cách
### A11y Verification
- [ ] Focus trap works in dialogs
- [ ] Focus indicator visible on all inputs
- [ ] Form errors linked with aria-describedby
- [ ] Icon buttons all have aria-labels
- [ ] Color contrast >= 4.5:1 for text (AA standard)
- [ ] Keyboard navigation works everywhere
- [ ] Screen reader testing (NVDA/JAWS)
- [ ] Loading spinners have aria-busy
- [ ] All tables have proper headers
### Xác minh A11y
- [ ] Focus trap hoạt động trong dialog
- [ ] Chỉ báo focus hiển thị trên tất cả input
- [ ] Lỗi form được liên kết với aria-describedby
- [ ] Tất cả nút biểu tượng có aria-label
- [ ] Tỷ lệ tương phản màu >= 4.5:1 cho văn bản (chuẩn AA)
- [ ] Điều hướng bàn phím hoạt động ở mọi nơi
- [ ] Test với screen reader (NVDA/JAWS)
- [ ] Loading spinner aria-busy
- [ ] Tất cả các bảng có header phù hợp
---
**Generated:** April 9, 2026
**Confidence:** High
**Total Estimated Files to Update:** 50-60 files
**Được tạo:** Ngày 9 tháng 4 năm 2026
**Độ tin cậy:** Cao
**Tổng số file ước tính cần cập nhật:** 50-60 file

View File

@@ -1,22 +1,22 @@
# GoodGo Platform AI — Implementation Plan
# Nền tảng GoodGo AI — Kế hoạch triển khai
**Last Updated:** 2026-04-12
**Cập nhật lần cuối:** 2026-04-12
---
## Milestones
## Các Milestone
### Milestone 1: Walking Skeleton (Phase 0)
**Goal:** Any engineer can clone, install, and start developing.
**Mục tiêu:** Bất kỳ kỹ sư nào cũng có thể clone, cài đặt và bắt đầu phát triển.
**Execution Order:**
**Thứ tự thực hiện:**
1. **[TEC-1415] Monorepo Scaffolding** + **[TEC-1416] Docker Compose** (parallel — no deps)
2. **[TEC-1420] ESLint/Prettier** (after F1)
3. **[TEC-1417] Prisma Schema** (after F1 + F2)
4. **[TEC-1418] Shared Module** (after F1)
5. **[TEC-1419] CI/CD Pipeline** (after F1)
1. **[TEC-1415] Monorepo Scaffolding** + **[TEC-1416] Docker Compose** (song song — không có dependency)
2. **[TEC-1420] ESLint/Prettier** (sau F1)
3. **[TEC-1417] Prisma Schema** (sau F1 + F2)
4. **[TEC-1418] Shared Module** (sau F1)
5. **[TEC-1419] CI/CD Pipeline** (sau F1)
```
F1 (Monorepo) ──┬── F6 (Lint/Prettier)
@@ -28,17 +28,17 @@ F2 (Docker) ─────┘
### Milestone 2: Core Product (Phase 1)
**Goal:** Users can register, post listings, and search properties.
**Mục tiêu:** Người dùng có thể đăng ký, đăng tin và tìm kiếm bất động sản.
**Execution Order:**
**Thứ tự thực hiện:**
1. **[TEC-1421] Auth Backend** (after F3, F4)
2. **[TEC-1425] Security Hardening** + **[TEC-1426] Error Handling** (parallel, after F1/F4)
3. **[TEC-1422] Auth Frontend** (after C1)
4. **[TEC-1423] Listings Backend** (after C1)
5. **[TEC-1424] Search Backend** (after C3)
6. **[TEC-1427] Listings Frontend** (after C3)
7. **[TEC-1428] Search + Landing Frontend** (after C5)
1. **[TEC-1421] Auth Backend** (sau F3, F4)
2. **[TEC-1425] Security Hardening** + **[TEC-1426] Error Handling** (song song, sau F1/F4)
3. **[TEC-1422] Auth Frontend** (sau C1)
4. **[TEC-1423] Listings Backend** (sau C1)
5. **[TEC-1424] Search Backend** (sau C3)
6. **[TEC-1427] Listings Frontend** (sau C3)
7. **[TEC-1428] Search + Landing Frontend** (sau C5)
```
F3 + F4 ──→ C1 (Auth BE) ──┬── C2 (Auth FE)
@@ -50,7 +50,7 @@ F3 + F4 ──→ C1 (Auth BE) ──┬── C2 (Auth FE)
### Milestone 3: Monetization (Phase 2)
**Goal:** Revenue-generating MVP with payments, subscriptions, and admin tools.
**Mục tiêu:** MVP tạo doanh thu với thanh toán, subscription và công cụ admin.
```
C1 ──→ M1 (Payments) ──→ M2 (Subscriptions)
@@ -61,7 +61,7 @@ Phase 1 ──→ X4 (E2E Tests)
### Milestone 4: AI-Powered (Phase 3)
**Goal:** Differentiated product with AI features.
**Mục tiêu:** Sản phẩm khác biệt với các tính năng AI.
```
F2 ──→ A1 (AI/ML Container) ──→ A2 (Analytics)
@@ -70,12 +70,12 @@ C5 + A2 ──→ A3 (MCP Servers)
---
## Dependency Map
## Bản đồ phụ thuộc
| Task | Depends On |
| Task | Phụ thuộc vào |
| ------------- | ---------- |
| TEC-1415 (F1) | None |
| TEC-1416 (F2) | None |
| TEC-1415 (F1) | Không |
| TEC-1416 (F2) | Không |
| TEC-1417 (F3) | F1, F2 |
| TEC-1418 (F4) | F1 |
| TEC-1419 (F5) | F1 |
@@ -96,15 +96,15 @@ C5 + A2 ──→ A3 (MCP Servers)
### Milestone 5: Production Hardening (Phase 4)
**Goal:** Fix all critical security issues. Establish production deployment capability.
**Mục tiêu:** Sửa tất cả các vấn đề bảo mật quan trọng. Thiết lập khả năng triển khai production.
**Execution Order:**
**Thứ tự thực hiện:**
1. **[TEC-1449] JWT Secret Fix** + **[TEC-1451] HMAC Timing Fix** + **[TEC-1452] MinIO Fix** + **[TEC-1453] CSRF** (parallel — no deps between them)
2. **[TEC-1455] DB Index** (independent — can run parallel with above)
3. **[TEC-1450] Deployment Pipeline** (after security fixes verified)
4. **[TEC-1457] Backups + Logs** (after deployment infra exists)
5. **[TEC-1456] Test Coverage** (parallel — independent of infra)
1. **[TEC-1449] JWT Secret Fix** + **[TEC-1451] HMAC Timing Fix** + **[TEC-1452] MinIO Fix** + **[TEC-1453] CSRF** (song song — không có dependency giữa chúng)
2. **[TEC-1455] DB Index** (độc lập — có thể chạy song song với các task trên)
3. **[TEC-1450] Deployment Pipeline** (sau khi đã xác minh các bản sửa lỗi bảo mật)
4. **[TEC-1457] Backups + Logs** (sau khi hạ tầng deployment đã có)
5. **[TEC-1456] Test Coverage** (song song — độc lập với hạ tầng)
```
TEC-1449 (JWT) ──────┐
@@ -117,7 +117,7 @@ TEC-1456 (Tests) ─────────────────────
### Milestone 6: Quality & Polish (Phase 5)
**Goal:** Production-quality UX, documentation, and performance.
**Mục tiêu:** UX, tài liệu và hiệu năng đạt chất lượng production.
```
Phase 4 done ──→ TEC-1458 (Redis Caching)
@@ -128,47 +128,47 @@ Phase 4 done ──→ TEC-1458 (Redis Caching)
---
## Dependency Map (Phase 4-5)
## Bản đồ phụ thuộc (Phase 4-5)
| Task | Depends On |
| Task | Phụ thuộc vào |
| --------------- | ----------------- |
| TEC-1449 | None |
| TEC-1450 | TEC-1449 (security first) |
| TEC-1451 | None |
| TEC-1452 | None |
| TEC-1453 | None |
| TEC-1455 | None |
| TEC-1456 | None |
| TEC-1449 | Không |
| TEC-1450 | TEC-1449 (bảo mật trước) |
| TEC-1451 | Không |
| TEC-1452 | Không |
| TEC-1453 | Không |
| TEC-1455 | Không |
| TEC-1456 | Không |
| TEC-1457 | TEC-1450 |
| TEC-1458 | Phase 4 |
| TEC-1459 | None |
| TEC-1460 | None |
| TEC-1461 | None |
| TEC-1459 | Không |
| TEC-1460 | Không |
| TEC-1461 | Không |
### Milestone 7: MVP Feature Completion & Audit (Phase 6)
### Milestone 7: Hoàn thành tính năng MVP & Audit (Phase 6)
**Goal:** Complete remaining MVP features (Agent Portal, AI, Payments), clean up tech debt from audit.
**Mục tiêu:** Hoàn thành các tính năng MVP còn lại (Agent Portal, AI, Payments), dọn dẹp tech debt từ audit.
**Sprint 1 — Stabilize (Week 1):**
1. **[TEC-1592] Commit untracked files** (P0, no deps)
2. **[TEC-1593] Fix Architect agent** (P0, no deps)
3. **[TEC-1594] i18n consolidation** (P1, no deps)
**Sprint 1 — Ổn định (Tuần 1):**
1. **[TEC-1592] Commit các file chưa được track** (P0, không có dependency)
2. **[TEC-1593] Sửa Architect agent** (P0, không có dependency)
3. **[TEC-1594] Hợp nhất i18n** (P1, không có dependency)
**Sprint 2 — Agent Portal + Payments (Weeks 2-3):**
4. **[TEC-1595] Agent Portal** (P1, after TEC-1592)
5. **[TEC-1597] Payment flow** (P1, after TEC-1592)
6. **[TEC-1598] Smoke tests** (P1, independent)
**Sprint 2 — Agent Portal + Payments (Tuần 2-3):**
4. **[TEC-1595] Agent Portal** (P1, sau TEC-1592)
5. **[TEC-1597] Luồng thanh toán** (P1, sau TEC-1592)
6. **[TEC-1598] Smoke test** (P1, độc lập)
**Sprint 3 — AI & Quality (Weeks 4-5):**
7. **[TEC-1596] AI/ML integration** (P1, after TEC-1592)
8. **[TEC-1599] Test coverage** (P2, independent)
9. **[TEC-1600] OpenAPI docs** (P2, independent)
**Sprint 3 — AI & Chất lượng (Tuần 4-5):**
7. **[TEC-1596] Tích hợp AI/ML** (P1, sau TEC-1592)
8. **[TEC-1599] Độ bao phủ test** (P2, độc lập)
9. **[TEC-1600] Tài liệu OpenAPI** (P2, độc lập)
**Sprint 4 — Hardening (Weeks 5-6):**
10. **[TEC-1601] K6 baselines** (P2, independent)
11. **[TEC-1602] Security audit** (P2, after Phase 4 security fixes)
12. **[TEC-1603] DB index optimization** (P2, independent)
13. **[TEC-1604] Sentry integration** (P2, independent)
**Sprint 4 — Củng cố (Tuần 5-6):**
10. **[TEC-1601] Baseline K6** (P2, độc lập)
11. **[TEC-1602] Audit bảo mật** (P2, sau các bản sửa bảo mật Phase 4)
12. **[TEC-1603] Tối ưu DB index** (P2, độc lập)
13. **[TEC-1604] Tích hợp Sentry** (P2, độc lập)
```
TEC-1592 (Commit) ──┬── TEC-1595 (Agent Portal)
@@ -182,51 +182,51 @@ TEC-1599..1604 (P2 quality) ── (all independent, parallel)
---
## Dependency Map (Phase 6)
## Bản đồ phụ thuộc (Phase 6)
| Task | Depends On |
| Task | Phụ thuộc vào |
| --------------- | ----------------- |
| TEC-1592 | None |
| TEC-1593 | None |
| TEC-1594 | None |
| TEC-1592 | Không |
| TEC-1593 | Không |
| TEC-1594 | Không |
| TEC-1595 | TEC-1592 |
| TEC-1596 | TEC-1592 |
| TEC-1597 | TEC-1592 |
| TEC-1598 | None |
| TEC-1599 | None |
| TEC-1600 | None |
| TEC-1601 | None |
| TEC-1602 | Phase 4 security |
| TEC-1603 | None |
| TEC-1604 | None |
| TEC-1598 | Không |
| TEC-1599 | Không |
| TEC-1600 | Không |
| TEC-1601 | Không |
| TEC-1602 | Bảo mật Phase 4 |
| TEC-1603 | Không |
| TEC-1604 | Không |
### Milestone 8: Post-MVP Improvements (Phase 7)
### Milestone 8: Cải tiến sau MVP (Phase 7)
**Goal:** Fix remaining bugs, harden for production, improve UX and DX.
**Mục tiêu:** Sửa các bug còn lại, củng cố cho production, cải thiện UX DX.
**Wave 1 — Critical Bug Fixes (1-2 days):**
1. **[TEC-1647] Fix Reviews routing** (P0, no deps)
2. **[TEC-1648] Fix Health endpoints** (P0, no deps)
3. **[TEC-1649] Fix Login error handling** (P0, needs DB)
4. **[TEC-1650] Fix Listing 404** (P1, needs DB)
**Wave 1 — Sửa lỗi quan trọng (1-2 ngày):**
1. **[TEC-1647] Sửa định tuyến Reviews** (P0, không có dependency)
2. **[TEC-1648] Sửa các Health endpoint** (P0, không có dependency)
3. **[TEC-1649] Sửa xử lý lỗi Login** (P0, cần DB)
4. **[TEC-1650] Sửa Listing 404** (P1, cần DB)
**Wave 2 — Production Readiness (3-5 days):**
5. **[TEC-1651] E2E CI environment** (P1, no deps)
6. **[TEC-1652] Run E2E tests** (P1, after Wave 1 fixes)
7. **[TEC-1653] Security headers audit** (P1, no deps)
8. **[TEC-1658] PgBouncer pooling** (P1, no deps)
**Wave 2 — Sẵn sàng Production (3-5 ngày):**
5. **[TEC-1651] Môi trường E2E CI** (P1, không có dependency)
6. **[TEC-1652] Chạy E2E test** (P1, sau các fix Wave 1)
7. **[TEC-1653] Audit security header** (P1, không có dependency)
8. **[TEC-1658] PgBouncer pooling** (P1, không có dependency)
**Wave 3 — User-Facing Quality (1-2 weeks):**
9. **[TEC-1654] Mobile responsive** (P1, no deps)
10. **[TEC-1655] SEO optimization** (P1, no deps)
11. **[TEC-1656] Per-user rate limiting** (P1, no deps)
12. **[TEC-1657] Admin audit logging** (P1, no deps)
**Wave 3 — Chất lượng hướng tới người dùng (1-2 tuần):**
9. **[TEC-1654] Mobile responsive** (P1, không có dependency)
10. **[TEC-1655] Tối ưu SEO** (P1, không có dependency)
11. **[TEC-1656] Rate limiting theo người dùng** (P1, không có dependency)
12. **[TEC-1657] Audit logging cho admin** (P1, không có dependency)
**Wave 4 — Engineering Excellence (2-3 weeks):**
13. **[TEC-1659] Graceful degradation** (P2, no deps)
14. **[TEC-1660] Error codes documentation** (P2, no deps)
15. **[TEC-1661] RUM + Web Vitals** (P2, no deps)
16. **[TEC-1662] Update QA Tracker** (P2, after Wave 2)
**Wave 4 — Xuất sắc về Engineering (2-3 tuần):**
13. **[TEC-1659] Graceful degradation** (P2, không có dependency)
14. **[TEC-1660] Tài liệu mã lỗi** (P2, không có dependency)
15. **[TEC-1661] RUM + Web Vitals** (P2, không có dependency)
16. **[TEC-1662] Cập nhật QA Tracker** (P2, sau Wave 2)
```
TEC-1647 (Reviews) ──┐
@@ -242,39 +242,39 @@ TEC-1659..1661 (Wave 4) ── (all independent, parallel)
---
## Dependency Map (Phase 7)
## Bản đồ phụ thuộc (Phase 7)
| Task | Depends On |
| Task | Phụ thuộc vào |
| --------------- | ----------------- |
| TEC-1647 | None |
| TEC-1648 | None |
| TEC-1649 | None |
| TEC-1650 | None |
| TEC-1651 | None |
| TEC-1647 | Không |
| TEC-1648 | Không |
| TEC-1649 | Không |
| TEC-1650 | Không |
| TEC-1651 | Không |
| TEC-1652 | TEC-1647, TEC-1648 |
| TEC-1653 | None |
| TEC-1654 | None |
| TEC-1655 | None |
| TEC-1656 | None |
| TEC-1657 | None |
| TEC-1658 | None |
| TEC-1659 | None |
| TEC-1660 | None |
| TEC-1661 | None |
| TEC-1653 | Không |
| TEC-1654 | Không |
| TEC-1655 | Không |
| TEC-1656 | Không |
| TEC-1657 | Không |
| TEC-1658 | Không |
| TEC-1659 | Không |
| TEC-1660 | Không |
| TEC-1661 | Không |
| TEC-1662 | TEC-1652 |
### Milestone 9: CEO Audit Wave 5 — Security & Features (Phase 7 continued)
### Milestone 9: Audit của CEO Wave 5 — Bảo mật & Tính năng (Phase 7 tiếp)
**Goal:** Address security vulnerabilities, improve test coverage, implement missing Sprint 3 feature.
**Mục tiêu:** Xử lý các lỗ hổng bảo mật, cải thiện độ bao phủ test, triển khai tính năng còn thiếu của Sprint 3.
**Wave 5a — Security (DAY 1-2, parallel):**
1. **[TEC-1684] Fix npm vulnerabilities** (P0, Security Engineer)
2. **[TEC-1685] Fix lint error** (P1, QA Engineer)
**Wave 5a — Bảo mật (NGÀY 1-2, song song):**
1. **[TEC-1684] Sửa lỗ hổng npm** (P0, Security Engineer)
2. **[TEC-1685] Sửa lỗi lint** (P1, QA Engineer)
**Wave 5b — Quality & Features (WEEK 1-2):**
3. **[TEC-1686] Test coverage push** (P1, QA Engineer, after 5a)
**Wave 5b — Chất lượng & Tính năng (TUẦN 1-2):**
3. **[TEC-1686] Đẩy mạnh độ bao phủ test** (P1, QA Engineer, sau 5a)
4. **[TEC-1688] Saved Searches + Alerts** (P1, Architect)
5. **[TEC-1687] Dependabot setup** (P2, DevOps Engineer)
5. **[TEC-1687] Thiết lập Dependabot** (P2, DevOps Engineer)
```
TEC-1684 (NPM Vuln) ─────── (independent, P0)
@@ -285,43 +285,43 @@ TEC-1687 (Dependabot) ────── (independent, P2)
---
## Dependency Map (Wave 5)
## Bản đồ phụ thuộc (Wave 5)
| Task | Depends On |
| Task | Phụ thuộc vào |
| --------------- | ----------------- |
| TEC-1684 | None |
| TEC-1685 | None |
| TEC-1684 | Không |
| TEC-1685 | Không |
| TEC-1686 | TEC-1685 |
| TEC-1687 | None |
| TEC-1688 | None |
| TEC-1687 | Không |
| TEC-1688 | Không |
---
## Rollout Notes
## Ghi chú triển khai
- **Phase 0-6 complete** — 51/51 tasks done, MVP feature-complete
- **Phase 7 is current priority** — bug fixes and production hardening
- **Wave 13 is current sprint** — 6 tasks (TEC-1918 through TEC-1923)
- **Total project status** (from Paperclip, 2026-04-12): 219 done / 3 in progress / 9 todo / 3 cancelled out of 234 issues
- **Critical path:** TEC-1918 (TS errors) → TEC-1919 (E2E unblock) → production readiness checklist (TEC-1922)
- **Priorities:** CI green (TEC-1918), E2E (TEC-1919), backlog grooming (TEC-1920), /pricing page (TEC-1921)
- **Production path:** Wave 13 fixes → production readiness checklist → go-live decision
- **Phase 0-6 đã hoàn thành** — 51/51 task xong, MVP hoàn chỉnh tính năng
- **Phase 7 là ưu tiên hiện tại** — sửa bug và củng cố production
- **Wave 13 là sprint hiện tại** — 6 task (TEC-1918 đến TEC-1923)
- **Tổng trạng thái dự án** (từ Paperclip, 2026-04-12): 219 done / 3 in progress / 9 todo / 3 cancelled trên tổng số 234 issue
- **Đường găng:** TEC-1918 (TS errors) → TEC-1919 (E2E unblock) → checklist sẵn sàng production (TEC-1922)
- **Ưu tiên:** CI green (TEC-1918), E2E (TEC-1919), grooming backlog (TEC-1920), trang /pricing (TEC-1921)
- **Lộ trình production:** Các fix Wave 13 → checklist sẵn sàng production → quyết định go-live
### Milestone 13: CEO Audit Wave 13 (Phase 7 continued)
### Milestone 13: Audit của CEO Wave 13 (Phase 7 tiếp)
**Goal:** Fix remaining TS errors, unblock E2E, groom backlog, complete pricing page, production readiness checklist.
**Mục tiêu:** Sửa các lỗi TS còn lại, gỡ chặn E2E, grooming backlog, hoàn thành trang pricing, checklist sẵn sàng production.
**Wave 13A — CI Fix (Day 1):**
1. **[TEC-1918] Fix 7 TS compile errors in web test files** (P0, Senior Backend Engineer)
**Wave 13A — Sửa CI (Ngày 1):**
1. **[TEC-1918] Sửa 7 lỗi biên dịch TS trong các file test web** (P0, Senior Backend Engineer)
**Wave 13B — Features & Quality (Days 2-3):**
2. **[TEC-1919] Unblock E2E test environment** (P1, DevOps Engineer)
3. **[TEC-1920] Backlog grooming — deduplicate and close resolved** (P1, QA Engineer)
4. **[TEC-1921] Complete /pricing page** (P1, Senior Frontend Engineer)
**Wave 13B — Tính năng & Chất lượng (Ngày 2-3):**
2. **[TEC-1919] Gỡ chặn môi trường E2E test** (P1, DevOps Engineer)
3. **[TEC-1920] Grooming backlog — loại bỏ trùng lặp và đóng các task đã giải quyết** (P1, QA Engineer)
4. **[TEC-1921] Hoàn thành trang /pricing** (P1, Senior Frontend Engineer)
**Wave 13C — Documentation & Readiness (Days 3-5):**
5. **[TEC-1922] Production readiness checklist** (P2, SRE Engineer)
6. **[TEC-1923] Update PROJECT_TRACKER.md** (P2, Technical Writer)
**Wave 13C — Tài liệu & Sẵn sàng (Ngày 3-5):**
5. **[TEC-1922] Checklist sẵn sàng production** (P2, SRE Engineer)
6. **[TEC-1923] Cập nhật PROJECT_TRACKER.md** (P2, Technical Writer)
```
TEC-1918 (TS Errors) ──→ TEC-1919 (E2E Unblock)
@@ -333,31 +333,31 @@ TEC-1923 (Tracker) ────── (independent)
---
## Dependency Map (Wave 13)
## Bản đồ phụ thuộc (Wave 13)
| Task | Depends On |
| Task | Phụ thuộc vào |
| --------------- | ----------------- |
| TEC-1918 | None |
| TEC-1918 | Không |
| TEC-1919 | TEC-1918 |
| TEC-1920 | None |
| TEC-1921 | None |
| TEC-1920 | Không |
| TEC-1921 | Không |
| TEC-1922 | TEC-1918, TEC-1919|
| TEC-1923 | None |
| TEC-1923 | Không |
### Milestone 12: CEO Audit CI Pipeline Fix (Phase 7 Wave 12)
### Milestone 12: Audit của CEO — Sửa CI Pipeline (Phase 7 Wave 12)
**Goal:** Restore CI pipeline to green. Fix all TypeScript, ESLint, and test failures. Commit outstanding work.
**Mục tiêu:** Khôi phục CI pipeline về trạng thái xanh. Sửa tất cả các lỗi TypeScript, ESLint và test. Commit công việc còn tồn đọng.
**Wave 12A — Fix CI (Day 1, parallel):**
1. **[TEC-1898] Fix Prisma 7 migration** (P0, Senior Backend Engineer)
2. **[TEC-1899] Fix 31 failing unit tests** (P0, QA Engineer)
3. **[TEC-1900] Fix ESLint errors + commit files** (P0, Senior Backend Engineer, after TEC-1898)
**Wave 12A — Sửa CI (Ngày 1, song song):**
1. **[TEC-1898] Sửa migration Prisma 7** (P0, Senior Backend Engineer)
2. **[TEC-1899] Sửa 31 unit test thất bại** (P0, QA Engineer)
3. **[TEC-1900] Sửa lỗi ESLint + commit file** (P0, Senior Backend Engineer, sau TEC-1898)
**Wave 12B — Bug Fixes (Days 2-3):**
4. **[TEC-1649] Login 500→401 fix** (P1, in progress)
5. **[TEC-1657] Admin audit logging** (P1, todo)
6. **[TEC-1878] E2E environment** (P1, DevOps Engineer)
7. **[TEC-1847] React component tests** (P1, QA Engineer)
**Wave 12B — Sửa lỗi (Ngày 2-3):**
4. **[TEC-1649] Fix Login 500→401** (P1, đang tiến hành)
5. **[TEC-1657] Audit logging cho admin** (P1, todo)
6. **[TEC-1878] Môi trường E2E** (P1, DevOps Engineer)
7. **[TEC-1847] Test component React** (P1, QA Engineer)
```
TEC-1898 (Prisma Fix) ──┬── TEC-1900 (ESLint + Commit)
@@ -370,14 +370,14 @@ TEC-1847 (RTL Tests) ──── (independent)
---
## Dependency Map (Wave 12)
## Bản đồ phụ thuộc (Wave 12)
| Task | Depends On |
| Task | Phụ thuộc vào |
| --------------- | ----------------- |
| TEC-1898 | None |
| TEC-1899 | None |
| TEC-1898 | Không |
| TEC-1899 | Không |
| TEC-1900 | TEC-1898 |
| TEC-1649 | None |
| TEC-1657 | None |
| TEC-1878 | None |
| TEC-1847 | None |
| TEC-1649 | Không |
| TEC-1657 | Không |
| TEC-1878 | Không |
| TEC-1847 | Không |

View File

@@ -1,19 +1,19 @@
# GoodGo Frontend: i18n + A11y Implementation Quick Reference
# GoodGo Frontend: Tham chiếu nhanh triển khai i18n + A11y
## 🎯 Key Findings at a Glance
## 🎯 Những phát hiện chính trong nháy mắt
### Current State
-**Next.js 15** with App Router (well-structured)
-**React 18** + TypeScript (type-safe)
-**Tailwind CSS** with dark mode support (HSL-based theme)
-**Good component library** (~35 components)
-**Some A11y basics** in place (semantic HTML, ARIA labels, skip link)
-**NO i18n setup** (everything hardcoded Vietnamese)
-**A11y gaps** (focus management, some ARIA missing, color contrast TBD)
### Trạng thái hiện tại
-**Next.js 15** với App Router (cấu trúc tốt)
-**React 18** + TypeScript (an toàn kiểu)
-**Tailwind CSS** với hỗ trợ dark mode (theme dựa trên HSL)
-**Thư viện component tốt** (~35 component)
-**Một số kiến thức cơ bản về A11y** đã có (HTML ngữ nghĩa, ARIA labels, skip link)
-**CHƯA thiết lập i18n** (tất cả tiếng Việt được hardcode)
-**Thiếu sót A11y** (quản lý focus, một số ARIA còn thiếu, tương phản màu chưa xác định)
### Strategic Entry Points for Implementation
### Điểm vào chiến lược cho việc triển khai
#### 1. **i18n Entry Points** (Priority 1)
#### 1. **Điểm vào i18n** (Ưu tiên 1)
```
Files to modify for i18n:
├── app/layout.tsx → Add i18n provider
@@ -29,7 +29,7 @@ Files to modify for i18n:
Total files to update: ~25-30 files with hardcoded strings
```
#### 2. **A11y Critical Fixes** (Priority 1.5)
#### 2. **Sửa lỗi A11y quan trọng** (Ưu tiên 1.5)
```
Components needing A11y updates:
├── components/ui/dialog.tsx → Focus trapping + focus restoration
@@ -46,7 +46,7 @@ Tasks:
- Link form errors to inputs with aria-describedby
```
#### 3. **Message File Structure for i18n**
#### 3. **Cấu trúc file Message cho i18n**
```
public/locales/
├── en.json
@@ -64,142 +64,142 @@ public/locales/
---
## 📋 Implementation Checklist
## 📋 Checklist triển khai
### Phase 1: Setup (2-3 hours)
- [ ] Install `next-intl` package
- [ ] Create message files (en.json, vi.json)
- [ ] Update next.config.js for i18n routing
- [ ] Create i18n config (config.ts)
- [ ] Update middleware.ts for locale detection
- [ ] Wrap root layout with i18n provider
### Giai đoạn 1: Thiết lập (2-3 giờ)
- [ ] Cài đặt gói `next-intl`
- [ ] Tạo các file message (en.json, vi.json)
- [ ] Cập nhật next.config.js cho routing i18n
- [ ] Tạo cấu hình i18n (config.ts)
- [ ] Cập nhật middleware.ts để phát hiện locale
- [ ] Bao bọc root layout bằng provider i18n
### Phase 2: Core Refactoring (6-8 hours)
- [ ] Update root layout & metadata
- [ ] Refactor all validations (Zod) to use messages
- [ ] Extract component strings to useTranslations()
- [ ] Update all enums (TRANSACTION_TYPES, PROPERTY_TYPES, etc.) to use i18n
- [ ] Update page layouts (public, auth, dashboard)
- [ ] Update all page content
### Giai đoạn 2: Tái cấu trúc cốt lõi (6-8 giờ)
- [ ] Cập nhật root layout & metadata
- [ ] Tái cấu trúc tất cả validation (Zod) để sử dụng messages
- [ ] Trích xuất chuỗi component sang useTranslations()
- [ ] Cập nhật tất cả các enum (TRANSACTION_TYPES, PROPERTY_TYPES, v.v.) để sử dụng i18n
- [ ] Cập nhật các page layout (public, auth, dashboard)
- [ ] Cập nhật toàn bộ nội dung trang
### Phase 3: Component Updates (4-6 hours)
- [ ] Update all UI components
- [ ] Update form components
- [ ] Update navigation components
- [ ] Update search/filter components
- [ ] Update listing form
### Giai đoạn 3: Cập nhật component (4-6 giờ)
- [ ] Cập nhật tất cả các component UI
- [ ] Cập nhật các component form
- [ ] Cập nhật các component navigation
- [ ] Cập nhật các component search/filter
- [ ] Cập nhật form đăng tin (listing form)
### Phase 4: A11y Fixes (4-6 hours)
- [ ] Fix focus management in dialogs
- [ ] Add focus trapping
- [ ] Update form error linking (aria-describedby)
- [ ] Add aria-busy to loading states
- [ ] Add aria-labels to icon buttons
- [ ] Verify color contrast
- [ ] Update test setup for i18n
### Giai đoạn 4: Sửa lỗi A11y (4-6 giờ)
- [ ] Sửa quản lý focus trong dialog
- [ ] Thêm focus trapping
- [ ] Cập nhật liên kết lỗi form (aria-describedby)
- [ ] Thêm aria-busy cho trạng thái loading
- [ ] Thêm aria-label cho các nút biểu tượng
- [ ] Xác minh tương phản màu
- [ ] Cập nhật thiết lập test cho i18n
### Phase 5: Testing & QA (3-4 hours)
- [ ] Test both locales on all pages
- [ ] Run axe DevTools accessibility audit
- [ ] Test keyboard navigation
- [ ] Test screen reader compatibility
- [ ] Update unit tests for i18n
### Giai đoạn 5: Test & QA (3-4 giờ)
- [ ] Test cả hai locale trên tất cả các trang
- [ ] Chạy kiểm tra khả năng tiếp cận bằng axe DevTools
- [ ] Test điều hướng bằng bàn phím
- [ ] Test tương thích screen reader
- [ ] Cập nhật unit test cho i18n
---
## 🗣️ Text Content Inventory
## 🗣️ Kiểm kê nội dung văn bản
### Navigation & Layout (~15 items)
| Location | Text | Status |
### Navigation & Layout (~15 mục)
| Vị trí | Văn bản | Trạng thái |
|----------|------|--------|
| Public header | Trang chủ, Tìm kiếm, Đăng nhập, Đăng ký | ❌ Hardcoded |
| Dashboard nav | 8 nav items | ❌ Hardcoded |
| Footer | 4 sections | ❌ Hardcoded |
| Dashboard nav | 8 mục nav | ❌ Hardcoded |
| Footer | 4 phần | ❌ Hardcoded |
### Forms & Validation (~40+ items)
| Location | Type | Count | Status |
### Forms & Validation (~40+ mục)
| Vị trí | Loại | Số lượng | Trạng thái |
|----------|------|-------|--------|
| Login form | Labels + errors | 8 | ❌ Hardcoded |
| Register form | Labels + errors | 10 | ❌ Hardcoded |
| Listing form | Multi-step labels | 25+ | ❌ Hardcoded |
| Search filters | Option labels | 30+ | ❌ Hardcoded |
| Zod validation | Error messages | 20+ | ❌ Hardcoded |
| Login form | Nhãn + lỗi | 8 | ❌ Hardcoded |
| Register form | Nhãn + lỗi | 10 | ❌ Hardcoded |
| Listing form | Nhãn đa bước | 25+ | ❌ Hardcoded |
| Search filters | Nhãn tùy chọn | 30+ | ❌ Hardcoded |
| Zod validation | Thông báo lỗi | 20+ | ❌ Hardcoded |
### Enums & Constants (~50+ items)
| File | Items | Status |
### Enum & Hằng số (~50+ mục)
| File | Mục | Trạng thái |
|------|-------|--------|
| TRANSACTION_TYPES | 2 labels | ❌ Hardcoded |
| PROPERTY_TYPES | 6 labels | ❌ Hardcoded |
| LISTING_STATUSES | 8 labels | ❌ Hardcoded |
| DIRECTIONS | 8 labels | ❌ Hardcoded |
| CITIES | 13 names | ❌ Hardcoded |
| PRICE_RANGES | 6 ranges | ❌ Hardcoded |
| TRANSACTION_TYPES | 2 nhãn | ❌ Hardcoded |
| PROPERTY_TYPES | 6 nhãn | ❌ Hardcoded |
| LISTING_STATUSES | 8 nhãn | ❌ Hardcoded |
| DIRECTIONS | 8 nhãn | ❌ Hardcoded |
| CITIES | 13 tên | ❌ Hardcoded |
| PRICE_RANGES | 6 khoảng | ❌ Hardcoded |
### Page Content (~30 items)
| Page | Sections | Status |
### Nội dung trang (~30 mục)
| Trang | Phần | Trạng thái |
|------|----------|--------|
| Landing page | Hero, search, stats, CTA | ❌ Hardcoded |
| Search results | No results, loading, headers | ❌ Hardcoded |
| Dashboard | Section titles, empty states | ❌ Hardcoded |
| Trang landing | Hero, search, stats, CTA | ❌ Hardcoded |
| Kết quả tìm kiếm | Không có kết quả, loading, header | ❌ Hardcoded |
| Dashboard | Tiêu đề phần, trạng thái rỗng | ❌ Hardcoded |
---
## 🔑 Critical Files for i18n
## 🔑 Các file quan trọng cho i18n
### Must-Update Files (Blockers)
1. **middleware.ts**Locale routing
2. **app/layout.tsx**i18n provider setup
3. **lib/validations/*.ts**Message integration
4. **lib/*.ts**Any API error message handling
### Các file phải cập nhật (Blocker)
1. **middleware.ts**Định tuyến locale
2. **app/layout.tsx**Thiết lập provider i18n
3. **lib/validations/*.ts**Tích hợp messages
4. **lib/*.ts**Bất kỳ xử lý thông báo lỗi API nào
### High-Priority Files
### Các file ưu tiên cao
1. **app/(public)/layout.tsx** — Navigation
2. **app/(auth)/login/page.tsx**Auth forms
2. **app/(auth)/login/page.tsx**Form xác thực
3. **components/listings/listing-form-steps.tsx** — Forms
4. **components/search/filter-bar.tsx**Filters
4. **components/search/filter-bar.tsx**Bộ lọc
### Medium-Priority Files
1. All page components
2. All UI components with text
3. Error boundary components
### Các file ưu tiên trung bình
1. Tất cả các component trang
2. Tất cả các component UI có văn bản
3. Các component error boundary
---
## ♿ A11y Implementation Priority
## ♿ Ưu tiên triển khai A11y
### WCAG 2.1 AA Critical Fixes
1. **Focus Management** (Level A)
- Add focus trap in `dialog.tsx`
- Restore focus on dialog close
- Visible focus indicator on all buttons
### Sửa lỗi quan trọng WCAG 2.1 AA
1. **Quản lý focus** (Cấp A)
- Thêm focus trap trong `dialog.tsx`
- Khôi phục focus khi đóng dialog
- Chỉ báo focus rõ ràng trên tất cả các nút
2. **Color Contrast** (Level AA)
- Run axe DevTools audit
- Fix any < 4.5:1 ratio text
- Fix < 3:1 ratio graphics
2. **Tương phản màu** (Cấp AA)
- Chạy kiểm tra axe DevTools
- Sửa văn bản có tỷ lệ < 4.5:1
- Sửa đồ họa có tỷ lệ < 3:1
3. **Form Accessibility** (Level A)
- Link all error messages with aria-describedby
- Proper labeling with htmlFor
- Fieldset grouping for complex forms
3. **Khả năng tiếp cận form** (Cấp A)
- Liên kết tất cả thông báo lỗi với aria-describedby
- Gắn nhãn đúng cách với htmlFor
- Nhóm fieldset cho các form phức tạp
4. **Loading States** (Level A)
- Add aria-busy to spinners
- Add aria-label with context
4. **Trạng thái Loading** (Cấp A)
- Thêm aria-busy cho spinner
- Thêm aria-label kèm ngữ cảnh
5. **Icon Buttons** (Level A)
- All icon-only buttons need aria-label
- Theme toggle button already has label
5. **Nút biểu tượng** (Cấp A)
- Tất cả các nút chỉ có biểu tượng cần aria-label
- Nút bật/tắt theme đã có nhãn
### Nice-to-Have A11y Enhancements
- Skip link already present
- Semantic HTML already used
- Role="alert" on errors
- aria-invalid on form fields
### Các cải tiến A11y nên có
- Skip link đã có sẵn
- HTML ngữ nghĩa đã được sử dụng
- Role="alert" trên lỗi
- aria-invalid trên các trường form
---
## 📦 Dependencies to Add
## 📦 Các phụ thuộc cần thêm
```bash
npm install next-intl
@@ -208,11 +208,11 @@ npm install next-intl
# Testing with mocked i18n available
```
**Total installation footprint:** ~500KB minified
**Tổng kích thước cài đặt:** ~500KB đã minify
---
## 🧪 Testing Strategy
## 🧪 Chiến lược test
### Unit Tests
```typescript
@@ -241,43 +241,43 @@ describe('LoginForm', () => {
---
## 📊 Estimated Timeline
## 📊 Lộ trình ước tính
| Phase | Duration | Effort |
| Giai đoạn | Thời gian | Công sức |
|-------|----------|--------|
| Setup | 2-3h | Low |
| Core Refactoring | 6-8h | Medium |
| Components | 4-6h | Medium |
| A11y Fixes | 4-6h | Low-Medium |
| Testing | 3-4h | Medium |
| **Total** | **19-27h** | **~3-4 days** |
| Thiết lập | 2-3h | Thấp |
| Tái cấu trúc cốt lõi | 6-8h | Trung bình |
| Components | 4-6h | Trung bình |
| Sửa lỗi A11y | 4-6h | Thấp-Trung bình |
| Testing | 3-4h | Trung bình |
| **Tổng** | **19-27h** | **~3-4 ngày** |
---
## 🚀 Implementation Order (Recommended)
## 🚀 Thứ tự triển khai (Khuyến nghị)
1. **Setup i18n infrastructure** (creates foundation)
2. **Update middleware + root layout** (enables routing)
3. **Extract & centralize all text** (main work)
4. **Fix A11y issues** (parallelize with #3)
5. **Test thoroughly** (final verification)
1. **Thiết lập hạ tầng i18n** (tạo nền tảng)
2. **Cập nhật middleware + root layout** (kích hoạt routing)
3. **Trích xuất & tập trung tất cả văn bản** (công việc chính)
4. **Sửa các vấn đề A11y** (song song với #3)
5. **Test kỹ lưỡng** (xác minh cuối cùng)
---
## 💡 Quick Win Opportunities
## 💡 Cơ hội thắng nhanh
These can be done immediately:
1. Create message file structure (30 min)
2. Add focus trap to dialog (30 min)
3. Add aria-busy to spinners (20 min)
4. Color contrast audit (1 hour)
5. Icon button aria-labels (30 min)
Những việc có thể làm ngay:
1. Tạo cấu trúc file message (30 phút)
2. Thêm focus trap cho dialog (30 phút)
3. Thêm aria-busy cho spinner (20 phút)
4. Kiểm tra tương phản màu (1 giờ)
5. Aria-label cho nút biểu tượng (30 phút)
---
## 📝 Notes for Implementation
## 📝 Ghi chú khi triển khai
### Locale Detection (middleware)
### Phát hiện locale (middleware)
```typescript
// Check in order: URL > cookie > header > default
function getLocale(request) {
@@ -288,19 +288,19 @@ function getLocale(request) {
}
```
### Message Fallback Strategy
### Chiến lược dự phòng Message
```typescript
// If translation missing, use English as fallback
// Otherwise fallback to Vietnamese (primary)
```
### Performance Considerations
- Keep message files < 100KB each
- Lazy load per-page messages if needed
- Static generation for SEO-critical pages
### Cân nhắc về hiệu năng
- Giữ các file message < 100KB mỗi file
- Lazy load message theo trang nếu cần
- Static generation cho các trang quan trọng về SEO
---
**Last Updated:** April 9, 2026
**Version:** 1.0 - Pre-Implementation
**Confidence:** High
**Cập nhật lần cuối:** Ngày 9 tháng 4 năm 2026
**Phiên bản:** 1.0 - Trước triển khai
**Độ tin cậy:** Cao