# TowerControl v2.0 đŸ—Œ **Gestionnaire de tĂąches moderne et minimaliste** - Interface Kanban avec intĂ©grations Jira et Daily notes --- ## 🚀 Vue d'ensemble TowerControl est un gestionnaire de tĂąches **standalone** conçu pour les dĂ©veloppeurs et Ă©quipes tech. Il combine la simplicitĂ© d'un Kanban local avec la puissance des intĂ©grations externes (Jira) et un systĂšme de daily notes pour le suivi quotidien. ### 🎯 Philosophie - **Local first** : Base SQLite, pas de cloud requis - **Architecture moderne** : Next.js 15 + React 19 + TypeScript + Prisma - **Design minimaliste** : Interface dark/light avec focus sur la productivitĂ© - **IntĂ©grations intelligentes** : Sync unidirectionnelle Jira sans pollution --- ## ✹ FonctionnalitĂ©s principales ### đŸ—ïž Kanban moderne - **Drag & drop fluide** avec @dnd-kit (optimistic updates) - **Colonnes configurables** : backlog, todo, in_progress, done, cancelled, freeze, archived - **Vues multiples** : Kanban classique + swimlanes par prioritĂ© - **Édition inline** : Clic sur titre → Ă©dition directe - **CrĂ©ation rapide** : Ajout inline dans chaque colonne ### đŸ·ïž SystĂšme de tags avancĂ© - **Tags colorĂ©s** avec sĂ©lecteur de couleur - **Autocomplete intelligent** lors de la saisie - **Filtrage en temps rĂ©el** par tags - **Gestion complĂšte** avec page dĂ©diĂ©e `/tags` ### 📊 Filtrage et recherche - **Recherche temps rĂ©el** dans les titres et descriptions - **Filtres combinables** : statut, prioritĂ©, tags, source - **Tri flexible** : date, prioritĂ©, alphabĂ©tique - **Interface intuitive** avec dropdowns et toggles ### 📝 Daily Notes - **Checkboxes quotidiennes** avec sections "Hier" / "Aujourd'hui" - **Navigation par date** (prĂ©cĂ©dent/suivant) - **Liaison optionnelle** avec les tĂąches existantes - **Auto-crĂ©ation** du daily du jour - **Historique calendaire** des dailies ### 🔗 IntĂ©gration Jira Cloud - **Synchronisation unidirectionnelle** (Jira → local) - **Authentification sĂ©curisĂ©e** (email + API token) - **Mapping intelligent** des statuts Jira - **Style visuel distinct** pour les tĂąches Jira - **Gestion des conflits** : prĂ©servation des modifications locales - **Interface de configuration** complĂšte ### 🎹 Interface & UX - **ThĂšme adaptatif** : dark/light + dĂ©tection systĂšme - **Design cohĂ©rent** : palette cyberpunk/tech avec Tailwind CSS - **Composants modulaires** : Button, Input, Card, Modal, Badge - **Loading states** optimisĂ©s avec Server Actions - **Responsive design** pour tous les Ă©crans ### ⚡ Performance & Architecture - **Server Actions** pour les mutations rapides (vs API routes) - **Architecture SSR** avec hydratation optimisĂ©e - **Base de donnĂ©es SQLite** ultra-rapide - **Services layer** avec sĂ©paration claire des responsabilitĂ©s - **TypeScript strict** avec types partagĂ©s --- ## đŸ› ïž Installation ### PrĂ©requis - **Node.js** 18+ - **pnpm** 9+ ### Installation locale ```bash # Cloner le repository git clone https://github.com/votre-repo/towercontrol.git cd towercontrol # Installer les dĂ©pendances pnpm install # Configurer la base de donnĂ©es pnpm prisma generate pnpm prisma db push # (Optionnel) Ajouter des donnĂ©es de test pnpm run seed # DĂ©marrer en dĂ©veloppement pnpm run dev ``` L'application sera accessible sur **http://localhost:3000** ### 🐳 Installation avec Docker (RecommandĂ©) Pour un dĂ©ploiement rapide en production ou pour isoler l'environnement : ```bash # Cloner le repository git clone https://github.com/votre-repo/towercontrol.git cd towercontrol # DĂ©marrer en production (port 3006) docker compose up -d # Ou dĂ©marrer en mode dĂ©veloppement (port 3005) docker compose --profile dev up -d ``` **AccĂšs :** - **Production** : http://localhost:3006 - **DĂ©veloppement** : http://localhost:3005 **Gestion des donnĂ©es :** ```bash # Utiliser votre base locale existante (dĂ©commentez dans docker-compose.yml) # - ./prisma/dev.db:/app/data/prod.db # AccĂ©der aux logs docker compose logs -f towercontrol # ArrĂȘter les services docker compose down # Supprimer tout (donnĂ©es incluses) docker compose down -v ``` **Avantages Docker :** - ✅ **Isolation complĂšte** - Pas de pollution de l'environnement local - ✅ **Base persistante** - Volumes Docker pour SQLite - ✅ **PrĂȘt pour prod** - Configuration optimisĂ©e - ✅ **Healthcheck intĂ©grĂ©** - Monitoring automatique - ✅ **Hot-reload** - Mode dev avec synchronisation du code ### Configuration des variables d'environnement Copiez le fichier d'exemple et configurez selon vos besoins : ```bash cp env.example .env.local ``` Variables principales : ```bash # Base de donnĂ©es (requis) DATABASE_URL="file:./dev.db" # Jira (optionnel - pour l'intĂ©gration) JIRA_BASE_URL="https://votre-domaine.atlassian.net" JIRA_EMAIL="votre.email@domaine.com" JIRA_API_TOKEN="votre_token_api" ``` ### Configuration Jira (optionnel) 1. **GĂ©nĂ©rer un token API** : - Aller sur https://id.atlassian.com/manage-profile/security/api-tokens - CrĂ©er un nouveau token API - Copier le token gĂ©nĂ©rĂ© 2. **Configurer dans l'app** : - Aller dans Settings → Jira Configuration - Saisir : URL de base, email, token API - Tester la connexion - Lancer une synchronisation manuelle --- ## đŸ—ïž Architecture ### Structure du projet ``` towercontrol/ ├── src/ │ ├── app/ # Next.js 15 App Router (pages & routes) │ │ ├── api/ # API Routes (endpoints complexes) │ │ │ ├── analytics/ # Endpoints d'analytics │ │ │ ├── auth/ # Authentification (NextAuth) │ │ │ ├── backups/ # Gestion des sauvegardes │ │ │ ├── daily/ # API daily notes │ │ │ ├── jira/ # API intĂ©gration Jira │ │ │ ├── notes/ # API notes markdown │ │ │ ├── tags/ # API gestion tags │ │ │ ├── tasks/ # API tĂąches │ │ │ ├── tfs/ # API intĂ©gration TFS │ │ │ └── user-preferences/ # API prĂ©fĂ©rences utilisateur │ │ ├── daily/ # Page daily notes (/daily) │ │ ├── jira-dashboard/ # Dashboard Jira (/jira-dashboard) │ │ ├── kanban/ # Page Kanban (/kanban) │ │ ├── manager/ # Page manager │ │ ├── notes/ # Page notes (/notes) │ │ ├── profile/ # Page profil utilisateur │ │ ├── settings/ # Page configuration (/settings) │ │ │ ├── advanced/ # ParamĂštres avancĂ©s │ │ │ ├── backup/ # Gestion backups │ │ │ ├── general/ # ParamĂštres gĂ©nĂ©raux │ │ │ └── integrations/ # Config intĂ©grations │ │ ├── weekly-manager/ # Page weekly manager │ │ ├── layout.tsx # Layout principal │ │ ├── page.tsx # Page d'accueil (/) │ │ └── globals.css # Styles globaux + variables CSS │ │ │ ├── actions/ # Server Actions (mutations rapides) │ │ ├── backup.ts # Actions sauvegardes │ │ ├── daily.ts # Actions daily notes │ │ ├── jira-analytics.ts # Actions analytics Jira │ │ ├── preferences.ts # Actions prĂ©fĂ©rences │ │ ├── tags.ts # Actions tags │ │ ├── tasks.ts # Actions tĂąches │ │ └── tfs.ts # Actions TFS │ │ │ ├── components/ # Composants React (UI uniquement) │ │ ├── ui/ # Composants UI de base rĂ©utilisables │ │ │ ├── Button.tsx # Boutons │ │ │ ├── Input.tsx # Inputs │ │ │ ├── Modal.tsx # Modales │ │ │ ├── Badge.tsx # Badges │ │ │ ├── Card.tsx # Cartes │ │ │ └── ... # Autres composants UI │ │ ├── kanban/ # Composants Kanban spĂ©cifiques │ │ │ ├── Board.tsx # Board principal │ │ │ ├── Column.tsx # Colonne Kanban │ │ │ ├── TaskCard.tsx # Carte de tĂąche │ │ │ ├── filters/ # Composants de filtrage │ │ │ └── ... # Autres composants Kanban │ │ ├── daily/ # Composants Daily notes │ │ ├── dashboard/ # Composants dashboard │ │ ├── forms/ # Formulaires rĂ©utilisables │ │ ├── jira/ # Composants intĂ©gration Jira │ │ ├── settings/ # Composants paramĂštres │ │ └── charts/ # Composants graphiques │ │ │ ├── services/ # Services backend (logique mĂ©tier) │ │ ├── core/ # Services core │ │ │ ├── database.ts # Pool Prisma (unique point d'accĂšs DB) │ │ │ ├── system-info.ts # Infos systĂšme │ │ │ └── user-preferences.ts # PrĂ©fĂ©rences utilisateur │ │ ├── task-management/ # Gestion des tĂąches │ │ │ ├── tasks.ts # CRUD tĂąches │ │ │ ├── tags.ts # CRUD tags │ │ │ └── daily.ts # Daily notes │ │ ├── integrations/ # IntĂ©grations externes │ │ │ ├── jira/ # IntĂ©gration Jira │ │ │ │ ├── jira.ts # Client Jira API │ │ │ │ ├── analytics.ts # Analytics Jira │ │ │ │ ├── scheduler.ts # Planification sync │ │ │ │ └── ... # Autres services Jira │ │ │ └── tfs/ # IntĂ©gration TFS │ │ ├── analytics/ # Services d'analytics │ │ │ ├── analytics.ts # Analytics gĂ©nĂ©rales │ │ │ ├── metrics.ts # MĂ©triques │ │ │ └── ... # Autres analytics │ │ └── data-management/ # Gestion des donnĂ©es │ │ ├── backup.ts # Sauvegardes │ │ └── backup-scheduler.ts # Planification backups │ │ │ ├── clients/ # Clients HTTP frontend │ │ ├── base/ # Client HTTP de base │ │ │ └── http-client.ts # Client HTTP rĂ©utilisable │ │ ├── tasks-client.ts # Client API tĂąches │ │ ├── tags-client.ts # Client API tags │ │ ├── daily-client.ts # Client API daily │ │ ├── jira-client.ts # Client API Jira │ │ └── backup-client.ts # Client API backups │ │ │ ├── hooks/ # Hooks React personnalisĂ©s │ │ ├── useTasks.ts # Hook gestion tĂąches │ │ ├── useTags.ts # Hook gestion tags │ │ ├── useDaily.ts # Hook daily notes │ │ ├── useDragAndDrop.ts # Hook drag & drop │ │ └── ... # Autres hooks │ │ │ ├── contexts/ # Contexts React globaux │ │ ├── ThemeContext.tsx # Gestion thĂšme dark/light │ │ ├── TasksContext.tsx # Context tĂąches │ │ ├── UserPreferencesContext.tsx # PrĂ©fĂ©rences utilisateur │ │ └── ... # Autres contexts │ │ │ ├── lib/ # Utilitaires et configuration │ │ ├── types.ts # Types TypeScript partagĂ©s │ │ ├── utils.ts # Fonctions utilitaires │ │ ├── config.ts # Configuration app │ │ ├── status-config.ts # Configuration statuts Kanban │ │ ├── tag-colors.ts # Configuration couleurs tags │ │ └── ... # Autres utilitaires │ │ │ ├── types/ # Types TypeScript spĂ©cifiques │ │ └── next-auth.d.ts # Types NextAuth │ │ │ └── middleware.ts # Middleware Next.js (auth, etc.) │ ├── prisma/ # Prisma ORM │ ├── schema.prisma # SchĂ©ma de base de donnĂ©es │ └── migrations/ # Migrations SQL │ ├── scripts/ # Scripts utilitaires │ ├── backup-manager.ts # Gestion backups │ ├── seed-data.ts # DonnĂ©es de test │ └── ... # Autres scripts │ ├── public/ # Assets statiques │ └── icons/ # IcĂŽnes │ ├── data/ # DonnĂ©es locales │ ├── dev.db # Base SQLite dĂ©veloppement │ ├── prod.db # Base SQLite production │ └── backups/ # Sauvegardes automatiques │ └── [fichiers racine] # Config projet (package.json, etc.) ``` ### Explication dĂ©taillĂ©e des dossiers #### 📁 `src/app/` - Pages et routes Next.js - **Pages publiques** : Routes Next.js qui gĂ©nĂšrent les pages (`page.tsx`) - **API Routes** : Endpoints HTTP dans `/api` pour les opĂ©rations complexes - **Client Components** : Composants client sĂ©parĂ©s (`*PageClient.tsx`) pour l'hydratation - **Layout** : Layout global avec providers (Theme, Auth, etc.) #### 📁 `src/actions/` - Server Actions - **Mutations rapides** : Actions serveur pour les mutations simples (CRUD) - **Cache intelligent** : RĂ©validation automatique avec `revalidatePath()` - **UX optimisĂ©e** : Utilisation avec `useTransition` pour les Ă©tats de chargement #### 📁 `src/components/` - Composants React (UI uniquement) - **RĂšgle stricte** : AUCUNE logique mĂ©tier, uniquement prĂ©sentation - **Organisation par domaine** : `kanban/`, `daily/`, `jira/`, etc. - **Composants UI rĂ©utilisables** : Dans `ui/` pour la cohĂ©rence visuelle - **Formulaires** : Dans `forms/` pour la rĂ©utilisation #### 📁 `src/services/` - Logique mĂ©tier backend - **Point unique d'accĂšs DB** : `core/database.ts` (Pool Prisma) - **SĂ©paration par domaine** : `task-management/`, `integrations/`, `analytics/` - **RĂšgle stricte** : TOUTE la logique mĂ©tier ici, jamais dans les composants - **Services mĂ©tier** : CRUD, calculs, validations, intĂ©grations externes #### 📁 `src/clients/` - Clients HTTP frontend - **Client HTTP de base** : `base/http-client.ts` avec gestion erreurs/tokens - **Clients par domaine** : Un client par API (tasks, tags, jira, etc.) - **RĂšgle stricte** : Uniquement requĂȘtes HTTP, pas de logique mĂ©tier #### 📁 `src/hooks/` - Hooks React personnalisĂ©s - **Orchestration UI** : Gestion Ă©tat React, appels API via clients - **Logique UI uniquement** : Pas de logique mĂ©tier, uniquement coordination #### 📁 `src/contexts/` - Contexts React globaux - **État global** : ThĂšme, prĂ©fĂ©rences, tĂąches, etc. - **Providers** : UtilisĂ©s dans le layout principal #### 📁 `src/lib/` - Utilitaires et configuration - **Types partagĂ©s** : `types.ts` pour la cohĂ©rence TypeScript - **Configurations** : Statuts Kanban, couleurs tags, etc. - **Helpers** : Fonctions utilitaires (dates, formatting, etc.) #### 📁 `prisma/` - Base de donnĂ©es - **SchĂ©ma** : DĂ©finition des modĂšles (`schema.prisma`) - **Migrations** : Historique des changements de schĂ©ma #### 📁 `scripts/` - Scripts utilitaires - **OpĂ©rations** : Backups, seeding, maintenance - **ExĂ©cution** : Via `pnpm run ` ### Stack technique - **Frontend** : Next.js 15, React 19, TypeScript, Tailwind CSS - **Backend** : Next.js API Routes + Server Actions, Prisma ORM - **Base de donnĂ©es** : SQLite (local) → PostgreSQL (production future) - **UI/UX** : Drag & drop (@dnd-kit), composants custom - **IntĂ©grations** : Jira Cloud API REST ### Principes architecturaux 1. **SĂ©paration des responsabilitĂ©s** : - `services/` : Toute la logique mĂ©tier et accĂšs BDD - `components/` : Uniquement prĂ©sentation et UI - `clients/` : Communication HTTP avec les APIs 2. **Server Actions vs API Routes** : - **Server Actions** : Mutations simples et frĂ©quentes (CRUD rapide) - **API Routes** : Endpoints complexes et intĂ©grations externes 3. **Types centralisĂ©s** : `lib/types.ts` pour la cohĂ©rence --- ## 🎼 Utilisation ### DĂ©marrage rapide 1. **CrĂ©er une tĂąche** : - Clic sur `+ Ajouter` dans une colonne - Ou bouton `+ Nouvelle tĂąche` global 2. **Organiser les tĂąches** : - Drag & drop entre colonnes pour changer le statut - Édition inline : clic sur le titre - Tags : saisie avec autocomplete 3. **Filtrer et rechercher** : - Barre de recherche globale - Filtres par statut, prioritĂ©, tags - Tri par date, prioritĂ©, alphabĂ©tique 4. **Daily notes** : - Page `/daily` pour les notes quotidiennes - Checkboxes "Hier" / "Aujourd'hui" - Navigation par date 5. **IntĂ©gration Jira** : - Configuration dans `/settings` - Synchronisation manuelle - TĂąches Jira avec bordure distinctive ### Scripts disponibles ```bash # DĂ©veloppement pnpm run dev # DĂ©marrer en mode dev avec Turbopack pnpm run build # Build de production pnpm run start # DĂ©marrer en production # Base de donnĂ©es pnpm prisma studio # Interface graphique BDD pnpm prisma generate # RegĂ©nĂ©rer le client Prisma pnpm prisma db push # Appliquer le schema Ă  la BDD pnpm prisma migrate dev # CrĂ©er une migration # QualitĂ© de code pnpm run lint # ESLint + Prettier pnpm tsc --noEmit # VĂ©rification TypeScript # Scripts utilitaires pnpm run seed # Ajouter des donnĂ©es de test ``` --- ## 🔧 Configuration avancĂ©e ### ThĂšmes et interface ```typescript // lib/config.ts export const UI_CONFIG = { theme: 'system', // 'light' | 'dark' | 'system' itemsPerPage: 50, // Pagination enableDragAndDrop: true, // Drag & drop autoSave: true, // Sauvegarde auto }; ``` ### Personnalisation des colonnes Modifiez `lib/status-config.ts` pour adapter les colonnes Kanban : ```typescript export const TASK_STATUSES = [ { key: 'backlog', label: 'Backlog', color: 'gray' }, { key: 'todo', label: 'À faire', color: 'blue' }, // ... ajouter vos statuts ]; ``` ### Base de donnĂ©es Par dĂ©faut SQLite local (`dev.db`). Pour PostgreSQL : ```bash # .env.local DATABASE_URL="postgresql://user:pass@localhost:5432/towercontrol" ``` --- ## 🚧 Roadmap ### ✅ Version 2.0 (Actuelle) - Interface Kanban moderne avec drag & drop - SystĂšme de tags avancĂ© - Daily notes avec navigation - IntĂ©gration Jira Cloud complĂšte - ThĂšmes dark/light - Server Actions pour les performances ### 🔄 Version 2.1 (En cours) - [ ] Page dashboard avec analytics - [ ] SystĂšme de sauvegarde automatique (configurable) - [ ] MĂ©triques de productivitĂ© et graphiques - [ ] Actions en lot (sĂ©lection multiple) ### 🎯 Version 2.2 (Futur) - [ ] Sous-tĂąches et hiĂ©rarchie - [ ] Dates d'Ă©chĂ©ance et rappels - [ ] Collaboration et assignation - [ ] Templates de tĂąches - [ ] Mode PWA et offline ### 🚀 Version 3.0 (Vision) - [ ] Analytics d'Ă©quipe avancĂ©es - [ ] IntĂ©grations multiples (GitHub, Linear, etc.) - [ ] API publique et webhooks - [ ] Notifications push et real-time --- ## đŸ€ Contribution ### Guide de dĂ©veloppement 1. **Fork** le repository 2. **CrĂ©er une branche** feature : `git checkout -b feature/ma-feature` 3. **Respecter l'architecture** : services → clients → components 4. **Tests** : Assurer la qualitĂ© avec lint + TypeScript 5. **Commit** avec convention : `feat: description de la feature` 6. **Pull Request** avec description dĂ©taillĂ©e ### Standards de code - **TypeScript strict** obligatoire - **ESLint + Prettier** configurĂ©s - **SĂ©paration des responsabilitĂ©s** : pas de logique mĂ©tier dans les composants - **Naming convention** : camelCase pour les variables, PascalCase pour les composants --- ## 📄 Licence MIT License - Voir le fichier [LICENSE](LICENSE) pour plus de dĂ©tails. --- ## 🙏 Remerciements - **Next.js** pour le framework moderne - **Prisma** pour l'ORM Ă©lĂ©gant - **@dnd-kit** pour le drag & drop fluide - **Tailwind CSS** pour le styling rapide - **Jira API** pour l'intĂ©gration robuste --- **DĂ©veloppĂ© avec ❀ pour optimiser la productivitĂ© des Ă©quipes tech**