314 lines
8.5 KiB
Markdown
314 lines
8.5 KiB
Markdown
# 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
|
|
|
|
- [x] Initialiser Next.js 15 avec TypeScript
|
|
- [x] Configurer Tailwind CSS avec le système de CSS Variables
|
|
- [x] Setup ESLint + Prettier
|
|
- [x] 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
|
|
```
|
|
- [x] Configurer les CSS Variables pour le theming (light/dark)
|
|
|
|
---
|
|
|
|
## Phase 2 : Base de Données
|
|
|
|
- [x] Installer et configurer Prisma
|
|
- [x] 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])
|
|
}
|
|
```
|
|
- [x] Générer le client Prisma
|
|
- [x] Créer les migrations initiales
|
|
- [x] 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
|
|
```
|
|
|