From f53b6556a1939c9cc2e6013affd05cac0a4448c6 Mon Sep 17 00:00:00 2001
From: Alma <alma@MacBook-Air-de-Alma.local>
Date: Sun, 13 Apr 2025 17:17:43 +0200
Subject: [PATCH] calendar 35

---
 components/calendar/calendar-client.tsx | 245 ++++++++++--------------
 1 file changed, 105 insertions(+), 140 deletions(-)

diff --git a/components/calendar/calendar-client.tsx b/components/calendar/calendar-client.tsx
index 3fcc5758..c91d617a 100644
--- a/components/calendar/calendar-client.tsx
+++ b/components/calendar/calendar-client.tsx
@@ -771,7 +771,7 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
         end: new Date(eventForm.end).toISOString(),
         allDay: eventForm.allDay,
         location: eventForm.location,
-        calendarId: selectedCalendarId,
+          calendarId: selectedCalendarId,
         userId
       };
 
@@ -787,7 +787,7 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
 
       const responseData = await response.json();
       console.log("Response from server:", responseData);
-
+      
       if (!response.ok) {
         console.error("Error response:", responseData);
         throw new Error(responseData.error || "Failed to save event");
@@ -897,9 +897,9 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
   // Update CalendarSelector to handle visibility
   const CalendarSelector = () => (
     <div className="flex flex-wrap items-center gap-2 mb-4">
-          {calendars.map((calendar) => (
+      {calendars.map((calendar) => (
         <div key={calendar.id} className="relative group">
-            <Button
+          <Button
             variant={visibleCalendarIds.includes(calendar.id) ? "secondary" : "ghost"}
             className="flex items-center gap-2 pr-8"
             onClick={() => {
@@ -920,9 +920,9 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
                 <Check className="h-4 w-4" />
               ) : null}
             </div>
-            </Button>
+          </Button>
           {calendar.name !== "Calendrier principal" && (
-          <Button
+            <Button
               variant="ghost"
               size="icon"
               className="absolute right-0 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity"
@@ -933,7 +933,7 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
               }}
             >
               <Settings className="h-4 w-4" />
-          </Button>
+            </Button>
           )}
         </div>
       ))}
@@ -988,110 +988,74 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
   };
 
   return (
-    <div className="flex flex-col md:flex-row h-full gap-4 p-4">
-      {/* Sidebar */}
-      <div className="w-full md:w-64 space-y-4">
-        <Card className="p-4">
-          <div className="flex items-center justify-between mb-4">
-            <div className="flex items-center gap-4">
-              <Button
-                variant="outline"
-                onClick={() => {
-                  setSelectedCalendar(null);
-                  setIsCalendarModalOpen(true);
-                }}
-                className="bg-white hover:bg-gray-50 text-gray-900 border-gray-200"
-              >
-                <Plus className="mr-2 h-4 w-4" />
-                <span className="font-medium">Nouveau calendrier</span>
-              </Button>
+    <div className="space-y-4">
+      <Card className="p-4">
+        <div className="flex items-center justify-between mb-4">
+          <div className="flex items-center gap-4">
+            <Button
+              variant="outline"
+              onClick={() => {
+                setSelectedCalendar(null);
+                setIsCalendarModalOpen(true);
+              }}
+              className="bg-white hover:bg-gray-50 text-gray-900 border-gray-200"
+            >
+              <Plus className="mr-2 h-4 w-4" />
+              <span className="font-medium">Nouveau calendrier</span>
+            </Button>
         <Button
           onClick={() => {
             setSelectedEvent(null);
-                  setEventForm({
-                    title: "",
-                    description: null,
-                    start: "",
-                    end: "",
-                    allDay: false,
-                    location: null,
-                    calendarId: selectedCalendarId
-                  });
-                  setIsEventModalOpen(true);
-                }}
-                className="bg-primary hover:bg-primary/90 text-white"
-              >
-                <Plus className="mr-2 h-4 w-4" />
-                <span className="font-medium">Nouvel événement</span>
+                setEventForm({
+                  title: "",
+                  description: null,
+                  start: "",
+                  end: "",
+                  allDay: false,
+                  location: null,
+                  calendarId: selectedCalendarId
+                });
+                setIsEventModalOpen(true);
+              }}
+              className="bg-primary hover:bg-primary/90 text-white"
+            >
+              <Plus className="mr-2 h-4 w-4" />
+              <span className="font-medium">Nouvel événement</span>
         </Button>
       </div>
 
-            <Tabs value={view} className="w-auto">
-              <TabsList>
+          <Tabs value={view} className="w-auto">
+            <TabsList>
           <TabsTrigger
-                  value="dayGridMonth"
+                value="dayGridMonth"
             onClick={() => handleViewChange("dayGridMonth")}
           >
             Mois
           </TabsTrigger>
           <TabsTrigger
-                  value="timeGridWeek"
+                value="timeGridWeek"
             onClick={() => handleViewChange("timeGridWeek")}
           >
             Semaine
           </TabsTrigger>
           <TabsTrigger
-                  value="timeGridDay"
+                value="timeGridDay"
             onClick={() => handleViewChange("timeGridDay")}
           >
             Jour
           </TabsTrigger>
         </TabsList>
-            </Tabs>
+          </Tabs>
             </div>
 
-          <CalendarSelector />
-        </Card>
+        <CalendarSelector />
 
-        <StatisticsPanel statistics={statistics} />
+        {loading ? (
+          <div className="h-96 flex items-center justify-center">
+            <Loader2 className="h-8 w-8 animate-spin text-primary" />
+            <span className="ml-2">Chargement des événements...</span>
             </div>
-
-      {/* Calendar */}
-      <div className="flex-1 bg-white rounded-lg shadow">
-        <style jsx global>{`
-          .fc-daygrid-day-events {
-            max-height: 80px;
-            overflow-y: auto;
-            margin-right: 2px;
-          }
-          
-          .fc-daygrid-day-events::-webkit-scrollbar {
-            width: 4px;
-          }
-          
-          .fc-daygrid-day-events::-webkit-scrollbar-track {
-            background: #f1f1f1;
-            border-radius: 2px;
-          }
-          
-          .fc-daygrid-day-events::-webkit-scrollbar-thumb {
-            background: #888;
-            border-radius: 2px;
-          }
-          
-          .fc-daygrid-day-events::-webkit-scrollbar-thumb:hover {
-            background: #555;
-          }
-
-          .fc .fc-daygrid-event-harness {
-            margin-bottom: 2px;
-          }
-
-          .fc-daygrid-day-frame {
-            min-height: 100px !important;
-            height: 100px !important;
-          }
-        `}</style>
+          ) : (
             <FullCalendar
               ref={calendarRef}
               plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
@@ -1101,75 +1065,76 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
                 center: "title",
                 right: "",
               }}
-          events={calendars
-            .filter(cal => visibleCalendarIds.includes(cal.id))
-            .flatMap(cal => 
-              (cal.events || []).map(event => ({
+            events={calendars
+              .filter(cal => visibleCalendarIds.includes(cal.id))
+              .flatMap(cal => 
+                (cal.events || []).map(event => ({
                 id: event.id,
                 title: event.title,
-                start: new Date(event.start),
-                end: new Date(event.end),
+                  start: new Date(event.start),
+                  end: new Date(event.end),
                 allDay: event.isAllDay,
                   description: event.description,
                   location: event.location,
-                calendarId: event.calendarId,
-                backgroundColor: cal.color,
-                borderColor: cal.color,
-                textColor: '#ffffff',
-                extendedProps: {
-                  location: event.location,
-                  description: event.description,
                   calendarId: event.calendarId,
-                  originalEvent: event
-                }
-              }))
-            )}
-          eventContent={(arg) => (
-            <div className="p-1 overflow-hidden">
-              <div className="font-semibold truncate">{arg.event.title}</div>
-              {!arg.event.allDay && (
-                <div className="text-xs opacity-90">
-                  {new Date(arg.event.start).toLocaleTimeString('fr-FR', {
-                    hour: '2-digit',
-                    minute: '2-digit'
-                  })}
-                  {arg.event.end && (
-                    <> - {new Date(arg.event.end).toLocaleTimeString('fr-FR', {
+                  backgroundColor: cal.color,
+                  borderColor: cal.color,
+                  textColor: '#ffffff',
+                  extendedProps: {
+                    location: event.location,
+                    description: event.description,
+                    calendarId: event.calendarId,
+                    originalEvent: event
+                  }
+                }))
+              )}
+            eventContent={(arg) => (
+              <div className="p-1 overflow-hidden">
+                <div className="font-semibold truncate">{arg.event.title}</div>
+                {!arg.event.allDay && (
+                  <div className="text-xs opacity-90">
+                    {new Date(arg.event.start).toLocaleTimeString('fr-FR', {
                       hour: '2-digit',
                       minute: '2-digit'
-                    })}</>
-                  )}
-                </div>
-              )}
-              {arg.event.extendedProps.location && (
-                <div className="text-xs opacity-75 truncate">
-                  <MapPin className="inline-block w-3 h-3 mr-1" />
-                  {arg.event.extendedProps.location}
-                </div>
-              )}
-            </div>
-          )}
-          eventClassNames="rounded-md shadow-sm hover:shadow-md transition-shadow cursor-pointer"
-          locale={frLocale}
+                    })}
+                    {arg.event.end && (
+                      <> - {new Date(arg.event.end).toLocaleTimeString('fr-FR', {
+                        hour: '2-digit',
+                        minute: '2-digit'
+                      })}</>
+                    )}
+                  </div>
+                )}
+                {arg.event.extendedProps.location && (
+                  <div className="text-xs opacity-75 truncate">
+                    <MapPin className="inline-block w-3 h-3 mr-1" />
+                    {arg.event.extendedProps.location}
+                  </div>
+                )}
+              </div>
+            )}
+            eventClassNames="rounded-md shadow-sm hover:shadow-md transition-shadow cursor-pointer"
+            locale={frLocale}
               selectable={true}
               selectMirror={true}
-          dayMaxEvents={false}
+              dayMaxEvents={true}
               weekends={true}
               select={handleDateSelect}
               eventClick={handleEventClick}
-          height="auto"
+            height="auto"
               aspectRatio={1.8}
-          slotMinTime="06:00:00"
-          slotMaxTime="22:00:00"
-          allDaySlot={true}
-          allDayText="Toute la journée"
-          slotLabelFormat={{
-            hour: '2-digit',
-            minute: '2-digit',
-            hour12: false
-          }}
-        />
-      </div>
+            slotMinTime="06:00:00"
+            slotMaxTime="22:00:00"
+            allDaySlot={true}
+            allDayText="Toute la journée"
+            slotLabelFormat={{
+              hour: '2-digit',
+              minute: '2-digit',
+              hour12: false
+            }}
+            />
+          )}
+        </Card>
 
       {/* Calendar dialog */}
         <CalendarDialog