feat: add clsx and tailwind-merge dependencies, enhance Kanban components

- 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.
This commit is contained in:
Julien Froidefond
2025-09-14 08:23:04 +02:00
parent 124e8baee8
commit 79f8035d18
13 changed files with 421 additions and 110 deletions

38
TODO.md
View File

@@ -25,31 +25,47 @@
## 🎯 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, etc.)
- [ ] Implémenter le système de design (couleurs, typographie, spacing)
- [ ] Setup Tailwind CSS avec design tokens personnalisés
- [ ] Créer une palette de couleurs moderne et accessible
- [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
- [ ] Améliorer le design et l'UX des composants existants
- [x] Refactoriser les composants pour utiliser le nouveau système UI
### 2.3 Clients HTTP et hooks
- [ ] `clients/tasks-client.ts` - Client pour les tâches
### 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.4 Fonctionnalités Kanban avancées
### 2.6 Fonctionnalités Kanban avancées
- [ ] Drag & drop entre colonnes (react-beautiful-dnd)
- [ ] Formulaires de création/édition de tâches
- [ ] Filtrage par tags/statut/priorité
- [ ] Filtrage par statut/priorité/assigné
- [ ] Recherche en temps réel dans les tâches
- [ ] Gestion des tags avec couleurs
- [ ] Tri des tâches (date, priorité, alphabétique)
- [ ] Actions en lot (sélection multiple)
## 📊 Phase 3: Dashboard et analytics (Priorité 3)