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:

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

_jsx(ProfileActionBar, {
  onViewProfile: () => navigate(`/profiles/parent/${parent.id}`)
})

2. App.js (Routes)

Ajout (lignes 13-14, 16):

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:

{
  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 !