[DDD] Thiết kế Chi tiết Trang Quản lý Nội dung

Tóm tắt tài liệu

Tài liệu này mô tả thiết kế kỹ thuật chi tiết cho trang Quản lý Nội dung (Content Creator Page). Trang này là trung tâm để người dùng xem các bài đăng bất động sản của họ, chuyển đổi giữa các chế độ xem (danh sách và lưới), tìm kiếm và lọc nội dung theo nhiều tiêu chí, sắp xếp theo các trường khác nhau, và thực hiện các hành động như tải lên nội dung mới, quảng bá bài đăng, hoặc quản lý thông tin tài khoản cá nhân.

1. Tổng quan (Overview)

1.1. Bối cảnh và Vấn đề

Người tạo nội dung trong lĩnh vực bất động sản cần một giao diện hiệu quả để quản lý và theo dõi tất cả các sản phẩm media của họ. Họ cần có khả năng xem nội dung của mình theo nhiều cách khác nhau và dễ dàng truy cập các chức năng quan trọng như tải lên hoặc quảng bá.

Các thách thức cụ thể:

Quản lý đa dạng loại nội dung: Người tạo nội dung cần quản lý nhiều loại bài đăng bất động sản khác nhau (villa, shophouse, apartment) với các thông tin phức tạp như giá cả, diện tích, ROI/ROA
Tìm kiếm và lọc hiệu quả: Với số lượng bài đăng lớn, việc tìm kiếm theo từ khóa và lọc theo nhiều tiêu chí (loại BDS, khoảng giá, diện tích, vị trí) trở nên thiết yếu
Theo dõi hiệu suất đa nền tảng: Nội dung được phân phối trên nhiều platform (TikTok, YouTube, Facebook) cần được theo dõi tập trung
Quản lý thời gian và cập nhật: Người dùng cần biết thời điểm cập nhật gần nhất của từng bài đăng để đảm bảo thông tin luôn mới
Phân tích và tối ưu: Cần có cái nhìn tổng quan về thống kê cá nhân (posts, followers, following) và hiệu suất trong khoảng thời gian cụ thể
Trải nghiệm đa thiết bị: Người dùng cần truy cập và quản lý nội dung từ nhiều thiết bị khác nhau (desktop, tablet, mobile)

1.2. Mục tiêu & Phi mục tiêu (Goals and Non-Goals)

Mục tiêu (Goals)

Hiển thị và Xem nội dung:

Hiển thị danh sách các bài đăng bất động sản với thông tin chi tiết (giá, diện tích, ROI/ROA, địa chỉ)
Cung cấp chế độ xem dạng danh sách (ListPostView) với đầy đủ thông tin
Cung cấp chế độ xem dạng lưới (GridPostView) với layout tối ưu

Tìm kiếm và Lọc:

Tìm kiếm nội dung theo từ khóa, tiêu đề, địa chỉ
Lọc theo loại bất động sản (Villa, Shophouse, Apartment)
Lọc theo khoảng giá và diện tích
Lọc theo trạng thái dự án và tiện ích
Lọc theo nền tảng phân phối (TikTok, YouTube, etc.)

Sắp xếp và Tổ chức:

Sắp xếp theo giá, diện tích, ROI/ROA, ngày cập nhật
Lưu và đồng bộ hóa trạng thái sắp xếp và lọc

Quản lý và Thao tác:

Điều hướng đến trang tải lên nội dung (/dashboard/upload-property)
Chức năng "Quảng bá" (Boost Post) thông qua modal
Quản lý hàng loạt (bulk actions) cho nhiều bài đăng

Thống kê và Phân tích:

Hiển thị thông tin profile và thống kê cá nhân
Thống kê hiệu suất 30 ngày gần nhất
Theo dõi số lượng posts, followers, following

Phi mục tiêu (Non-Goals)

Chỉnh sửa chi tiết nội dung trực tiếp từ trang này (sẽ redirect đến trang edit riêng)
Phân tích chi tiết hiệu suất từng platform (có trang dashboard riêng)
Quản lý bình luận hoặc tương tác chi tiết
Tạo báo cáo phức tạp (có module reporting riêng)

2. Kiến trúc Tổng thể (Overall Architecture)

Trang này chủ yếu điều phối việc hiển thị dữ liệu và tương tác người dùng, trong khi các thành phần con chịu trách nhiệm lấy dữ liệu thực tế.

3. Thiết kế Chi tiết (Detailed Design)

3.1. Thiết kế Giao diện & Luồng người dùng (UI & User Flow)

Các thành phần giao diện chính:

1. Header Section:

Account Profile Panel (avatar, tên, email)
Statistics Cards (Posts, Followers, Following)
Time period selector ("Last 30 days")

2. Search & Filter Bar:

Search input với placeholder "Tìm kiếm bất động sản..."
Filter dropdowns: Property Type, Price Range, Area Range
Advanced filters button
Clear filters button

3. Content Management Toolbar:

View mode toggle (List/Grid)
Sort dropdown (Price, Area, ROI, Updated Date)
Upload new content button
Bulk actions menu (khi có items được chọn)

4. Content Display Area:

List View: Bảng với columns đầy đủ thông tin
Grid View: Cards layout responsive

Quản lý trạng thái của trang:

interface PageState {
// View và Display
viewMode: 'list' | 'grid';
sortBy: 'price' | 'area' | 'roi' | 'roa' | 'updatedAt';
sortOrder: 'asc' | 'desc';

// Search và Filter
searchQuery: string;
filters: {
propertyType: string[];
priceRange: { min: number; max: number };
areaRange: { min: number; max: number };
projectStatus: string[];
amenities: string[];
platforms: string[];
};

// Pagination
currentPage: number;
itemsPerPage: number;

// Selection và Actions
selectedItems: string[];
isBoostModalOpen: boolean;
boostingPostId: string | null;

// Loading states
isLoading: boolean;
isFiltering: boolean;
}

Luồng người dùng chi tiết:

Khởi tạo trang:
- Load preferences từ localStorage (viewMode, sortBy, filters)
- Sync với URL query parameters
- Fetch user stats và post data
- Hiển thị loading state khi cần
Tìm kiếm và Lọc:
- User nhập search query → debounced API call
- User chọn filters → update state → API call với params
- User click "Clear filters" → reset về default state
- Lưu filter state vào sessionStorage
Chuyển đổi View Mode:
- User click toggle → update state + localStorage + URL
- Smooth transition animation giữa list và grid
- Maintain scroll position khi có thể
Sắp xếp:
- User chọn sort option → update state → re-fetch data
- Visual indicator cho current sort direction
- Lưu sort preference vào localStorage
Bulk Actions:
- User select multiple items → show bulk action toolbar
- Available actions: Delete, Boost, Change Status
- Confirmation modal cho destructive actions
Boost Post:
- User click boost button → open modal với post details
- Select boost options → API call → update UI
- Show success/error notifications

3.2. Thiết kế API (API Design)

Posts API - Extended

Endpoint: GET /brok/api/v1/all

Query Parameters:

interface PostsApiParams {
// Pagination
page?: number;
per_page?: number;

// Search
search?: string;

// Sorting
column?: string;
sort?: string;
lang?: string;

// Price Filters
price_from?: number;
price_to?: number;
unit_price?: string;

// Area Filters
area_from?: number;
area_to?: number;
unit_area?: string;

// Category Filters
amenities?: string[]; // Converted to comma-separated string
apartment_type?: string[]; // Converted to comma-separated string
project_status?: string[]; // Converted to comma-separated string

// Date Filters
created_at_start_date?: string;
created_at_end_date?: string;
}

Response:

{
"data": {
"item":{
    "id": "3110ddbe-c4f1-4182-ac73-dff7153bb836",
    "price": 23232323,
    "unit_price": "VND",
    "price_per_area": 117,
    "area": 200000,
    "geo": {
        "long": "108.24288617993167",
        "lat": "16.03596383535037"
    },
    "unit_area": "m²",
    "hash_tags": [
        "#DaNang",
        "#BietThu",
        "#BatDongSan",
        "#ChungCu",
        "#NhaDat",
        "#KhuVucNguyen",
        "#DauTu",
        "#PhongKham",
        "#GiaRe",
        "#NhaDep"
    ],
    "profit_rate": {
        "roi": 63,
        "roa": 28
    },
    "amenities": [
        "internal_park"
    ],
    "video": {
        "resolution": "1080x1920",
        "size": 8462252,
        "duration": 13.666667,
        "original_name": "9340169-hd_1080_1920_30fps.mp4",
        "thumbnail_url": "https://d37k5wtx5jh88r.cloudfront.net/user/a9bab5fc-40b1-7094-acfc-45a46cd21ad1/3110ddbe-c4f1-4182-ac73-dff7153bb836/original/2025-07-18T09-54-26-803Z--3110ddbe-c4f1-4182-ac73-dff7153bb836_thumb.jpg",
        "status": "completed",
        "content_url": "https://d37k5wtx5jh88r.cloudfront.net/user/a9bab5fc-40b1-7094-acfc-45a46cd21ad1/3110ddbe-c4f1-4182-ac73-dff7153bb836/original/2025-07-18T09-54-25-351Z--3110ddbe-c4f1-4182-ac73-dff7153bb836.mp4",
        "url": "https://d37k5wtx5jh88r.cloudfront.net/user/a9bab5fc-40b1-7094-acfc-45a46cd21ad1/3110ddbe-c4f1-4182-ac73-dff7153bb836/master.m3u8"
    },
    "created_at": "2025-07-18T09:54:24.725Z",
    "updated_at": "2025-07-21T09:05:33.296Z",
    "content_info": [
        {
            "lang": "en",
            "project_name": "tes",
            "description": "tset",
            "legal_certificates": "Certificate of ownership",
            "apartment_type": "Villa",
            "project_status": "Under contract",
            "address": "66 Doãn Uẩn, Khuê Mỹ, Ngũ Hành Sơn, Đà Nẵng, Vietnam",
            "extra_description": ""
        },
        {
            "lang": "vi",
            "project_name": "tes",
            "description": "tset",
            "legal_certificates": "Giấy chứng nhận quyền sở hữu",
            "apartment_type": "Biệt thự",
            "project_status": "Đang hợp đồng",
            "address": "66 Doãn Uẩn, Khuê Mỹ, Ngũ Hành Sơn, Đà Nẵng, Vietnam",
            "extra_description": ""
        },
        {
            "lang": "ko",
            "project_name": "testtttt",
            "description": "tset",
            "legal_certificates": "소유권 증명서",
            "apartment_type": "빌라",
            "project_status": "계약 중",
            "address": "66 Doãn Uẩn, Khuê Mỹ, Ngũ Hành Sơn, Đà Nẵng, Vietnam",
            "extra_description": ""
        }
    ],
    "uploader": {
        "user_id": "a9bab5fc-40b1-7094-acfc-45a46cd21ad1",
        "phone_number": "+84909172413",
        "name": "王 竜",
        "avatar": "https://d37k5wtx5jh88r.cloudfront.net/user/a9bab5fc-40b1-7094-acfc-45a46cd21ad1/51f17179-9647-4221-9a8c-a2c456272a95/original/lrqqb6ar_400x400.jpg"
    },
    "images": []
},
"hasMore" : true,
"total": 1
}
"message": "Video list retrieved successfully",
"success" : true
}

User Stats API

Endpoint: GET /auth/api/v1/user/me

Query Parameters:

interface StatsParams {
user_id : "123456788abcxyz"
}

Response:

{
  "message" : "User information retrieved successfully",
  "success": true,
  "data":
{
    "username": "longngo",
    "email": "vip@gmail.com",
    "email_verified": false,
    "phone_number": "+84909172413",
    "phone_number_verified": false,
    "name": "王 竜",
    "family_name": "竜",
    "given_name": "王",
    "picture": "https://d37k5wtx5jh88r.cloudfront.net/user/a9bab5fc-40b1-7094-acfc-45a46cd21ad1/51f17179-9647-4221-9a8c-a2c456272a95/original/lrqqb6ar_400x400.jpg",
    "role": "broker",
    "sub": "123456788abcxyz",
    "follower_number": 5,
    "following_number": 2,
    "is_following": true
}
}

Get stat by day API

Endpoint: GET brok/api/v1/stats/by-day

Request Param:

    {
      start_date: startDate,
      end_date: endDate,
      user_id: userId,
    }

Response:

{
  {
    "success" : true
    "message" :" Operation successful"
    "data": [
        {
            "date": "2025-06-23T00:00:00.000Z",
            "posts": 0,
            "followers": 4,
            "following": 0,
            "reactions": 0,
            "reactions_total": 0
        },
        {
            "date": "2025-06-24T00:00:00.000Z",
            "posts": 0,
            "followers": 4,
            "following": 0,
            "reactions": 0,
            "reactions_total": 0
        },
        {
            "date": "2025-06-25T00:00:00.000Z",
            "posts": 0,
            "followers": 4,
            "following": 0,
            "reactions": 0,
            "reactions_total": 0
        },
    
    ],
    "followers_growth": 2,
    "following_growth": 1,
    "reactions_growth": 0
}
}

Boost Post API

Endpoint: POST /api/v1/posts/{postId}/boost

Request Body:

{
"boostType": "premium",
"duration": 7,
"targetAudience": {
"location": ["da-nang", "hoi-an"],
"ageRange": ,
"interests": ["real-estate", "investment"]
},
"budget": 500000
}

3.3. Component Architecture

Main Page Component:

interface ContentCreatorPageProps {
initialFilters?: FilterState;
initialViewMode?: 'list' | 'grid';
}

const ContentCreatorPage: React.FC<ContentCreatorPageProps> = ({
initialFilters,
initialViewMode = 'list'
}) => {
// State management
// Event handlers
// Effects for data fetching
// Render logic
};

Key Sub-components:

1. SearchFilterBar Component:

Debounced search input
Filter dropdowns với multi-select
Advanced filters modal
Clear filters functionality

2. PostCard/PostRow Components:

Consistent data display
Action buttons (View, Edit, Boost, Delete)
Platform indicators
Performance metrics

3. BulkActionsToolbar:

Appears when items selected
Actions: Delete, Boost, Change Status, Export
Select all functionality

4. BoostModal Component:

Form for boost configuration
Budget calculator
Target audience selector
Preview và cost estimation

4. Các yếu tố phi chức năng (Non-Functional Requirements)

4.1. Hiệu suất (Performance)

Lazy Loading: Grid view sử dụng virtualization cho >100 items
Image Optimization: Thumbnail lazy loading với progressive enhancement
API Optimization: Debounced search (700ms), cached filter options
Bundle Size: Code splitting cho modal components
Target Metrics:
- Page load < 2s
- Search response < 500ms
- Smooth 60fps transitions

4.2. Bảo mật (Security)

Authentication: JWT token validation cho mọi API calls
Authorization: Role-based access (chỉ content creators có quyền upload)
Data Validation: Input sanitization cho search queries
CSRF Protection: Token-based protection cho form submissions
Rate Limiting: API rate limits để prevent abuse

4.3. Khả năng mở rộng (Scalability)

Pagination: Server-side pagination với configurable page sizes
Caching: Browser caching cho static assets, Redis caching cho API responses
CDN: Image và static assets served via CDN
Database: Indexed queries cho search và filter operations

4.4. Trải nghiệm người dùng (UX)

Responsive Design: Mobile-first approach, breakpoints tại 768px, 1024px, 1440px
Loading States: Skeleton screens, progressive loading
Error Handling: User-friendly error messages, retry mechanisms
Accessibility: WCAG 2.1 AA compliance, keyboard navigation
Offline Support: Service worker cho basic caching
Animation: Framer Motion cho smooth transitions, respect prefers-reduced-motion

4.5. Tương thích (Compatibility)

Browsers: Chrome 90+, Firefox 88+, Safari 14+, Edge 90+
Devices: Desktop, tablet (768px+), mobile (320px+)
Screen Readers: NVDA, JAWS, VoiceOver support

5. Rủi ro và Phương án giảm thiểu (Risks and Mitigation)

Rủi ro	Mức độ ảnh hưởng	Khả năng xảy ra	Phương án giảm thiểu
Performance với large datasets	Cao	Trung bình	- Implement virtual scrolling cho grid view - Server-side pagination với search indexes - Progressive loading strategies
Complex filter state management	Trung bình	Cao	- Sử dụng reducer pattern cho complex state - Unit tests cho state transitions - Clear state reset mechanisms
API response time degradation	Cao	Trung bình	- Implement caching layers - Database query optimization - API response monitoring và alerts
Mobile UX complexity	Trung bình	Trung bình	- Mobile-first design approach - Touch-friendly interface elements - Responsive testing on real devices
Search accuracy issues	Trung bình	Thấp	- Implement fuzzy search algorithms - Search analytics và user feedback - Multiple search strategies (exact, partial, semantic)
Data consistency across views	Cao	Thấp	- Single source of truth trong state management - Consistent API response formatting - Real-time data synchronization

6. Kế hoạch Testing (Testing Strategy)

6.1. Unit Testing

Components: React Testing Library cho UI components
Hooks: Custom hooks testing với renderHook
Utils: Pure functions testing với Jest
Coverage Target: 85% line coverage

6.2. Integration Testing

API Integration: Mock Service Worker cho API testing
State Management: Redux/Context integration testing
User Flows: Multi-step user interaction testing

6.3. E2E Testing

Playwright/Cypress: Critical user journeys
Cross-browser: Chrome, Firefox, Safari testing
Mobile Testing: Responsive design validation

6.4. Performance Testing

Lighthouse CI: Performance metrics monitoring
Bundle Analysis: Bundle size monitoring
Load Testing: API endpoint stress testing

7. Deployment và Monitoring

7.1. Deployment Strategy

Environment: Staging → Production với feature flags
CI/CD: Automated testing + deployment pipeline
Rollback: Quick rollback capability for issues

7.2. Monitoring và Analytics

Error Tracking: Sentry cho client-side error monitoring
Performance Monitoring: Web Vitals tracking
User Analytics: User behavior tracking (privacy-compliant)
API Monitoring: Response time và error rate tracking

Tài liệu tham khảo:

1. Tổng quan (Overview)​

1.1. Bối cảnh và Vấn đề​

1.2. Mục tiêu & Phi mục tiêu (Goals and Non-Goals)​

Mục tiêu (Goals)​

Phi mục tiêu (Non-Goals)​

2. Kiến trúc Tổng thể (Overall Architecture)​

3. Thiết kế Chi tiết (Detailed Design)​

3.1. Thiết kế Giao diện & Luồng người dùng (UI & User Flow)​

Các thành phần giao diện chính:​

Quản lý trạng thái của trang:​

Luồng người dùng chi tiết:​

3.2. Thiết kế API (API Design)​

Posts API - Extended​

User Stats API​

Get stat by day API​

Boost Post API​

3.3. Component Architecture​

Main Page Component:​

Key Sub-components:​

4. Các yếu tố phi chức năng (Non-Functional Requirements)​

4.1. Hiệu suất (Performance)​

4.2. Bảo mật (Security)​

4.3. Khả năng mở rộng (Scalability)​

4.4. Trải nghiệm người dùng (UX)​

4.5. Tương thích (Compatibility)​

5. Rủi ro và Phương án giảm thiểu (Risks and Mitigation)​

6. Kế hoạch Testing (Testing Strategy)​

6.1. Unit Testing​

6.2. Integration Testing​

6.3. E2E Testing​

6.4. Performance Testing​

7. Deployment và Monitoring​

7.1. Deployment Strategy​

7.2. Monitoring và Analytics​

1. Tổng quan (Overview)

1.1. Bối cảnh và Vấn đề

1.2. Mục tiêu & Phi mục tiêu (Goals and Non-Goals)

Mục tiêu (Goals)

Phi mục tiêu (Non-Goals)

2. Kiến trúc Tổng thể (Overall Architecture)

3. Thiết kế Chi tiết (Detailed Design)

3.1. Thiết kế Giao diện & Luồng người dùng (UI & User Flow)

Các thành phần giao diện chính:

Quản lý trạng thái của trang:

Luồng người dùng chi tiết:

3.2. Thiết kế API (API Design)

Posts API - Extended

User Stats API

Get stat by day API

Boost Post API

3.3. Component Architecture

Main Page Component:

Key Sub-components:

4. Các yếu tố phi chức năng (Non-Functional Requirements)

4.1. Hiệu suất (Performance)

4.2. Bảo mật (Security)

4.3. Khả năng mở rộng (Scalability)

4.4. Trải nghiệm người dùng (UX)

4.5. Tương thích (Compatibility)

5. Rủi ro và Phương án giảm thiểu (Risks and Mitigation)

6. Kế hoạch Testing (Testing Strategy)

6.1. Unit Testing

6.2. Integration Testing

6.3. E2E Testing

6.4. Performance Testing

7. Deployment và Monitoring

7.1. Deployment Strategy

7.2. Monitoring và Analytics