towercontrol/TODO.md

TowerControl v2.0 - Gestionnaire de tâches moderne

✅ Phase 1: Nettoyage et architecture (TERMINÉ)

1.1 Configuration projet Next.js

• Initialiser Next.js avec TypeScript
• Configurer ESLint, Prettier
• Setup structure de dossiers selon les règles du workspace
• Configurer base de données (SQLite local)
• Setup Prisma ORM

1.2 Architecture backend standalone

• Créer services/database.ts - Pool de connexion DB
• Créer services/tasks.ts - Service CRUD pour les tâches
• Créer lib/types.ts - Types partagés (Task, Tag, etc.)
• Nettoyer l'ancien code de synchronisation

1.3 API moderne et propre

• app/api/tasks/route.ts - API CRUD complète (GET, POST, PATCH, DELETE)
• Supprimer les routes de synchronisation obsolètes
• 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

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

2.2 Composants Kanban existants (à améliorer)

• components/kanban/Board.tsx - Tableau Kanban principal
• components/kanban/Column.tsx - Colonnes du Kanban
• components/kanban/TaskCard.tsx - Cartes de tâches
• components/ui/Header.tsx - Header avec statistiques
• Refactoriser les composants pour utiliser le nouveau système UI

2.3 Gestion des tâches (CRUD)

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

2.4 Gestion des tags

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

2.5 Clients HTTP et hooks

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

2.6 Fonctionnalités Kanban avancées

• Drag & drop entre colonnes (@dnd-kit avec React 19)
• Drag & drop optimiste (mise à jour immédiate + rollback si erreur)
• Filtrage par statut/priorité/assigné
• Recherche en temps réel dans les tâches
• Interface de filtrage complète (KanbanFilters.tsx)
• Logique de filtrage dans TasksContext
• Tri des tâches (date, priorité, alphabétique)

2.7 Système de thèmes (clair/sombre)

• Créer le contexte de thème (ThemeContext + ThemeProvider)
• Ajouter toggle de thème dans le Header (bouton avec icône soleil/lune)
• Définir les variables CSS pour le thème clair
• Adapter tous les composants UI pour supporter les deux thèmes
• Modifier la palette de couleurs pour le mode clair
• Adapter les composants Kanban (Board, TaskCard, Column)
• Adapter les formulaires et modales
• Adapter la page de gestion des tags
• Sauvegarder la préférence de thème (localStorage)
• 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

• Créer services/daily.ts - Service de gestion des daily notes
• Modèle de données Daily (date, checkboxes hier/aujourd'hui)
• Interface Daily avec sections "Hier" et "Aujourd'hui"
• Checkboxes interactives avec état coché/non-coché
• Liaison optionnelle checkbox ↔ tâche existante
• Cocher une checkbox NE change PAS le statut de la tâche liée
• Navigation par date (daily précédent/suivant)
• Auto-création du daily du jour si inexistant
• UX améliorée : édition au clic, focus persistant, input large
• Vue calendar/historique des dailies
• Templates de daily personnalisables
• Recherche dans l'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.