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

# Fermez toutes les fenêtres CMD ouvertes
# Ou cliquez sur le X des terminaux

Étape 2 : Démarrer le backend

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)

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 ?

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

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

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

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

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 :

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 !