FamilyPlanner/docs/archive/SOLUTION_MONACO.md

# 🔧 Solution : Monaco ne s'affiche pas

## 🎯 Problème identifié

Monaco est bien dans le code mais **le backend n'est pas démarré** !

## ✅ Solution en 3 étapes

### Étape 1 : Arrêter tous les serveurs
```bash
# Fermez toutes les fenêtres CMD ouvertes
# Ou cliquez sur le X des terminaux
```

### Étape 2 : Démarrer le backend
```bash
cd "C:\Users\philh\OneDrive\Documents\Codes\family-planner\backend"
npm run dev
```

**Attendez de voir :**
```
Server listening on port 3000
✓ Database connected
```

### Étape 3 : Démarrer le frontend (dans un NOUVEAU terminal)
```bash
cd "C:\Users\philh\OneDrive\Documents\Codes\family-planner\frontend"
npm run dev
```

**Attendez de voir :**
```
Local: http://localhost:5173/
```

### Étape 4 : Ouvrir le navigateur
1. Allez sur **http://localhost:5173**
2. Appuyez sur **Ctrl + Shift + R** (rechargement forcé sans cache)
3. Allez dans "Profils" → Sélectionner un enfant
4. Descendez à "Congés scolaires"
5. Cliquez sur le menu déroulant
6. **Monaco devrait maintenant apparaître ! 🇲🇨**

---

## 🚨 Si ça ne marche toujours pas

### Vérification 1 : Les deux serveurs tournent-ils ?

```bash
# Vérifier le backend (port 3000)
netstat -ano | findstr ":3000"

# Vérifier le frontend (port 5173)
netstat -ano | findstr ":5173"
```

**Les deux doivent afficher des lignes LISTENING !**

### Vérification 2 : Console du navigateur

1. Appuyez sur **F12** dans le navigateur
2. Allez dans l'onglet **"Console"**
3. Regardez s'il y a des erreurs en rouge

**Erreurs courantes :**
- `Failed to fetch` → Backend pas démarré
- `Network error` → Mauvaise URL API
- `CORS error` → Problème de configuration

### Vérification 3 : Inspecter le select

1. **F12** → Onglet "Elements"
2. Trouvez le `<select>` avec les zones
3. Regardez si `<option value="monaco">Monaco</option>` existe
4. Si NON → Problème de build frontend

**Solution si Monaco n'est pas dans le HTML :**
```bash
cd frontend
npm run build
npm run dev
```

---

## 📝 Checklist complète

- [ ] Backend démarré sur port 3000
- [ ] Frontend démarré sur port 5173
- [ ] Navigateur ouvert sur http://localhost:5173
- [ ] Cache navigateur vidé (Ctrl + Shift + R)
- [ ] Profil enfant ouvert
- [ ] Menu déroulant "Zone scolaire" ouvert
- [ ] Monaco visible dans la liste

---

## 🎬 Démarrage simple avec le script

**Option rapide : Utilisez le script de démarrage**

Double-cliquez sur :
```
C:\Users\philh\OneDrive\Documents\Codes\family-planner\Lancer-Family-Planner.bat
```

Cela démarre automatiquement :
1. Backend sur port 3000
2. Frontend sur port 5173

**Attendez 30 secondes** que tout compile, puis :
- Ouvrez http://localhost:5173
- Appuyez sur Ctrl + Shift + R

---

## 🐛 Debug avancé

### Voir le code compilé

Dans le navigateur :
1. **F12** → Sources
2. Cherchez `ChildDetailScreen`
3. Trouvez `REGION_LABELS`
4. Vérifiez si `monaco: "Monaco"` existe

### Tester l'API directement

```bash
# Test 1 : Santé du backend
curl http://localhost:3000/api/holidays?region=monaco&year=2025

# Test 2 : Doit retourner des données JSON avec Monaco
```

### Rebuild complet

Si rien ne marche :
```bash
cd "C:\Users\philh\OneDrive\Documents\Codes\family-planner"

# Nettoyer
cd frontend
rm -rf node_modules .vite dist
npm install
npm run dev

# Dans un autre terminal
cd backend
rm -rf dist
npm run build
npm run dev
```

---

## 💡 Astuce : Vérifier dans le code source

Le code est là ligne 522 du fichier :
```
frontend/src/screens/ChildDetailScreen.tsx
```

```typescript
const REGION_LABELS = {
    "zone-a": "Zone A (...)",
    "zone-b": "Zone B (...)",
    "zone-c": "Zone C (...)",
    corse: "Corse",
    monaco: "Monaco",  // ← ICI !
    guadeloupe: "Guadeloupe",
    // ...
};
```

Et utilisé ligne 420 :
```typescript
Object.entries(REGION_LABELS).map(([value, label]) => (
    <option key={value} value={value}>{label}</option>
))
```

**Donc Monaco DOIT apparaître dans le select !**

---

## ✅ Test final

Une fois tout démarré, vous devriez voir dans le menu déroulant :

```
-- Aucune zone sélectionnée --
Zone A (Besançon, Bordeaux, Clermont-Ferrand...)
Zone B (Aix-Marseille, Amiens, Caen...)
Zone C (Créteil, Montpellier, Paris...)
Corse
Monaco          ← ICI ! 🇲🇨
Guadeloupe
Guyane
Martinique
Réunion
Mayotte
```

Si vous voyez "Monaco", **ça marche** ! 🎉

Sélectionnez-le, cliquez "Enregistrer la région", et les congés de Monaco s'afficheront.

---

**Date** : 13 octobre 2025
**Statut** : Le code est correct, juste besoin de démarrer le backend !