feat: Gestion du planning [3]

Front-End/src/components/Calendar/Calendar.js

@@ -0,0 +1,254 @@
+import React, { useEffect, useState } from 'react';
+import { usePlanning } from '@/context/PlanningContext';
+import WeekView from '@/components/Calendar/WeekView';
+import MonthView from '@/components/Calendar/MonthView';
+import YearView from '@/components/Calendar/YearView';
+import PlanningView from '@/components/Calendar/PlanningView';
+import ToggleView from '@/components/ToggleView';
+import { ChevronLeft, ChevronRight, Plus, ChevronDown } from 'lucide-react';
+import {
+  format,
+  addWeeks,
+  addMonths,
+  addYears,
+  subWeeks,
+  subMonths,
+  subYears,
+  getWeek,
+  setMonth,
+  setYear,
+} from 'date-fns';
+import { fr } from 'date-fns/locale';
+import { AnimatePresence, motion } from 'framer-motion'; // Ajouter cet import
+import logger from '@/utils/logger';
+
+const Calendar = ({ modeSet, onDateClick, onEventClick }) => {
+  const {
+    currentDate,
+    setCurrentDate,
+    viewType,
+    setViewType,
+    events,
+    hiddenSchedules,
+  } = usePlanning();
+  const [visibleEvents, setVisibleEvents] = useState([]);
+  const [showDatePicker, setShowDatePicker] = useState(false);
+
+  // Ajouter ces fonctions pour la gestion des mois et années
+  const months = Array.from({ length: 12 }, (_, i) => ({
+    value: i,
+    label: format(new Date(2024, i, 1), 'MMMM', { locale: fr }),
+  }));
+
+  const years = Array.from({ length: 10 }, (_, i) => ({
+    value: new Date().getFullYear() - 5 + i,
+    label: new Date().getFullYear() - 5 + i,
+  }));
+
+  const handleMonthSelect = (monthIndex) => {
+    setCurrentDate(setMonth(currentDate, monthIndex));
+    setShowDatePicker(false);
+  };
+
+  const handleYearSelect = (year) => {
+    setCurrentDate(setYear(currentDate, year));
+    setShowDatePicker(false);
+  };
+
+  useEffect(() => {
+    // S'assurer que le filtrage est fait au niveau parent
+    const filtered = events?.filter(
+      (event) => !hiddenSchedules.includes(event.planning)
+    );
+    setVisibleEvents(filtered);
+    logger.debug('Events filtrés:', filtered); // Debug
+  }, [events, hiddenSchedules]);
+
+  const navigateDate = (direction) => {
+    const getNewDate = () => {
+      switch (viewType) {
+        case 'week':
+          return direction === 'next'
+            ? addWeeks(currentDate, 1)
+            : subWeeks(currentDate, 1);
+        case 'month':
+          return direction === 'next'
+            ? addMonths(currentDate, 1)
+            : subMonths(currentDate, 1);
+        case 'year':
+          return direction === 'next'
+            ? addYears(currentDate, 1)
+            : subYears(currentDate, 1);
+        default:
+          return currentDate;
+      }
+    };
+
+    setCurrentDate(getNewDate());
+  };
+
+  return (
+    <div className="flex-1 flex h-full flex-col">
+      <div className="flex items-center justify-between p-4 bg-white sticky top-0 z-30 border-b shadow-sm h-[64px]">
+        {/* Navigation à gauche */}
+        <div className="flex items-center gap-4">
+          <button
+            onClick={() => setCurrentDate(new Date())}
+            className="px-3 py-1.5 text-sm font-medium text-gray-700 hover:text-gray-900 bg-gray-100 hover:bg-gray-200 rounded-md transition-colors"
+          >
+            Aujourd&apos;hui
+          </button>
+          <button
+            onClick={() => navigateDate('prev')}
+            className="p-2 hover:bg-gray-100 rounded-full"
+          >
+            <ChevronLeft className="w-5 h-5" />
+          </button>
+
+          {/* Menu déroulant pour le mois/année */}
+          <div className="relative">
+            <button
+              onClick={() => setShowDatePicker(!showDatePicker)}
+              className="flex items-center gap-1 px-2 py-1 hover:bg-gray-100 rounded-md"
+            >
+              <h2 className="text-xl font-semibold">
+                {format(
+                  currentDate,
+                  viewType === 'year' ? 'yyyy' : 'MMMM yyyy',
+                  { locale: fr }
+                )}
+              </h2>
+              <ChevronDown className="w-4 h-4" />
+            </button>
+
+            {/* Menu de sélection du mois/année */}
+            {showDatePicker && (
+              <div className="absolute top-full left-0 mt-1 bg-white border border-gray-200 rounded-lg shadow-lg z-50 w-64">
+                {viewType !== 'year' && (
+                  <div className="p-2 border-b">
+                    <div className="grid grid-cols-3 gap-1">
+                      {months.map((month) => (
+                        <button
+                          key={month.value}
+                          onClick={() => handleMonthSelect(month.value)}
+                          className="p-2 text-sm hover:bg-gray-100 rounded-md"
+                        >
+                          {month.label}
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+                )}
+                <div className="p-2">
+                  <div className="grid grid-cols-3 gap-1">
+                    {years.map((year) => (
+                      <button
+                        key={year.value}
+                        onClick={() => handleYearSelect(year.value)}
+                        className="p-2 text-sm hover:bg-gray-100 rounded-md"
+                      >
+                        {year.label}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+
+          <button
+            onClick={() => navigateDate('next')}
+            className="p-2 hover:bg-gray-100 rounded-full"
+          >
+            <ChevronRight className="w-5 h-5" />
+          </button>
+        </div>
+
+        {/* Numéro de semaine au centre */}
+        {viewType === 'week' && (
+          <div className="flex items-center gap-1 text-sm font-medium text-gray-600">
+            <span>Semaine</span>
+            <span className="px-2 py-1 bg-gray-100 rounded-md">
+              {getWeek(currentDate, { weekStartsOn: 1 })}
+            </span>
+          </div>
+        )}
+
+        {/* Contrôles à droite */}
+        <div className="flex items-center gap-4">
+          <ToggleView viewType={viewType} setViewType={setViewType} />
+          <button
+            onClick={onDateClick}
+            className="w-10 h-10 flex items-center justify-center bg-emerald-600 text-white rounded-full hover:bg-emerald-700 shadow-md transition-colors"
+          >
+            <Plus className="w-5 h-5" />
+          </button>
+        </div>
+      </div>
+
+      {/* Contenu scrollable */}
+      <div className="flex-1 max-h-[calc(100vh-192px)] overflow-hidden">
+        <AnimatePresence mode="wait">
+          {viewType === 'week' && (
+            <motion.div
+              key="week"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -20 }}
+              transition={{ duration: 0.2 }}
+              className="h-full flex flex-col"
+            >
+              <WeekView
+                onDateClick={onDateClick}
+                onEventClick={onEventClick}
+                events={visibleEvents}
+              />
+            </motion.div>
+          )}
+          {viewType === 'month' && (
+            <motion.div
+              key="month"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -20 }}
+              transition={{ duration: 0.2 }}
+            >
+              <MonthView
+                onDateClick={onDateClick}
+                onEventClick={onEventClick}
+                events={visibleEvents}
+              />
+            </motion.div>
+          )}
+          {viewType === 'year' && (
+            <motion.div
+              key="year"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -20 }}
+              transition={{ duration: 0.2 }}
+            >
+              <YearView onDateClick={onDateClick} events={visibleEvents} />
+            </motion.div>
+          )}
+          {viewType === 'planning' && (
+            <motion.div
+              key="planning"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -20 }}
+              transition={{ duration: 0.2 }}
+            >
+              <PlanningView
+                onEventClick={onEventClick}
+                events={visibleEvents}
+              />
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </div>
+  );
+};
+
+export default Calendar;

Front-End/src/components/Calendar/EventModal.js

@@ -0,0 +1,334 @@
+import { usePlanning, RecurrenceType } from '@/context/PlanningContext';
+import { format } from 'date-fns';
+import React from 'react';
+
+export default function EventModal({
+  isOpen,
+  onClose,
+  eventData,
+  setEventData,
+}) {
+  const { addEvent, handleUpdateEvent, handleDeleteEvent, schedules } =
+    usePlanning();
+
+  // S'assurer que planning est défini lors du premier rendu
+  React.useEffect(() => {
+    if (!eventData?.planning && schedules.length > 0) {
+      setEventData((prev) => ({
+        ...prev,
+        planning: schedules[0].id,
+        color: schedules[0].color,
+      }));
+    }
+  }, [schedules, eventData?.planning]);
+
+  if (!isOpen) return null;
+
+  const recurrenceOptions = [
+    { value: RecurrenceType.NONE, label: 'Aucune' },
+    { value: RecurrenceType.DAILY, label: 'Quotidienne' },
+    { value: RecurrenceType.WEEKLY, label: 'Hebdomadaire' },
+    { value: RecurrenceType.MONTHLY, label: 'Mensuelle' },
+    /*  { value: RecurrenceType.CUSTOM, label: 'Personnalisée' }, */
+  ];
+
+  const daysOfWeek = [
+    { value: 1, label: 'Lun' },
+    { value: 2, label: 'Mar' },
+    { value: 3, label: 'Mer' },
+    { value: 4, label: 'Jeu' },
+    { value: 5, label: 'Ven' },
+    { value: 6, label: 'Sam' },
+    { value: 0, label: 'Dim' },
+  ];
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    if (!eventData.planning) {
+      alert('Veuillez sélectionner un planning');
+      return;
+    }
+
+    const selectedSchedule = schedules.find((s) => s.id === eventData.planning);
+
+    if (eventData.id) {
+      handleUpdateEvent(eventData.id, {
+        ...eventData,
+        planning: eventData.planning, // S'assurer que planning est bien défini
+        color: eventData.color || selectedSchedule?.color,
+      });
+    } else {
+      addEvent({
+        ...eventData,
+        id: `event-${Date.now()}`,
+        planning: eventData.planning, // S'assurer que planning est bien défini
+        color: eventData.color || selectedSchedule?.color,
+      });
+    }
+    onClose();
+  };
+
+  const handleDelete = () => {
+    if (
+      eventData.id &&
+      confirm('Êtes-vous sûr de vouloir supprimer cet événement ?')
+    ) {
+      handleDeleteEvent(eventData.id);
+      onClose();
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white p-6 rounded-lg w-full max-w-md">
+        <h2 className="text-xl font-semibold mb-4">
+          {eventData.id ? "Modifier l'événement" : 'Nouvel événement'}
+        </h2>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {/* Titre */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Titre
+            </label>
+            <input
+              type="text"
+              value={eventData.title || ''}
+              onChange={(e) =>
+                setEventData({ ...eventData, title: e.target.value })
+              }
+              className="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-emerald-500"
+              required
+            />
+          </div>
+
+          {/* Description */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Description
+            </label>
+            <textarea
+              value={eventData.description || ''}
+              onChange={(e) =>
+                setEventData({ ...eventData, description: e.target.value })
+              }
+              className="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-emerald-500"
+              rows="3"
+            />
+          </div>
+
+          {/* Planning */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Planning
+            </label>
+            <select
+              value={eventData.planning || schedules[0]?.id}
+              onChange={(e) => {
+                const selectedSchedule = schedules.find(
+                  (s) => s.id === e.target.value
+                );
+                setEventData({
+                  ...eventData,
+                  planning: e.target.value,
+                  color: selectedSchedule?.color || '#10b981',
+                });
+              }}
+              className="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-emerald-500"
+              required
+            >
+              {schedules.map((schedule) => (
+                <option key={schedule.id} value={schedule.id}>
+                  {schedule.name}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* Couleur */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Couleur
+            </label>
+            <input
+              type="color"
+              value={
+                eventData.color ||
+                schedules.find((s) => s.id === eventData.planning)?.color ||
+                '#10b981'
+              }
+              onChange={(e) =>
+                setEventData({ ...eventData, color: e.target.value })
+              }
+              className="w-full h-10 p-1 rounded border"
+            />
+          </div>
+
+          {/* Récurrence */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Récurrence
+            </label>
+            <select
+              value={eventData.recursionType || RecurrenceType.NONE}
+              onChange={(e) => {
+                return setEventData({
+                  ...eventData,
+                  recursionType: e.target.value,
+                });
+              }}
+              className="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-emerald-500"
+            >
+              {recurrenceOptions.map((option) => (
+                <option key={option.value} value={option.value}>
+                  {option.label}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* Paramètres de récurrence personnalisée */}
+          {eventData.recursionType == RecurrenceType.CUSTOM && (
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                Jours de répétition
+              </label>
+              <div className="flex gap-2 flex-wrap">
+                {daysOfWeek.map((day) => (
+                  <button
+                    key={day.value}
+                    type="button"
+                    onClick={() => {
+                      const days = eventData.selectedDays || [];
+                      const newDays = days.includes(day.value)
+                        ? days.filter((d) => d !== day.value)
+                        : [...days, day.value];
+                      setEventData({ ...eventData, selectedDays: newDays });
+                    }}
+                    className={`px-3 py-1 rounded-full text-sm ${
+                      (eventData.selectedDays || []).includes(day.value)
+                        ? 'bg-emerald-100 text-emerald-800'
+                        : 'bg-gray-100 text-gray-600'
+                    }`}
+                  >
+                    {day.label}
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Date de fin de récurrence */}
+          {eventData.recursionType != RecurrenceType.NONE && (
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                Fin de récurrence
+              </label>
+              <input
+                type="date"
+                value={
+                  eventData.recursionEnd
+                    ? format(new Date(eventData.recursionEnd), 'yyyy-MM-dd')
+                    : ''
+                }
+                onChange={(e) =>
+                  setEventData({
+                    ...eventData,
+                    recursionEnd: e.target.value
+                      ? new Date(e.target.value).toISOString()
+                      : null,
+                  })
+                }
+                className="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-emerald-500"
+              />
+            </div>
+          )}
+
+          {/* Dates */}
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                Début
+              </label>
+              <input
+                type="datetime-local"
+                value={format(new Date(eventData.start), "yyyy-MM-dd'T'HH:mm")}
+                onChange={(e) =>
+                  setEventData({
+                    ...eventData,
+                    start: new Date(e.target.value).toISOString(),
+                  })
+                }
+                className="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-emerald-500"
+                required
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                Fin
+              </label>
+              <input
+                type="datetime-local"
+                value={format(new Date(eventData.end), "yyyy-MM-dd'T'HH:mm")}
+                onChange={(e) =>
+                  setEventData({
+                    ...eventData,
+                    end: new Date(e.target.value).toISOString(),
+                  })
+                }
+                className="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-emerald-500"
+                required
+              />
+            </div>
+          </div>
+
+          {/* Lieu */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Lieu
+            </label>
+            <input
+              type="text"
+              value={eventData.location || ''}
+              onChange={(e) =>
+                setEventData({ ...eventData, location: e.target.value })
+              }
+              className="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-emerald-500"
+            />
+          </div>
+
+          {/* Boutons */}
+          <div className="flex justify-between gap-2 mt-6">
+            <div>
+              {eventData.id && (
+                <button
+                  type="button"
+                  onClick={handleDelete}
+                  className="px-4 py-2 text-red-600 hover:bg-red-50 rounded"
+                >
+                  Supprimer
+                </button>
+              )}
+            </div>
+            <div className="flex gap-2">
+              <button
+                type="button"
+                onClick={onClose}
+                className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded"
+              >
+                Annuler
+              </button>
+              <button
+                type="submit"
+                className="px-4 py-2 bg-emerald-600 text-white rounded hover:bg-emerald-700"
+              >
+                {eventData.id ? 'Modifier' : 'Créer'}
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

Front-End/src/components/Calendar/ScheduleNavigation.js

@@ -0,0 +1,249 @@
+import { useState } from 'react';
+import { usePlanning,PlanningModes } from '@/context/PlanningContext';
+import { Plus, Edit2, Eye, EyeOff, Check, X } from 'lucide-react';
+
+
+export default function ScheduleNavigation({classes, modeSet='event'}) {
+  const {
+    schedules,
+    selectedSchedule,
+    setSelectedSchedule,
+    hiddenSchedules,
+    toggleScheduleVisibility,
+    addSchedule,
+    updateSchedule,
+    planningMode,
+  } = usePlanning();
+  const [editingId, setEditingId] = useState(null);
+  const [editedName, setEditedName] = useState('');
+  const [editedColor, setEditedColor] = useState('');
+  const [editedSchoolClass, setEditedSchoolClass] = useState(null);
+  const [isAddingNew, setIsAddingNew] = useState(false);
+  const [newSchedule, setNewSchedule] = useState({
+    name: '',
+    color: '#10b981',
+    school_class: '', // Ajout du champ pour la classe
+  });
+
+  const handleEdit = (schedule) => {
+    setEditingId(schedule.id);
+    setEditedName(schedule.name);
+    setEditedColor(schedule.color);
+    setEditedSchoolClass(schedule.school_class);
+  };
+
+  const handleSave = () => {
+    if (editingId) {
+      updateSchedule(editingId, {
+        ...schedules.find((s) => s.id === editingId),
+        name: editedName,
+        color: editedColor,
+        school_class: editedSchoolClass, // Ajout de l'ID de la classe
+      });
+      setEditingId(null);
+    }
+  };
+
+  const handleAddNew = () => {
+    if (newSchedule.name) {
+       let payload = {
+        name: newSchedule.name,
+        color: newSchedule.color,
+      };
+      if (planningMode === PlanningModes.CLASS_SCHEDULE) {
+        payload.school_class = newSchedule.school_class; // Ajout de l'ID de la classe
+      }
+      addSchedule({
+        id: `schedule-${Date.now()}`,
+        ...payload,
+      });
+      setIsAddingNew(false);
+      setNewSchedule({ name: '', color: '#10b981', school_class: '' });
+    }
+  };
+
+  return (
+    <nav className="w-64 border-r p-4">
+      <div className="flex items-center justify-between mb-4">
+        <h2 className="font-semibold">{(planningMode === PlanningModes.CLASS_SCHEDULE)?"Emplois du temps":"Plannings"}</h2>
+        <button
+          onClick={() => setIsAddingNew(true)}
+          className="p-1 hover:bg-gray-100 rounded"
+        >
+          <Plus className="w-4 h-4" />
+        </button>
+      </div>
+
+      {isAddingNew && (
+        <div className="mb-4 p-2 border rounded">
+          <input
+            type="text"
+            value={newSchedule.name}
+            onChange={(e) =>
+              setNewSchedule((prev) => ({ ...prev, name: e.target.value }))
+            }
+            className="w-full p-1 mb-2 border rounded"
+            placeholder={(planningMode===PlanningModes.CLASS_SCHEDULE)?"Nom de l'emplois du temps":"Nom du planning"}
+          />
+          <div className="flex gap-2 items-center mb-2">
+            <label className="text-sm">Couleur:</label>
+            <input
+              type="color"
+              value={newSchedule.color}
+              onChange={(e) =>
+                setNewSchedule((prev) => ({ ...prev, color: e.target.value }))
+              }
+              className="w-8 h-8"
+            />
+          </div>
+          {planningMode === PlanningModes.CLASS_SCHEDULE&& (
+            <div className="mb-2">
+              <label className="text-sm">Classe (optionnel):</label>
+              <select
+                value={newSchedule.school_class}
+                onChange={(e) =>
+                  setNewSchedule((prev) => ({
+                    ...prev,
+                    school_class: e.target.value,
+                  }))
+                }
+                className="w-full p-1 border rounded"
+              >
+                <option value="">Aucune</option>
+                {classes.map((classe) => { console.log({classe});
+                  return (
+                  <option key={classe.id} value={classe.id}>
+                    {classe.atmosphere_name}
+                  </option>
+                )}
+                )}
+              </select>
+            </div>
+          )}
+          <div className="flex justify-end gap-2">
+            <button
+              onClick={() => setIsAddingNew(false)}
+              className="p-1 hover:bg-gray-100 rounded"
+            >
+              <X className="w-4 h-4" />
+            </button>
+            <button
+              onClick={handleAddNew}
+              className="p-1 hover:bg-gray-100 rounded"
+            >
+              <Check className="w-4 h-4" />
+            </button>
+          </div>
+        </div>
+      )}
+
+      <ul className="space-y-2">
+        {schedules
+          .map((schedule) => (
+            <li
+              key={schedule.id}
+              className={`p-2 rounded ${
+                selectedSchedule === schedule.id
+                  ? 'bg-gray-100'
+                  : 'hover:bg-gray-50'
+              }`}
+            >
+              {editingId === schedule.id ? (
+                <div className="space-y-2">
+                  <input
+                    type="text"
+                    value={editedName}
+                    onChange={(e) => setEditedName(e.target.value)}
+                    className="w-full p-1 border rounded"
+                  />
+                  <div className="flex gap-2 items-center">
+                    <label className="text-sm">Couleur:</label>
+                    <input
+                      type="color"
+                      value={editedColor}
+                      onChange={(e) => setEditedColor(e.target.value)}
+                      className="w-8 h-8"
+                    />
+                  </div>
+                  {planningMode === PlanningModes.CLASS_SCHEDULE && (
+                    <div className="mb-2">
+                      <label className="text-sm">Classe:</label>
+                      <select
+                        value={editedSchoolClass}
+                        onChange={(e) => setEditedSchoolClass(e.target.value)}
+
+                        className="w-full p-1 border rounded"
+                      >
+                        <option value="">Aucune</option>
+                        {classes.map((classe) => (
+                          <option key={classe.id} value={classe.id}>
+                            {classe.atmosphere_name}
+                          </option>
+                        ))}
+                      </select>
+                    </div>
+                  )}
+                  <div className="flex justify-end gap-2">
+                    <button
+                      onClick={() => setEditingId(null)}
+                      className="p-1 hover:bg-gray-100 rounded"
+                    >
+                      <X className="w-4 h-4" />
+                    </button>
+                    <button
+                      onClick={handleSave}
+                      className="p-1 hover:bg-gray-100 rounded"
+                    >
+                      <Check className="w-4 h-4" />
+                    </button>
+                  </div>
+                </div>
+              ) : (
+                <div className="flex items-center justify-between">
+                  <div
+                    className="flex items-center gap-2 flex-1 cursor-pointer"
+                    onClick={() => setSelectedSchedule(schedule.id)}
+                  >
+                    <div
+                      className="w-3 h-3 rounded-full"
+                      style={{ backgroundColor: schedule.color }}
+                    />
+                    <span
+                      className={
+                        hiddenSchedules.includes(schedule.id)
+                          ? 'text-gray-400'
+                          : ''
+                      }
+                    >
+                      {schedule.name}
+                    </span>
+                  </div>
+                  <div className="flex gap-1">
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation(); // Empêcher la propagation du clic
+                        toggleScheduleVisibility(schedule.id);
+                      }}
+                      className="p-1 hover:bg-gray-100 rounded"
+                    >
+                      {hiddenSchedules.includes(schedule.id) ? (
+                        <EyeOff className="w-4 h-4" />
+                      ) : (
+                        <Eye className="w-4 h-4" />
+                      )}
+                    </button>
+                    <button
+                      onClick={() => handleEdit(schedule)}
+                      className="p-1 hover:bg-gray-100 rounded"
+                    >
+                      <Edit2 className="w-4 h-4" />
+                    </button>
+                  </div>
+                </div>
+              )}
+            </li>
+          ))}
+      </ul>
+    </nav>
+  );
+}

Front-End/src/components/Calendar/WeekView.js

@@ -1,12 +1,6 @@
 import React, { useEffect, useState, useRef } from 'react';
 import { usePlanning } from '@/context/PlanningContext';
-import {
-  format,
-  startOfWeek,
-  addDays,
-  differenceInMinutes,
-  isSameDay,
-} from 'date-fns';
+import { format, startOfWeek, addDays, isSameDay } from 'date-fns';
 import { fr } from 'date-fns/locale';
 import { getWeekEvents } from '@/utils/events';
 import { isToday } from 'date-fns';
@@ -49,7 +43,8 @@ const WeekView = ({ onDateClick, onEventClick, events }) => {
   const getCurrentTimePosition = () => {
     const hours = currentTime.getHours();
     const minutes = currentTime.getMinutes();
-    return `${(hours + minutes / 60) * 5}rem`;
+    const rowHeight = 5; // Hauteur des lignes en rem (h-20 = 5rem)
+    return `${((hours + minutes / 60) * rowHeight)}rem`;
   };
 
   // Utiliser les événements déjà filtrés passés en props
@@ -144,17 +139,17 @@ const WeekView = ({ onDateClick, onEventClick, events }) => {
   };
 
   return (
-    <div className="flex flex-col h-full overflow-hidden">
+    <div className="flex flex-col h-full overflow-y-auto">
       {/* En-tête des jours */}
       <div
-        className="grid gap-[1px] bg-gray-100 pr-[17px]"
+        className="grid gap-[1px] w-full bg-gray-100"
         style={{ gridTemplateColumns: '2.5rem repeat(7, 1fr)' }}
       >
         <div className="bg-white h-14"></div>
         {weekDays.map((day) => (
           <div
             key={day}
-            className={`p-2 text-center border-b
+            className={`h-14 p-2 text-center border-b
               ${isWeekend(day) ? 'bg-gray-50' : 'bg-white'}
               ${isToday(day) ? 'bg-emerald-100 border-x border-emerald-600' : ''}`}
           >
@@ -172,7 +167,7 @@ const WeekView = ({ onDateClick, onEventClick, events }) => {
       </div>
 
       {/* Grille horaire */}
-      <div ref={scrollContainerRef} className="flex-1 overflow-y-auto relative">
+      <div ref={scrollContainerRef} className="flex-1  relative">
         {/* Ligne de temps actuelle */}
         {isCurrentWeek && (
           <div
@@ -181,12 +176,12 @@ const WeekView = ({ onDateClick, onEventClick, events }) => {
               top: getCurrentTimePosition(),
             }}
           >
-            <div className="absolute -left-2 -top-1 w-2 h-2 rounded-full bg-emerald-500" />
+            <div className="absolute -left-2 -top-2 w-2 h-2 rounded-full bg-emerald-500" />
           </div>
         )}
 
         <div
-          className="grid gap-[1px] bg-gray-100"
+          className="grid gap-[1px] w-full bg-gray-100"
           style={{ gridTemplateColumns: '2.5rem repeat(7, 1fr)' }}
         >
           {timeSlots.map((hour) => (
@@ -209,9 +204,7 @@ const WeekView = ({ onDateClick, onEventClick, events }) => {
                       onDateClick(date);
                     }}
                   >
-                    <div className="flex gap-1">
-                      {' '}
-                      {/* Ajout de gap-1 */}
+                    <div className="grid gap-1">
                       {dayEvents
                         .filter((event) => {
                           const eventStart = new Date(event.start);