Started to work the shortcodes

frontend/app/(auth)/dashboard/settings/media/page.tsx

@@ -0,0 +1,154 @@
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+import { Plus } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+	Pagination,
+	PaginationContent,
+	PaginationItem,
+	PaginationLink,
+	PaginationNext,
+	PaginationPrevious,
+} from "@/components/ui/pagination";
+import { PhotoDialog } from "@/components/photo-dialog";
+import useFileUpload from "@/hooks/use-file-upload";
+import useMedia from "@/hooks/use-media";
+import Media from "@/interfaces/Media";
+import useApiMutation, { request } from "@/hooks/use-api";
+
+export default function PhotoGallery() {
+	const {
+		data,
+		error: mediaError,
+		isLoading,
+		success,
+		setPage,
+		setLimit,
+		mutate,
+	} = useMedia();
+	console.log(data);
+	const [selectedPhoto, setSelectedPhoto] = useState<Media | null>(null);
+	const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);
+	const { progress, isUploading, error, uploadFile, cancelUpload } =
+		useFileUpload();
+
+	const handleAddPhoto = (newPhoto: Omit<Media, "id">, file: File) => {
+		uploadFile(file, "/media/upload", (response) => {
+			mutate();
+		});
+	};
+
+	const handleUpdatePhoto = (updatedPhoto: Omit<Media, "id">) => {
+		if (selectedPhoto) {
+		}
+		setSelectedPhoto(null);
+	};
+
+	const handleDeletePhoto = async (id: Media["id"]) => {
+		try {
+			const res = await request<undefined>(`/media/${id}/delete`, {
+				method: "DELETE",
+				requiresAuth: true,
+			});
+			if (res.status === "Success") mutate();
+		} catch (e) {
+			console.log(e);
+		}
+		setSelectedPhoto(null);
+	};
+
+	return (
+		<div className="container mx-auto px-4 py-8">
+			<div className="flex justify-between items-center mb-8">
+				<h1 className="text-3xl font-bold">Gallerie Photo</h1>
+				<Button
+					disabled={isLoading}
+					onClick={() => setIsAddDialogOpen(true)}
+				>
+					<Plus className="mr-2 h-4 w-4" /> Ajouter une photo
+				</Button>
+			</div>
+			<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+				{data?.items.map((photo) => (
+					<div
+						key={photo.id}
+						className="aspect-square overflow-hidden rounded-lg shadow-md cursor-pointer"
+						onClick={() => setSelectedPhoto(photo)}
+					>
+						<Image
+							src={photo.url || "/placeholder.svg"}
+							alt={photo.alt}
+							width={300}
+							height={300}
+							className="w-full h-full object-cover"
+						/>
+					</div>
+				))}
+			</div>
+			<Pagination className="mt-8">
+				<PaginationContent>
+					<PaginationItem>
+						<PaginationPrevious
+							href="#"
+							onClick={(e) => {
+								e.preventDefault();
+								setPage((prev) => Math.max(prev - 1, 1));
+							}}
+							className={
+								data?.page === 1
+									? "pointer-events-none opacity-50"
+									: ""
+							}
+						/>
+					</PaginationItem>
+					{[...Array(data?.totalPages)].map((_, i) => (
+						<PaginationItem key={i + 1}>
+							<PaginationLink
+								href="#"
+								onClick={(e) => {
+									e.preventDefault();
+									setPage(i + 1);
+								}}
+								isActive={data?.page === i + 1}
+							>
+								{i + 1}
+							</PaginationLink>
+						</PaginationItem>
+					))}
+					<PaginationItem>
+						<PaginationNext
+							href="#"
+							onClick={(e) => {
+								e.preventDefault();
+								setPage((prev) =>
+									Math.min(prev + 1, data?.totalPages ?? 1),
+								);
+							}}
+							className={
+								data?.page === data?.totalPages
+									? "pointer-events-none opacity-50"
+									: ""
+							}
+						/>
+					</PaginationItem>
+				</PaginationContent>
+			</Pagination>
+			<PhotoDialog
+				isOpen={!!selectedPhoto}
+				photo={selectedPhoto || undefined}
+				onClose={() =>
+					setSelectedPhoto((p) => (isUploading ? p : null))
+				}
+				onDelete={handleDeletePhoto}
+				onSave={handleUpdatePhoto}
+			/>
+			<PhotoDialog
+				isOpen={isAddDialogOpen}
+				onClose={() => setIsAddDialogOpen(false)}
+				onSave={handleAddPhoto}
+			/>
+		</div>
+	);
+}