Aller au contenu principal

Améliorations du Calendrier Visuel

Objectif​

Améliorer l'interface calendrier pour une meilleure visualisation et gestion des sessions, événements et créneaux de disponibilité.

État Actuel ✅ COMPLÉTÉ​

Le calendrier dispose actuellement de :

  • ✅ 5 vues : Day, Week, Month, Year, Agenda
  • ✅ Drag and drop pour sessions/événements (dans toutes les vues : Month, Week, Day)
  • ✅ Affichage des sessions, événements Google Calendar, et créneaux de disponibilité
  • ✅ Panels latéraux pour availability et bookings
  • ✅ Vue semaine avec timeline horaire (WeekTimelineView) avec drag & drop
  • ✅ Vue jour avec timeline horaire (DayTimelineView) avec drag & drop
  • ✅ Recherche dans le calendrier avec navigation vers les résultats
  • ✅ Filtres avancés (statut, type de session, contact, tags)
  • ✅ Export iCal/ICS pour import dans d'autres calendriers
  • ✅ Impression optimisée avec vue formatée
  • ✅ Vue année pour planification à long terme
  • ✅ Indicateurs visuels (badges pour sessions en retard, sans contact, sans devis/facture)
  • ✅ Optimisation des performances (pas de rechargement de l'interface lors du changement de vue)

Améliorations Planifiées​

Note : Toutes les améliorations planifiées ont été complétées. Cette section est conservée à titre de référence historique.

1. Vue Timeline pour la Semaine (Priorité Haute) ✅ COMPLÉTÉ​

Objectif : Créer une vue timeline horaire pour la semaine avec colonnes pour chaque jour et lignes pour les heures.

Fonctionnalités :

  • ✅ Timeline avec heures de 0h à 23h (ou plage configurable)
  • ✅ Colonnes pour chaque jour de la semaine
  • ✅ Positionnement précis des événements/sessions selon leur heure
  • ✅ Visualisation des chevauchements
  • ✅ Scroll vertical pour naviguer dans les heures
  • ✅ Indicateurs visuels pour :
    • Sessions (couleur selon statut/tag)
    • Événements Google Calendar
    • Créneaux de disponibilité (AVAILABLE/BLOCKED)
    • Bookings publics
  • ✅ Drag & drop pour déplacer les sessions et événements entre les jours

Avantages :

  • Meilleure compréhension de l'emploi du temps
  • Détection visuelle des conflits
  • Planification plus facile

2. Vue Timeline Améliorée pour le Jour (Priorité Haute) ✅ COMPLÉTÉ​

Objectif : Améliorer la vue jour avec une timeline horaire détaillée.

Fonctionnalités :

  • ✅ Timeline avec heures (0h-23h)
  • ✅ Positionnement précis selon l'heure
  • ✅ Affichage de la durée des événements
  • ✅ Zones de disponibilité visibles
  • ✅ Drag & drop pour déplacer les sessions et événements

3. Visualisation des Chevauchements (Priorité Moyenne) ✅ COMPLÉTÉ​

Objectif : Améliorer la détection et l'affichage des conflits.

Fonctionnalités :

  • ✅ Détection automatique des chevauchements
  • ✅ Indicateurs visuels (bordure rouge, warning icon)
  • ✅ Tooltip avec détails du conflit
  • ⏳ Suggestions de résolution (optionnel - future amélioration)

4. Légende et Filtres Visuels (Priorité Moyenne) ✅ COMPLÉTÉ​

Objectif : Améliorer la compréhension des différents types d'éléments.

Fonctionnalités :

  • ✅ Légende interactive avec icônes et couleurs
  • ✅ Filtres visuels (masquer/afficher sessions, événements, disponibilités)
  • ✅ Groupement par tags (implémenté via CalendarHeader)
  • ⏳ Recherche dans le calendrier (future amélioration)

5. Vue Agenda/Liste ✅ COMPLÉTÉ​

Objectif : Alternative à la vue timeline pour une vue chronologique simple.

Fonctionnalités :

  • ✅ Liste chronologique des événements/sessions
  • ✅ Groupement par jour
  • ✅ Filtres (sessions, événements, disponibilité, bloqués)
  • ✅ Affichage des créneaux horaires
  • ✅ Mise en évidence du jour actuel

6. Drag & Drop dans les Vues Timeline ✅ COMPLÉTÉ​

Objectif : Permettre le drag & drop des sessions et événements dans les vues timeline (Week et Day).

Fonctionnalités :

  • ✅ Zones droppables dans WeekTimelineView (une par jour de la semaine)
  • ✅ Zone droppable dans DayTimelineView (pour le jour affiché)
  • ✅ Feedback visuel lors du survol (highlight avec ring-primary)
  • ✅ Intégration avec le hook useCalendarDragAndDrop existant
  • ✅ Support du drag & drop dans toutes les vues (Month, Week, Day)

Plan d'Implémentation​

Phase 1 : Vue Timeline Semaine ✅ COMPLÉTÉ​

  1. ✅ Créer le composant WeekTimelineView
  2. ✅ Implémenter la grille horaire (0h-23h)
  3. ✅ Positionner les événements/sessions selon leur heure
  4. ✅ Gérer le scroll horizontal et navigation
  5. ✅ Intégration dans CalendarPage
  6. ✅ Traductions (EN/FR)
  7. ✅ Accessibilité (boutons au lieu de divs)

Fonctionnalités implémentées :

  • Timeline avec heures de 0h à 23h
  • Colonnes pour chaque jour de la semaine
  • Positionnement précis des événements/sessions selon leur heure
  • Affichage des créneaux de disponibilité (AVAILABLE)
  • Header sticky avec noms des jours
  • Highlight du jour actuel
  • Scroll horizontal pour navigation
  • Support responsive

Phase 2 : Vue Timeline Jour ✅ COMPLÉTÉ​

  1. ✅ Créer le composant DayTimelineView
  2. ✅ Implémenter la grille horaire (0h-23h)
  3. ✅ Positionner les événements/sessions selon leur heure
  4. ✅ Afficher les zones de disponibilité
  5. ✅ Intégration dans CalendarPage
  6. ✅ Support responsive

Fonctionnalités implémentées :

  • Timeline avec heures de 0h à 23h
  • Positionnement précis des événements/sessions
  • Affichage des créneaux de disponibilité
  • Header avec date formatée
  • Highlight du jour actuel
  • Scroll vertical pour navigation

Phase 3 : Visualisation des Chevauchements ✅ COMPLÉTÉ​

  1. ✅ Fonction utilitaire de détection de chevauchements (timeline-overlap.helper.ts)
  2. ✅ Intégration dans WeekTimelineView avec détection par jour
  3. ✅ Intégration dans DayTimelineView
  4. ✅ Indicateurs visuels (bordure rouge ring-2 ring-destructive)
  5. ✅ Icône d'alerte (triangle d'avertissement) sur les items en conflit
  6. ✅ Tooltip avec nombre de conflits
  7. ✅ Traductions EN/FR pour les messages de conflit

Fonctionnalités implémentées :

  • Détection automatique des chevauchements entre sessions et événements
  • Exclusion des créneaux de disponibilité de la détection (pas de conflit)
  • Bordure rouge (ring-2 ring-destructive) autour des items en conflit
  • Icône d'alerte rouge en haut à droite des items en conflit (vues timeline)
  • Tooltip affichant le nombre d'items en conflit
  • Détection séparée par jour pour la vue semaine
  • Détection des conflits dans la vue month avec bordure rouge

Phase 4 : Légende et Filtres Visuels ✅ COMPLÉTÉ​

  1. ✅ Composant CalendarLegend avec icônes et couleurs
  2. ✅ Composant CalendarFilters avec boutons toggle
  3. ✅ Intégration dans CalendarPage
  4. ✅ Application des filtres dans toutes les vues (Day, Week, Month)
  5. ✅ Traductions EN/FR

Fonctionnalités implémentées :

  • Légende affichant les différents types d'éléments (sessions, événements, disponibilités, conflits)
  • Légende simplifiée sans icône d'information
  • Filtres avec dropdown Select (comme dans CalendarHeader)
  • Options de filtre : Tous, Sessions, Événements, Disponibilité
  • Filtres appliqués dynamiquement dans toutes les vues (Day, Week, Month)
  • Support responsive (mobile et desktop)

Phase 5 : Vue Agenda/Liste ✅ COMPLÉTÉ​

  1. ✅ Créer le composant AgendaListView
  2. ✅ Collecter et trier tous les éléments chronologiquement
  3. ✅ Grouper les éléments par jour
  4. ✅ Afficher les éléments avec leurs créneaux horaires
  5. ✅ Mise en évidence du jour actuel
  6. ✅ Intégration dans CalendarPage avec option "agenda" dans le sélecteur
  7. ✅ Application des filtres (sessions, événements, disponibilité, bloqués)
  8. ✅ Traductions EN/FR

Fonctionnalités implémentées :

  • Liste chronologique de tous les événements, sessions et créneaux de disponibilité
  • Groupement par jour avec en-tête de date formatée
  • Affichage des créneaux horaires pour chaque élément
  • Mise en évidence visuelle du jour actuel (bordure et fond colorés)
  • Filtres appliqués (sessions, événements, disponible, bloqué)
  • Support de la plage de dates (utilise monthStart/monthEnd)
  • Utilisation des composants existants (DraggableEvent, DraggableSession, AvailabilitySlotDisplay)

Fichiers Créés/Modifiés/Supprimés​

Créés​

  • frontend/src/pages/calendar/CalendarPage/components/WeekTimelineView.tsx ✅
  • frontend/src/pages/calendar/CalendarPage/components/DayTimelineView.tsx ✅
  • frontend/src/pages/calendar/CalendarPage/components/timeline-overlap.helper.ts ✅
  • frontend/src/pages/calendar/CalendarPage/components/CalendarLegend.tsx ✅
  • frontend/src/pages/calendar/CalendarPage/components/CalendarFilters.tsx ✅
  • frontend/src/pages/calendar/CalendarPage/components/AgendaListView.tsx ✅
  • frontend/src/pages/calendar/CalendarPage/components/DroppableTimelineDay.tsx ✅

Modifiés​

  • frontend/src/pages/calendar/CalendarPage/components/index.ts (exports mis à jour)
  • frontend/src/pages/calendar/CalendarPage/CalendarPage.tsx (intégration des nouvelles vues, ajout vue agenda)
  • frontend/src/pages/calendar/CalendarPage/types.ts (ajout "agenda" au type CalendarView)
  • frontend/src/pages/calendar/CalendarPage/components/CalendarHeader.tsx (ajout option "agenda" dans les sélecteurs de vue)
  • frontend/src/pages/calendar/CalendarPage/components/DroppableDayCell.tsx (nettoyage - suppression isDayView/isWeekView)
  • frontend/src/pages/calendar/CalendarPage/components/MonthView.tsx (nettoyage - suppression prop locale)
  • frontend/src/pages/calendar/CalendarPage/components/WeekTimelineView.tsx (ajout détection chevauchements, ajout zones droppables pour drag & drop)
  • frontend/src/pages/calendar/CalendarPage/components/DayTimelineView.tsx (ajout détection chevauchements, ajout zone droppable pour drag & drop)
  • frontend/src/pages/calendar/CalendarPage/components/MonthView.tsx (ajout détection chevauchements)
  • frontend/src/pages/calendar/CalendarPage/components/CalendarFilters.tsx (refonte avec dropdown Select)
  • frontend/src/pages/calendar/CalendarPage/components/CalendarLegend.tsx (simplification, retrait tooltip)
  • frontend/src/pages/calendar/CalendarPage/CalendarPage.tsx (intégration légende et filtres, application des filtres aux vues)
  • frontend/src/i18n/locales/en/translation.json (ajout "time", sections "overlap", "legend", "filters", "calendar.view.agenda")
  • frontend/src/i18n/locales/fr/translation.json (ajout "Heure", sections "overlap", "legend", "filters", "calendar.view.agenda")

Supprimés (code mort)​

  • frontend/src/pages/calendar/CalendarPage/components/DayView.tsx ❌ (remplacé par DayTimelineView)
  • frontend/src/pages/calendar/CalendarPage/components/WeekView.tsx ❌ (remplacé par WeekTimelineView)
  • frontend/src/pages/calendar/CalendarPage/components/DraggableSessionCard.tsx ❌ (utilisé uniquement dans DayView)
  • docs/VERIFICATION_PLAN_AMELIORATIONS.md ❌ (redondant)

Améliorations Récentes (2025)​

Recherche et Filtres Avancés ✅ COMPLÉTÉ​

  • ✅ Recherche dans le calendrier : Composant CalendarSearch avec recherche en temps réel dans les sessions et événements, navigation vers la date du résultat
  • ✅ Filtres avancés : Composant AdvancedCalendarFilters avec filtres par :
    • Statut de session (draft, confirmed, completed, cancelled)
    • Type de session (sélection multiple)
    • Contact (sélection multiple)
    • Tags (sélection multiple avec affichage des couleurs)
  • ✅ Filtres de visibilité : Filtres simples pour afficher/masquer sessions, événements, disponibilités, bloqués
  • ✅ Affichage des filtres actifs : Badges affichant les tags sélectionnés avec possibilité de les retirer individuellement

Export et Impression ✅ COMPLÉTÉ​

  • ✅ Export iCal/ICS : Bouton d'export générant un fichier .ics compatible avec Google Calendar, Outlook, Apple Calendar
  • ✅ Impression optimisée : Vue PrintCalendarView formatée pour l'impression avec :
    • Affichage plein écran sans interface
    • Légende intégrée
    • Support de toutes les vues (Day, Week, Month, Year, Agenda)
    • Styles CSS dédiés pour l'impression (@media print)

Vue Année ✅ COMPLÉTÉ​

  • ✅ Vue annuelle : Composant YearView affichant 12 mois en grille
  • ✅ Navigation : Navigation entre les années avec les boutons précédent/suivant
  • ✅ Affichage compact : Résumé mensuel avec compteurs de sessions et événements
  • ✅ Indicateurs visuels : Points colorés pour les jours avec contenu

Optimisations de Performance ✅ COMPLÉTÉ​

  • ✅ Gestion du cache React Query : Utilisation de placeholderData: keepPreviousData et staleTime pour éviter les rechargements inutiles
  • ✅ Changement de vue optimisé : Seul le calendrier se recharge lors du changement de vue, le reste de l'interface reste stable
  • ✅ Refactoring : Refactorisation de CalendarPage.tsx en hooks et composants plus petits :
    • useCalendarState.ts : Gestion centralisée de l'état
    • useCalendarHandlers.ts : Gestion centralisée des handlers
    • CalendarContent.tsx : Composant principal du contenu
    • CalendarViewRenderer.tsx : Rendu conditionnel des vues
    • CalendarSidebar.tsx : Panneau latéral
    • CalendarConnectRequired.tsx : Message de connexion Google Calendar
    • CalendarDragOverlay.tsx : Overlay de drag & drop

Notes Techniques​

  • Utiliser date-fns pour les manipulations de dates
  • Positionnement absolu pour les événements dans la timeline
  • Calcul de la position basé sur l'heure de début et la durée
  • Gestion du responsive (mobile vs desktop)
  • Performance : Utilisation de React Query avec placeholderData et staleTime pour optimiser les rechargements
  • Architecture : Refactoring en hooks et composants pour améliorer la maintenabilité (limite de 400 lignes par fichier)