nguynbon03/frontend-dashboard

Frontend Dashboard — App đa nền tảng

1 codebase → Web + Mobile (PWA) + Desktop (PWA). UI/UX đẹp, đầy đủ chức năng.

Tech Stack

| Thành phần | Công nghệ | Lý do | |-----------|----------|-------| | Framework | Next.js 14 (App Router) | SSR, API routes, tối ưu SEO | | Styling | TailwindCSS | Nhanh, responsive, utility-first | | Components | shadcn/ui | Đẹp sẵn, accessible, customizable | | Icons | Lucide React | 1000+ icons, nhẹ | | State | Zustand | Đơn giản hơn Redux | | API Client | Axios hoặc fetch | Gọi FastAPI backend | | Charts | Recharts | Biểu đồ đơn giản, đẹp | | PWA | next-pwa | Cài app trên phone/desktop | | Auth | NextAuth.js | Đăng nhập API key | | Theme | Dark/Light mode | next-themes |

Đa nền tảng — Cách hoạt động

Next.js App
  ├── Web Browser    → Mở URL là dùng (mọi thiết bị)
  ├── Mobile (PWA)   → Bấm "Add to Home Screen" → app icon trên phone
  └── Desktop (PWA)  → Chrome → Install → app icon trên desktop

Không cần App Store, không cần build native. 1 deploy = chạy mọi nơi.

Cấu trúc trang

dashboard/
  ├── (auth)
  │     └── login/              → Đăng nhập bằng API key
  │
  ├── (dashboard)
  │     ├── layout.tsx          → Sidebar + Header chung
  │     ├── page.tsx            → Tổng quan (Overview)
  │     │
  │     ├── generate/
  │     │     └── page.tsx      → TẠO VIDEO — form nhập + nút Execute
  │     │
  │     ├── jobs/
  │     │     ├── page.tsx      → DANH SÁCH JOBS — bảng trạng thái
  │     │     └── [id]/page.tsx → CHI TIẾT JOB — tiến trình + download
  │     │
  │     ├── accounts/
  │     │     └── page.tsx      → QUẢN LÝ ACCOUNT — nạp, xem, xóa
  │     │
  │     ├── pool/
  │     │     └── page.tsx      → TRẠNG THÁI POOL — workers, queue
  │     │
  │     ├── files/
  │     │     └── page.tsx      → QUẢN LÝ FILE — upload, download
  │     │
  │     ├── api-docs/
  │     │     └── page.tsx      → TÀI LIỆU API — Swagger embed
  │     │
  │     └── settings/
  │           └── page.tsx      → CÀI ĐẶT — API key, webhook, theme
  │
  └── api/                      → API routes (proxy đến FastAPI backend)

Thiết kế từng trang

1. Tổng quan (Overview) — Trang chủ

┌──────────────────────────────────────────────────┐
│  [Sidebar]  │  TỔNG QUAN                         │
│             │                                     │
│  🏠 Tổng quan│  ┌────────┐ ┌────────┐ ┌────────┐  │
│  🎬 Tạo video│  │ Jobs   │ │Credits │ │Account │  │
│  📋 Jobs    │  │ 156    │ │ 5,200  │ │ 12/15  │  │
│  👥 Accounts│  │ hôm nay│ │ còn lại│ │ active │  │
│  ⚡ Pool    │  └────────┘ └────────┘ └────────┘  │
│  📁 Files   │                                     │
│  📖 API Docs│  [Biểu đồ jobs 7 ngày gần nhất]    │
│  ⚙️ Cài đặt │                                     │
│             │  [Bảng: 10 jobs gần nhất]           │
└──────────────────────────────────────────────────┘

2. Tạo Video — Form chính

┌──────────────────────────────────────────────────┐
│  TẠO VIDEO MOTION CONTROL                        │
│                                                   │
│  ┌─────────────────┐  ┌─────────────────┐        │
│  │ ẢNH ĐẦU VÀO     │  │ VIDEO THAM CHIẾU │        │
│  │                  │  │                  │        │
│  │  [Kéo thả ảnh]  │  │  [Kéo thả video] │        │
│  │  hoặc paste URL  │  │  hoặc paste URL  │        │
│  └─────────────────┘  └─────────────────┘        │
│                                                   │
│  Chế độ: [Motion Control ▼]                       │
│  Thời lượng: [5 giây ▼]                           │
│  Tỷ lệ: [9:16 ▼] [16:9] [1:1]                   │
│                                                   │
│  Webhook URL: [https://...]  (tùy chọn)          │
│                                                   │
│  ┌─────────────────────────────────────┐          │
│  │     🚀 TẠO VIDEO                    │          │
│  └─────────────────────────────────────┘          │
│                                                   │
│  ┌─ Tạo hàng loạt ──────────────────┐            │
│  │ [Tải lên file CSV chứa nhiều job] │            │
│  └───────────────────────────────────┘            │
└──────────────────────────────────────────────────┘

3. Danh sách Jobs

┌──────────────────────────────────────────────────┐
│  DANH SÁCH JOBS                    [🔍 Tìm kiếm] │
│                                                   │
│  [Tất cả] [Đang chờ] [Đang xử lý] [Hoàn thành]  │
│                                                   │
│  ┌────┬──────────┬──────────┬────────┬─────────┐ │
│  │ ID │ Trạng thái│ Tiến trình│ Account│ Hành động│ │
│  ├────┼──────────┼──────────┼────────┼─────────┤ │
│  │ 01 │ ✅ Xong   │ 100%     │ acc_A  │ [⬇️ Tải] │ │
│  │ 02 │ ⏳ Đang..│ 65%      │ acc_A  │ [👁️ Xem] │ │
│  │ 03 │ 🕐 Chờ   │ 0%       │ —      │ [❌ Hủy] │ │
│  │ 04 │ ❌ Lỗi   │ —        │ acc_B  │ [🔄 Thử] │ │
│  └────┴──────────┴──────────┴────────┴─────────┘ │
│                                                   │
│  Trang: [< 1 2 3 4 5 >]                          │
└──────────────────────────────────────────────────┘

4. Quản lý Account — NẠP + XEM + XÓA

┌──────────────────────────────────────────────────┐
│  QUẢN LÝ TÀI KHOẢN                              │
│                                                   │
│  ┌─ Nạp tài khoản ─────────────────────────────┐ │
│  │                                               │ │
│  │  Dán danh sách (mỗi dòng: user:pass:proxy):  │ │
│  │  ┌───────────────────────────────────────┐    │ │
│  │  │ [email protected]:pass123:http://p1:80  │    │ │
│  │  │ [email protected]:pass456:direct        │    │ │
│  │  │ [email protected]:pass789:socks5://p3   │    │ │
│  │  └───────────────────────────────────────┘    │ │
│  │                                               │ │
│  │  [📁 Tải file CSV]   [📥 NẠP TÀI KHOẢN]     │ │
│  └───────────────────────────────────────────────┘ │
│                                                   │
│  ┌─ Danh sách hiện tại (15 tài khoản) ─────────┐ │
│  │ ID    │ Status   │ Credits │ Proxy  │ Xóa    │ │
│  │ acc_A │ ✅ Active │ 800     │ p1:80  │ [🗑️]   │ │
│  │ acc_B │ ✅ Active │ 1000    │ direct │ [🗑️]   │ │
│  │ acc_C │ 💤 Hết   │ 0       │ p3:80  │ [🗑️]   │ │
│  │ acc_D │ ⛔ Cấm   │ —       │ p4:80  │ [🗑️]   │ │
│  └───────────────────────────────────────────────┘ │
│                                                   │
│  [🔄 Kiểm tra tất cả]  [🔑 Đăng nhập lại tất cả]│
└──────────────────────────────────────────────────┘

5. Trạng thái Pool — Giám sát realtime

┌──────────────────────────────────────────────────┐
│  TRẠNG THÁI POOL                   [Auto refresh]│
│                                                   │
│  Workers: 8/10 đang bận    Queue: 23 jobs chờ    │
│  ┌──────────────────────────────────────────┐    │
│  │ [=============================___] 80%    │    │
│  └──────────────────────────────────────────┘    │
│                                                   │
│  ┌────────┬────────┬────────┬────────┐           │
│  │Worker 1│Worker 2│Worker 3│Worker 4│           │
│  │ 🟢 Bận │ 🟢 Bận │ 🟢 Bận │ ⚪ Rảnh│           │
│  │ acc_A  │ acc_A  │ acc_A  │ —      │           │
│  │ job_12 │ job_13 │ job_14 │        │           │
│  │ 45%    │ 20%    │ 80%    │        │           │
│  └────────┴────────┴────────┴────────┘           │
│                                                   │
│  Nick đang dùng: acc_A (credits: 400/1000)       │
│  Nick tiếp theo: acc_B (credits: 1000)            │
└──────────────────────────────────────────────────┘

6. Cài đặt

┌──────────────────────────────────────────────────┐
│  CÀI ĐẶT                                        │
│                                                   │
│  API Key: [sk_live_xxxxxxxxx]  [📋 Copy]          │
│  Backend URL: [http://localhost:8000]             │
│                                                   │
│  Chiến lược xoay: [Fill-first ▼]                 │
│  Credits/video: [100]                             │
│  Max concurrent/nick: [10]                        │
│  Headless mode: [✅]                              │
│                                                   │
│  Webhook mặc định: [https://...]                 │
│                                                   │
│  Giao diện: [🌙 Dark] [☀️ Light]                  │
│                                                   │
│  [💾 LƯU CÀI ĐẶT]                               │
└──────────────────────────────────────────────────┘

Các mẫu triển khai

Code mẫu:

• references/project-setup.sh — Khởi tạo project Next.js + shadcn/ui
• references/layout-sidebar.tsx — Layout chung với sidebar responsive
• references/page-accounts.tsx — Trang quản lý account (nạp id:pass:proxy)
• references/page-generate.tsx — Trang tạo video (form + nút Execute)
• references/pwa-config.ts — Cấu hình PWA cho đa nền tảng

Quy tắc

• Responsive TRƯỚC — mobile-first design (TailwindCSS mặc định)
• Dark mode mặc định (dễ nhìn khi làm việc lâu)
• Mọi action quan trọng có confirm dialog
• Loading state cho mọi nút bấm
• Toast notification cho kết quả (thành công/lỗi)
• Auto-refresh cho trang Pool status (polling 5s)
• Kết nối backend qua env NEXT_PUBLIC_API_URL
• PWA: cache offline, push notification khi job xong

Deploy

| Nền tảng | Cách | |---------|------| | Web | Vercel (free) hoặc Docker | | Mobile | Mở web trên phone → "Add to Home Screen" | | Desktop | Chrome → 3 chấm → "Install app" |