79f8035d18
- Added `clsx` and `tailwind-merge` to `package.json` and `package-lock.json` for improved class management and utility merging. - Updated `Column` and `TaskCard` components to utilize new UI components (`Card`, `Badge`) for a more cohesive design. - Refactored styles in `Header` and Kanban components to align with the new design system. - Marked several tasks as completed in `TODO.md` reflecting progress on UI enhancements.
155 lines
5.6 KiB
Markdown
155 lines
5.6 KiB
Markdown
# 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)
|
|
- [ ] 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.*
|