towercontrol/TODO.md

# TowerControl v2.0 - Gestionnaire de tâches moderne

## ✅ Phase 1: Nettoyage et architecture (TERMINÉ)

### 1.1 Configuration projet Next.js
- [x] Initialiser Next.js avec TypeScript
- [x] Configurer ESLint, Prettier  
- [x] Setup structure de dossiers selon les règles du workspace
- [x] Configurer base de données (SQLite local)
- [x] Setup Prisma ORM

### 1.2 Architecture backend standalone
- [x] Créer `services/database.ts` - Pool de connexion DB
- [x] Créer `services/tasks.ts` - Service CRUD pour les tâches
- [x] Créer `lib/types.ts` - Types partagés (Task, Tag, etc.)
- [x] Nettoyer l'ancien code de synchronisation

### 1.3 API moderne et propre
- [x] `app/api/tasks/route.ts` - API CRUD complète (GET, POST, PATCH, DELETE)
- [x] Supprimer les routes de synchronisation obsolètes
- [x] Configuration moderne dans `lib/config.ts`

**Architecture finale** : App standalone avec backend propre et API REST moderne

## 🎯 Phase 2: Interface utilisateur moderne (EN COURS)

### 2.1 Système de design et composants UI
- [x] Créer les composants UI de base (Button, Input, Card, Modal, Badge)
- [x] Implémenter le système de design tech dark (couleurs, typographie, spacing)
- [x] Setup Tailwind CSS avec classes utilitaires personnalisées
- [x] Créer une palette de couleurs tech/cyberpunk

### 2.2 Composants Kanban existants (à améliorer)
- [x] `components/kanban/Board.tsx` - Tableau Kanban principal
- [x] `components/kanban/Column.tsx` - Colonnes du Kanban  
- [x] `components/kanban/TaskCard.tsx` - Cartes de tâches
- [x] `components/ui/Header.tsx` - Header avec statistiques
- [x] Refactoriser les composants pour utiliser le nouveau système UI

### 2.3 Gestion des tâches (CRUD)
- [x] Formulaire de création de tâche (Modal + Form)
- [x] Création rapide inline dans les colonnes (QuickAddTask)
- [x] Formulaire d'édition de tâche (Modal + Form avec pré-remplissage)
- [x] Édition inline du titre des tâches (clic sur titre → input)
- [x] Suppression de tâche (icône discrète + API call)
- [x] Changement de statut par drag & drop (@dnd-kit)
- [x] Validation des formulaires et gestion d'erreurs

### 2.4 Gestion des tags
- [x] Créer/éditer des tags avec sélecteur de couleur
- [x] Autocomplete pour les tags existants
- [x] Suppression de tags (avec vérification des dépendances)
- [x] Affichage des tags avec couleurs personnalisées
- [x] Service tags avec CRUD complet (Prisma)
- [x] API routes /api/tags avec validation
- [x] Client HTTP et hook useTags
- [x] Composants UI (TagInput, TagDisplay, TagForm)
- [x] Intégration dans les formulaires (TagInput avec autocomplete)
- [x] Intégration dans les TaskCards (TagDisplay avec couleurs)
- [x] Contexte global pour partager les tags
- [x] Page de gestion des tags (/tags) avec interface complète
- [x] Navigation dans le Header (Kanban ↔ Tags)
- [x] Filtrage par tags (intégration dans Kanban)
- [x] Interface de filtrage complète (recherche, priorités, tags)
- [x] Logique de filtrage temps réel dans le contexte
- [x] Intégration des filtres dans KanbanBoard

### 2.5 Clients HTTP et hooks
- [x] `clients/tasks-client.ts` - Client pour les tâches (CRUD complet)
- [x] `clients/tags-client.ts` - Client pour les tags
- [x] `clients/base/http-client.ts` - Client HTTP de base
- [x] `hooks/useTasks.ts` - Hook pour la gestion des tâches (CRUD complet)
- [x] `hooks/useTags.ts` - Hook pour la gestion des tags
- [x] Drag & drop avec @dnd-kit (intégré directement dans Board.tsx)
- [x] Gestion des erreurs et loading states
- [x] Architecture SSR + hydratation client optimisée

### 2.6 Fonctionnalités Kanban avancées
- [x] Drag & drop entre colonnes (@dnd-kit avec React 19)
- [x] Drag & drop optimiste (mise à jour immédiate + rollback si erreur)
- [x] Filtrage par statut/priorité/assigné
- [x] Recherche en temps réel dans les tâches
- [x] Interface de filtrage complète (KanbanFilters.tsx)
- [x] Logique de filtrage dans TasksContext
- [x] Tri des tâches (date, priorité, alphabétique)
- [ ] Actions en lot (sélection multiple)

## 📊 Phase 3: Dashboard et analytics (Priorité 3)

### 3.1 Page d'accueil/dashboard
- [ ] Créer une page d'accueil moderne avec vue d'ensemble
- [ ] Widgets de statistiques (tâches par statut, priorité, etc.)
- [ ] Graphiques de productivité (tâches complétées par jour/semaine)
- [ ] Indicateurs de performance personnels

### 3.2 Analytics et métriques
- [ ] `services/analytics.ts` - Calculs statistiques
- [ ] Métriques de productivité (vélocité, temps moyen, etc.)
- [ ] Graphiques avec Chart.js ou Recharts
- [ ] Export des données en CSV/JSON

## 🔧 Phase 4: Fonctionnalités avancées (Priorité 4)

### 4.1 Gestion avancée des tâches
- [ ] Sous-tâches et hiérarchie
- [ ] Dates d'échéance et rappels
- [ ] Assignation et collaboration
- [ ] Templates de tâches

### 4.2 Personnalisation et thèmes
- [ ] Mode sombre/clair
- [ ] Personnalisation des couleurs
- [ ] Configuration des colonnes Kanban
- [ ] Préférences utilisateur

## 🚀 Phase 5: Intégrations futures (Priorité 5)

### 5.1 Intégrations externes (optionnel)
- [ ] Import/Export depuis d'autres outils
- [ ] API webhooks pour intégrations
- [ ] Synchronisation cloud (optionnel)
- [ ] Notifications push

### 5.2 Optimisations et performance
- [ ] Optimisation des requêtes DB
- [ ] Pagination et virtualisation
- [ ] Cache côté client
- [ ] PWA et mode offline

## 🛠️ Configuration technique

### Stack moderne
- **Frontend**: Next.js 14, React, TypeScript, Tailwind CSS
- **Backend**: Next.js API Routes, Prisma ORM  
- **Database**: SQLite (local) → PostgreSQL (production future)
- **UI**: Composants custom + Shadcn/ui, React Beautiful DnD
- **Charts**: Recharts ou Chart.js pour les analytics

### Architecture respectée
```
src/app/
├── api/tasks/          # API CRUD complète
├── page.tsx           # Page principale
└── layout.tsx

services/
├── database.ts        # Pool Prisma
└── tasks.ts          # Service tâches standalone

components/
├── kanban/           # Board Kanban
├── ui/              # Composants UI de base
└── dashboard/       # Widgets dashboard (futur)

clients/             # Clients HTTP (à créer)
hooks/              # Hooks React (à créer)
lib/
├── types.ts        # Types TypeScript
└── config.ts       # Config app moderne
```

## 🎯 Prochaines étapes immédiates

1. **Drag & drop entre colonnes** - react-beautiful-dnd pour changer les statuts
2. **Gestion avancée des tags** - Couleurs, autocomplete, filtrage
3. **Recherche et filtres** - Filtrage temps réel par titre, tags, statut
4. **Dashboard et analytics** - Graphiques de productivité

## ✅ **Fonctionnalités terminées (Phase 2.1-2.3)**

- ✅ Système de design tech dark complet
- ✅ Composants UI de base (Button, Input, Card, Modal, Badge)
- ✅ Architecture SSR + hydratation client
- ✅ CRUD tâches complet (création, édition, suppression)
- ✅ Création rapide inline (QuickAddTask)
- ✅ Édition inline du titre (clic sur titre → input éditable)
- ✅ Drag & drop entre colonnes (@dnd-kit) + optimiste
- ✅ Client HTTP et hooks React
- ✅ Refactoring Kanban avec nouveaux composants

---

*Focus sur l'expérience utilisateur et le design moderne. App standalone prête pour évoluer.*