# 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
```