FamilyPlanner/docs/archive/BOUTONS_FONCTIONNELS.md

Boutons Fonctionnels - Page de Profil

✅ État Actuel - Tous les Boutons Sont Connectés

Page de Profil (/profiles/child/:id)

Les 5 boutons d'action sont maintenant entièrement fonctionnels :

---

1. 📅 Bouton PLANNING

Action : Ouvre le planning complet de l'enfant Navigation : /children/:childId/planning Code :

const handleOpenPlanning = () => {
    navigate(`/children/${childId}/planning`);
};

Utilisation :

• Cliquez sur "Planning"
• Vous êtes redirigé vers la page planning de l'enfant
• Affiche le calendrier complet avec tous les événements

---

2. 📥 Bouton IMPORTER

Action : Synchronise les données depuis Pronote Prérequis : Connexion à Pronote active Code :

const handleImportData = async () => {
    if (!pronoteConnected) {
        alert('Veuillez d\'abord vous connecter à Pronote');
        return;
    }

    await loadPronoteData();
    alert('Données importées avec succès !');
};

Utilisation :

• Cliquez sur "Importer"
• Si non connecté à Pronote : message d'erreur
• Si connecté : synchronise notes, devoirs, emploi du temps, absences
• Message de confirmation

Données importées :

• Notes et moyennes
• Emploi du temps
• Devoirs à faire
• Absences et retards
• Informations utilisateur

---

3. ✏️ Bouton MODIFIER

Action : Ouvre le mode édition du profil Navigation : /profiles avec state editingChildId Code :

const handleEditProfile = () => {
    navigate(`/profiles`, { state: { editingChildId: childId } });
};

Utilisation :

• Cliquez sur "Modifier"
• Retour à la page liste des profils
• Le panneau d'édition s'ouvre automatiquement
• Vous pouvez modifier :
  • Nom complet
  • Email
  • Notes
  • Couleur
  • Avatar
  • Zone scolaire

---

4. 🔌 Bouton CONNEXION PRONOTE

Action : Ouvre la modale de connexion à Pronote Fonctionnalité : Authentification sécurisée avec l'API Pronote Code :

const handleConnectPronote = async () => {
    // Ouvre la modale
    setShowPronoteModal(true);

    // Après saisie des identifiants :
    const response = await fetch('http://localhost:3000/api/pronote/login', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${localStorage.getItem('token')}`
        },
        body: JSON.stringify({
            pronoteUrl,
            username: pronoteUsername,
            password: pronotePassword,
            profileId: childId
        })
    });

    if (response.ok) {
        localStorage.setItem('pronote_token', data.token);
        setPronoteConnected(true);
        await loadPronoteData();
    }
};

Utilisation :

1. Cliquez sur "Connexion Pronote"
2. Modale s'ouvre avec 3 champs :
   • URL de l'établissement Pronote
   • Nom d'utilisateur
   • Mot de passe
3. Cliquez sur "Se connecter"
4. Badge passe de rouge à vert
5. Données Pronote apparaissent automatiquement

Sécurité :

• Authentification JWT
• Mot de passe non stocké en clair
• Token expire après 1 heure
• Session sécurisée

---

5. 🗑️ Bouton SUPPRIMER

Action : Supprime le profil de l'enfant (avec confirmation) Fonctionnalité : Archivage (peut être restauré) Code :

const handleDeleteProfile = async () => {
    if (confirm('Êtes-vous sûr de vouloir supprimer ce profil ? Il sera archivé et pourra être restauré depuis Paramètres > Historique & restauration.')) {
        try {
            await deleteChild(childId);
            navigate('/profiles');
        } catch (err) {
            alert('Erreur lors de la suppression du profil');
        }
    }
};

Utilisation :

1. Cliquez sur "Supprimer"
2. Message de confirmation s'affiche
3. Si vous confirmez :
   • Le profil est archivé
   • Redirection vers la liste des profils
4. Peut être restauré depuis Paramètres > Historique & restauration

Sécurité :

• Double confirmation requise
• Archivage au lieu de suppression définitive
• Possibilité de restauration

---

🔄 Workflow Complet

Scénario 1 : Connexion Pronote et Import

1. Page Profil → Badge "Non connecté" (rouge)
2. Clic sur "🔌 Connexion Pronote"
3. Modale s'ouvre → Saisir identifiants
4. Clic sur "Se connecter"
5. Badge passe à "Connecté" (vert)
6. Sections Pronote apparaissent avec données de démo
7. Clic sur "📥 Importer"
8. Données synchronisées depuis Pronote

Scénario 2 : Édition du Profil

1. Page Profil → Clic sur "✏️ Modifier"
2. Redirection vers /profiles
3. Panneau d'édition s'ouvre automatiquement
4. Modifier les informations
5. Clic sur "Enregistrer"
6. Retour à la page profil avec modifications appliquées

Scénario 3 : Voir le Planning

1. Page Profil → Clic sur "📅 Planning"
2. Redirection vers /children/:id/planning
3. Affichage du calendrier complet
4. Retour avec bouton "←Retour"

Scénario 4 : Suppression

1. Page Profil → Clic sur "🗑️ Supprimer"
2. Message de confirmation
3. Si confirmé : Archivage + Redirection
4. Profil peut être restauré depuis Paramètres

---

📋 Résumé des Fonctionnalités

Bouton	Icône	Fonction	Navigation	État
Planning	📅	Ouvre planning complet	/children/:id/planning	✅ Fonctionnel
Importer	📥	Synchronise Pronote	(même page)	✅ Fonctionnel
Modifier	✏️	Édition profil	/profiles + state	✅ Fonctionnel
Connexion Pronote	🔌	Modale connexion	(modale overlay)	✅ Fonctionnel
Supprimer	🗑️	Archive profil	/profiles	✅ Fonctionnel

---

✨ Améliorations par Rapport à l'Ancien Design

Avant

• Boutons éparpillés sur la page liste
• Pas de contexte avant d'agir
• Risque de clics accidentels
• Pas d'intégration Pronote

Après

• Tous les boutons au même endroit
• Contexte complet (notes, planning, etc.)
• Confirmation pour actions critiques
• Intégration Pronote complète
• Meilleure expérience utilisateur

---

🧪 Tests à Effectuer

Test 1 : Planning

• Cliquer sur "Planning"
• Vérifier redirection vers /children/:id/planning
• Vérifier affichage du calendrier
• Vérifier bouton retour

Test 2 : Importer

• Sans connexion Pronote : message d'erreur
• Avec connexion : synchronisation réussie
• Vérifier que les données s'affichent

Test 3 : Modifier

• Cliquer sur "Modifier"
• Vérifier ouverture panneau édition
• Modifier le nom
• Sauvegarder
• Vérifier que les modifications sont appliquées

Test 4 : Connexion Pronote

• Cliquer sur "Connexion Pronote"
• Modale s'ouvre
• Saisir identifiants
• Se connecter
• Badge passe au vert
• Données Pronote apparaissent

Test 5 : Supprimer

• Cliquer sur "Supprimer"
• Message de confirmation
• Confirmer
• Vérifier archivage
• Vérifier possibilité de restauration

---

🔧 Dépannage

Problème : Bouton ne fait rien

Solution :

1. Ouvrir la console du navigateur (F12)
2. Vérifier les erreurs JavaScript
3. Rebuild le frontend : cd frontend && npm run build

Problème : "Importer" ne fonctionne pas

Solution :

1. Vérifier que le serveur API Pronote est lancé (port 3000)
2. Vérifier que vous êtes connecté à Pronote
3. Vérifier la console pour les erreurs

Problème : Modification ne s'applique pas

Solution :

1. Vérifier que le backend est lancé (port 3001)
2. Vérifier la connexion à la base de données
3. Rafraîchir la page

---

Date : 13 Octobre 2025 Version : 2.0.0 État : Tous les boutons fonctionnels ✅