widget parole 30

app/page.tsx

@@ -1,6 +1,7 @@
 import { QuoteCard } from "@/components/quote-card";
 import { Parole } from "@/components/parole";
 import { Duties } from "@/components/flow";
+import { Calendar } from "@/components/calendar";
 
 export const metadata = {
   title: "Enkun - Dashboard",
@@ -13,7 +14,10 @@ export default function DashboardPage() {
         <div className='col-span-3'>
           <QuoteCard />
         </div>
-        <div className='col-span-6'>
+        <div className='col-span-3'>
+          <Calendar />
+        </div>
+        <div className='col-span-3'>
           <Parole />
         </div>
         <div className='col-span-3'>

components/calendar.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { RefreshCw, Calendar as CalendarIcon } from "lucide-react";
+import { useRouter } from "next/navigation";
+
+interface Event {
+  id: string;
+  title: string;
+  start: string;
+  end: string;
+  allDay: boolean;
+  calendar: string;
+}
+
+export function Calendar() {
+  const [events, setEvents] = useState<Event[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const router = useRouter();
+
+  const fetchEvents = async () => {
+    setLoading(true);
+    try {
+      // Placeholder for actual API call
+      // const response = await fetch('/api/calendar/events');
+      // const data = await response.json();
+      // setEvents(data.events);
+      setError(null);
+    } catch (err) {
+      console.error('Error fetching events:', err);
+      setError('Failed to load events');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchEvents();
+  }, []);
+
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString);
+    return new Intl.DateTimeFormat('fr-FR', {
+      day: '2-digit',
+      month: 'short'
+    }).format(date);
+  };
+
+  return (
+    <Card className="transition-transform duration-500 ease-in-out transform hover:scale-105 bg-white/95 backdrop-blur-sm border-0 shadow-lg">
+      <CardHeader className="flex flex-row items-center justify-between pb-2 border-b border-gray-100">
+        <CardTitle className="text-lg font-semibold text-gray-800">Calendar</CardTitle>
+        <Button 
+          variant="ghost" 
+          size="icon" 
+          onClick={() => fetchEvents()}
+          className="h-7 w-7 p-0 hover:bg-gray-100/50 rounded-full"
+        >
+          <RefreshCw className="h-3.5 w-3.5 text-gray-600" />
+        </Button>
+      </CardHeader>
+      <CardContent className="p-3">
+        {loading ? (
+          <div className="flex items-center justify-center py-6">
+            <div className="h-4 w-4 animate-spin rounded-full border-2 border-blue-500 border-t-transparent" />
+          </div>
+        ) : error ? (
+          <div className="text-xs text-red-500 text-center py-3">{error}</div>
+        ) : events.length === 0 ? (
+          <div className="text-xs text-gray-500 text-center py-6">No upcoming events</div>
+        ) : (
+          <div className="space-y-2 max-h-[400px] overflow-y-auto pr-1 scrollbar-thin scrollbar-thumb-gray-200 scrollbar-track-transparent">
+            {events.map((event) => (
+              <div 
+                key={event.id}
+                className="p-2 rounded-lg bg-white shadow-sm hover:shadow-md transition-all duration-200 border border-gray-100"
+              >
+                <div className="flex gap-2">
+                  <div className="flex-shrink-0 w-12 h-12 rounded-lg bg-blue-50 flex flex-col items-center justify-center border border-blue-100">
+                    <CalendarIcon className="h-4 w-4 text-blue-600" />
+                    <span className="text-[10px] font-medium text-blue-600 mt-0.5">
+                      {formatDate(event.start)}
+                    </span>
+                  </div>
+                  <div className="flex-1 min-w-0 space-y-1">
+                    <p className="text-sm font-medium text-gray-800 line-clamp-2">
+                      {event.title}
+                    </p>
+                    <div className="flex items-center text-gray-500 text-[10px] bg-gray-50 px-1.5 py-0.5 rounded-md">
+                      <span className="truncate">{event.calendar}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}