chore: application prettier

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

@@ -1,6 +1,15 @@
 import React from 'react';
 import { usePlanning } from '@/context/PlanningContext';
-import { format, startOfWeek, endOfWeek, eachDayOfInterval, startOfMonth, endOfMonth, isSameMonth, isToday } from 'date-fns';
+import {
+  format,
+  startOfWeek,
+  endOfWeek,
+  eachDayOfInterval,
+  startOfMonth,
+  endOfMonth,
+  isSameMonth,
+  isToday,
+} from 'date-fns';
 import { fr } from 'date-fns/locale';
 import { getEventsForDate } from '@/utils/events';
 
@@ -35,7 +44,8 @@ const MonthView = ({ onDateClick, onEventClick }) => {
         onClick={() => handleDayClick(day)}
       >
         <div className="flex justify-between items-center mb-1">
-          <span className={`text-sm font-medium rounded-full w-7 h-7 flex items-center justify-center
+          <span
+            className={`text-sm font-medium rounded-full w-7 h-7 flex items-center justify-center
             ${isCurrentDay ? 'bg-emerald-500 text-white' : ''}
             ${!isCurrentMonth ? 'text-gray-400' : ''}`}
           >
@@ -50,7 +60,7 @@ const MonthView = ({ onDateClick, onEventClick }) => {
               style={{
                 backgroundColor: `${event.color}15`,
                 color: event.color,
-                borderLeft: `2px solid ${event.color}`
+                borderLeft: `2px solid ${event.color}`,
               }}
               onClick={(e) => {
                 e.stopPropagation();
@@ -69,8 +79,11 @@ const MonthView = ({ onDateClick, onEventClick }) => {
     <div className="h-full flex flex-col border border-gray-200 rounded-lg bg-white">
       {/* En-tête des jours de la semaine */}
       <div className="grid grid-cols-7 border-b">
-        {['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'].map(day => (
-          <div key={day} className="p-2 text-center text-sm font-medium text-gray-500">
+        {['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'].map((day) => (
+          <div
+            key={day}
+            className="p-2 text-center text-sm font-medium text-gray-500"
+          >
             {day}
           </div>
         ))}
@@ -83,4 +96,4 @@ const MonthView = ({ onDateClick, onEventClick }) => {
   );
 };
 
-export default MonthView;
+export default MonthView;

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

@@ -15,17 +15,20 @@ const PlanningView = ({ events, onEventClick }) => {
 
     // Sinon, créer une entrée pour chaque jour
     const days = eachDayOfInterval({ start, end });
-    return days.map(day => ({
+    return days.map((day) => ({
       ...event,
       displayDate: day,
-      isMultiDay: true
+      isMultiDay: true,
     }));
   };
 
   // Aplatir tous les événements en incluant les événements sur plusieurs jours
   const flattenedEvents = events
     .flatMap(splitEventByDays)
-    .sort((a, b) => new Date(a.displayDate || a.start) - new Date(b.displayDate || b.start));
+    .sort(
+      (a, b) =>
+        new Date(a.displayDate || a.start) - new Date(b.displayDate || b.start)
+    );
 
   return (
     <div className="bg-white h-full overflow-auto">
@@ -58,26 +61,29 @@ const PlanningView = ({ events, onEventClick }) => {
                 <td className="py-3 px-4 text-sm text-gray-900 whitespace-nowrap">
                   <div className="flex items-center gap-1">
                     <span className="font-extrabold">{format(start, 'd')}</span>
-                    <span className="font-semibold">{format(start, 'MMM', { locale: fr }).toLowerCase()}</span>
-                    <span className="font-semibold">{format(start, 'EEE', { locale: fr })}</span>
+                    <span className="font-semibold">
+                      {format(start, 'MMM', { locale: fr }).toLowerCase()}
+                    </span>
+                    <span className="font-semibold">
+                      {format(start, 'EEE', { locale: fr })}
+                    </span>
                   </div>
                 </td>
                 <td className="py-3 px-4 text-sm text-gray-900 whitespace-nowrap">
-                     <div className="flex items-center">
-                      <div
+                  <div className="flex items-center">
+                    <div
                       className="w-2 h-2 rounded-full mr-2"
                       style={{ backgroundColor: event.color }}
                     />
-                  {isMultiDay
-                    ? (isSameDay(start, new Date(event.start))
-                      ? "À partir de "
-                      : isSameDay(start, end)
-                        ? "Jusqu'à "
-                        : "Toute la journée")
-                    : ""
-                  }
-                  {format(new Date(event.start), 'HH:mm')}
-                  {!isMultiDay && ` - ${format(end, 'HH:mm')}`}
+                    {isMultiDay
+                      ? isSameDay(start, new Date(event.start))
+                        ? 'À partir de '
+                        : isSameDay(start, end)
+                          ? "Jusqu'à "
+                          : 'Toute la journée'
+                      : ''}
+                    {format(new Date(event.start), 'HH:mm')}
+                    {!isMultiDay && ` - ${format(end, 'HH:mm')}`}
                   </div>
                 </td>
                 <td className="py-3 px-4">
@@ -108,4 +114,4 @@ const PlanningView = ({ events, onEventClick }) => {
   );
 };
 
-export default PlanningView;
+export default PlanningView;

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

@@ -1,6 +1,12 @@
 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,
+  differenceInMinutes,
+  isSameDay,
+} from 'date-fns';
 import { fr } from 'date-fns/locale';
 import { getWeekEvents } from '@/utils/events';
 import { isToday } from 'date-fns';
@@ -16,7 +22,7 @@ const WeekView = ({ onDateClick, onEventClick, events }) => {
   const weekDays = Array.from({ length: 7 }, (_, i) => addDays(weekStart, i));
 
   // Maintenant on peut utiliser weekDays
-  const isCurrentWeek = weekDays.some(day => isSameDay(day, new Date()));
+  const isCurrentWeek = weekDays.some((day) => isSameDay(day, new Date()));
 
   // Mettre à jour la position de la ligne toutes les minutes
   useEffect(() => {
@@ -61,7 +67,7 @@ const WeekView = ({ onDateClick, onEventClick, events }) => {
     const eventStart = new Date(event.start);
     const eventEnd = new Date(event.end);
 
-    return dayEvents.filter(otherEvent => {
+    return dayEvents.filter((otherEvent) => {
       if (otherEvent.id === event.id) return false;
       const otherStart = new Date(otherEvent.start);
       const otherEnd = new Date(otherEvent.end);
@@ -77,7 +83,7 @@ const WeekView = ({ onDateClick, onEventClick, events }) => {
 
     // Trouver les événements qui se chevauchent
     const overlappingEvents = findOverlappingEvents(event, dayEvents);
-    const eventIndex = overlappingEvents.findIndex(e => e.id > event.id) + 1;
+    const eventIndex = overlappingEvents.findIndex((e) => e.id > event.id) + 1;
     const totalOverlapping = overlappingEvents.length + 1;
 
     // Calculer la largeur et la position horizontale
@@ -93,7 +99,7 @@ const WeekView = ({ onDateClick, onEventClick, events }) => {
       borderLeft: `3px solid ${event.color}`,
       borderRadius: '0.25rem',
       zIndex: 1,
-      transform: `translateY(${startMinutes}rem)`
+      transform: `translateY(${startMinutes}rem)`,
     };
   };
 
@@ -111,14 +117,24 @@ const WeekView = ({ onDateClick, onEventClick, events }) => {
         }}
       >
         <div className="p-1">
-          <div className="font-semibold text-xs truncate" style={{ color: event.color }}>
+          <div
+            className="font-semibold text-xs truncate"
+            style={{ color: event.color }}
+          >
             {event.title}
           </div>
-          <div className="text-xs" style={{ color: event.color, opacity: 0.75 }}>
-            {format(new Date(event.start), 'HH:mm')} - {format(new Date(event.end), 'HH:mm')}
+          <div
+            className="text-xs"
+            style={{ color: event.color, opacity: 0.75 }}
+          >
+            {format(new Date(event.start), 'HH:mm')} -{' '}
+            {format(new Date(event.end), 'HH:mm')}
           </div>
           {event.location && (
-            <div className="text-xs truncate" style={{ color: event.color, opacity: 0.75 }}>
+            <div
+              className="text-xs truncate"
+              style={{ color: event.color, opacity: 0.75 }}
+            >
               {event.location}
             </div>
           )}
@@ -130,7 +146,10 @@ const WeekView = ({ onDateClick, onEventClick, events }) => {
   return (
     <div className="flex flex-col h-full overflow-hidden">
       {/* En-tête des jours */}
-      <div className="grid gap-[1px] bg-gray-100 pr-[17px]" style={{ gridTemplateColumns: "2.5rem repeat(7, 1fr)" }}>
+      <div
+        className="grid gap-[1px] bg-gray-100 pr-[17px]"
+        style={{ gridTemplateColumns: '2.5rem repeat(7, 1fr)' }}
+      >
         <div className="bg-white h-14"></div>
         {weekDays.map((day) => (
           <div
@@ -142,8 +161,10 @@ const WeekView = ({ onDateClick, onEventClick, events }) => {
             <div className="text-xs font-medium text-gray-500">
               {format(day, 'EEEE', { locale: fr })}
             </div>
-            <div className={`text-sm font-semibold inline-block rounded-full w-7 h-7 leading-7
-              ${isToday(day) ? 'bg-emerald-500 text-white' : ''}`}>
+            <div
+              className={`text-sm font-semibold inline-block rounded-full w-7 h-7 leading-7
+              ${isToday(day) ? 'bg-emerald-500 text-white' : ''}`}
+            >
               {format(day, 'd', { locale: fr })}
             </div>
           </div>
@@ -158,17 +179,17 @@ const WeekView = ({ onDateClick, onEventClick, events }) => {
             className="absolute left-0 right-0 z-10 border-emerald-500 border pointer-events-none"
             style={{
               top: getCurrentTimePosition(),
-
             }}
           >
-            <div
-              className="absolute -left-2 -top-1 w-2 h-2 rounded-full bg-emerald-500"
-            />
+            <div className="absolute -left-2 -top-1 w-2 h-2 rounded-full bg-emerald-500" />
           </div>
         )}
 
-        <div className="grid gap-[1px] bg-gray-100" style={{ gridTemplateColumns: "2.5rem repeat(7, 1fr)" }}>
-          {timeSlots.map(hour => (
+        <div
+          className="grid gap-[1px] bg-gray-100"
+          style={{ gridTemplateColumns: '2.5rem repeat(7, 1fr)' }}
+        >
+          {timeSlots.map((hour) => (
             <React.Fragment key={hour}>
               <div className="h-20 p-1 text-right text-sm text-gray-500 bg-gray-100 font-medium">
                 {`${hour.toString().padStart(2, '0')}:00`}
@@ -188,11 +209,15 @@ const WeekView = ({ onDateClick, onEventClick, events }) => {
                       onDateClick(date);
                     }}
                   >
-                    <div className="flex gap-1"> {/* Ajout de gap-1 */}
-                      {dayEvents.filter(event => {
-                        const eventStart = new Date(event.start);
-                        return eventStart.getHours() === hour;
-                      }).map(event => renderEventInCell(event, dayEvents))}
+                    <div className="flex gap-1">
+                      {' '}
+                      {/* Ajout de gap-1 */}
+                      {dayEvents
+                        .filter((event) => {
+                          const eventStart = new Date(event.start);
+                          return eventStart.getHours() === hour;
+                        })
+                        .map((event) => renderEventInCell(event, dayEvents))}
                     </div>
                   </div>
                 );
@@ -205,4 +230,4 @@ const WeekView = ({ onDateClick, onEventClick, events }) => {
   );
 };
 
-export default WeekView;
+export default WeekView;

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

@@ -37,7 +37,7 @@ const YearView = ({ onDateClick }) => {
 
   return (
     <div className="grid grid-cols-4 gap-4 p-4">
-      {months.map(month => (
+      {months.map((month) => (
         <MonthCard
           key={month.getTime()}
           month={month}
@@ -49,4 +49,4 @@ const YearView = ({ onDateClick }) => {
   );
 };
 
-export default YearView;
+export default YearView;