workshop-manager/devbook.md

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 :

  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

// 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

// 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

# 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