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

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

diff --git a/components/calendar/calendar-client.tsx b/components/calendar/calendar-client.tsx
index c29215b0..36cf1e09 100644
--- a/components/calendar/calendar-client.tsx
+++ b/components/calendar/calendar-client.tsx
@@ -9,12 +9,35 @@ import frLocale from "@fullcalendar/core/locales/fr";
 import { Card } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Loader2, Plus, Calendar as CalendarIcon, Check, X } from "lucide-react";
+import { 
+  Loader2, 
+  Plus, 
+  Calendar as CalendarIcon, 
+  Check, 
+  X, 
+  User, 
+  Clock, 
+  BarChart2, 
+  Settings, 
+  ChevronRight,
+  ChevronLeft,
+  Bell,
+  Users,
+  MapPin,
+  Tag,
+  ChevronDown,
+  ChevronUp
+} from "lucide-react";
 import { Calendar, Event } from "@prisma/client";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { Label } from "@/components/ui/label";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 
 // Predefined professional color palette
 const colorPalette = [
@@ -35,6 +58,11 @@ const colorPalette = [
 interface CalendarClientProps {
   initialCalendars: (Calendar & { events: Event[] })[];
   userId: string;
+  userProfile: {
+    name: string;
+    email: string;
+    avatar?: string;
+  };
 }
 
 interface EventFormData {
@@ -233,7 +261,136 @@ function CalendarDialog({ open, onClose, onSave, initialData }: CalendarDialogPr
   );
 }
 
-export function CalendarClient({ initialCalendars, userId }: CalendarClientProps) {
+function StatisticsPanel({ statistics }: {
+  statistics: {
+    totalEvents: number;
+    upcomingEvents: number;
+    completedEvents: number;
+    meetingHours: number;
+  };
+}) {
+  return (
+    <div className="grid grid-cols-2 gap-4 p-4">
+      <Card className="p-4">
+        <div className="flex items-center gap-3">
+          <div className="p-2 bg-primary/10 rounded-full">
+            <CalendarIcon className="h-5 w-5 text-primary" />
+          </div>
+          <div>
+            <p className="text-sm font-medium">Total Événements</p>
+            <p className="text-2xl font-bold">{statistics.totalEvents}</p>
+          </div>
+        </div>
+      </Card>
+      <Card className="p-4">
+        <div className="flex items-center gap-3">
+          <div className="p-2 bg-primary/10 rounded-full">
+            <Clock className="h-5 w-5 text-primary" />
+          </div>
+          <div>
+            <p className="text-sm font-medium">Heures de Réunion</p>
+            <p className="text-2xl font-bold">{statistics.meetingHours}h</p>
+          </div>
+        </div>
+      </Card>
+      <Card className="p-4">
+        <div className="flex items-center gap-3">
+          <div className="p-2 bg-primary/10 rounded-full">
+            <Bell className="h-5 w-5 text-primary" />
+          </div>
+          <div>
+            <p className="text-sm font-medium">Prochains Événements</p>
+            <p className="text-2xl font-bold">{statistics.upcomingEvents}</p>
+          </div>
+        </div>
+      </Card>
+      <Card className="p-4">
+        <div className="flex items-center gap-3">
+          <div className="p-2 bg-primary/10 rounded-full">
+            <Check className="h-5 w-5 text-primary" />
+          </div>
+          <div>
+            <p className="text-sm font-medium">Événements Terminés</p>
+            <p className="text-2xl font-bold">{statistics.completedEvents}</p>
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+}
+
+function EventPreview({ event, calendar }: { event: Event; calendar: Calendar }) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  return (
+    <Card className="p-4 space-y-4">
+      <div className="flex items-start justify-between">
+        <div className="space-y-1">
+          <h3 className="font-medium">{event.title}</h3>
+          <div className="flex items-center gap-2 text-sm text-gray-500">
+            <Clock className="h-4 w-4" />
+            <span>
+              {new Date(event.start).toLocaleDateString('fr-FR', {
+                weekday: 'long',
+                day: 'numeric',
+                month: 'long',
+                hour: '2-digit',
+                minute: '2-digit'
+              })}
+            </span>
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <div 
+            className="w-3 h-3 rounded-full" 
+            style={{ backgroundColor: calendar.color }}
+          />
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => setIsExpanded(!isExpanded)}
+          >
+            {isExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+          </Button>
+        </div>
+      </div>
+
+      {isExpanded && (
+        <div className="space-y-4">
+          {event.description && (
+            <p className="text-sm text-gray-600">{event.description}</p>
+          )}
+
+          <div className="space-y-2">
+            {event.location && (
+              <div className="flex items-center gap-2 text-sm">
+                <MapPin className="h-4 w-4 text-gray-500" />
+                <span>{event.location}</span>
+              </div>
+            )}
+            {event.calendarId && (
+              <div className="flex items-center gap-2 text-sm">
+                <Tag className="h-4 w-4 text-gray-500" />
+                <span>{calendar.name}</span>
+              </div>
+            )}
+          </div>
+
+          <div className="flex items-center gap-2">
+            <Button variant="outline" size="sm" className="flex-1">
+              Modifier
+            </Button>
+            <Button variant="outline" size="sm" className="flex-1">
+              Supprimer
+            </Button>
+          </div>
+        </div>
+      )}
+    </Card>
+  );
+}
+
+export function CalendarClient({ initialCalendars, userId, userProfile }: CalendarClientProps) {
   const [calendars, setCalendars] = useState(initialCalendars);
   const [selectedCalendarId, setSelectedCalendarId] = useState<string>(
     initialCalendars[0]?.id || ""
@@ -254,6 +411,29 @@ export function CalendarClient({ initialCalendars, userId }: CalendarClientProps
     location: null,
   });
 
+  const [selectedEventPreview, setSelectedEventPreview] = useState<Event | null>(null);
+  const [statistics, setStatistics] = useState({
+    totalEvents: initialCalendars.reduce((acc, cal) => acc + cal.events.length, 0),
+    upcomingEvents: initialCalendars.reduce((acc, cal) => 
+      acc + cal.events.filter(e => new Date(e.start) > new Date()).length, 0
+    ),
+    completedEvents: initialCalendars.reduce((acc, cal) => 
+      acc + cal.events.filter(e => new Date(e.end) < new Date()).length, 0
+    ),
+    meetingHours: initialCalendars.reduce((acc, cal) => 
+      acc + cal.events.reduce((hours, e) => {
+        const duration = (new Date(e.end).getTime() - new Date(e.start).getTime()) / (1000 * 60 * 60);
+        return hours + duration;
+      }, 0)
+    , 0)
+  });
+
+  const upcomingEvents = initialCalendars
+    .flatMap(cal => cal.events)
+    .filter(event => new Date(event.start) > new Date())
+    .sort((a, b) => new Date(a.start).getTime() - new Date(b.start).getTime())
+    .slice(0, 5);
+
   const calendarRef = useRef<any>(null);
 
   const handleCalendarSave = async (calendarData: Partial<Calendar>) => {
@@ -412,114 +592,161 @@ export function CalendarClient({ initialCalendars, userId }: CalendarClientProps
 
   return (
     <div className="space-y-4">
-      {error && (
-        <div className="p-4 mb-4 text-red-500 bg-red-50 rounded-md">
-          {error}
-        </div>
-      )}
-      
-      {/* Calendar management */}
-      <div className="flex flex-wrap justify-between items-center gap-4 mb-4">
-        <div className="flex flex-wrap gap-2">
-          {calendars.map((calendar) => (
-            <Button
-              key={calendar.id}
-              variant={calendar.id === selectedCalendarId ? "default" : "outline"}
-              onClick={() => setSelectedCalendarId(calendar.id)}
-              style={{ backgroundColor: calendar.id === selectedCalendarId ? calendar.color : undefined }}
-            >
-              {calendar.name}
-            </Button>
-          ))}
-          <Button
-            variant="outline"
-            onClick={() => {
-              setSelectedCalendar(null);
-              setIsCalendarModalOpen(true);
-            }}
-          >
-            <Plus className="mr-2 h-4 w-4" />
-            Nouveau calendrier
-          </Button>
-        </div>
-        <Button
-          onClick={() => {
-            setSelectedEvent(null);
-            setIsEventModalOpen(true);
-          }}
-        >
-          <Plus className="mr-2 h-4 w-4" />
-          Nouvel événement
-        </Button>
-      </div>
+      <StatisticsPanel statistics={statistics} />
 
-      {/* View selector */}
-      <Tabs value={view} className="w-full">
-        <TabsList className="mb-4">
-          <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>
+      <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>
 
-        {/* Calendar display */}
-        <Card className="p-4">
-          {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>
+              <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>
-          ) : (
-            <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,
-                }))
-              )}
-              locale={frLocale}
-              selectable={true}
-              selectMirror={true}
-              dayMaxEvents={true}
-              weekends={true}
-              select={handleDateSelect}
-              eventClick={handleEventClick}
-              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,
+                  }))
+                )}
+                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}
+              />
+            )}
+          </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>
-      </Tabs>
+
+          <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>
 
       {/* Calendar dialog */}
       <CalendarDialog