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

---
 components/calendar/calendar-client.tsx | 240 +++++++++---------------
 1 file changed, 88 insertions(+), 152 deletions(-)

diff --git a/components/calendar/calendar-client.tsx b/components/calendar/calendar-client.tsx
index 36cf1e09..a0d44e9e 100644
--- a/components/calendar/calendar-client.tsx
+++ b/components/calendar/calendar-client.tsx
@@ -592,161 +592,97 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
 
   return (
     <div className="space-y-4">
-      <StatisticsPanel statistics={statistics} />
+      <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);
+              }}
+            >
+              <Plus className="mr-2 h-4 w-4" />
+              Nouveau calendrier
+            </Button>
+            <Button
+              onClick={() => {
+                setSelectedEvent(null);
+                setIsEventModalOpen(true);
+              }}
+            >
+              <Plus className="mr-2 h-4 w-4" />
+              Nouvel événement
+            </Button>
+          </div>
 
-      <div className="grid grid-cols-12 gap-4">
-        <div className="col-span-8">
-          <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);
-                  }}
-                >
-                  <Plus className="mr-2 h-4 w-4" />
-                  Nouveau calendrier
-                </Button>
-                <Button
-                  onClick={() => {
-                    setSelectedEvent(null);
-                    setIsEventModalOpen(true);
-                  }}
-                >
-                  <Plus className="mr-2 h-4 w-4" />
-                  Nouvel événement
-                </Button>
-              </div>
+          <Tabs value={view} className="w-auto">
+            <TabsList>
+              <TabsTrigger
+                value="dayGridMonth"
+                onClick={() => handleViewChange("dayGridMonth")}
+              >
+                Mois
+              </TabsTrigger>
+              <TabsTrigger
+                value="timeGridWeek"
+                onClick={() => handleViewChange("timeGridWeek")}
+              >
+                Semaine
+              </TabsTrigger>
+              <TabsTrigger
+                value="timeGridDay"
+                onClick={() => handleViewChange("timeGridDay")}
+              >
+                Jour
+              </TabsTrigger>
+            </TabsList>
+          </Tabs>
+        </div>
 
-              <Tabs value={view} className="w-auto">
-                <TabsList>
-                  <TabsTrigger
-                    value="dayGridMonth"
-                    onClick={() => handleViewChange("dayGridMonth")}
-                  >
-                    Mois
-                  </TabsTrigger>
-                  <TabsTrigger
-                    value="timeGridWeek"
-                    onClick={() => handleViewChange("timeGridWeek")}
-                  >
-                    Semaine
-                  </TabsTrigger>
-                  <TabsTrigger
-                    value="timeGridDay"
-                    onClick={() => handleViewChange("timeGridDay")}
-                  >
-                    Jour
-                  </TabsTrigger>
-                </TabsList>
-              </Tabs>
-            </div>
-
-            {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>
-            ) : (
-              <FullCalendar
-                ref={calendarRef}
-                plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
-                initialView={view}
-                headerToolbar={{
-                  left: "prev,next today",
-                  center: "title",
-                  right: "",
-                }}
-                events={calendars.flatMap(cal => 
-                  cal.events.map(event => ({
-                    id: event.id,
-                    title: event.title,
-                    start: event.start,
-                    end: event.end,
-                    allDay: event.isAllDay,
-                    description: event.description,
-                    location: event.location,
-                    calendarId: event.calendarId,
-                    originalEvent: event,
-                    backgroundColor: cal.color,
-                    textColor: '#ffffff',
-                    borderColor: cal.color,
-                  }))
-                )}
-                locale={frLocale}
-                selectable={true}
-                selectMirror={true}
-                dayMaxEvents={true}
-                weekends={true}
-                select={handleDateSelect}
-                eventClick={(clickInfo) => {
-                  handleEventClick(clickInfo);
-                  setSelectedEventPreview(clickInfo.event.extendedProps.originalEvent);
-                }}
-                height="auto"
-                aspectRatio={1.8}
-              />
+        {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>
+        ) : (
+          <FullCalendar
+            ref={calendarRef}
+            plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
+            initialView={view}
+            headerToolbar={{
+              left: "prev,next today",
+              center: "title",
+              right: "",
+            }}
+            events={calendars.flatMap(cal => 
+              cal.events.map(event => ({
+                id: event.id,
+                title: event.title,
+                start: event.start,
+                end: event.end,
+                allDay: event.isAllDay,
+                description: event.description,
+                location: event.location,
+                calendarId: event.calendarId,
+                originalEvent: event,
+                backgroundColor: cal.color,
+                textColor: '#ffffff',
+                borderColor: cal.color,
+              }))
             )}
-          </Card>
-        </div>
-
-        <div className="col-span-4 space-y-4">
-          {selectedEventPreview ? (
-            <EventPreview 
-              event={selectedEventPreview} 
-              calendar={calendars.find(c => c.id === selectedEventPreview.calendarId)!} 
-            />
-          ) : (
-            <Card className="p-4">
-              <div className="space-y-4">
-                <h3 className="font-medium">Mini-calendrier</h3>
-                <FullCalendar
-                  plugins={[dayGridPlugin]}
-                  initialView="dayGridMonth"
-                  headerToolbar={false}
-                  height="auto"
-                  aspectRatio={1}
-                  events={calendars.flatMap(cal => 
-                    cal.events.map(event => ({
-                      id: event.id,
-                      title: event.title,
-                      start: event.start,
-                      end: event.end,
-                      backgroundColor: cal.color,
-                    }))
-                  )}
-                  locale={frLocale}
-                />
-              </div>
-            </Card>
-          )}
-
-          <Card className="p-4">
-            <h3 className="font-medium mb-4">Calendriers</h3>
-            <div className="space-y-2">
-              {calendars.map((calendar) => (
-                <Button
-                  key={calendar.id}
-                  variant={calendar.id === selectedCalendarId ? "secondary" : "ghost"}
-                  className="w-full justify-start"
-                  onClick={() => setSelectedCalendarId(calendar.id)}
-                >
-                  <div 
-                    className="w-3 h-3 rounded-full mr-2" 
-                    style={{ backgroundColor: calendar.color }}
-                  />
-                  {calendar.name}
-                  <Badge variant="outline" className="ml-auto">
-                    {calendar.events.length}
-                  </Badge>
-                </Button>
-              ))}
-            </div>
-          </Card>
-        </div>
-      </div>
+            locale={frLocale}
+            selectable={true}
+            selectMirror={true}
+            dayMaxEvents={true}
+            weekends={true}
+            select={handleDateSelect}
+            eventClick={handleEventClick}
+            height="auto"
+            aspectRatio={1.8}
+          />
+        )}
+      </Card>
 
       {/* Calendar dialog */}
       <CalendarDialog