agenda form

app/agenda/page.tsx

@@ -106,7 +106,7 @@ export default async function CalendarPage() {
     }, 0);
 
   return (
-    <div className="container mx-auto py-10">
+    <div className="flex flex-col h-full w-full bg-white">
       <CalendarClient 
         initialCalendars={calendars} 
         userId={session.user.id}

components/calendar/calendar-client.tsx

@@ -98,6 +98,7 @@ function CalendarDialog({ open, onClose, onSave, onDelete, initialData }: Calend
   const [customColorMode, setCustomColorMode] = useState(false);
   
   const isMainCalendar = initialData?.name === "Calendrier principal";
+  const isMissionOrGroupCalendar = initialData?.name?.startsWith("Mission:") || initialData?.name?.startsWith("Groupe:");
   
   useEffect(() => {
     if (open) {
@@ -173,7 +174,7 @@ function CalendarDialog({ open, onClose, onSave, onDelete, initialData }: Calend
                 onChange={(e) => setName(e.target.value)}
                 placeholder="Nom du calendrier"
                 required
-                disabled={isMainCalendar}
+                disabled={isMainCalendar || isMissionOrGroupCalendar}
                 className="rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 bg-white text-gray-900"
               />
             </div>
@@ -252,6 +253,7 @@ function CalendarDialog({ open, onClose, onSave, onDelete, initialData }: Calend
                 onChange={(e) => setDescription(e.target.value)}
                 placeholder="Description du calendrier"
                 rows={3}
+                disabled={isMissionOrGroupCalendar}
                 className="rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 bg-white text-gray-900"
               />
             </div>
@@ -259,12 +261,12 @@ function CalendarDialog({ open, onClose, onSave, onDelete, initialData }: Calend
 
           <DialogFooter className="mt-6 border-t border-gray-100 pt-4">
             <div className="flex justify-between w-full">
-              {initialData?.id && !isMainCalendar && (
+              {initialData?.id && !isMainCalendar && !isMissionOrGroupCalendar && (
                 <Button
                   type="button"
                   variant="destructive"
                   onClick={handleDelete}
-                  disabled={isSubmitting || isMainCalendar}
+                  disabled={isSubmitting || isMainCalendar || isMissionOrGroupCalendar}
                 >
                   <X className="w-4 h-4 mr-2" />
                   Supprimer
@@ -282,7 +284,7 @@ function CalendarDialog({ open, onClose, onSave, onDelete, initialData }: Calend
                 </Button>
                 <Button 
                   type="submit" 
-                  disabled={!name || isSubmitting || isMainCalendar}
+                  disabled={!name || isSubmitting || isMainCalendar || isMissionOrGroupCalendar}
                   className="rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white"
                 >
                   {isSubmitting 
@@ -840,7 +842,10 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
               ) : null}
             </div>
           </Button>
-          {calendar.name !== "Calendrier principal" && calendar.name !== "Default" && (
+          {calendar.name !== "Calendrier principal" && 
+           calendar.name !== "Default" && 
+           !calendar.name.startsWith("Mission:") && 
+           !calendar.name.startsWith("Groupe:") && (
             <Button
               variant="ghost"
               size="icon"
@@ -916,71 +921,75 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
   };
 
   return (
-    <div className="flex gap-4">
+    <div className="flex gap-4 h-full">
       {/* Left column for calendars */}
       <div className="w-64 flex-shrink-0">
         <Card className="p-4">
           <div className="flex items-center justify-between mb-4">
             <h3 className="text-lg font-semibold text-gray-900">Calendriers</h3>
-            <Button
-              onClick={() => {
-                setSelectedCalendar(null);
-                setIsCalendarModalOpen(true);
-              }}
-              size="sm"
-              variant="outline"
-              className="h-8"
-            >
-              <Plus className="h-4 w-4" />
-            </Button>
           </div>
           <CalendarSelector />
         </Card>
       </div>
 
       {/* Right column for calendar view */}
-      <div className="flex-1">
+      <div className="flex-1 flex flex-col">
-        <Card className="p-4">
+        <Card className="p-4 flex-1 flex flex-col">
           <div className="flex items-center justify-between mb-4">
             <div className="flex items-center gap-4">
-          <Button
+              {/* Display selected calendar name */}
-            onClick={() => {
+              {(() => {
-              setSelectedEvent(null);
+                const selectedCal = calendars.find(cal => visibleCalendarIds.includes(cal.id) && visibleCalendarIds.length === 1);
-                  setEventForm({
+                const displayName = selectedCal 
-                    title: "",
+                  ? (selectedCal.name === "Default" ? "Privée" : selectedCal.name)
-                    description: null,
+                  : "Tous les calendriers";
-                    start: new Date().toISOString(),
+                return (
-                    end: new Date(new Date().setHours(new Date().getHours() + 1)).toISOString(),
+                  <h2 className="text-lg font-semibold text-gray-900">
-                    allDay: false,
+                    {displayName}
-                    location: null,
+                  </h2>
-                    calendarId: selectedCalendarId
+                );
-                  });
+              })()}
-                  setIsEventModalOpen(true);
+              <Button
-                }}
+                onClick={() => {
-                className="bg-primary hover:bg-primary/90 text-white"
+                  setSelectedEvent(null);
-              >
+                      setEventForm({
-                <Plus className="mr-2 h-4 w-4" />
+                        title: "",
-                <span className="font-medium">Nouvel événement</span>
+                        description: null,
-          </Button>
+                        start: new Date().toISOString(),
-        </div>
+                        end: new Date(new Date().setHours(new Date().getHours() + 1)).toISOString(),
+                        allDay: false,
+                        location: null,
+                        calendarId: selectedCalendarId
+                      });
+                      setIsEventModalOpen(true);
+                    }}
+                    className="bg-blue-600 hover:bg-blue-700 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>
+              <TabsList className="bg-blue-600">
             <TabsTrigger
                   value="dayGridMonth"
               onClick={() => handleViewChange("dayGridMonth")}
+              className="data-[state=active]:bg-blue-700 data-[state=active]:text-white text-white hover:text-white/80"
             >
               Mois
             </TabsTrigger>
             <TabsTrigger
                   value="timeGridWeek"
               onClick={() => handleViewChange("timeGridWeek")}
+              className="data-[state=active]:bg-blue-700 data-[state=active]:text-white text-white hover:text-white/80"
             >
               Semaine
             </TabsTrigger>
             <TabsTrigger
                   value="timeGridDay"
               onClick={() => handleViewChange("timeGridDay")}
+              className="data-[state=active]:bg-blue-700 data-[state=active]:text-white text-white hover:text-white/80"
             >
               Jour
             </TabsTrigger>
@@ -988,6 +997,7 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
             </Tabs>
           </div>
 
+        <div className="flex-1 overflow-auto">
         <style jsx global>{`
           /* Fixed height and scrolling for day cells only */
           .fc .fc-daygrid-day-frame {
@@ -1156,6 +1166,7 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
             }}
             />
           )}
+        </div>
         </Card>
       </div>