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)
• Formulaire d'édition de tâche (Modal + Form avec pré-remplissage)
• Suppression de tâche (confirmation + API call)
• Changement de statut par drag & drop ou boutons
• 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
• Filtrage par tags

2.5 Clients HTTP et hooks

• clients/tasks-client.ts - Client pour les tâches (CRUD)
• 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
• hooks/useTags.ts - Hook pour la gestion des tags
• hooks/useKanban.ts - Hook pour drag & drop
• Gestion des erreurs et loading states

2.6 Fonctionnalités Kanban avancées

• Drag & drop entre colonnes (react-beautiful-dnd)
• Filtrage par statut/priorité/assigné
• Recherche en temps réel dans les tâches
• 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. Créer les composants UI de base (Button, Input, Card, Modal)
2. Implémenter le système de design avec Tailwind
3. Améliorer le Kanban avec un design moderne
4. Ajouter drag & drop entre les colonnes
5. Créer les formulaires de tâches

---

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