Locations added

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>
+	);
+};