FamilyPlanner/docs/archive/PAGES_PROFILS_DETAILLES.md

# Pages de Profils Détaillées - Parents et Grands-parents

## Résumé des changements

Les pages de profil pour **Parents** et **Grands-parents** ont été créées avec la même structure et ergonomie que la page des **Enfants**, conformément à la demande.

## ✅ Pages créées

### 1. ParentDetailScreen.js
**Chemin**: `frontend/src/screens/ParentDetailScreen.js`

**Route**: `/profiles/parent/:parentId`

**Fonctionnalités**:
- ✅ Bouton **Planning** → Navigation vers la page planning du parent
- ✅ Bouton **Importer** → Dialogue d'import de fichier (PDF/image avec OCR)
- ✅ Bouton **Modifier** → Panneau d'édition en overlay (même page)
- ✅ Bouton **Supprimer** → Suppression du profil avec confirmation
- ✅ Section **Congés** avec sélecteur de dates (date picker)
  - Titre du congé
  - Date de début
  - Date de fin
  - Liste des congés enregistrés
  - Suppression individuelle des congés
- ✅ Section **Notes personnelles** éditables

**Différences avec la page Enfant**:
- ❌ Pas de bouton "Connexion Pronote"
- ❌ Pas de section "Congés scolaires"
- ❌ Pas de données Pronote (notes, devoirs, absences, retards)
- ✅ À la place : Section "Congés" personnalisables

### 2. GrandparentDetailScreen.js
**Chemin**: `frontend/src/screens/GrandparentDetailScreen.js`

**Route**: `/profiles/grandparent/:grandparentId`

**Fonctionnalités**: Identiques à ParentDetailScreen

## ✅ Modifications effectuées

### 1. ParentsScreen.js (Page liste des profils)
**Modifications** (lignes 390 et 398):
- Suppression de tous les boutons sauf "Voir profil" pour les parents
- Suppression de tous les boutons sauf "Voir profil" pour les grands-parents

**AVANT**:
```javascript
_jsx(ProfileActionBar, {
  onViewProfile: () => navigate(`/profiles/parent/${parent.id}`),
  onView: () => handleViewAdultPlanning(parent.id, "parent"),
  onOpenPlanningCenter: () => openIntegration(parent.id, parent.fullName, "parent"),
  onEdit: () => setEditing({ type: "parent", id: parent.id }),
  onDelete: () => handleDeleteAdult(parent.id, "parent"),
  importing: !!importing[parent.id],
  connectionsCount: getConnections(parent.id).length
})
```

**APRÈS**:
```javascript
_jsx(ProfileActionBar, {
  onViewProfile: () => navigate(`/profiles/parent/${parent.id}`)
})
```

### 2. App.js (Routes)
**Ajout** (lignes 13-14, 16):
```javascript
import { ParentDetailScreen } from "./screens/ParentDetailScreen";
import { GrandparentDetailScreen } from "./screens/GrandparentDetailScreen";

// Dans les routes:
_jsx(Route, { path: "/profiles/parent/:parentId", element: _jsx(ParentDetailScreen, {}) }),
_jsx(Route, { path: "/profiles/grandparent/:grandparentId", element: _jsx(GrandparentDetailScreen, {}) }),
```

## 🎨 Design et Ergonomie

### Structure identique à ChildDetailScreen
- Header avec avatar circulaire, nom, email, et rôle (Parent/Grand-parent)
- Boutons d'action dans le header (Planning, Importer, Modifier, Supprimer)
- Grille de cartes pour les sections (Congés, Notes personnelles)
- Style glassmorphism avec dégradés et effets de transparence

### Section Congés (remplace Congés scolaires)
```
┌─────────────────────────────────────┐
│ 🏖️ Congés                           │
├─────────────────────────────────────┤
│ Titre du congé                      │
│ [Ex: Vacances d'été        ]        │
│                                      │
│ Date de début    Date de fin        │
│ [2024-07-01]    [2024-07-15]        │
│                        [Ajouter]     │
│                                      │
│ ┌─────────────────────────────────┐ │
│ │ Vacances d'été                  │ │
│ │ Du 1 juillet 2024 au 15 juillet│ │
│ │                    [Supprimer]  │ │
│ └─────────────────────────────────┘ │
└─────────────────────────────────────┘
```

## 🔧 APIs utilisées

### Lecture des profils
- `listParents()` → Charge la liste des parents
- `listGrandParents()` → Charge la liste des grands-parents

### Modification des profils
- `updateParent(parentId, payload)` → Met à jour un parent
- `updateGrandParent(grandparentId, payload)` → Met à jour un grand-parent

### Suppression des profils
- `deleteParent(parentId)` → Supprime un parent
- `deleteGrandParent(grandparentId)` → Supprime un grand-parent

### Import de planning
- `uploadPlanning(profileId, file)` → Import de fichier PDF/image avec OCR

### Gestion des congés
Les congés sont stockés dans le champ `vacations` du profil:
```javascript
{
  vacations: [
    {
      id: "unique-id",
      title: "Vacances d'été",
      startDate: "2024-07-01",
      endDate: "2024-07-15"
    }
  ]
}
```

## 📝 Composants réutilisés

- `ParentProfilePanel` → Panneau d'édition (déjà existant)
- `PlanningIntegrationDialog` → Dialogue d'import (déjà existant)
- `ProfileActionBar` → Barre d'actions simplifiée (déjà existant)

## 🚀 Navigation

### Depuis la page liste (/profiles)
1. Section **Parents**
   - Affiche tous les parents
   - Bouton "Voir profil" → `/profiles/parent/:parentId`

2. Section **Grands-parents**
   - Affiche tous les grands-parents
   - Bouton "Voir profil" → `/profiles/grandparent/:grandparentId`

### Depuis les pages détail
1. Bouton **Planning** → `/profiles/parent/:parentId/planning` ou `/profiles/grandparent/:grandparentId/planning`
2. Bouton **Importer** → Ouvre dialogue d'import
3. Bouton **Modifier** → Ouvre panneau d'édition en overlay
4. Bouton **Supprimer** → Confirmation puis retour à `/profiles`
5. Bouton **← Retour** → Retour à `/profiles`

## ✨ Points clés de l'implémentation

### 1. Ergonomie cohérente
Toutes les pages de profil (enfant, parent, grand-parent) partagent:
- Même structure de header
- Mêmes boutons d'action
- Même style visuel
- Même comportement (overlay pour édition, dialogue pour import)

### 2. Séparation des responsabilités
- **Page liste** (`ParentsScreen`) → Affiche uniquement "Voir profil"
- **Pages détail** → Toutes les actions (Planning, Importer, Modifier, Supprimer)

### 3. Adaptations spécifiques
- **Enfants** → Pronote + Congés scolaires
- **Parents/Grands-parents** → Congés personnalisables avec date picker

## 🧪 Test de l'implémentation

### Étapes de test:
1. Lancer l'application
2. Naviguer vers `/profiles`
3. Vérifier que seul le bouton "Voir profil" apparaît sur les cartes parents/grands-parents
4. Cliquer sur "Voir profil" d'un parent
5. Vérifier la présence des 4 boutons: Planning, Importer, Modifier, Supprimer
6. Tester le bouton **Importer** → Dialogue d'import s'ouvre
7. Tester le bouton **Modifier** → Panneau d'édition s'ouvre en overlay
8. Tester la section **Congés** → Ajouter un congé avec dates
9. Vérifier que le congé apparaît dans la liste
10. Supprimer un congé
11. Tester les **Notes personnelles** → Éditer et sauvegarder

## 📋 Fichiers modifiés/créés

### Créés
- ✅ `frontend/src/screens/ParentDetailScreen.js` (624 lignes)
- ✅ `frontend/src/screens/GrandparentDetailScreen.js` (624 lignes)

### Modifiés
- ✅ `frontend/src/screens/ParentsScreen.js` (lignes 390, 398)
- ✅ `frontend/src/App.js` (lignes 13-14, 16)

### Inchangés (réutilisés)
- `frontend/src/components/ParentProfilePanel.tsx`
- `frontend/src/components/PlanningIntegrationDialog.tsx`
- `frontend/src/components/ProfileActionBar.tsx`
- `frontend/src/services/api-client.js`

---

## 🎯 Résultat final

Les pages de profil pour Parents et Grands-parents ont été créées avec **exactement la même structure et ergonomie** que la page Enfant, avec les adaptations suivantes:

| Fonctionnalité | Enfant | Parent/Grand-parent |
|----------------|--------|---------------------|
| Bouton Planning | ✅ | ✅ |
| Bouton Importer | ✅ | ✅ |
| Bouton Modifier | ✅ | ✅ |
| Bouton Supprimer | ✅ | ✅ |
| Connexion Pronote | ✅ | ❌ |
| Données Pronote | ✅ | ❌ |
| Congés scolaires | ✅ | ❌ |
| Congés personnalisables | ❌ | ✅ |
| Notes personnelles | ✅ | ✅ |

✅ **Toutes les fonctionnalités demandées ont été implémentées avec succès !**