chore: update project documentation, audit reports, and initialize IDE configuration files
Some checks failed
CI / Lint → Typecheck → Test → Build (22) (push) Failing after 29s
CI / E2E Tests (push) Has been skipped
CodeQL Analysis / CodeQL (javascript-typescript) (push) Failing after 2m42s
Deploy / Build Web Image (push) Failing after 27s
Deploy / Build AI Services Image (push) Failing after 29s
E2E Tests / Playwright E2E (push) Failing after 43s
Deploy / Build API Image (push) Failing after 1m31s
Security Scanning / Dependency Audit (pnpm) (push) Failing after 6s
Security Scanning / Trivy Scan — API Image (push) Failing after 5m35s
Security Scanning / Trivy Scan — AI Services Image (push) Failing after 3m45s
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
Deploy / Rollback Staging (push) Has been skipped
Deploy / Rollback Production (push) Has been skipped
Security Scanning / Trivy Scan — Web Image (push) Failing after 13m51s
Security Scanning / Trivy Filesystem Scan (push) Failing after 14m46s
Security Scanning / Security Gate (push) Has been cancelled
Some checks failed
CI / Lint → Typecheck → Test → Build (22) (push) Failing after 29s
CI / E2E Tests (push) Has been skipped
CodeQL Analysis / CodeQL (javascript-typescript) (push) Failing after 2m42s
Deploy / Build Web Image (push) Failing after 27s
Deploy / Build AI Services Image (push) Failing after 29s
E2E Tests / Playwright E2E (push) Failing after 43s
Deploy / Build API Image (push) Failing after 1m31s
Security Scanning / Dependency Audit (pnpm) (push) Failing after 6s
Security Scanning / Trivy Scan — API Image (push) Failing after 5m35s
Security Scanning / Trivy Scan — AI Services Image (push) Failing after 3m45s
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
Deploy / Rollback Staging (push) Has been skipped
Deploy / Rollback Production (push) Has been skipped
Security Scanning / Trivy Scan — Web Image (push) Failing after 13m51s
Security Scanning / Trivy Filesystem Scan (push) Failing after 14m46s
Security Scanning / Security Gate (push) Has been cancelled
This commit is contained in:
Ho Ngoc Hai
@@ -1,93 +1,93 @@
|
||||
# Agent Public Profile Page — Complete Implementation Guide
|
||||
# Trang Hồ Sơ Công Khai Môi Giới — Hướng Dẫn Triển Khai Đầy Đủ
|
||||
|
||||
**Last Updated:** April 11, 2026
|
||||
**Status:** 📋 Exploration Complete — Ready for Implementation
|
||||
**Scope:** `/agents/[id]` public profile page for GoodGo platform
|
||||
**Cập nhật lần cuối:** 11 tháng 4, 2026
|
||||
**Trạng thái:** 📋 Khám phá hoàn tất — Sẵn sàng triển khai
|
||||
**Phạm vi:** Trang hồ sơ công khai `/agents/[id]` cho nền tảng GoodGo
|
||||
|
||||
---
|
||||
|
||||
## 📚 Documentation Index
|
||||
## 📚 Mục lục Tài liệu
|
||||
|
||||
This exploration package contains 3 comprehensive documents:
|
||||
Gói khám phá này chứa 3 tài liệu toàn diện:
|
||||
|
||||
### 1. **AGENT_PROFILE_EXPLORATION.md** (21 KB)
|
||||
**Comprehensive technical analysis of the entire codebase**
|
||||
**Phân tích kỹ thuật toàn diện về toàn bộ codebase**
|
||||
|
||||
Contains:
|
||||
- ✅ Web app structure & routing analysis
|
||||
- ✅ Existing agent-related code inventory
|
||||
- ✅ API endpoint design proposals
|
||||
- ✅ UI component library overview
|
||||
- ✅ Styling patterns & Tailwind setup
|
||||
- ✅ State management & data fetching patterns
|
||||
- ✅ SEO & structured data patterns
|
||||
- ✅ Type definitions & interfaces
|
||||
- ✅ Implementation checklist
|
||||
- ✅ Key files reference guide
|
||||
Nội dung:
|
||||
- ✅ Cấu trúc ứng dụng web & phân tích định tuyến
|
||||
- ✅ Danh sách code liên quan đến môi giới hiện có
|
||||
- ✅ Đề xuất thiết kế API endpoint
|
||||
- ✅ Tổng quan thư viện component giao diện
|
||||
- ✅ Mẫu styling & cài đặt Tailwind
|
||||
- ✅ Mẫu quản lý trạng thái & lấy dữ liệu
|
||||
- ✅ Mẫu SEO & dữ liệu có cấu trúc
|
||||
- ✅ Định nghĩa kiểu & interface
|
||||
- ✅ Danh sách kiểm tra triển khai
|
||||
- ✅ Hướng dẫn tham chiếu các tệp quan trọng
|
||||
|
||||
**Read this first** to understand the full architecture.
|
||||
**Đọc tài liệu này trước** để hiểu toàn bộ kiến trúc.
|
||||
|
||||
---
|
||||
|
||||
### 2. **AGENT_PROFILE_QUICK_REFERENCE.md** (10 KB)
|
||||
**Quick-start guide for developers**
|
||||
**Hướng dẫn khởi động nhanh cho lập trình viên**
|
||||
|
||||
Contains:
|
||||
- ✅ URL patterns & routing
|
||||
- ✅ Backend API specification
|
||||
- ✅ Frontend architecture diagram
|
||||
- ✅ Data flow visualization
|
||||
- ✅ Component composition guide
|
||||
- ✅ API endpoints reference
|
||||
- ✅ UI mockups & layouts
|
||||
- ✅ Copy-paste code templates
|
||||
- ✅ SEO & schema references
|
||||
- ✅ 5-phase implementation timeline
|
||||
- ✅ Example response structures
|
||||
- ✅ Key files checklist
|
||||
Nội dung:
|
||||
- ✅ Mẫu URL & định tuyến
|
||||
- ✅ Đặc tả API backend
|
||||
- ✅ Sơ đồ kiến trúc frontend
|
||||
- ✅ Trực quan hóa luồng dữ liệu
|
||||
- ✅ Hướng dẫn kết hợp component
|
||||
- ✅ Tham chiếu API endpoint
|
||||
- ✅ Bản phác thảo giao diện & bố cục
|
||||
- ✅ Mẫu code sao chép nhanh
|
||||
- ✅ Tham chiếu SEO & schema
|
||||
- ✅ Lộ trình triển khai 5 giai đoạn
|
||||
- ✅ Cấu trúc phản hồi mẫu
|
||||
- ✅ Danh sách kiểm tra tệp quan trọng
|
||||
|
||||
**Use this during development** as a handy reference.
|
||||
**Dùng tài liệu này trong quá trình phát triển** như tài liệu tham khảo tiện dụng.
|
||||
|
||||
---
|
||||
|
||||
### 3. **AGENT_PROFILE_CODE_EXAMPLES.md** (20 KB)
|
||||
**Ready-to-use code templates for all components**
|
||||
**Mẫu code sẵn sàng sử dụng cho tất cả các component**
|
||||
|
||||
Contains:
|
||||
- ✅ Backend query handler (CQRS pattern)
|
||||
- ✅ Backend DTO definitions
|
||||
- ✅ Backend controller endpoint
|
||||
- ✅ Repository interface updates
|
||||
- ✅ Prisma implementation
|
||||
- ✅ Frontend API client (agents-api.ts)
|
||||
- ✅ Frontend server fetch (agents-server.ts)
|
||||
Nội dung:
|
||||
- ✅ Query handler backend (mẫu CQRS)
|
||||
- ✅ Định nghĩa DTO backend
|
||||
- ✅ Endpoint controller backend
|
||||
- ✅ Cập nhật interface repository
|
||||
- ✅ Triển khai Prisma
|
||||
- ✅ API client frontend (agents-api.ts)
|
||||
- ✅ Server fetch frontend (agents-server.ts)
|
||||
- ✅ Server component (page.tsx)
|
||||
- ✅ Agent header component
|
||||
- ✅ Agent listings section component
|
||||
- ✅ Agent reviews section component
|
||||
- ✅ Tailwind styling patterns
|
||||
- ✅ Testing checklist
|
||||
- ✅ Component header môi giới
|
||||
- ✅ Component phần danh sách bất động sản của môi giới
|
||||
- ✅ Component phần đánh giá môi giới
|
||||
- ✅ Mẫu styling Tailwind
|
||||
- ✅ Danh sách kiểm tra kiểm thử
|
||||
|
||||
**Copy & paste these** into your actual files and customize.
|
||||
**Sao chép & dán các mẫu này** vào các tệp thực tế của bạn và tùy chỉnh.
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Quick Start (5 Minutes)
|
||||
## 🎯 Khởi động Nhanh (5 Phút)
|
||||
|
||||
1. **Read** `AGENT_PROFILE_QUICK_REFERENCE.md` sections:
|
||||
- 🎯 Implementation Overview
|
||||
- 📦 Backend Setup
|
||||
- 🎨 Frontend Architecture
|
||||
1. **Đọc** các phần trong `AGENT_PROFILE_QUICK_REFERENCE.md`:
|
||||
- 🎯 Tổng quan Triển khai
|
||||
- 📦 Thiết lập Backend
|
||||
- 🎨 Kiến trúc Frontend
|
||||
|
||||
2. **Review** `AGENT_PROFILE_CODE_EXAMPLES.md`:
|
||||
- Backend files structure
|
||||
- Frontend files structure
|
||||
2. **Xem xét** `AGENT_PROFILE_CODE_EXAMPLES.md`:
|
||||
- Cấu trúc tệp backend
|
||||
- Cấu trúc tệp frontend
|
||||
|
||||
3. **Plan** implementation in 5 phases (see quick reference)
|
||||
3. **Lên kế hoạch** triển khai theo 5 giai đoạn (xem tài liệu tham chiếu nhanh)
|
||||
|
||||
---
|
||||
|
||||
## 🏗️ Architecture Summary
|
||||
## 🏗️ Tóm tắt Kiến trúc
|
||||
|
||||
### Backend (NestJS)
|
||||
```
|
||||
@@ -114,7 +114,7 @@ Route: /agents/[id]
|
||||
└── AgentListingsSection (properties)
|
||||
```
|
||||
|
||||
### Data Flow
|
||||
### Luồng Dữ liệu
|
||||
```
|
||||
1. GET /agents/[id]
|
||||
2. Server fetches agent profile (ISR: 1 hour cache)
|
||||
@@ -128,56 +128,56 @@ Route: /agents/[id]
|
||||
|
||||
---
|
||||
|
||||
## 📋 Implementation Phases
|
||||
## 📋 Giai đoạn Triển khai
|
||||
|
||||
### Phase 1: Backend (1-2 hours)
|
||||
- [ ] Create `get-agent-profile/` query handler
|
||||
- [ ] Create `agent-public-profile.dto.ts`
|
||||
- [ ] Update `agent.repository.ts` interface
|
||||
- [ ] Implement `prisma-agent.repository.ts`
|
||||
- [ ] Add endpoint to `agents.controller.ts`
|
||||
- [ ] Test with Postman/curl
|
||||
### Giai đoạn 1: Backend (1-2 giờ)
|
||||
- [ ] Tạo query handler `get-agent-profile/`
|
||||
- [ ] Tạo `agent-public-profile.dto.ts`
|
||||
- [ ] Cập nhật interface `agent.repository.ts`
|
||||
- [ ] Triển khai `prisma-agent.repository.ts`
|
||||
- [ ] Thêm endpoint vào `agents.controller.ts`
|
||||
- [ ] Kiểm thử bằng Postman/curl
|
||||
|
||||
### Phase 2: Frontend Setup (1 hour)
|
||||
- [ ] Create `lib/agents-api.ts`
|
||||
- [ ] Create `lib/agents-server.ts`
|
||||
- [ ] Create `/agents/[id]/` directory
|
||||
- [ ] Create `/agents/[id]/page.tsx` (stub)
|
||||
### Giai đoạn 2: Thiết lập Frontend (1 giờ)
|
||||
- [ ] Tạo `lib/agents-api.ts`
|
||||
- [ ] Tạo `lib/agents-server.ts`
|
||||
- [ ] Tạo thư mục `/agents/[id]/`
|
||||
- [ ] Tạo `/agents/[id]/page.tsx` (stub)
|
||||
|
||||
### Phase 3: UI Components (2-3 hours)
|
||||
- [ ] Create `components/agents/` directory
|
||||
- [ ] Create `agent-detail-client.tsx`
|
||||
- [ ] Create `agent-header.tsx`
|
||||
- [ ] Create `agent-reviews-section.tsx`
|
||||
- [ ] Create `agent-listings-section.tsx`
|
||||
### Giai đoạn 3: Các Component Giao diện (2-3 giờ)
|
||||
- [ ] Tạo thư mục `components/agents/`
|
||||
- [ ] Tạo `agent-detail-client.tsx`
|
||||
- [ ] Tạo `agent-header.tsx`
|
||||
- [ ] Tạo `agent-reviews-section.tsx`
|
||||
- [ ] Tạo `agent-listings-section.tsx`
|
||||
|
||||
### Phase 4: SEO & Polish (1 hour)
|
||||
- [ ] Implement `generateMetadata()`
|
||||
- [ ] Add JSON-LD schemas
|
||||
- [ ] Mobile responsive testing
|
||||
- [ ] Dark mode testing
|
||||
### Giai đoạn 4: SEO & Hoàn thiện (1 giờ)
|
||||
- [ ] Triển khai `generateMetadata()`
|
||||
- [ ] Thêm schema JSON-LD
|
||||
- [ ] Kiểm thử responsive trên thiết bị di động
|
||||
- [ ] Kiểm thử chế độ tối (dark mode)
|
||||
|
||||
### Phase 5: Testing & QA (1 hour)
|
||||
- [ ] Manual e2e testing
|
||||
- [ ] 404 handling
|
||||
- [ ] ISR revalidation
|
||||
- [ ] Pagination (reviews/listings)
|
||||
- [ ] SEO audit (Lighthouse)
|
||||
### Giai đoạn 5: Kiểm thử & QA (1 giờ)
|
||||
- [ ] Kiểm thử e2e thủ công
|
||||
- [ ] Xử lý lỗi 404
|
||||
- [ ] Kiểm tra tái xác thực ISR
|
||||
- [ ] Phân trang (đánh giá/danh sách)
|
||||
- [ ] Kiểm tra SEO (Lighthouse)
|
||||
|
||||
**Total Estimated Time:** 6-8 hours
|
||||
**Tổng thời gian ước tính:** 6-8 giờ
|
||||
|
||||
---
|
||||
|
||||
## 🔗 Key API Endpoints
|
||||
## 🔗 Các API Endpoint Chính
|
||||
|
||||
### Backend (New)
|
||||
### Backend (Mới)
|
||||
```http
|
||||
GET /agents/:agentId/profile
|
||||
# Returns: AgentPublicProfileDto
|
||||
# Status: 200 (success), 404 (not found)
|
||||
```
|
||||
|
||||
### Backend (Existing, Reused)
|
||||
### Backend (Hiện có, Tái sử dụng)
|
||||
```http
|
||||
GET /listings?agentId=:id&status=ACTIVE
|
||||
# Get agent's active listings
|
||||
@@ -191,85 +191,85 @@ GET /reviews/stats?targetType=AGENT&targetId=:id
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Frontend Routes
|
||||
## 🎨 Route Frontend
|
||||
|
||||
```
|
||||
/ # Landing page
|
||||
/agents/[id] # Agent profile (NEW)
|
||||
/en/agents/[id] # English locale (NEW)
|
||||
/vi/agents/[id] # Vietnamese locale (NEW)
|
||||
/listings/[id] # Listing detail (EXISTING)
|
||||
/search # Search page (EXISTING)
|
||||
/pricing # Pricing page (EXISTING)
|
||||
/agents/[id] # Agent profile (MỚI)
|
||||
/en/agents/[id] # English locale (MỚI)
|
||||
/vi/agents/[id] # Vietnamese locale (MỚI)
|
||||
/listings/[id] # Listing detail (HIỆN CÓ)
|
||||
/search # Search page (HIỆN CÓ)
|
||||
/pricing # Pricing page (HIỆN CÓ)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📦 Files to Create/Modify
|
||||
## 📦 Các Tệp Cần Tạo/Chỉnh sửa
|
||||
|
||||
### Backend
|
||||
| File | Action | Lines |
|
||||
| Tệp | Hành động | Dòng |
|
||||
|------|--------|-------|
|
||||
| `agents/application/queries/get-agent-profile/get-agent-profile.query.ts` | CREATE | 5 |
|
||||
| `agents/application/queries/get-agent-profile/get-agent-profile.handler.ts` | CREATE | 30 |
|
||||
| `agents/presentation/dto/agent-public-profile.dto.ts` | CREATE | 30 |
|
||||
| `agents/presentation/controllers/agents.controller.ts` | MODIFY | +20 |
|
||||
| `agents/domain/repositories/agent.repository.ts` | MODIFY | +1 method |
|
||||
| `agents/infrastructure/repositories/prisma-agent.repository.ts` | MODIFY | +35 |
|
||||
| `agents/application/queries/get-agent-profile/get-agent-profile.query.ts` | TẠO MỚI | 5 |
|
||||
| `agents/application/queries/get-agent-profile/get-agent-profile.handler.ts` | TẠO MỚI | 30 |
|
||||
| `agents/presentation/dto/agent-public-profile.dto.ts` | TẠO MỚI | 30 |
|
||||
| `agents/presentation/controllers/agents.controller.ts` | CHỈNH SỬA | +20 |
|
||||
| `agents/domain/repositories/agent.repository.ts` | CHỈNH SỬA | +1 method |
|
||||
| `agents/infrastructure/repositories/prisma-agent.repository.ts` | CHỈNH SỬA | +35 |
|
||||
|
||||
### Frontend
|
||||
| File | Action | Lines |
|
||||
| Tệp | Hành động | Dòng |
|
||||
|------|--------|-------|
|
||||
| `lib/agents-api.ts` | CREATE | 40 |
|
||||
| `lib/agents-server.ts` | CREATE | 15 |
|
||||
| `app/[locale]/(public)/agents/[id]/page.tsx` | CREATE | 120 |
|
||||
| `components/agents/agent-detail-client.tsx` | CREATE | 30 |
|
||||
| `components/agents/agent-header.tsx` | CREATE | 120 |
|
||||
| `components/agents/agent-listings-section.tsx` | CREATE | 70 |
|
||||
| `components/agents/agent-reviews-section.tsx` | CREATE | 100 |
|
||||
| `lib/agents-api.ts` | TẠO MỚI | 40 |
|
||||
| `lib/agents-server.ts` | TẠO MỚI | 15 |
|
||||
| `app/[locale]/(public)/agents/[id]/page.tsx` | TẠO MỚI | 120 |
|
||||
| `components/agents/agent-detail-client.tsx` | TẠO MỚI | 30 |
|
||||
| `components/agents/agent-header.tsx` | TẠO MỚI | 120 |
|
||||
| `components/agents/agent-listings-section.tsx` | TẠO MỚI | 70 |
|
||||
| `components/agents/agent-reviews-section.tsx` | TẠO MỚI | 100 |
|
||||
|
||||
**Total New Lines:** ~595
|
||||
**Files Created:** 10
|
||||
**Files Modified:** 3
|
||||
**Tổng số dòng mới:** ~595
|
||||
**Số tệp được tạo:** 10
|
||||
**Số tệp được chỉnh sửa:** 3
|
||||
|
||||
---
|
||||
|
||||
## 🧪 Validation Checklist
|
||||
## 🧪 Danh sách Kiểm tra Xác nhận
|
||||
|
||||
### API Validation
|
||||
- [ ] Endpoint returns 200 for valid agent
|
||||
- [ ] Endpoint returns 404 for invalid agent
|
||||
- [ ] Response includes all required fields
|
||||
- [ ] Dates are ISO 8601 formatted
|
||||
- [ ] Numbers have correct precision
|
||||
### Xác nhận API
|
||||
- [ ] Endpoint trả về 200 cho môi giới hợp lệ
|
||||
- [ ] Endpoint trả về 404 cho môi giới không hợp lệ
|
||||
- [ ] Phản hồi bao gồm tất cả các trường bắt buộc
|
||||
- [ ] Ngày tháng được định dạng theo ISO 8601
|
||||
- [ ] Số liệu có độ chính xác đúng
|
||||
|
||||
### Frontend Validation
|
||||
- [ ] Page loads without errors
|
||||
- [ ] Metadata generates correctly
|
||||
- [ ] JSON-LD validates on structured.data.org
|
||||
- [ ] Mobile responsive (320px, 768px, 1024px)
|
||||
- [ ] Dark mode works correctly
|
||||
- [ ] ISR revalidation works
|
||||
### Xác nhận Frontend
|
||||
- [ ] Trang tải mà không có lỗi
|
||||
- [ ] Metadata được tạo đúng
|
||||
- [ ] JSON-LD hợp lệ trên structured.data.org
|
||||
- [ ] Responsive trên thiết bị di động (320px, 768px, 1024px)
|
||||
- [ ] Chế độ tối hoạt động đúng
|
||||
- [ ] Tái xác thực ISR hoạt động
|
||||
|
||||
### SEO Validation
|
||||
- [ ] Title tag is unique and descriptive
|
||||
- [ ] Meta description is complete
|
||||
- [ ] OG image displays correctly
|
||||
- [ ] Canonical URL is correct
|
||||
- [ ] Breadcrumb schema is valid
|
||||
- [ ] LocalBusiness schema is valid
|
||||
### Xác nhận SEO
|
||||
- [ ] Thẻ tiêu đề là duy nhất và mô tả đầy đủ
|
||||
- [ ] Meta description đầy đủ
|
||||
- [ ] Hình ảnh OG hiển thị đúng
|
||||
- [ ] URL canonical chính xác
|
||||
- [ ] Schema breadcrumb hợp lệ
|
||||
- [ ] Schema LocalBusiness hợp lệ
|
||||
|
||||
### Performance Validation
|
||||
- [ ] First Contentful Paint < 2s
|
||||
- [ ] Largest Contentful Paint < 2.5s
|
||||
- [ ] Cumulative Layout Shift < 0.1
|
||||
- [ ] Lighthouse score > 80
|
||||
### Xác nhận Hiệu suất
|
||||
- [ ] First Contentful Paint < 2 giây
|
||||
- [ ] Largest Contentful Paint < 2,5 giây
|
||||
- [ ] Cumulative Layout Shift < 0,1
|
||||
- [ ] Điểm Lighthouse > 80
|
||||
|
||||
---
|
||||
|
||||
## 📊 Data Structure Reference
|
||||
## 📊 Tham chiếu Cấu trúc Dữ liệu
|
||||
|
||||
### Agent Public Profile Response
|
||||
### Phản hồi Hồ sơ Công khai Môi giới
|
||||
```typescript
|
||||
{
|
||||
id: string; // "clu1x2y3z4a5b6c7d8e9f0"
|
||||
@@ -292,129 +292,128 @@ GET /reviews/stats?targetType=AGENT&targetId=:id
|
||||
|
||||
---
|
||||
|
||||
## 🔍 Key Design Decisions
|
||||
## 🔍 Các Quyết định Thiết kế Quan trọng
|
||||
|
||||
1. **Routing:** Agent profiles under `(public)` group, same as listings
|
||||
2. **Pattern:** Follow listing detail page pattern exactly (copy/paste approach)
|
||||
3. **Data Fetching:** Server-side with ISR (1 hour revalidation)
|
||||
4. **State:** Client-side useState for reviews/listings (no Zustand)
|
||||
5. **Components:** Split into Page (server) + Client (interactive)
|
||||
6. **SEO:** LocalBusiness JSON-LD schema for agent
|
||||
7. **Styling:** Reuse existing UI components & Tailwind tokens
|
||||
8. **Reviews:** Leverage existing /reviews endpoints (already public)
|
||||
1. **Định tuyến:** Hồ sơ môi giới nằm dưới nhóm `(public)`, giống như danh sách bất động sản
|
||||
2. **Mẫu thiết kế:** Tuân theo mẫu trang chi tiết danh sách bất động sản một cách chính xác (phương pháp sao chép/dán)
|
||||
3. **Lấy dữ liệu:** Phía server với ISR (tái xác thực mỗi 1 giờ)
|
||||
4. **Trạng thái:** useState phía client cho đánh giá/danh sách (không dùng Zustand)
|
||||
5. **Component:** Tách thành Page (server) + Client (tương tác)
|
||||
6. **SEO:** Schema JSON-LD LocalBusiness cho môi giới
|
||||
7. **Styling:** Tái sử dụng các component giao diện hiện có & token Tailwind
|
||||
8. **Đánh giá:** Tận dụng các endpoint /reviews hiện có (đã công khai)
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Getting Started
|
||||
## 🚀 Bắt đầu
|
||||
|
||||
### Step 1: Read the Docs
|
||||
- [ ] Read `AGENT_PROFILE_QUICK_REFERENCE.md` (10 min)
|
||||
- [ ] Skim `AGENT_PROFILE_EXPLORATION.md` (20 min)
|
||||
### Bước 1: Đọc Tài liệu
|
||||
- [ ] Đọc `AGENT_PROFILE_QUICK_REFERENCE.md` (10 phút)
|
||||
- [ ] Xem lướt `AGENT_PROFILE_EXPLORATION.md` (20 phút)
|
||||
|
||||
### Step 2: Backend Implementation
|
||||
- [ ] Copy code from `AGENT_PROFILE_CODE_EXAMPLES.md` (Phase 1)
|
||||
- [ ] Adapt to your codebase
|
||||
- [ ] Test with Postman
|
||||
### Bước 2: Triển khai Backend
|
||||
- [ ] Sao chép code từ `AGENT_PROFILE_CODE_EXAMPLES.md` (Giai đoạn 1)
|
||||
- [ ] Điều chỉnh cho phù hợp với codebase của bạn
|
||||
- [ ] Kiểm thử bằng Postman
|
||||
|
||||
### Step 3: Frontend Implementation
|
||||
- [ ] Create directory structure
|
||||
- [ ] Copy components from code examples (Phase 2-3)
|
||||
- [ ] Wire up data fetching
|
||||
- [ ] Add SEO metadata
|
||||
### Bước 3: Triển khai Frontend
|
||||
- [ ] Tạo cấu trúc thư mục
|
||||
- [ ] Sao chép các component từ mẫu code (Giai đoạn 2-3)
|
||||
- [ ] Kết nối luồng lấy dữ liệu
|
||||
- [ ] Thêm metadata SEO
|
||||
|
||||
### Step 4: Testing
|
||||
- [ ] Manual testing
|
||||
- [ ] Lighthouse audit
|
||||
- [ ] E2E test (agent profile page)
|
||||
### Bước 4: Kiểm thử
|
||||
- [ ] Kiểm thử thủ công
|
||||
- [ ] Kiểm tra Lighthouse
|
||||
- [ ] Kiểm thử E2E (trang hồ sơ môi giới)
|
||||
|
||||
---
|
||||
|
||||
## 💡 Implementation Tips
|
||||
## 💡 Mẹo Triển khai
|
||||
|
||||
1. **Copy the listing detail page structure** — Agent page should be ~90% similar
|
||||
2. **Reuse PropertyCard component** — For displaying agent's listings
|
||||
3. **Use existing review endpoints** — Already public and don't need auth
|
||||
4. **Follow i18n patterns** — Agent name/bio may need translation
|
||||
5. **Test 404 handling** — When agent doesn't exist
|
||||
6. **Cache agent profile** — 1 hour ISR matches listing pattern
|
||||
1. **Sao chép cấu trúc trang chi tiết danh sách bất động sản** — Trang môi giới nên tương tự ~90%
|
||||
2. **Tái sử dụng component PropertyCard** — Để hiển thị danh sách bất động sản của môi giới
|
||||
3. **Dùng các endpoint đánh giá hiện có** — Đã công khai và không cần xác thực
|
||||
4. **Tuân theo mẫu i18n** — Tên/tiểu sử môi giới có thể cần dịch
|
||||
5. **Kiểm thử xử lý 404** — Khi môi giới không tồn tại
|
||||
6. **Cache hồ sơ môi giới** — ISR 1 giờ phù hợp với mẫu danh sách bất động sản
|
||||
|
||||
---
|
||||
|
||||
## 📖 Reference Files in Codebase
|
||||
## 📖 Tệp Tham chiếu trong Codebase
|
||||
|
||||
### Pattern to Copy
|
||||
- ✅ `app/[locale]/(public)/listings/[id]/page.tsx` — Page structure
|
||||
- ✅ `components/search/property-card.tsx` — Card pattern
|
||||
- ✅ `lib/listings-api.ts` — API client pattern
|
||||
- ✅ `lib/listings-server.ts` — Server fetch pattern
|
||||
- ✅ `components/seo/json-ld.tsx` — JSON-LD pattern
|
||||
### Mẫu để Sao chép
|
||||
- ✅ `app/[locale]/(public)/listings/[id]/page.tsx` — Cấu trúc trang
|
||||
- ✅ `components/search/property-card.tsx` — Mẫu card
|
||||
- ✅ `lib/listings-api.ts` — Mẫu API client
|
||||
- ✅ `lib/listings-server.ts` — Mẫu server fetch
|
||||
- ✅ `components/seo/json-ld.tsx` — Mẫu JSON-LD
|
||||
|
||||
### Endpoints to Use
|
||||
- ✅ `GET /listings?agentId=:id` — Existing
|
||||
- ✅ `GET /reviews?targetType=AGENT` — Existing
|
||||
- ✅ `GET /reviews/stats?targetType=AGENT` — Existing
|
||||
### Endpoint để Sử dụng
|
||||
- ✅ `GET /listings?agentId=:id` — Hiện có
|
||||
- ✅ `GET /reviews?targetType=AGENT` — Hiện có
|
||||
- ✅ `GET /reviews/stats?targetType=AGENT` — Hiện có
|
||||
|
||||
### Components to Reuse
|
||||
- ✅ `Card`, `CardContent` — Layout
|
||||
- ✅ `Badge` — Status/stats display
|
||||
- ✅ `Button` — CTAs
|
||||
- ✅ `Image` — Avatar & property photos
|
||||
- ✅ `PropertyCard` — Listings display
|
||||
### Component để Tái sử dụng
|
||||
- ✅ `Card`, `CardContent` — Bố cục
|
||||
- ✅ `Badge` — Hiển thị trạng thái/thống kê
|
||||
- ✅ `Button` — Nút CTA
|
||||
- ✅ `Image` — Ảnh đại diện & ảnh bất động sản
|
||||
- ✅ `PropertyCard` — Hiển thị danh sách bất động sản
|
||||
|
||||
---
|
||||
|
||||
## ❓ FAQ
|
||||
## ❓ Câu hỏi Thường gặp
|
||||
|
||||
**Q: How long does this take to implement?**
|
||||
A: 6-8 hours total (1-2h backend, 1h setup, 2-3h UI, 1h SEO, 1h testing)
|
||||
**H: Mất bao lâu để triển khai?**
|
||||
A: Tổng cộng 6-8 giờ (1-2 giờ backend, 1 giờ thiết lập, 2-3 giờ giao diện, 1 giờ SEO, 1 giờ kiểm thử)
|
||||
|
||||
**Q: Do I need to create new backend endpoints?**
|
||||
A: Yes, 1 new endpoint: `GET /agents/:agentId/profile`. Reviews/listings endpoints already exist.
|
||||
**H: Tôi có cần tạo endpoint backend mới không?**
|
||||
A: Có, 1 endpoint mới: `GET /agents/:agentId/profile`. Các endpoint đánh giá/danh sách đã tồn tại sẵn.
|
||||
|
||||
**Q: Can I reuse components from the listing page?**
|
||||
A: Yes! PropertyCard, metadata generation, JSON-LD structure can all be adapted.
|
||||
**H: Tôi có thể tái sử dụng các component từ trang danh sách bất động sản không?**
|
||||
A: Được! PropertyCard, tạo metadata, cấu trúc JSON-LD đều có thể được điều chỉnh.
|
||||
|
||||
**Q: How do I handle pagination for listings/reviews?**
|
||||
A: Use the same pagination as listing detail page (`limit`, `offset`, `page`)
|
||||
**H: Làm thế nào để xử lý phân trang cho danh sách/đánh giá?**
|
||||
A: Dùng cách phân trang giống trang chi tiết danh sách bất động sản (`limit`, `offset`, `page`)
|
||||
|
||||
**Q: What about internationalization?**
|
||||
A: Agent fullName/bio come from database; use existing i18n patterns in codebase
|
||||
**H: Còn về quốc tế hóa (i18n) thì sao?**
|
||||
A: fullName/bio của môi giới lấy từ cơ sở dữ liệu; dùng các mẫu i18n hiện có trong codebase
|
||||
|
||||
**Q: How is SEO handled?**
|
||||
A: Server-side metadata generation + LocalBusiness JSON-LD schema
|
||||
**H: SEO được xử lý như thế nào?**
|
||||
A: Tạo metadata phía server + schema JSON-LD LocalBusiness
|
||||
|
||||
---
|
||||
|
||||
## 📞 Support
|
||||
## 📞 Hỗ trợ
|
||||
|
||||
If you have questions during implementation:
|
||||
Nếu bạn có câu hỏi trong quá trình triển khai:
|
||||
|
||||
1. **Check the exploration document** — Most answers are there
|
||||
2. **Review code examples** — All patterns are shown
|
||||
3. **Look at existing pages** — Listing detail page is the best reference
|
||||
4. **Follow the CQRS pattern** — Used throughout the API
|
||||
1. **Kiểm tra tài liệu khám phá** — Hầu hết câu trả lời đều ở đó
|
||||
2. **Xem lại các mẫu code** — Tất cả mẫu đều được trình bày
|
||||
3. **Tham khảo các trang hiện có** — Trang chi tiết danh sách bất động sản là tài liệu tham khảo tốt nhất
|
||||
4. **Tuân theo mẫu CQRS** — Được dùng xuyên suốt trong API
|
||||
|
||||
---
|
||||
|
||||
## ✅ Completion Checklist
|
||||
## ✅ Danh sách Kiểm tra Hoàn thành
|
||||
|
||||
- [ ] Read all 3 documentation files
|
||||
- [ ] Understand the data flow
|
||||
- [ ] Plan your implementation (5 phases)
|
||||
- [ ] Create directory structure
|
||||
- [ ] Implement backend endpoint
|
||||
- [ ] Implement frontend API client
|
||||
- [ ] Create page component
|
||||
- [ ] Create client components
|
||||
- [ ] Add SEO metadata
|
||||
- [ ] Add JSON-LD schemas
|
||||
- [ ] Test manually
|
||||
- [ ] Run Lighthouse audit
|
||||
- [ ] Deploy & monitor
|
||||
- [ ] Đọc cả 3 tệp tài liệu
|
||||
- [ ] Hiểu luồng dữ liệu
|
||||
- [ ] Lên kế hoạch triển khai (5 giai đoạn)
|
||||
- [ ] Tạo cấu trúc thư mục
|
||||
- [ ] Triển khai endpoint backend
|
||||
- [ ] Triển khai API client frontend
|
||||
- [ ] Tạo page component
|
||||
- [ ] Tạo các client component
|
||||
- [ ] Thêm metadata SEO
|
||||
- [ ] Thêm schema JSON-LD
|
||||
- [ ] Kiểm thử thủ công
|
||||
- [ ] Chạy kiểm tra Lighthouse
|
||||
- [ ] Triển khai & theo dõi
|
||||
|
||||
---
|
||||
|
||||
**Status:** 🟢 Ready to build!
|
||||
|
||||
Good luck with your implementation. Follow the patterns in the codebase, and you'll have a professional agent profile page up and running in a day.
|
||||
**Trạng thái:** 🟢 Sẵn sàng xây dựng!
|
||||
|
||||
Chúc bạn triển khai thành công. Hãy tuân theo các mẫu trong codebase và bạn sẽ có một trang hồ sơ môi giới chuyên nghiệp hoạt động trong vòng một ngày.
|
||||
|
||||
Reference in New Issue
Block a user