New date picker for events form

frontend/components/date-time-picker.tsx

@@ -0,0 +1,114 @@
+"use client"
+
+import * as React from "react";
+import { format } from "date-fns";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+
+interface DateTimePickerProps {
+	onDateSelectChange: (selectedDate: Date | undefined) => void;
+}
+
+export function DateTimePicker({
+	onDateSelectChange
+}: DateTimePickerProps) {
+	const [date, setDate] = React.useState<Date>();
+	const [isOpen, setIsOpen] = React.useState(false); 
+	// TODO : this is buggy as hell
+
+	const hours = Array.from({ length: 24 }, (_, i) => i);
+	const handleDateSelect = (selectedDate: Date | undefined) => {
+		if (selectedDate) {
+			setDate(selectedDate);
+			onDateSelectChange(selectedDate)
+		}
+	};
+
+	const handleTimeChange = (
+		type: "hour" | "minute",
+		value: string
+	) => {
+		if (date) {
+			const newDate = new Date(date);
+			if (type === "hour") {
+				newDate.setHours(parseInt(value));
+			} else if (type === "minute") {
+				newDate.setMinutes(parseInt(value));
+			}
+			setDate(newDate);
+		}
+	};
+
+	return (
+		<Popover open={isOpen} onOpenChange={setIsOpen}>
+			<PopoverTrigger asChild>
+				<Button
+					variant="outline"
+					className={cn(
+						"w-fit justify-start text-left font-normal",
+						!date && "text-muted-foreground"
+					)}
+				>
+					{/*<CalendarIcon className="mr-2 h-4 w-4" />*/}
+					<p className="w-full">  {date ? (
+						format(date, "MM/dd/yyyy hh:mm")
+					) : (
+						<span>MM/DD/YYYY hh:mm</span>
+					)} </p>
+				</Button>
+			</PopoverTrigger>
+			<PopoverContent className="w-auto p-0">
+				<div className="sm:flex">
+					<Calendar
+						mode="single"
+						selected={date}
+						onSelect={handleDateSelect}
+						initialFocus
+					/>
+					<div className="flex flex-col sm:flex-row sm:h-[300px] divide-y sm:divide-y-0 sm:divide-x">
+						<ScrollArea className="w-64 sm:w-auto">
+							<div className="flex sm:flex-col p-2">
+								{hours.reverse().map((hour) => (
+									<Button
+										key={hour}
+										size="icon"
+										variant={date && date.getHours() === hour ? "default" : "ghost"}
+										className="sm:w-full shrink-0 aspect-square"
+										onClick={() => handleTimeChange("hour", hour.toString())}
+									>
+										{hour}
+									</Button>
+								))}
+							</div>
+							<ScrollBar orientation="horizontal" className="sm:hidden" />
+						</ScrollArea>
+						<ScrollArea className="w-64 sm:w-auto">
+							<div className="flex sm:flex-col p-2">
+								{Array.from({ length: 12 }, (_, i) => i * 5).map((minute) => (
+									<Button
+										key={minute}
+										size="icon"
+										variant={date && date.getMinutes() === minute ? "default" : "ghost"}
+										className="sm:w-full shrink-0 aspect-square"
+										onClick={() => handleTimeChange("minute", minute.toString())}
+									>
+										{minute.toString().padStart(2, '0')}
+									</Button>
+								))}
+							</div>
+							<ScrollBar orientation="horizontal" className="sm:hidden" />
+						</ScrollArea>
+					</div>
+				</div>
+			</PopoverContent>
+		</Popover>
+	);
+}

frontend/components/planning.tsx

@@ -32,6 +32,7 @@ import { Checkbox } from "@/components/ui/checkbox";
 import { eventNames } from "process";
 import { useSearchParams } from "next/navigation";
 import { CheckedState } from "@radix-ui/react-checkbox";
+import { DateTimePicker } from "./date-time-picker";
 
 interface CalendarEventExternalDB extends CalendarEventExternal {
 	status: "Active" | "Inactive"
@@ -141,27 +142,34 @@ const Planning: React.FC<{
 						setNewEvent((e) => (open ? e : null));
 					}}
 					event={newEvent}
-					onStartChange={(e) => {
+					//onStartChange={(e) => {
-						const val = e.currentTarget.value;
+					//	const val = e.currentTarget.value;
+					//	setNewEvent((ev) => {
+					//		if (ev)
+					//			return {
+					//				...ev,
+					//				start: val,
+					//			};
+					//		return ev;
+					//	});
+					//}}
+					onStartDateChange={date => {
 						setNewEvent((ev) => {
-							if (ev)
+							if (ev) return {
-								return {
+								...ev,
-									...ev,
+								start: date,
-									start: val,
+							};
-								};
+							return ev
-							return ev;
+						})
-						});
 					}}
-					onEndChange={(e) => {
+					onEndDateChange={date => {
-						const val = e.currentTarget.value;
 						setNewEvent((ev) => {
-							if (ev)
+							if (ev) return {
-								return {
+								...ev,
-									...ev,
+								end: date,
-									end: val,
+							};
-								};
+							return ev
-							return ev;
+						})
-						});
 					}}
 					onTitleChange={(e) => {
 						const val = e.currentTarget.value;
@@ -178,6 +186,17 @@ const Planning: React.FC<{
 						e ? setEventStatus("Active")
 							: setEventStatus("Inactive")
 					}}
+					//onEndChange={(e) => {
+					//	const val = e.currentTarget.value;
+					//	setNewEvent((ev) => {
+					//		if (ev)
+					//			return {
+					//				...ev,
+					//				end: val,
+					//			};
+					//		return ev;
+					//	});
+					//}}
 					onAdd={async () => {
 						try {
 							const event: Omit<CalendarEventExternal, "id"> = {
@@ -216,24 +235,22 @@ const Planning: React.FC<{
 						setEventSelected((e) => (open ? e : null));
 					}}
 					event={eventSelected}
-					onStartChange={(e) => {
+					onStartDateChange={(date) => {
-						const val = e.currentTarget.value;
 						setEventSelected((ev) => {
 							if (ev)
 								return {
 									...ev,
-									start: val,
+									start: date,
 								};
 							return ev;
 						});
 					}}
-					onEndChange={(e) => {
+					onEndDateChange={(date) => {
-						const val = e.currentTarget.value;
 						setEventSelected((ev) => {
 							if (ev)
 								return {
 									...ev,
-									end: val,
+									end: date,
 								};
 							return ev;
 						});
@@ -273,8 +290,10 @@ const Planning: React.FC<{
 
 const EventDialog: React.FC<
 	{
-		onEndChange: React.ChangeEventHandler<HTMLInputElement>;
+		// onEndChange: React.ChangeEventHandler<HTMLInputElement>;
-		onStartChange: React.ChangeEventHandler<HTMLInputElement>;
+		// onStartChange: React.ChangeEventHandler<HTMLInputElement>;
+		onStartDateChange: (selectedDate: Date | undefined) => void;
+		onEndDateChange: (selectedDate: Date | undefined) => void;
 		onDelete?: () => void;
 		onUpdate?: () => void;
 		onAdd?: () => void;
@@ -285,8 +304,10 @@ const EventDialog: React.FC<
 > = ({
 	open,
 	onOpenChange,
-	onEndChange,
+	// onEndChange,
-	onStartChange,
+	// onStartChange,
+	onStartDateChange,
+	onEndDateChange,
 	onDelete,
 	onUpdate,
 	onAdd,
@@ -294,7 +315,6 @@ const EventDialog: React.FC<
 	onActiveStateChange,
 	event,
 }) => {
-
 		const [checked, setChecked] = useState<CheckedState>(event.status === "Active")
 
 		return (
@@ -316,68 +336,29 @@ const EventDialog: React.FC<
 								onChange={onTitleChange}
 								className="col-span-3"
 								type="text"
-							/>
+							/> 
 						</div>
 
 						<div className="grid grid-cols-4 items-center gap-4">
 							<Label htmlFor="start" className="text-right">
 								Début
 							</Label>
-							{/*<Popover>
+							<DateTimePicker
-								<PopoverTrigger asChild>
+								onDateSelectChange={date => onStartDateChange(date)}
-									<Button
-										variant={"outline"}
-										className={cn(
-											"w-[240px] pl-3 text-left font-normal",
-											!eventSelected?.start &&
-												"text-muted-foreground",
-										)}
-									>
-										{eventSelected?.start ? (
-											format(eventSelected?.start, "PPP")
-										) : (
-											<span>Choisissez une date.</span>
-										)}
-										<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
-									</Button>
-								</PopoverTrigger>
-								<PopoverContent
-									className="w-auto p-0"
-									align="start"
-								>
-									<Calendar
-										mode="single"
-										selected={
-											new Date(
-												eventSelected?.start ??
-													Date.now(),
-											)
-										}
-										// onSelect={field.onChange}
-										disabled={(date) =>
-											date > new Date() ||
-											date < new Date("1900-01-01")
-										}
-										initialFocus
-									/>
-								</PopoverContent>
-							</Popover> */}
-							<Input
-								id="start"
-								value={event.start || ""}
-								onChange={onStartChange}
-								className="col-span-3"
 							/>
 						</div>
 						<div className="grid grid-cols-4 items-center gap-4">
 							<Label htmlFor="end" className="text-right">
 								Fin
 							</Label>
-							<Input
+							{/*<Input
-								id="end"
+												id="end"
-								value={event.end || ""}
+												value={event.end || ""}
-								onChange={onEndChange}
+												onChange={onEndChange}
-								className="col-span-3"
+												className="col-span-3"
+											/> */}
+							<DateTimePicker
+								onDateSelectChange={date => onEndDateChange(date)}
 							/>
 						</div>
 						<div className="grid grid-cols-4 items-center gap-4">
@@ -399,9 +380,6 @@ const EventDialog: React.FC<
 							/>
 						</div>
 					</div>
-					<div className="">
-						Date syntax : yyyy-MM-dd HH:mm
-					</div>
 					<DialogFooter className="flex flex-row justify-end">
 						{onUpdate && (
 							<Button
@@ -427,8 +405,8 @@ const EventDialog: React.FC<
 							</Button>
 						)}
 					</DialogFooter>
-				</DialogContent>
+				</DialogContent >
-			</Dialog>
+			</Dialog >
 		);
 	};
 

frontend/components/ui/calendar.tsx

@@ -0,0 +1,76 @@
+"use client"
+
+import * as React from "react"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+import { DayPicker } from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      classNames={{
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        nav_button: cn(
+          buttonVariants({ variant: "outline" }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell:
+          "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: cn(
+          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
+          props.mode === "range"
+            ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
+            : "[&:has([aria-selected])]:rounded-md"
+        ),
+        day: cn(
+          buttonVariants({ variant: "ghost" }),
+          "h-8 w-8 p-0 font-normal aria-selected:opacity-100"
+        ),
+        day_range_start: "day-range-start",
+        day_range_end: "day-range-end",
+        day_selected:
+          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-accent text-accent-foreground",
+        day_outside:
+          "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle:
+          "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        IconLeft: ({ className, ...props }) => (
+          <ChevronLeft className={cn("h-4 w-4", className)} {...props} />
+        ),
+        IconRight: ({ className, ...props }) => (
+          <ChevronRight className={cn("h-4 w-4", className)} {...props} />
+        ),
+      }}
+      {...props}
+    />
+  )
+}
+Calendar.displayName = "Calendar"
+
+export { Calendar }

frontend/package-lock.json

@@ -21,7 +21,7 @@
 				"@radix-ui/react-scroll-area": "^1.2.2",
 				"@radix-ui/react-select": "^2.1.4",
 				"@radix-ui/react-separator": "^1.1.1",
-				"@radix-ui/react-slot": "^1.1.1",
+				"@radix-ui/react-slot": "^1.1.2",
 				"@radix-ui/react-switch": "^1.1.2",
 				"@radix-ui/react-tabs": "^1.1.2",
 				"@radix-ui/react-tooltip": "^1.1.6",
@@ -36,12 +36,13 @@
 				"class-variance-authority": "^0.7.1",
 				"clsx": "^2.1.1",
 				"cookies-next": "^5.1.0",
-				"date-fns": "^3.0.0",
+				"date-fns": "^3.6.0",
 				"embla-carousel-react": "^8.5.2",
 				"lucide-react": "^0.471.1",
 				"next": "15.1.4",
 				"next-themes": "^0.4.4",
 				"react": "^19.0.0",
+				"react-day-picker": "^8.10.1",
 				"react-dom": "^19.0.0",
 				"react-dropzone": "^14.3.5",
 				"react-hook-form": "^7.54.2",
@@ -1159,6 +1160,24 @@
 				}
 			}
 		},
+		"node_modules/@radix-ui/react-collection/node_modules/@radix-ui/react-slot": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.1.tgz",
+			"integrity": "sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/react-compose-refs": "1.1.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@radix-ui/react-compose-refs": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz",
@@ -1225,6 +1244,24 @@
 				}
 			}
 		},
+		"node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-slot": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.1.tgz",
+			"integrity": "sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/react-compose-refs": "1.1.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@radix-ui/react-direction": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.0.tgz",
@@ -1417,6 +1454,24 @@
 				}
 			}
 		},
+		"node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-slot": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.1.tgz",
+			"integrity": "sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/react-compose-refs": "1.1.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@radix-ui/react-navigation-menu": {
 			"version": "1.2.3",
 			"resolved": "https://registry.npmjs.org/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.2.3.tgz",
@@ -1490,6 +1545,24 @@
 				}
 			}
 		},
+		"node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-slot": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.1.tgz",
+			"integrity": "sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/react-compose-refs": "1.1.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@radix-ui/react-popper": {
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.1.tgz",
@@ -1593,6 +1666,24 @@
 				}
 			}
 		},
+		"node_modules/@radix-ui/react-primitive/node_modules/@radix-ui/react-slot": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.1.tgz",
+			"integrity": "sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/react-compose-refs": "1.1.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@radix-ui/react-roving-focus": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.1.tgz",
@@ -1698,6 +1789,24 @@
 				}
 			}
 		},
+		"node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-slot": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.1.tgz",
+			"integrity": "sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/react-compose-refs": "1.1.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@radix-ui/react-separator": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.1.tgz",
@@ -1722,9 +1831,9 @@
 			}
 		},
 		"node_modules/@radix-ui/react-slot": {
-			"version": "1.1.1",
+			"version": "1.1.2",
-			"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.1.tgz",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.2.tgz",
-			"integrity": "sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g==",
+			"integrity": "sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==",
 			"license": "MIT",
 			"dependencies": {
 				"@radix-ui/react-compose-refs": "1.1.1"
@@ -1832,6 +1941,24 @@
 				}
 			}
 		},
+		"node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-slot": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.1.tgz",
+			"integrity": "sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/react-compose-refs": "1.1.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@radix-ui/react-use-callback-ref": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
@@ -1993,9 +2120,15 @@
 			"license": "MIT"
 		},
 		"node_modules/@schedule-x/calendar": {
+<<<<<<< Updated upstream
 			"version": "2.17.0",
 			"resolved": "https://registry.npmjs.org/@schedule-x/calendar/-/calendar-2.17.0.tgz",
 			"integrity": "sha512-a/Rpf+yOKjTpiMXNmZzhzlsF1/NvbUL4CRglHlY4Dn/oK/d3bOA1Q++y/Qzsv77y+cM7Ly1zLVl2aFvJNqT7Zg==",
+=======
+			"version": "2.18.0",
+			"resolved": "https://registry.npmjs.org/@schedule-x/calendar/-/calendar-2.18.0.tgz",
+			"integrity": "sha512-ZnlYFD8P9dXxCsDpEMviOK8xVK4b871s+m4mWhLsIutyFUNwxFw/kVFtrMHCZhin2SRoh+pyXBfQqsHxQDMpmA==",
+>>>>>>> Stashed changes
 			"license": "MIT",
 			"peer": true,
 			"peerDependencies": {
@@ -5937,6 +6070,20 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/react-day-picker": {
+			"version": "8.10.1",
+			"resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-8.10.1.tgz",
+			"integrity": "sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA==",
+			"license": "MIT",
+			"funding": {
+				"type": "individual",
+				"url": "https://github.com/sponsors/gpbl"
+			},
+			"peerDependencies": {
+				"date-fns": "^2.28.0 || ^3.0.0",
+				"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+			}
+		},
 		"node_modules/react-dom": {
 			"version": "19.0.0",
 			"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.0.0.tgz",

frontend/package.json

@@ -22,7 +22,7 @@
 		"@radix-ui/react-scroll-area": "^1.2.2",
 		"@radix-ui/react-select": "^2.1.4",
 		"@radix-ui/react-separator": "^1.1.1",
-		"@radix-ui/react-slot": "^1.1.1",
+		"@radix-ui/react-slot": "^1.1.2",
 		"@radix-ui/react-switch": "^1.1.2",
 		"@radix-ui/react-tabs": "^1.1.2",
 		"@radix-ui/react-tooltip": "^1.1.6",
@@ -37,12 +37,13 @@
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
 		"cookies-next": "^5.1.0",
-		"date-fns": "^3.0.0",
+		"date-fns": "^3.6.0",
 		"embla-carousel-react": "^8.5.2",
 		"lucide-react": "^0.471.1",
 		"next": "15.1.4",
 		"next-themes": "^0.4.4",
 		"react": "^19.0.0",
+		"react-day-picker": "^8.10.1",
 		"react-dom": "^19.0.0",
 		"react-dropzone": "^14.3.5",
 		"react-hook-form": "^7.54.2",