calendar 17

components/calendar/calendar-client.tsx

@@ -40,7 +40,8 @@ import { Separator } from "@/components/ui/separator";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import DatePicker, { registerLocale } from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
-import { fr } from 'date-fns/locale';
+import { fr } from "date-fns/locale";
+import { Checkbox } from "@/components/ui/checkbox";
 
 // Register French locale
 registerLocale('fr', fr);
@@ -863,37 +864,23 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
       />
 
       {/* Event dialog */}
-      <Dialog open={isEventModalOpen} onOpenChange={setIsEventModalOpen}>
+      <Dialog open={isEventModalOpen} onOpenChange={(open) => !open && setIsEventModalOpen(false)}>
-        <DialogContent className="sm:max-w-[500px]">
+        <DialogContent className="sm:max-w-lg">
           <DialogHeader>
-            <DialogTitle className="text-xl font-semibold">
+            <DialogTitle>
               {selectedEvent ? "Modifier l'événement" : "Nouvel événement"}
             </DialogTitle>
           </DialogHeader>
-          <div className="space-y-6 py-4">
+
+          <div className="space-y-4 py-4">
             <div className="space-y-2">
-              <Label htmlFor="event-title">Titre</Label>
+              <Label>Titre</Label>
               <Input
-                id="event-title"
                 value={eventForm.title}
                 onChange={(e) =>
                   setEventForm({ ...eventForm, title: e.target.value })
                 }
                 placeholder="Titre de l'événement"
-                className="w-full"
-              />
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="event-description">Description</Label>
-              <Textarea
-                id="event-description"
-                value={eventForm.description || ""}
-                onChange={(e) =>
-                  setEventForm({ ...eventForm, description: e.target.value || null })
-                }
-                placeholder="Description de l'événement"
-                className="w-full"
               />
             </div>
 
@@ -907,10 +894,12 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
                     showTimeSelect
                     timeFormat="HH:mm"
                     timeIntervals={15}
-                    dateFormat="Pp"
+                    timeCaption="Heure"
+                    dateFormat="dd/MM/yyyy HH:mm"
                     locale="fr"
                     className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
                     placeholderText="Sélectionner la date et l'heure"
+                    customInput={<Input />}
                   />
                 </div>
               </div>
@@ -924,42 +913,70 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
                     showTimeSelect
                     timeFormat="HH:mm"
                     timeIntervals={15}
-                    dateFormat="Pp"
+                    timeCaption="Heure"
+                    dateFormat="dd/MM/yyyy HH:mm"
                     locale="fr"
                     className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
                     placeholderText="Sélectionner la date et l'heure"
                     minDate={getDateFromString(eventForm.start)}
+                    customInput={<Input />}
                   />
                 </div>
               </div>
             </div>
 
+            <div className="flex items-center space-x-2">
+              <Checkbox
+                id="allDay"
+                checked={eventForm.allDay}
+                onCheckedChange={(checked) =>
+                  setEventForm({ ...eventForm, allDay: checked as boolean })
+                }
+              />
+              <Label htmlFor="allDay">Toute la journée</Label>
+            </div>
+
             <div className="space-y-2">
-              <Label htmlFor="event-location">Lieu</Label>
+              <Label>Lieu</Label>
               <Input
-                id="event-location"
                 value={eventForm.location || ""}
                 onChange={(e) =>
-                  setEventForm({ ...eventForm, location: e.target.value || null })
+                  setEventForm({ ...eventForm, location: e.target.value })
                 }
-                placeholder="Lieu de l'événement"
+                placeholder="Ajouter un lieu"
-                className="w-full"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label>Description</Label>
+              <Textarea
+                value={eventForm.description || ""}
+                onChange={(e) =>
+                  setEventForm({ ...eventForm, description: e.target.value })
+                }
+                placeholder="Ajouter une description"
               />
             </div>
           </div>
 
-          <DialogFooter className="flex justify-between">
+          <DialogFooter>
             {selectedEvent && (
               <Button
                 variant="destructive"
                 onClick={handleEventDelete}
                 disabled={loading}
               >
-                <X className="w-4 h-4 mr-2" />
+                {loading ? (
-                Supprimer
+                  <>
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    Suppression...
+                  </>
+                ) : (
+                  "Supprimer"
+                )}
               </Button>
             )}
-            <div className="space-x-2">
+            <div className="flex space-x-2">
               <Button
                 variant="outline"
                 onClick={() => setIsEventModalOpen(false)}
@@ -967,21 +984,16 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
               >
                 Annuler
               </Button>
-              <Button 
+              <Button onClick={handleEventSubmit} disabled={loading}>
-                onClick={handleEventSubmit} 
-                disabled={loading || !eventForm.title}
-                className="bg-primary hover:bg-primary/90"
-              >
                 {loading ? (
                   <>
-                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                    {selectedEvent ? "Modification..." : "Création..."}
+                    Enregistrement...
                   </>
+                ) : selectedEvent ? (
+                  "Mettre à jour"
                 ) : (
-                  <>
+                  "Créer"
-                    <Check className="w-4 h-4 mr-2" />
-                    {selectedEvent ? "Modifier" : "Créer"}
-                  </>
                 )}
               </Button>
             </div>

prisma/schema.prisma

@@ -20,6 +20,8 @@ model Calendar {
   createdAt   DateTime @default(now())
   updatedAt   DateTime @updatedAt
   events      Event[]
+
+  @@index([userId])
 }
 
 model Event {