Frontend - Bố cục dự án Next.js

my-task-app/
│
├── app/                    ← 📄 PAGES (các trang giao diện)
│   ├── layout.tsx
│   ├── page.tsx
│   ├── (auth)/
│   │   ├── login/
│   │   └── register/
│   ├── dashboard/
│   │   ├── layout.tsx
│   │   ├── page.tsx
│   │   ├── tasks/
│   │   ├── projects/
│   │   └── settings/
│   └── api/
│
├── components/             ← 🧩 COMPONENTS (khối giao diện tái sử dụng)
│   ├── ui/
│   ├── layout/
│   ├── tasks/
│   └── shared/
│
├── services/               ← 🔌 SERVICES (kết nối Firebase)
│   ├── firebase.ts
│   ├── auth.ts
│   ├── tasks.ts
│   ├── projects.ts
│   └── storage.ts
│
├── hooks/                  ← 🪝 HOOKS (logic tái sử dụng)
│   ├── useAuth.ts
│   └── useTasks.ts
│
├── types/                  ← 📋 TYPES (định nghĩa cấu trúc dữ liệu)
│   ├── task.ts
│   └── user.ts
│
├── .env.local              ← Biến môi trường
└── package.json

app/
├── page.tsx                         →  yourapp.com/
├── (auth)/                          ← Nhóm route (không tạo URL)
│   ├── login/
│   │   └── page.tsx                 →  yourapp.com/login
│   └── register/
│       └── page.tsx                 →  yourapp.com/register
│
├── dashboard/
│   ├── layout.tsx                   ← Layout dùng chung cho mọi trang dashboard
│   ├── page.tsx                     →  yourapp.com/dashboard
│   ├── tasks/
│   │   ├── page.tsx                 →  yourapp.com/dashboard/tasks
│   │   └── [id]/
│   │       └── page.tsx             →  yourapp.com/dashboard/tasks/abc123
│   ├── projects/
│   │   ├── page.tsx                 →  yourapp.com/dashboard/projects
│   │   └── [id]/
│   │       └── page.tsx             →  yourapp.com/dashboard/projects/xyz789
│   └── settings/
│       └── page.tsx                 →  yourapp.com/dashboard/settings
│
└── api/                             ← API Routes (backend nhẹ)
    └── notifications/
        └── route.ts                 →  POST /api/notifications

┌─────────────────────────────────┐
│  1. Lấy dữ liệu                │  ← Gọi Service để đọc từ Firebase
│     (getProjects, getTasks)     │
├─────────────────────────────────┤
│  2. Ghép các Components         │  ← Lắp ráp từ khối có sẵn
│     TaskFilter                  │
│     TaskTable data={tasks}      │
│     CreateTaskButton            │
├─────────────────────────────────┤
│  3. Trả về giao diện hoàn chỉnh│  ← Next.js hiển thị trang
└─────────────────────────────────┘

components/
├── ui/                              ← 🎨 Components cơ bản (từ shadcn/ui)
│   ├── button.tsx                   ← Nút bấm
│   ├── dialog.tsx                   ← Hộp thoại (modal/popup)
│   ├── badge.tsx                    ← Nhãn trạng thái
│   ├── input.tsx                    ← Ô nhập liệu
│   ├── select.tsx                   ← Dropdown chọn
│   ├── table.tsx                    ← Bảng dữ liệu
│   ├── avatar.tsx                   ← Ảnh đại diện
│   ├── date-picker.tsx              ← Chọn ngày
│   └── sidebar.tsx                  ← Thanh menu bên
│
├── layout/                          ← 🏗️ Components bố cục
│   ├── AppHeader.tsx                ← Header toàn app (logo, notifications, user menu)
│   ├── AppSidebar.tsx               ← Sidebar navigation
│   └── PageHeader.tsx               ← Tiêu đề + action buttons cho mỗi trang
│
├── tasks/                           ← 📋 Components cho tính năng Tasks
│   ├── TaskCard.tsx                 ← Thẻ hiển thị 1 task
│   ├── TaskTable.tsx                ← Bảng danh sách tasks
│   ├── TaskForm.tsx                 ← Form tạo/sửa task
│   ├── TaskFilter.tsx               ← Bộ lọc trạng thái, người phụ trách
│   ├── TaskStatusBadge.tsx          ← Badge hiển thị trạng thái
│   └── TaskDeleteDialog.tsx         ← Hộp thoại xác nhận xóa task
│
├── projects/                        ← 🏢 Components cho tính năng Projects
│   ├── ProjectCard.tsx
│   ├── ProjectMemberList.tsx
│   └── ProjectForm.tsx
│
└── shared/                          ← 🔄 Components dùng chung
    ├── UserAvatar.tsx               ← Ảnh đại diện người dùng
    ├── EmptyState.tsx               ← Giao diện khi không có dữ liệu
    ├── LoadingSpinner.tsx           ← Hiệu ứng đang tải
    └── ConfirmDialog.tsx            ← Hộp thoại xác nhận chung

services/
├── firebase.ts          ← Cấu hình kết nối Firebase (khởi tạo 1 lần)
├── auth.ts              ← Đăng nhập, đăng ký, đăng xuất
├── tasks.ts             ← CRUD tasks (tạo, đọc, sửa, xóa)
├── projects.ts          ← CRUD projects
├── users.ts             ← Đọc/cập nhật thông tin users
└── storage.ts           ← Upload/download file

hooks/
├── useAuth.ts        ← Quản lý trạng thái đăng nhập
│                        (user hiện tại, đang loading, đã login chưa)
│
├── useTasks.ts       ← Quản lý dữ liệu tasks
│                        (danh sách tasks, loading, lỗi, hàm tạo/sửa/xóa)
│
└── useDebounce.ts    ← Trì hoãn thao tác (tìm kiếm khi ngừng gõ)

types/
├── task.ts           ← Task gồm những trường nào?
│                        title: string (tiêu đề)
│                        status: "todo" | "in_progress" | "completed"
│                        assignee: string (ID người phụ trách)
│                        deadline: Date (ngày hết hạn)
│
└── user.ts           ← User gồm những trường nào?
                         name: string
                         email: string
                         role: "admin" | "member"
                         avatarUrl: string

📄 app/dashboard/tasks/page.tsx
│
│  Gọi Service: getTasks() → lấy danh sách tasks
│  Gọi Service: getUsers() → lấy danh sách users (cho bộ lọc)
│
│  Truyền dữ liệu vào Components:
│
├── 🏗️ PageHeader
│   ├── title: "Danh sách công việc"
│   └── 🧩 Button: "Thêm task"
│       └── onClick → Mở TaskForm (Dialog)
│
├── 🧩 TaskFilter
│   ├── Select: Trạng thái (Tất cả / Đang làm / Hoàn thành)
│   ├── Select: Người phụ trách (Tất cả / User A / User B)
│   └── Input: Tìm kiếm theo tiêu đề
│
├── 🧩 TaskTable
│   ├── Dòng 1: TaskCard (task "Làm báo cáo Q1")
│   │   ├── TaskStatusBadge: "In Progress"
│   │   ├── UserAvatar: "Nguyễn Văn A"
│   │   ├── Text: "30/04/2026"
│   │   └── Buttons: [Sửa] [Xóa]
│   ├── Dòng 2: TaskCard (task "Review thiết kế")
│   └── Dòng 3: ...
│
└── 🧩 TaskForm (Dialog — ẩn, hiện khi bấm "Thêm task")
    ├── Input: Tiêu đề
    ├── Textarea: Mô tả
    ├── Select: Người phụ trách
    ├── DatePicker: Deadline
    └── Buttons: [Hủy] [Lưu]
        └── onSave → Gọi Service: createTask(data)

"Tạo trang /dashboard/reports tại app/dashboard/reports/page.tsx.
Trang này hiển thị thống kê: tổng số tasks, tỷ lệ hoàn thành, tasks quá hạn.
Lấy dữ liệu từ service tasks.ts."

"Tạo component TaskKanban trong components/tasks/TaskKanban.tsx.
Hiển thị tasks dạng kanban board với 3 cột: Todo, In Progress, Completed.
Mỗi task hiển thị bằng TaskCard (component có sẵn).
Cho phép kéo-thả task giữa các cột.
Khi kéo-thả → gọi updateTask() từ services/tasks.ts để cập nhật status."

"Tạo service mới services/notifications.ts.
Các hàm:
- sendNotification(userId, message) → ghi vào Firestore collection 'notifications'
- getNotifications(userId) → lấy danh sách thông báo
- markAsRead(notificationId) → đánh dấu đã đọc"

┌──────────────────────────────────────────────────────┐
│              CẤU TRÚC DỰ ÁN NEXT.JS                 │
├──────────────────────────────────────────────────────┤
│                                                      │
│  📄 PAGES (app/)                                     │
│  ├── Mỗi file page.tsx = 1 trang (1 URL)            │
│  ├── Lấy dữ liệu từ Services                       │
│  ├── Ghép Components thành giao diện hoàn chỉnh     │
│  └── layout.tsx = khung chung (header, sidebar)     │
│                                                      │
│  🧩 COMPONENTS (components/)                         │
│  ├── UI: Button, Input, Badge (viên gạch cơ bản)   │
│  ├── Feature: TaskCard, TaskForm (khối nghiệp vụ)   │
│  └── Shared: UserAvatar, LoadingSpinner (dùng chung)│
│                                                      │
│  🔌 SERVICES (services/)                             │
│  ├── firebase.ts: khởi tạo kết nối                  │
│  ├── auth.ts: đăng nhập / đăng xuất                 │
│  ├── tasks.ts: CRUD tasks                           │
│  └── storage.ts: upload / download file             │
│                                                      │
│  🪝 HOOKS (hooks/)                                   │
│  └── Logic tái sử dụng (useAuth, useTasks)          │
│                                                      │
│  📋 TYPES (types/)                                   │
│  └── Định nghĩa cấu trúc dữ liệu                  │
│                                                      │
└──────────────────────────────────────────────────────┘