--- name: frontend-dashboard description: Dashboard quản lý toàn bộ hệ thống — Next.js + TailwindCSS + shadcn/ui + PWA. Đa nền tảng (web + mobile + desktop) từ 1 codebase. Kích hoạt khi user cần giao diện quản lý, dashboard, hoặc app UI đầy đủ. --- # 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): │ │ │ │ ┌───────────────────────────────────────┐ │ │ │ │ │ user1@gmail.com:pass123:http://p1:80 │ │ │ │ │ │ user2@gmail.com:pass456:direct │ │ │ │ │ │ user3@gmail.com: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" |