# Tasks: Add Gantt View

## Backend Tasks

### 1. Add start_date to Task model
- [x] Add `start_date` column to Task model
- [x] Create Alembic migration
- [x] Update TaskCreate/TaskUpdate schemas to include start_date
- [x] Update TaskResponse schema
- **驗證**: Migration 成功，API 可設定 start_date

### 2. Create TaskDependency model
- [x] Create `backend/app/models/task_dependency.py`
- [x] Define predecessor_id, successor_id, dependency_type, lag_days
- [x] Update `backend/app/models/__init__.py`
- [x] Create Alembic migration
- **驗證**: Migration 成功

### 3. Implement dependency CRUD API
- [x] Create `backend/app/api/task_dependencies/router.py`
- [x] Implement `POST /api/tasks/{task_id}/dependencies` - 新增依賴
- [x] Implement `GET /api/tasks/{task_id}/dependencies` - 取得依賴
- [x] Implement `DELETE /api/task-dependencies/{dependency_id}` - 刪除依賴
- [x] Add circular dependency detection
- [x] Register router in main.py
- **驗證**: 依賴關係 CRUD 可正常操作，循環依賴被拒絕

### 4. Add date validation
- [x] Validate start_date <= due_date
- [x] Validate dependency constraints on date change
- [x] Add validation tests
- **驗證**: 不合理日期被拒絕

### 5. Add backend tests
- [x] Test TaskDependency CRUD
- [x] Test circular dependency detection
- [x] Test date validation
- **驗證**: 所有測試通過

## Frontend Tasks

### 6. Install and configure Gantt library
- [x] Install Frappe Gantt (or chosen library)
- [x] Create wrapper component for React integration
- [x] Configure styling to match application theme
- **驗證**: Gantt 元件可正常渲染

### 7. Create GanttChart component
- [x] Create `frontend/src/components/GanttChart.tsx`
- [x] Load tasks with start_date and due_date
- [x] Display tasks as horizontal bars on timeline
- [x] Show task title, assignee, progress
- [x] Support zoom levels (day, week, month)
- **驗證**: 任務正確顯示在時間軸上

### 8. Implement drag-to-edit dates
- [x] Handle bar drag to move task dates
- [x] Handle bar resize to change duration
- [x] Call API to update task dates
- [x] Show optimistic update, rollback on error
- **驗證**: 拖拉調整日期可正確更新

### 9. Implement dependency visualization
- [x] Add dependency arrows between tasks
- [x] Create dependency API service
- [x] Implement add/remove dependency UI (right-click or toolbar)
- [x] Validate and show error for circular dependencies
- **驗證**: 依賴關係正確顯示和編輯

### 10. Integrate Gantt view into Tasks page
- [x] Add "Gantt" option to view toggle
- [x] Store view preference in localStorage
- [x] Handle view switching
- **驗證**: 可在 List/Kanban/Gantt 之間切換

## Task Dependencies

```
[1] start_date 欄位
      ↓
[2] TaskDependency Model → [3] Dependency API → [4] Date Validation → [5] Tests
                                    ↓
[6] Gantt Library Setup → [7] GanttChart Component
                                    ↓
                          [8] Drag Edit → [9] Dependency UI
                                    ↓
                          [10] View Integration
```

- Tasks 1-5 (Backend) 可平行於 Tasks 6-10 (Frontend) 開發
- Task 7 需要 Task 1 完成（需要 start_date 欄位）
- Task 9 需要 Task 3 完成（需要依賴 API）