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** :
```javascript
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** :
```javascript
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** :
```javascript
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** :
```javascript
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** :
```javascript
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 ✅