# 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) ### 2.7 Système de thèmes (clair/sombre) - [x] Créer le contexte de thème (ThemeContext + ThemeProvider) - [x] Ajouter toggle de thème dans le Header (bouton avec icône soleil/lune) - [x] Définir les variables CSS pour le thème clair - [x] Adapter tous les composants UI pour supporter les deux thèmes - [x] Modifier la palette de couleurs pour le mode clair - [x] Adapter les composants Kanban (Board, TaskCard, Column) - [x] Adapter les formulaires et modales - [x] Adapter la page de gestion des tags - [x] Sauvegarder la préférence de thème (localStorage) - [x] Configuration par défaut selon préférence système (prefers-color-scheme) ## 📊 Phase 3: Intégrations et analytics (Priorité 3) ### 3.1 Gestion du Daily - [x] Créer `services/daily.ts` - Service de gestion des daily notes - [x] Modèle de données Daily (date, checkboxes hier/aujourd'hui) - [x] Interface Daily avec sections "Hier" et "Aujourd'hui" - [x] Checkboxes interactives avec état coché/non-coché - [x] Liaison optionnelle checkbox ↔ tâche existante - [x] Cocher une checkbox NE change PAS le statut de la tâche liée - [x] Navigation par date (daily précédent/suivant) - [x] Auto-création du daily du jour si inexistant - [x] UX améliorée : édition au clic, focus persistant, input large - [x] Vue calendar/historique des dailies ### 3.2 Intégration Jira Cloud - [ ] Créer `services/jira.ts` - Service de connexion à l'API Jira Cloud - [ ] Configuration Jira (URL, email, API token) dans `lib/config.ts` - [ ] Authentification Basic Auth (email + API token) - [ ] Récupération des tickets assignés à l'utilisateur - [ ] Mapping des statuts Jira vers statuts internes (todo, in_progress, done, etc.) - [ ] Synchronisation unidirectionnelle (Jira → local uniquement) - [ ] Gestion des diffs - ne pas écraser les modifications locales - [ ] Style visuel distinct pour les tâches Jira (bordure spéciale) - [ ] Métadonnées Jira (projet, clé, assignee) dans la base - [ ] Possibilité d'affecter des tags locaux aux tâches Jira - [ ] Interface de configuration dans les paramètres - [ ] Synchronisation manuelle via bouton (pas d'auto-sync) - [ ] Logs de synchronisation pour debug - [ ] Gestion des erreurs et timeouts API ### 3.3 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.4 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 - [ ] Actions en lot (sélection multiple) - [ ] 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.*