chore: init
This commit is contained in:
Julien Froidefond
313
devbook.md
Normal file
313
devbook.md
Normal file
@@ -0,0 +1,313 @@
|
||||
# SWOT Manager - Development Book
|
||||
|
||||
Application de gestion d'ateliers SWOT pour entretiens managériaux.
|
||||
|
||||
## Stack Technique
|
||||
|
||||
- **Framework**: Next.js 15 (App Router)
|
||||
- **Styling**: Tailwind CSS + CSS Variables theming
|
||||
- **Auth**: NextAuth.js v5
|
||||
- **Database**: PostgreSQL + Prisma
|
||||
- **Drag & Drop**: @hello-pangea/dnd (fork maintenu de react-beautiful-dnd)
|
||||
- **State**: React Context + Server Actions
|
||||
|
||||
---
|
||||
|
||||
## Phase 1 : Setup Initial
|
||||
|
||||
- [ ] Initialiser Next.js 15 avec TypeScript
|
||||
- [ ] Configurer Tailwind CSS avec le système de CSS Variables
|
||||
- [ ] Setup ESLint + Prettier
|
||||
- [ ] Créer la structure de dossiers
|
||||
```
|
||||
src/
|
||||
├── app/
|
||||
│ ├── api/
|
||||
│ ├── (auth)/
|
||||
│ │ ├── login/
|
||||
│ │ └── register/
|
||||
│ ├── sessions/
|
||||
│ │ ├── [id]/
|
||||
│ │ └── new/
|
||||
│ └── layout.tsx
|
||||
├── components/
|
||||
│ ├── ui/ # Composants réutilisables
|
||||
│ ├── swot/ # Composants SWOT
|
||||
│ └── layout/ # Header, Sidebar, etc.
|
||||
├── services/ # Logique métier + DB
|
||||
├── lib/ # Types, utils
|
||||
├── contexts/ # React Contexts
|
||||
└── actions/ # Server Actions
|
||||
```
|
||||
- [ ] Configurer les CSS Variables pour le theming (light/dark)
|
||||
|
||||
---
|
||||
|
||||
## Phase 2 : Base de Données
|
||||
|
||||
- [ ] Installer et configurer Prisma
|
||||
- [ ] Créer le schéma de base de données :
|
||||
```prisma
|
||||
model User {
|
||||
id String @id @default(cuid())
|
||||
email String @unique
|
||||
name String?
|
||||
password String
|
||||
sessions Session[]
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
}
|
||||
|
||||
model Session {
|
||||
id String @id @default(cuid())
|
||||
title String
|
||||
collaborator String # Nom du collaborateur évalué
|
||||
date DateTime @default(now())
|
||||
userId String
|
||||
user User @relation(fields: [userId], references: [id])
|
||||
items SwotItem[]
|
||||
actions Action[]
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
}
|
||||
|
||||
enum SwotCategory {
|
||||
STRENGTH
|
||||
WEAKNESS
|
||||
OPPORTUNITY
|
||||
THREAT
|
||||
}
|
||||
|
||||
model SwotItem {
|
||||
id String @id @default(cuid())
|
||||
content String
|
||||
category SwotCategory
|
||||
order Int @default(0)
|
||||
sessionId String
|
||||
session Session @relation(fields: [sessionId], references: [id], onDelete: Cascade)
|
||||
actionLinks ActionLink[]
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
}
|
||||
|
||||
model Action {
|
||||
id String @id @default(cuid())
|
||||
title String
|
||||
description String?
|
||||
priority Int @default(0) # 0=low, 1=medium, 2=high
|
||||
status String @default("todo") # todo, in_progress, done
|
||||
dueDate DateTime?
|
||||
sessionId String
|
||||
session Session @relation(fields: [sessionId], references: [id], onDelete: Cascade)
|
||||
links ActionLink[]
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
}
|
||||
|
||||
model ActionLink {
|
||||
id String @id @default(cuid())
|
||||
actionId String
|
||||
action Action @relation(fields: [actionId], references: [id], onDelete: Cascade)
|
||||
swotItemId String
|
||||
swotItem SwotItem @relation(fields: [swotItemId], references: [id], onDelete: Cascade)
|
||||
|
||||
@@unique([actionId, swotItemId])
|
||||
}
|
||||
```
|
||||
- [ ] Générer le client Prisma
|
||||
- [ ] Créer les migrations initiales
|
||||
- [ ] Créer le service database.ts (pool de connexion)
|
||||
|
||||
---
|
||||
|
||||
## Phase 3 : Authentification
|
||||
|
||||
- [ ] Installer NextAuth.js v5
|
||||
- [ ] Configurer le provider Credentials (email/password)
|
||||
- [ ] Créer les pages :
|
||||
- [ ] `/login` - Page de connexion
|
||||
- [ ] `/register` - Page d'inscription
|
||||
- [ ] Créer le service auth.ts
|
||||
- [ ] Protéger les routes avec middleware
|
||||
- [ ] Créer le composant AuthProvider
|
||||
|
||||
---
|
||||
|
||||
## Phase 4 : Layout & Navigation
|
||||
|
||||
- [ ] Créer le layout principal avec :
|
||||
- [ ] Header avec navigation et user menu
|
||||
- [ ] Theme toggle (dark/light)
|
||||
- [ ] Créer les composants UI de base :
|
||||
- [ ] Button
|
||||
- [ ] Card
|
||||
- [ ] Input
|
||||
- [ ] Modal
|
||||
- [ ] Badge
|
||||
- [ ] Créer la page d'accueil `/` - Dashboard avec liste des sessions
|
||||
|
||||
---
|
||||
|
||||
## Phase 5 : Gestion des Sessions SWOT
|
||||
|
||||
- [ ] Créer le service `sessions.ts`
|
||||
- [ ] Créer les Server Actions pour les sessions :
|
||||
- [ ] `createSession`
|
||||
- [ ] `updateSession`
|
||||
- [ ] `deleteSession`
|
||||
- [ ] `getSession`
|
||||
- [ ] `getUserSessions`
|
||||
- [ ] Créer les pages :
|
||||
- [ ] `/sessions` - Liste des sessions
|
||||
- [ ] `/sessions/new` - Création de session
|
||||
- [ ] `/sessions/[id]` - Vue détaillée de la session SWOT
|
||||
- [ ] Créer les composants :
|
||||
- [ ] `SessionCard` - Carte de session dans la liste
|
||||
- [ ] `SessionForm` - Formulaire création/édition
|
||||
|
||||
---
|
||||
|
||||
## Phase 6 : Matrice SWOT Interactive
|
||||
|
||||
- [ ] Installer @hello-pangea/dnd
|
||||
- [ ] Créer les composants SWOT :
|
||||
- [ ] `SwotBoard` - Container principal de la matrice
|
||||
- [ ] `SwotQuadrant` - Un quadrant (S, W, O, T)
|
||||
- [ ] `SwotCard` - Une carte dans un quadrant
|
||||
- [ ] `SwotCardForm` - Formulaire ajout/édition de carte
|
||||
- [ ] Implémenter le drag & drop :
|
||||
- [ ] Réorganisation dans un même quadrant
|
||||
- [ ] Déplacement entre quadrants
|
||||
- [ ] Créer les Server Actions pour les items :
|
||||
- [ ] `createSwotItem`
|
||||
- [ ] `updateSwotItem`
|
||||
- [ ] `deleteSwotItem`
|
||||
- [ ] `reorderSwotItems`
|
||||
- [ ] Édition inline des cartes
|
||||
|
||||
---
|
||||
|
||||
## Phase 7 : Système de Liaison & Actions
|
||||
|
||||
- [ ] Créer le mode "liaison" :
|
||||
- [ ] Bouton pour activer le mode liaison
|
||||
- [ ] Sélection multiple d'items SWOT
|
||||
- [ ] Visualisation des items sélectionnés (highlight)
|
||||
- [ ] Créer les composants Actions :
|
||||
- [ ] `ActionPanel` - Panneau des actions croisées
|
||||
- [ ] `ActionCard` - Une action avec ses liens
|
||||
- [ ] `ActionForm` - Formulaire création/édition d'action
|
||||
- [ ] `LinkedItemsBadges` - Badges des items liés
|
||||
- [ ] Créer les Server Actions pour les actions :
|
||||
- [ ] `createAction`
|
||||
- [ ] `updateAction`
|
||||
- [ ] `deleteAction`
|
||||
- [ ] `linkItemToAction`
|
||||
- [ ] `unlinkItemFromAction`
|
||||
- [ ] Visualisation des liens sur la matrice (highlight on hover)
|
||||
|
||||
---
|
||||
|
||||
## Phase 8 : Roadmap & Priorisation
|
||||
|
||||
- [ ] Créer la vue Roadmap :
|
||||
- [ ] `RoadmapView` - Vue timeline des actions
|
||||
- [ ] Filtres par statut, priorité
|
||||
- [ ] Tri par date d'échéance
|
||||
- [ ] Drag & drop pour réordonner les priorités
|
||||
- [ ] Mise à jour du statut des actions (todo → in_progress → done)
|
||||
- [ ] Vue Kanban alternative des actions
|
||||
|
||||
---
|
||||
|
||||
## Phase 9 : Export & Partage
|
||||
|
||||
- [ ] Export PDF de la matrice SWOT
|
||||
- [ ] Export PDF de la roadmap
|
||||
- [ ] Génération de lien de partage en lecture seule
|
||||
- [ ] Copie au format texte pour coller dans un email
|
||||
|
||||
---
|
||||
|
||||
## Phase 10 : Polish & UX
|
||||
|
||||
- [ ] Animations et transitions fluides
|
||||
- [ ] États de chargement (skeletons)
|
||||
- [ ] Messages de confirmation et toasts
|
||||
- [ ] Raccourcis clavier :
|
||||
- [ ] `N` - Nouvelle carte
|
||||
- [ ] `Escape` - Annuler
|
||||
- [ ] `Enter` - Valider
|
||||
- [ ] Responsive design (tablette minimum)
|
||||
- [ ] Mode présentation (masquer les contrôles)
|
||||
|
||||
---
|
||||
|
||||
## Phase 11 : Bonus (Optionnel)
|
||||
|
||||
- [ ] Templates de sessions SWOT prédéfinis
|
||||
- [ ] Collaboration temps réel (plusieurs personnes sur la même session)
|
||||
- [ ] Historique des modifications
|
||||
- [ ] Import depuis Miro/Trello
|
||||
- [ ] Intégration calendrier pour les échéances
|
||||
- [ ] Notifications par email pour les deadlines
|
||||
|
||||
---
|
||||
|
||||
## Notes Techniques
|
||||
|
||||
### Structure des Server Actions
|
||||
|
||||
```typescript
|
||||
// actions/swot-items.ts
|
||||
'use server'
|
||||
|
||||
import { swotService } from '@/services/swot';
|
||||
import { revalidatePath } from 'next/cache';
|
||||
|
||||
export async function createSwotItem(sessionId: string, data: CreateSwotItemInput) {
|
||||
const item = await swotService.createItem(sessionId, data);
|
||||
revalidatePath(`/sessions/${sessionId}`);
|
||||
return { success: true, data: item };
|
||||
}
|
||||
```
|
||||
|
||||
### Pattern de Liaison
|
||||
|
||||
```typescript
|
||||
// Mode liaison : state dans le composant parent
|
||||
const [linkMode, setLinkMode] = useState(false);
|
||||
const [selectedItems, setSelectedItems] = useState<string[]>([]);
|
||||
|
||||
// Quand 2+ items sélectionnés, proposer création d'action
|
||||
if (selectedItems.length >= 2) {
|
||||
// Ouvrir modal de création d'action avec items pré-sélectionnés
|
||||
}
|
||||
```
|
||||
|
||||
### Visualisation des Liens
|
||||
|
||||
- Au hover d'une action : highlight des items liés
|
||||
- Au hover d'un item : highlight des actions liées
|
||||
- Couleurs par type de croisement (SO, ST, WO, WT)
|
||||
|
||||
---
|
||||
|
||||
## Commandes Utiles
|
||||
|
||||
```bash
|
||||
# Lancer le dev server
|
||||
npm run dev
|
||||
|
||||
# Prisma
|
||||
npx prisma migrate dev --name <name>
|
||||
npx prisma generate
|
||||
npx prisma studio
|
||||
|
||||
# Build
|
||||
npm run build
|
||||
|
||||
# Lint
|
||||
npm run lint
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user