Locations added

frontend/components/app-sidebar.tsx

@@ -13,10 +13,10 @@ import {
 	Loader2,
 	Camera,
 	UserRoundCog,
+	MapPin,
 } from "lucide-react";
 
 import { NavMain } from "@/components/nav-main";
-import { NavProjects } from "@/components/nav-projects";
 import { NavUser } from "@/components/nav-user";
 import { TeamSwitcher } from "@/components/team-switcher";
 import {
@@ -55,6 +55,17 @@ const data = {
 				},
 			],
 		},
+		{
+			title: "Adresses",
+			url: "/dashboard/locations",
+			icon: MapPin,
+			items: [
+				{
+					title: "Listes des adresses",
+					url: "/dashboard/locations",
+				},
+			],
+		},
 		{
 			title: "Planning",
 			icon: Calendar,

frontend/components/event-dialog.tsx

@@ -32,6 +32,20 @@ import {
 } from "@/components/ui/select";
 import { useForm } from "react-hook-form";
 import { useEffect } from "react";
+import ICalendarEvent from "@/interfaces/ICalendarEvent";
+import {
+	Command,
+	CommandInput,
+	CommandList,
+	CommandEmpty,
+	CommandGroup,
+	CommandItem,
+} from "@/components/ui/command";
+import { Textarea } from "@/components/ui/textarea";
+import { useApi } from "@/hooks/use-api";
+import { Location } from "@/types/types";
+import openNavigationApp from "@/lib/openNavigationMap";
+import formatLocation from "@/lib/formatLocation";
 
 export const eventFormSchema = z.object({
 	title: z.string().min(1, "Titre requis"),
@@ -43,6 +57,8 @@ export const eventFormSchema = z.object({
 	frequency: z.enum(["unique", "quotidien", "hebdomadaire", "mensuel"]),
 	frequencyEndDate: z.date().optional(),
 	isVisible: z.boolean().default(true),
+	description: z.string().optional(),
+	location: z.string().optional(), // Store as a formatted string
 });
 
 export type EventFormValues = z.infer<typeof eventFormSchema>;
@@ -55,13 +71,15 @@ const frequencies = [
 ];
 
 export const EventForm: React.FC<{
-	event: any;
+	event: ICalendarEvent | Omit<ICalendarEvent, "id">;
 	setForm: React.Dispatch<
 		React.SetStateAction<
 			ReturnType<typeof useForm<EventFormValues>> | undefined
 		>
 	>;
 }> = ({ event, setForm }) => {
+	const locations = useApi<Location[]>("/locations/all");
+
 	const _start = new Date(event.start ?? Date.now());
 	const _end = new Date(event.end ?? Date.now());
 
@@ -76,6 +94,8 @@ export const EventForm: React.FC<{
 			fullDay: event.fullday ?? false,
 			frequency: "unique",
 			isVisible: event.isVisible ?? true,
+			location: event.location,
+			description: event.description,
 		},
 	});
 
@@ -106,7 +126,7 @@ export const EventForm: React.FC<{
 				/>
 
 				<div className="grid grid-cols-[1fr,auto,1fr] items-end gap-2">
-					{/* Simplified startDate without FormField */}
+					{/* Start Date */}
 					<FormItem className="flex flex-col">
 						<FormLabel>Début</FormLabel>
 						<Popover>
@@ -135,25 +155,16 @@ export const EventForm: React.FC<{
 								align="start"
 							>
 								<div style={{ pointerEvents: "auto" }}>
-									{/* Force interactivity */}
 									<Calendar
 										mode="single"
 										selected={form.getValues("startDate")}
 										onSelect={(date) => {
-											console.log(
-												"Start date selected:",
-												date,
-											);
 											if (date) {
 												form.setValue(
 													"startDate",
 													date,
 													{ shouldValidate: true },
 												);
-												console.log(
-													"Updated startDate:",
-													form.getValues("startDate"),
-												);
 											}
 										}}
 										initialFocus
@@ -183,7 +194,7 @@ export const EventForm: React.FC<{
 
 					<span className="invisible">Until</span>
 
-					{/* Simplified endDate */}
+					{/* End Date */}
 					<FormItem className="flex flex-col">
 						<FormLabel>Fin</FormLabel>
 						<Popover>
@@ -216,18 +227,10 @@ export const EventForm: React.FC<{
 										mode="single"
 										selected={form.getValues("endDate")}
 										onSelect={(date) => {
-											console.log(
-												"End date selected:",
-												date,
-											);
 											if (date) {
 												form.setValue("endDate", date, {
 													shouldValidate: true,
 												});
-												console.log(
-													"Updated endDate:",
-													form.getValues("endDate"),
-												);
 											}
 										}}
 										initialFocus
@@ -286,7 +289,7 @@ export const EventForm: React.FC<{
 								>
 									<FormControl>
 										<SelectTrigger>
-											<SelectValue placeholder="Selectionner Fréquence" />
+											<SelectValue placeholder="Sélectionner Fréquence" />
 										</SelectTrigger>
 									</FormControl>
 									<SelectContent>
@@ -343,10 +346,6 @@ export const EventForm: React.FC<{
 												"frequencyEndDate",
 											)}
 											onSelect={(date) => {
-												console.log(
-													"Frequency end date selected:",
-													date,
-												);
 												if (date) {
 													form.setValue(
 														"frequencyEndDate",
@@ -356,12 +355,6 @@ export const EventForm: React.FC<{
 																true,
 														},
 													);
-													console.log(
-														"Updated frequencyEndDate:",
-														form.getValues(
-															"frequencyEndDate",
-														),
-													);
 												}
 											}}
 											initialFocus
@@ -380,7 +373,7 @@ export const EventForm: React.FC<{
 					render={({ field }) => (
 						<FormItem className="flex-1">
 							<FormLabel className="align-sub">
-								Evènement visible ?
+								Évènement visible ?
 							</FormLabel>
 							<FormControl>
 								<Checkbox
@@ -393,6 +386,97 @@ export const EventForm: React.FC<{
 						</FormItem>
 					)}
 				/>
+
+				{/* Updated Location Field with Command */}
+				<FormField
+					control={form.control}
+					name="location"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Lieu</FormLabel>
+							<FormControl>
+								<Command className="rounded-lg border shadow-md">
+									<CommandInput
+										placeholder="Rechercher un lieu..."
+										value={field.value || ""}
+										onValueChange={(value) =>
+											field.onChange(value)
+										}
+									/>
+									<CommandList>
+										{locations.isLoading && (
+											<CommandEmpty>
+												Chargement...
+											</CommandEmpty>
+										)}
+										{!locations.isLoading &&
+											!locations.data?.length && (
+												<CommandEmpty>
+													Aucun lieu trouvé.
+												</CommandEmpty>
+											)}
+										{!locations.isLoading &&
+											locations.data?.length && (
+												<CommandGroup heading="Suggestions">
+													{locations.data
+														.filter((location) =>
+															formatLocation(
+																location,
+															)
+																.toLowerCase()
+																.includes(
+																	(
+																		field.value ||
+																		""
+																	).toLowerCase(),
+																),
+														)
+														.map((location) => (
+															<CommandItem
+																key={
+																	location.id
+																}
+																onSelect={() => {
+																	const formatted =
+																		formatLocation(
+																			location,
+																		);
+																	field.onChange(
+																		formatted,
+																	);
+																}}
+															>
+																{formatLocation(
+																	location,
+																)}
+															</CommandItem>
+														))}
+												</CommandGroup>
+											)}
+									</CommandList>
+								</Command>
+							</FormControl>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+
+				<FormField
+					control={form.control}
+					name="description"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Description</FormLabel>
+							<FormControl>
+								<Textarea
+									placeholder="Ajouter une description"
+									{...field}
+								/>
+							</FormControl>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
 			</form>
 		</Form>
 	);

frontend/components/locations/location-card.tsx

@@ -0,0 +1,197 @@
+"use client";
+
+import * as React from "react";
+import {
+	Card,
+	CardContent,
+	CardHeader,
+	CardTitle,
+	CardDescription,
+} from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { Trash2, MilestoneIcon, Clock } from "lucide-react";
+import { Location } from "@/types/types";
+import getOsmEmbedUrl from "@/lib/osmEmbed";
+import LocationDialog from "./location-dialog";
+import openNavigationApp from "@/lib/openNavigationMap";
+import formatLocation from "@/lib/formatLocation";
+
+interface LocationCardProps {
+	location: Location;
+	onUpdate?: (location: Location) => void;
+	onDelete?: (location: Location) => void;
+	canUpdate?: boolean;
+	canDelete?: boolean;
+}
+
+export const LocationCard: React.FC<LocationCardProps> = ({
+	location,
+	onUpdate,
+	onDelete,
+	canDelete = false,
+	canUpdate = false,
+}) => {
+	const [isDialogOpen, setIsDialogOpen] = React.useState(false);
+
+	const handleDelete = () => {
+		onDelete?.(location);
+		setIsDialogOpen(false);
+	};
+
+	return (
+		<Card className="w-full max-w-md">
+			<CardHeader className="flex flex-row justify-between align-middle">
+				<div>
+					<CardTitle>{location.street}</CardTitle>
+					<CardDescription>
+						{location.city}, {location.postalCode}
+					</CardDescription>
+				</div>
+				<Button
+					onClick={() => openNavigationApp(formatLocation(location))}
+					className="m-0"
+				>
+					<MilestoneIcon />
+				</Button>
+			</CardHeader>
+			<CardContent className="space-y-4">
+				{/* OSM Embed Map */}
+				{location.latitude && location.longitude && (
+					<div className="h-[200px] w-full rounded-lg border overflow-hidden">
+						<iframe
+							width="100%"
+							height="100%"
+							src={getOsmEmbedUrl(
+								location.latitude,
+								location.longitude,
+							)}
+							title="OpenStreetMap Preview"
+							loading="lazy"
+						/>
+					</div>
+				)}
+
+				<div className="flex gap-2 overflow-y-auto">
+					{location.events?.slice(0, 3).map((event) => (
+						<div
+							key={event.id}
+							className="border rounded-lg p-3 text-sm shadow-sm hover:shadow-md transition-shadow"
+						>
+							{/* Event Title */}
+							<p className="font-semibold truncate">
+								{event.title || `Event ${event.id}`}
+							</p>
+
+							{/* Event Start Date/Time */}
+							{event.start && (
+								<div className="flex items-center gap-1 text-gray-500 dark:text-gray-400 text-xs">
+									<Clock className="h-3 w-3" />
+									<span>
+										{new Date(event.start).toLocaleString(
+											"fr-FR",
+											{
+												month: "short",
+												day: "numeric",
+												hour: "numeric",
+												minute: "numeric",
+											},
+										)}
+									</span>
+									{event.end && (
+										<>
+											<span>—</span>
+											<span>
+												{new Date(
+													event.end,
+												).toLocaleString("fr-FR", {
+													month: "short",
+													day: "numeric",
+													hour: "numeric",
+													minute: "numeric",
+												})}
+											</span>
+										</>
+									)}
+								</div>
+							)}
+
+							{/* Full-day Badge */}
+							{event.fullday && (
+								<span className="inline-block mt-1 text-xs bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full px-2 py-0.5">
+									Full Day
+								</span>
+							)}
+						</div>
+					))}
+				</div>
+
+				{/* Action Buttons */}
+				<div className="flex justify-between">
+					<LocationDialog
+						location={location}
+						onUpdate={canUpdate ? onUpdate : undefined}
+						onDelete={canDelete ? onDelete : undefined}
+					/>
+
+					{canDelete && (
+						<Dialog
+							open={isDialogOpen}
+							onOpenChange={setIsDialogOpen}
+						>
+							<DialogTrigger asChild>
+								<Button
+									variant="destructive"
+									className="flex items-center gap-2"
+								>
+									<Trash2 className="h-4 w-4" />
+									Supprimer
+								</Button>
+							</DialogTrigger>
+							<DialogContent>
+								<DialogHeader>
+									<DialogTitle>
+										Confirmation de suppression
+									</DialogTitle>
+									<DialogDescription>
+										Cela supprimera définitivement cette
+										adresse:{" "}
+										<span className="font-semibold">
+											{location.street}
+										</span>
+										, {location.city}, {location.postalCode}
+										?
+										<br />
+										Êtes-vous sûr de vouloir continuer ?
+									</DialogDescription>
+								</DialogHeader>
+								<DialogFooter>
+									<Button
+										variant="outline"
+										onClick={() => setIsDialogOpen(false)}
+									>
+										Annuler
+									</Button>
+									<Button
+										variant="destructive"
+										onClick={handleDelete}
+									>
+										Supprimer
+									</Button>
+								</DialogFooter>
+							</DialogContent>
+						</Dialog>
+					)}
+				</div>
+			</CardContent>
+		</Card>
+	);
+};

frontend/components/locations/location-dialog.tsx

@@ -0,0 +1,79 @@
+import { DialogProps } from "@radix-ui/react-dialog";
+import { LocationForm, LocationFormValues } from "./location-form";
+import { useState } from "react";
+import { UseFormReturn } from "react-hook-form";
+import {
+	Dialog,
+	DialogContent,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "../ui/dialog";
+import { Button } from "../ui/button";
+import { Location } from "@/types/types";
+
+const LocationDialog: React.FC<
+	{
+		onDelete?: (location: Location) => void;
+		onUpdate?: (formValues: LocationFormValues) => void;
+		onAdd?: (formValues: LocationFormValues) => void;
+		location?: Location;
+	} & DialogProps
+> = ({ open, onOpenChange, onDelete, onUpdate, onAdd, location }) => {
+	const [form, setForm] = useState<UseFormReturn<LocationFormValues>>();
+
+	const submitForm = (event: "add" | "update") => {
+		const callback = event === "add" ? onAdd : onUpdate;
+		if (callback) form?.handleSubmit(callback)();
+	};
+
+	if (!(onAdd || onUpdate)) return;
+
+	return (
+		<Dialog open={open} onOpenChange={onOpenChange}>
+			<DialogTrigger asChild>
+				<Button>
+					{!location
+						? "Ajouter une nouvelle adresse"
+						: "Modifier l'adresse"}
+				</Button>
+			</DialogTrigger>
+			<DialogContent>
+				<DialogHeader>
+					<DialogTitle>
+						{!location ? "Nouvelle adresse" : "Modifier"}
+					</DialogTitle>
+				</DialogHeader>
+				<LocationForm location={location} setForm={setForm} />
+				<DialogFooter className="flex flex-row justify-end">
+					{onUpdate && (
+						<Button
+							variant="outline"
+							onClick={() => submitForm("update")}
+							type="submit"
+						>
+							Actualiser
+						</Button>
+					)}
+					{onDelete && (
+						<Button
+							variant="destructive"
+							onClick={() => location && onDelete(location)}
+							type="submit"
+						>
+							Supprimer
+						</Button>
+					)}
+					{onAdd && !onUpdate && !onDelete && (
+						<Button onClick={() => submitForm("add")} type="submit">
+							Ajouter
+						</Button>
+					)}
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+};
+
+export default LocationDialog;

frontend/components/locations/location-form.tsx

@@ -0,0 +1,252 @@
+"use client";
+
+import * as React from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import {
+	Command,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+	CommandList,
+} from "@/components/ui/command";
+import useDebounce from "@/hooks/use-debounce";
+import { OpenStreetMapLocation } from "@/types/types";
+import getOsmEmbedUrl from "@/lib/osmEmbed";
+import { Location } from "@/types/types";
+
+// Zod schema for validation
+const locationFormSchema = z.object({
+	id: z.number().optional(),
+	street: z.string().min(1, "Street is required"),
+	city: z.string().min(1, "City is required"),
+	postalCode: z.string().min(1, "Postal code is required"),
+	latitude: z.number().optional(),
+	longitude: z.number().optional(),
+});
+
+export type LocationFormValues = z.infer<typeof locationFormSchema>;
+
+export const LocationForm: React.FC<{
+	location?: Location;
+	setForm: React.Dispatch<
+		React.SetStateAction<
+			ReturnType<typeof useForm<LocationFormValues>> | undefined
+		>
+	>;
+}> = ({ location, setForm }) => {
+	const [osmQuery, setOsmQuery] = React.useState("");
+	const [suggestions, setSuggestions] = React.useState<
+		OpenStreetMapLocation[]
+	>([]);
+	const [isLoading, setIsLoading] = React.useState(false);
+
+	const form = useForm<LocationFormValues>({
+		resolver: zodResolver(locationFormSchema),
+		defaultValues: location || {
+			street: "",
+			city: "",
+			postalCode: "",
+		},
+	});
+
+	React.useEffect(() => {
+		setForm(form);
+	}, [form, setForm]);
+
+	// Fetch suggestions from OpenStreetMap Nominatim API
+	const fetchSuggestions = async (query: string) => {
+		if (!query || query.length < 3) {
+			setSuggestions([]);
+			return;
+		}
+
+		setIsLoading(true);
+		try {
+			const url = new URL("https://nominatim.openstreetmap.org/search");
+			url.searchParams.append("q", query);
+			url.searchParams.append("format", "json");
+			url.searchParams.append("addressdetails", "1");
+			url.searchParams.append("limit", "5");
+
+			const response = await fetch(url);
+			if (!response.ok) {
+				throw new Error(`HTTP error! status: ${response.status}`);
+			}
+			const data: OpenStreetMapLocation[] = await response.json();
+			setSuggestions(data);
+		} catch (error) {
+			console.error("Error fetching OSM suggestions:", error);
+			setSuggestions([]);
+		} finally {
+			setIsLoading(false);
+		}
+	};
+
+	const debouncedFetchSuggestions = useDebounce(fetchSuggestions, 300);
+
+	// Handle form submission
+	const onSubmit = (data: LocationFormValues) => {
+		console.log("New Location:", data);
+		// Here you can send the data to your backend (e.g., via API call)
+	};
+
+	const longitude = form.watch("longitude");
+	const latitude = form.watch("latitude");
+
+	// Helper function to construct street from OSM address
+	const getStreetFromAddress = (
+		address: OpenStreetMapLocation["address"],
+	): string => {
+		const houseNumber = address.house_number || "";
+		const road = address.road || "";
+		return (
+			[houseNumber, road].filter(Boolean).join(" ").trim() ||
+			"Unknown Street"
+		);
+	};
+
+	return (
+		<Form {...form}>
+			<form onSubmit={form.handleSubmit(onSubmit)}>
+				{/* Autocomplete Input */}
+				<Command className="rounded-lg border shadow-md h-40">
+					<CommandInput
+						placeholder="Écrivez pour trouver une adresse..."
+						value={osmQuery}
+						onValueChange={(value) => {
+							setOsmQuery(value);
+							debouncedFetchSuggestions(value);
+						}}
+					/>
+					<CommandList>
+						{isLoading && <CommandEmpty>Loading...</CommandEmpty>}
+						{!isLoading &&
+							suggestions.length === 0 &&
+							osmQuery.length < 1 && (
+								<CommandEmpty>No results found.</CommandEmpty>
+							)}
+						{!isLoading && suggestions.length > 0 && (
+							<CommandGroup heading="Suggestions">
+								{suggestions.map((suggestion) => (
+									<CommandItem
+										key={suggestion.place_id}
+										onSelect={() => {
+											const address = suggestion.address;
+											form.setValue(
+												"street",
+												getStreetFromAddress(address),
+											);
+											form.setValue(
+												"city",
+												address.city ||
+													address.town ||
+													address.village ||
+													"",
+											);
+											form.setValue(
+												"postalCode",
+												address.postcode || "",
+											);
+
+											form.setValue(
+												"latitude",
+												parseFloat(suggestion.lat),
+											);
+											form.setValue(
+												"longitude",
+												parseFloat(suggestion.lon),
+											);
+										}}
+									>
+										{suggestion.display_name}
+									</CommandItem>
+								))}
+							</CommandGroup>
+						)}
+					</CommandList>
+				</Command>
+
+				{/* Editable Fields */}
+				<FormField
+					control={form.control}
+					name="street"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Rue</FormLabel>
+							<FormControl>
+								<Input
+									placeholder="Entrer une rue"
+									{...field}
+								/>
+							</FormControl>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+
+				<FormField
+					control={form.control}
+					name="city"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Ville</FormLabel>
+							<FormControl>
+								<Input
+									placeholder="Entrer une ville"
+									{...field}
+								/>
+							</FormControl>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+
+				<FormField
+					control={form.control}
+					name="postalCode"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Code postal</FormLabel>
+							<FormControl>
+								<Input
+									placeholder="Entrer un code postal"
+									{...field}
+								/>
+							</FormControl>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+
+				{/* OSM Embed Map Preview */}
+				{latitude && longitude && (
+					<div className="mt-6">
+						<h3 className="text-lg font-semibold mb-2">
+							Prévisualisation
+						</h3>
+						<div className="h-[300px] w-full rounded-lg border overflow-hidden">
+							<iframe
+								width="100%"
+								height="100%"
+								src={getOsmEmbedUrl(latitude, longitude)}
+								title="OpenStreetMap Preview"
+							/>
+						</div>
+					</div>
+				)}
+			</form>
+		</Form>
+	);
+};

frontend/components/photo-viewer.tsx

@@ -5,7 +5,7 @@ import {
 	DialogContent,
 	DialogTitle,
 	DialogTrigger,
-} from "@radix-ui/react-dialog";
+} from "@/components/ui/dialog";
 import Image, { ImageProps } from "next/image";
 import React, { useState } from "react";
 

frontend/components/planning.tsx

@@ -8,6 +8,7 @@ import { createEventsServicePlugin } from "@schedule-x/events-service";
 import { createDragAndDropPlugin } from "@schedule-x/drag-and-drop";
 import { createResizePlugin } from "@schedule-x/resize";
 import { createEventRecurrencePlugin } from "@schedule-x/event-recurrence";
+import { createEventModalPlugin } from "@schedule-x/event-modal";
 import {
 	createViewDay,
 	createViewWeek,
@@ -50,6 +51,8 @@ const Planning: React.FC<{
 	if (isConnected && modifiable) {
 		plugins.push(createDragAndDropPlugin());
 		plugins.push(createResizePlugin());
+	} else if (isConnected || !isConnected) {
+		plugins.push(createEventModalPlugin());
 	}
 	const [eventSelected, setEventSelected] = useState<ICalendarEvent | null>(
 		null,
@@ -60,6 +63,7 @@ const Planning: React.FC<{
 
 	const handleEventUpdate = async (
 		eventSelected: ICalendarEvent | Omit<ICalendarEvent, "id">,
+		willMutate: boolean = false,
 	) => {
 		if (!isConnected || !modifiable) return;
 		const event = {
@@ -80,7 +84,7 @@ const Planning: React.FC<{
 					description: res.message,
 				});
 			} else {
-				// mutate?.();
+				willMutate && mutate?.();
 			}
 		} catch (e) {
 			if (e instanceof Error)
@@ -176,6 +180,8 @@ const Planning: React.FC<{
 							fullday: formValues.fullDay,
 							rrule: rrule,
 							isVisible: formValues.isVisible,
+							description: formValues.description,
+							location: formValues.location,
 						};
 						const res = await request<undefined>(`/events/new`, {
 							method: "POST",
@@ -260,8 +266,10 @@ const Planning: React.FC<{
 							fullday: formValues.fullDay,
 							rrule: rrule,
 							isVisible: formValues.isVisible,
+							description: formValues.description,
+							location: formValues.location,
 						};
-						await handleEventUpdate(event);
+						await handleEventUpdate(event, true);
 						setEventSelected(null);
 					}}
 				/>

frontend/components/ui/alert.tsx

@@ -0,0 +1,62 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const alertVariants = cva(
+	"relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+	{
+		variants: {
+			variant: {
+				default: "bg-background text-foreground",
+				destructive:
+					"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
+);
+
+const Alert = React.forwardRef<
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+	<div
+		ref={ref}
+		role="alert"
+		className={cn(alertVariants({ variant }), className)}
+		{...props}
+	/>
+));
+Alert.displayName = "Alert";
+
+const AlertTitle = React.forwardRef<
+	HTMLParagraphElement,
+	React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+	<h5
+		ref={ref}
+		className={cn(
+			"mb-1 font-medium leading-none tracking-tight",
+			className,
+		)}
+		{...props}
+	/>
+));
+AlertTitle.displayName = "AlertTitle";
+
+const AlertDescription = React.forwardRef<
+	HTMLParagraphElement,
+	React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+	<div
+		ref={ref}
+		className={cn("text-sm [&_p]:leading-relaxed", className)}
+		{...props}
+	/>
+));
+AlertDescription.displayName = "AlertDescription";
+
+export { Alert, AlertTitle, AlertDescription };