Started to work on media upload and organization

frontend/app/(auth)/dashboard/media/old.tsx

@@ -0,0 +1,30 @@
+"use client";
+import useFileUpload from "@/hooks/use-file-upload";
+import { ChangeEvent } from "react";
+
+const MyComponent = () => {
+	const { progress, isUploading, error, uploadFile, cancelUpload } =
+		useFileUpload();
+
+	const handleFileUpload = (event: ChangeEvent<HTMLInputElement>) => {
+		const file = event.target.files?.[0];
+		if (file) {
+			uploadFile(file, "/media/upload", (response) => {
+				console.log("Upload success:", response);
+			});
+		}
+	};
+
+	return (
+		<div>
+			<input type="file" onChange={handleFileUpload} />
+			{isUploading && <p>Uploading... {progress}%</p>}
+			{error && <p>Error: {error}</p>}
+			<button onClick={cancelUpload} disabled={!isUploading}>
+				Cancel Upload
+			</button>
+		</div>
+	);
+};
+
+export default MyComponent;

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

@@ -1,30 +1,154 @@
 "use client";
-import useFileUpload from "@/hooks/use-file-upload";
-import { ChangeEvent } from "react";
 
-const MyComponent = () => {
+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 handleFileUpload = (event: ChangeEvent<HTMLInputElement>) => {
-		const file = event.target.files?.[0];
-		if (file) {
-			uploadFile(file, "/media/upload", (response) => {
-				console.log("Upload success:", response);
-			});
+	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>
-			<input type="file" onChange={handleFileUpload} />
-			{isUploading && <p>Uploading... {progress}%</p>}
-			{error && <p>Error: {error}</p>}
-			<button onClick={cancelUpload} disabled={!isUploading}>
-				Cancel Upload
-			</button>
+		<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>
 	);
-};
-
-export default MyComponent;
+}

frontend/components/photo-dialog.tsx

@@ -0,0 +1,197 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import Image from "next/image";
+import { useDropzone } from "react-dropzone";
+import {
+	Dialog,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+	DialogDescription,
+	DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import Media from "@/interfaces/Media";
+import Link from "next/link";
+
+interface PhotoDialogProps {
+	photo?: Media;
+	isOpen: boolean;
+	onClose: () => void;
+	onDelete?: (id: Media["id"]) => void;
+	onSave: (photo: Omit<Media, "id">, file: File) => void;
+}
+
+export function PhotoDialog({
+	photo,
+	isOpen,
+	onClose,
+	onDelete,
+	onSave,
+}: PhotoDialogProps) {
+	const [file, setFile] = useState<File | null>(null);
+	const [newPhoto, setNewPhoto] = useState<Omit<Media, "id">>({
+		url: "",
+		alt: "",
+		path: "",
+		type: "",
+		size: 0,
+	});
+	const [activeTab, setActiveTab] = useState<string>("url");
+
+	useEffect(() => {
+		setNewPhoto({
+			url: photo?.url ?? "",
+			alt: photo?.alt ?? "",
+			type: photo?.type ?? "",
+			path: photo?.path ?? "",
+			size: photo?.size ?? 0,
+		});
+	}, [photo]);
+
+	const onDrop = useCallback((acceptedFiles: File[]) => {
+		const file = acceptedFiles[0];
+		if (file) {
+			setFile(file);
+			const reader = new FileReader();
+			reader.onload = (e) => {
+				setNewPhoto((prev) => ({
+					...prev,
+					url: e.target?.result as string,
+				}));
+			};
+			reader.readAsDataURL(file);
+		}
+	}, []);
+
+	const { getRootProps, getInputProps, isDragActive } = useDropzone({
+		onDrop,
+		accept: { "image/*": [] },
+	});
+
+	const handleSave = () => {
+		if (file) onSave(newPhoto, file);
+		onClose();
+	};
+
+	const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		const file = e.target.files?.[0];
+		if (file) {
+			setFile(file);
+			const reader = new FileReader();
+			reader.onload = (e) => {
+				setNewPhoto((prev) => ({
+					...prev,
+					url: e.target?.result as string,
+				}));
+			};
+			reader.readAsDataURL(file);
+		}
+	};
+
+	const isAddMode = !photo;
+
+	return (
+		<Dialog open={isOpen} onOpenChange={onClose}>
+			<DialogContent className="max-w-3xl">
+				<DialogHeader>
+					<DialogTitle>
+						{isAddMode
+							? "Ajouter une nouvelle photo"
+							: "Éditer la photo"}
+					</DialogTitle>
+					<DialogDescription>
+						{isAddMode
+							? "Ajouter une nouvelle photo dans la gallerie"
+							: "Mettre à jour les informations"}
+					</DialogDescription>
+				</DialogHeader>
+				<Tabs value={activeTab} onValueChange={setActiveTab}>
+					<TabsList className="grid w-full grid-cols-2">
+						<TabsTrigger value="url">URL</TabsTrigger>
+						<TabsTrigger value="drag">Drag & Drop</TabsTrigger>
+					</TabsList>
+					<TabsContent value="url" className="space-y-4">
+						<div className="w-full space-y-2">
+							<Label htmlFor="photo-src">URL de la photo</Label>
+							<Input
+								id="photo-src"
+								value={newPhoto.url}
+								onChange={(e) =>
+									setNewPhoto({
+										...newPhoto,
+										url: e.target.value,
+									})
+								}
+								placeholder="Enter URL for the image"
+							/>
+						</div>
+					</TabsContent>
+					<TabsContent value="drag" className="space-y-4">
+						<div
+							{...getRootProps()}
+							className="border-2 border-dashed rounded-md p-8 text-center cursor-pointer"
+						>
+							<input {...getInputProps()} />
+							{isDragActive ? (
+								<p>Déposez une image ici...</p>
+							) : (
+								<p>
+									Déposez une image directement ou cliquer
+									pour sélectionner.
+								</p>
+							)}
+						</div>
+					</TabsContent>
+				</Tabs>
+				<div className="mt-4">
+					<Link href={newPhoto.url} target="_blank">
+						<Image
+							src={newPhoto.url || "/placeholder.svg"}
+							alt={newPhoto.alt}
+							width={300}
+							height={300}
+							className="w-full max-h-[300px] object-contain rounded-md"
+						/>
+					</Link>
+				</div>
+				<div className="w-full space-y-2 mt-4">
+					<Label htmlFor="alt-text">Description</Label>
+					<Input
+						id="alt-text"
+						value={newPhoto.alt}
+						onChange={(e) =>
+							setNewPhoto({ ...newPhoto, alt: e.target.value })
+						}
+						placeholder="Entrer une description pour l'image"
+					/>
+				</div>
+				<DialogFooter className="sm:justify-between">
+					{!isAddMode && onDelete && (
+						<Button
+							variant="destructive"
+							onClick={() => onDelete(photo.id)}
+						>
+							Supprimer la photo
+						</Button>
+					)}
+					<div className="flex space-x-2">
+						<Button variant="outline" onClick={onClose}>
+							Annuler
+						</Button>
+						<Button
+							onClick={handleSave}
+							disabled={!newPhoto.url || !newPhoto.alt}
+						>
+							{isAddMode ? "Ajouter" : "Mettre à jour"}
+						</Button>
+					</div>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+}

frontend/components/ui/form.tsx

@@ -1,178 +1,182 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { Slot } from "@radix-ui/react-slot"
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
 import {
-  Controller,
-  ControllerProps,
-  FieldPath,
-  FieldValues,
-  FormProvider,
-  useFormContext,
-} from "react-hook-form"
+	Controller,
+	ControllerProps,
+	FieldPath,
+	FieldValues,
+	FormProvider,
+	useFormContext,
+} from "react-hook-form";
 
-import { cn } from "@/lib/utils"
-import { Label } from "@/components/ui/label"
+import { cn } from "@/lib/utils";
+import { Label } from "@/components/ui/label";
 
-const Form = FormProvider
+const Form = FormProvider;
 
 type FormFieldContextValue<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+	TFieldValues extends FieldValues = FieldValues,
+	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > = {
-  name: TName
-}
+	name: TName;
+};
 
 const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue
-)
+	{} as FormFieldContextValue,
+);
 
 const FormField = <
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+	TFieldValues extends FieldValues = FieldValues,
+	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 >({
-  ...props
+	...props
 }: ControllerProps<TFieldValues, TName>) => {
-  return (
-    <FormFieldContext.Provider value={{ name: props.name }}>
-      <Controller {...props} />
-    </FormFieldContext.Provider>
-  )
-}
+	return (
+		<FormFieldContext.Provider value={{ name: props.name }}>
+			<Controller {...props} />
+		</FormFieldContext.Provider>
+	);
+};
 
 const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext)
-  const itemContext = React.useContext(FormItemContext)
-  const { getFieldState, formState } = useFormContext()
+	const fieldContext = React.useContext(FormFieldContext);
+	const itemContext = React.useContext(FormItemContext);
+	const { getFieldState, formState } = useFormContext();
 
-  const fieldState = getFieldState(fieldContext.name, formState)
+	const fieldState = getFieldState(fieldContext.name, formState);
 
-  if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>")
-  }
+	if (!fieldContext) {
+		throw new Error("useFormField should be used within <FormField>");
+	}
 
-  const { id } = itemContext
+	const { id } = itemContext;
 
-  return {
-    id,
-    name: fieldContext.name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState,
-  }
-}
+	return {
+		id,
+		name: fieldContext.name,
+		formItemId: `${id}-form-item`,
+		formDescriptionId: `${id}-form-item-description`,
+		formMessageId: `${id}-form-item-message`,
+		...fieldState,
+	};
+};
 
 type FormItemContextValue = {
-  id: string
-}
+	id: string;
+};
 
 const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue
-)
+	{} as FormItemContextValue,
+);
 
 const FormItem = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => {
-  const id = React.useId()
+	const id = React.useId();
 
-  return (
-    <FormItemContext.Provider value={{ id }}>
-      <div ref={ref} className={cn("space-y-2", className)} {...props} />
-    </FormItemContext.Provider>
-  )
-})
-FormItem.displayName = "FormItem"
+	return (
+		<FormItemContext.Provider value={{ id }}>
+			<div ref={ref} className={cn("space-y-2", className)} {...props} />
+		</FormItemContext.Provider>
+	);
+});
+FormItem.displayName = "FormItem";
 
 const FormLabel = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+	React.ComponentRef<typeof LabelPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
 >(({ className, ...props }, ref) => {
-  const { error, formItemId } = useFormField()
+	const { error, formItemId } = useFormField();
 
-  return (
-    <Label
-      ref={ref}
-      className={cn(error && "text-destructive", className)}
-      htmlFor={formItemId}
-      {...props}
-    />
-  )
-})
-FormLabel.displayName = "FormLabel"
+	return (
+		<Label
+			ref={ref}
+			className={cn(error && "text-destructive", className)}
+			htmlFor={formItemId}
+			{...props}
+		/>
+	);
+});
+FormLabel.displayName = "FormLabel";
 
 const FormControl = React.forwardRef<
-  React.ElementRef<typeof Slot>,
-  React.ComponentPropsWithoutRef<typeof Slot>
+	React.ElementRef<typeof Slot>,
+	React.ComponentPropsWithoutRef<typeof Slot>
 >(({ ...props }, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+	const { error, formItemId, formDescriptionId, formMessageId } =
+		useFormField();
 
-  return (
-    <Slot
-      ref={ref}
-      id={formItemId}
-      aria-describedby={
-        !error
-          ? `${formDescriptionId}`
-          : `${formDescriptionId} ${formMessageId}`
-      }
-      aria-invalid={!!error}
-      {...props}
-    />
-  )
-})
-FormControl.displayName = "FormControl"
+	return (
+		<Slot
+			ref={ref}
+			id={formItemId}
+			aria-describedby={
+				!error
+					? `${formDescriptionId}`
+					: `${formDescriptionId} ${formMessageId}`
+			}
+			aria-invalid={!!error}
+			{...props}
+		/>
+	);
+});
+FormControl.displayName = "FormControl";
 
 const FormDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
+	HTMLParagraphElement,
+	React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => {
-  const { formDescriptionId } = useFormField()
+	const { formDescriptionId } = useFormField();
 
-  return (
-    <p
-      ref={ref}
-      id={formDescriptionId}
-      className={cn("text-[0.8rem] text-muted-foreground", className)}
-      {...props}
-    />
-  )
-})
-FormDescription.displayName = "FormDescription"
+	return (
+		<p
+			ref={ref}
+			id={formDescriptionId}
+			className={cn("text-[0.8rem] text-muted-foreground", className)}
+			{...props}
+		/>
+	);
+});
+FormDescription.displayName = "FormDescription";
 
 const FormMessage = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
+	HTMLParagraphElement,
+	React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, children, ...props }, ref) => {
-  const { error, formMessageId } = useFormField()
-  const body = error ? String(error?.message) : children
+	const { error, formMessageId } = useFormField();
+	const body = error ? String(error?.message) : children;
 
-  if (!body) {
-    return null
-  }
+	if (!body) {
+		return null;
+	}
 
-  return (
-    <p
-      ref={ref}
-      id={formMessageId}
-      className={cn("text-[0.8rem] font-medium text-destructive", className)}
-      {...props}
-    >
-      {body}
-    </p>
-  )
-})
-FormMessage.displayName = "FormMessage"
+	return (
+		<p
+			ref={ref}
+			id={formMessageId}
+			className={cn(
+				"text-[0.8rem] font-medium text-destructive",
+				className,
+			)}
+			{...props}
+		>
+			{body}
+		</p>
+	);
+});
+FormMessage.displayName = "FormMessage";
 
 export {
-  useFormField,
-  Form,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormDescription,
-  FormMessage,
-  FormField,
-}
+	useFormField,
+	Form,
+	FormItem,
+	FormLabel,
+	FormControl,
+	FormDescription,
+	FormMessage,
+	FormField,
+};

frontend/components/ui/pagination.tsx

@@ -0,0 +1,117 @@
+import * as React from "react";
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { ButtonProps, buttonVariants } from "@/components/ui/button";
+
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+	<nav
+		role="navigation"
+		aria-label="pagination"
+		className={cn("mx-auto flex w-full justify-center", className)}
+		{...props}
+	/>
+);
+Pagination.displayName = "Pagination";
+
+const PaginationContent = React.forwardRef<
+	HTMLUListElement,
+	React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+	<ul
+		ref={ref}
+		className={cn("flex flex-row items-center gap-1", className)}
+		{...props}
+	/>
+));
+PaginationContent.displayName = "PaginationContent";
+
+const PaginationItem = React.forwardRef<
+	HTMLLIElement,
+	React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+	<li ref={ref} className={cn("", className)} {...props} />
+));
+PaginationItem.displayName = "PaginationItem";
+
+type PaginationLinkProps = {
+	isActive?: boolean;
+} & Pick<ButtonProps, "size"> &
+	React.ComponentProps<"a">;
+
+const PaginationLink = ({
+	className,
+	isActive,
+	size = "icon",
+	...props
+}: PaginationLinkProps) => (
+	<a
+		aria-current={isActive ? "page" : undefined}
+		className={cn(
+			buttonVariants({
+				variant: isActive ? "outline" : "ghost",
+				size,
+			}),
+			className,
+		)}
+		{...props}
+	/>
+);
+PaginationLink.displayName = "PaginationLink";
+
+const PaginationPrevious = ({
+	className,
+	...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+	<PaginationLink
+		aria-label="Go to previous page"
+		size="default"
+		className={cn("gap-1 pl-2.5", className)}
+		{...props}
+	>
+		<ChevronLeft className="h-4 w-4" />
+		<span>Previous</span>
+	</PaginationLink>
+);
+PaginationPrevious.displayName = "PaginationPrevious";
+
+const PaginationNext = ({
+	className,
+	...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+	<PaginationLink
+		aria-label="Go to next page"
+		size="default"
+		className={cn("gap-1 pr-2.5", className)}
+		{...props}
+	>
+		<span>Next</span>
+		<ChevronRight className="h-4 w-4" />
+	</PaginationLink>
+);
+PaginationNext.displayName = "PaginationNext";
+
+const PaginationEllipsis = ({
+	className,
+	...props
+}: React.ComponentProps<"span">) => (
+	<span
+		aria-hidden
+		className={cn("flex h-9 w-9 items-center justify-center", className)}
+		{...props}
+	>
+		<MoreHorizontal className="h-4 w-4" />
+		<span className="sr-only">More pages</span>
+	</span>
+);
+PaginationEllipsis.displayName = "PaginationEllipsis";
+
+export {
+	Pagination,
+	PaginationContent,
+	PaginationLink,
+	PaginationItem,
+	PaginationPrevious,
+	PaginationNext,
+	PaginationEllipsis,
+};

frontend/components/ui/tabs.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+
+import { cn } from "@/lib/utils";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+	React.ComponentRef<typeof TabsPrimitive.List>,
+	React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+	<TabsPrimitive.List
+		ref={ref}
+		className={cn(
+			"inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+			className,
+		)}
+		{...props}
+	/>
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+	React.ComponentRef<typeof TabsPrimitive.Trigger>,
+	React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+	<TabsPrimitive.Trigger
+		ref={ref}
+		className={cn(
+			"inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+			className,
+		)}
+		{...props}
+	/>
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+	React.ComponentRef<typeof TabsPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+	<TabsPrimitive.Content
+		ref={ref}
+		className={cn(
+			"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+			className,
+		)}
+		{...props}
+	/>
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

frontend/hooks/use-api.tsx

@@ -10,7 +10,7 @@ export interface ApiResponse<T> {
 	data?: T;
 }
 
-async function request<T>(
+export async function request<T>(
 	url: string,
 	options: {
 		method?: "GET" | "POST" | "PATCH" | "DELETE";
@@ -81,14 +81,14 @@ async function mutationHandler<T, A>(
 }
 
 export function useApi<T>(
-	url: string,
+	endpoint: string,
 	config?: SWRConfiguration,
 	requiresAuth: boolean = true,
 	csrfToken?: boolean,
 ) {
 	const swr = useSWR<ApiResponse<T>>(
-		url,
-		() => fetcher(url, requiresAuth, csrfToken),
+		endpoint,
+		() => fetcher(endpoint, requiresAuth, csrfToken),
 		config,
 	);
 

frontend/hooks/use-media.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { useState } from "react";
+import useApiMutation, { useApi } from "./use-api";
+import IPaginatedResponse from "@/interfaces/IPaginatedResponse";
+import Media from "@/interfaces/Media";
+
+interface MediaResponse {
+	page: number;
+	limit: number;
+	totalPages: number;
+	items: [];
+}
+
+export default function useMedia(_limit: number = 20) {
+	const [page, setPage] = useState(1);
+	const [limit, setLimit] = useState(_limit);
+	const res = useApi<IPaginatedResponse<Media>>(
+		`/media?page=${page}&limit=${limit}`,
+	);
+	return {
+		...res,
+		setPage,
+		setLimit,
+	};
+}

frontend/interfaces/IPaginatedResponse.ts

@@ -0,0 +1,6 @@
+export default interface IPaginatedResponse<T> {
+	page: number;
+	limit: number;
+	totalPages: number;
+	items: T[];
+}

frontend/interfaces/Media.ts

@@ -0,0 +1,8 @@
+export default interface Media {
+	id: string;
+	url: string;
+	path: string;
+	alt: string;
+	size: number;
+	type: string;
+}

frontend/next.config.ts

@@ -14,6 +14,10 @@ const nextConfig: NextConfig = {
 				protocol: "https",
 				hostname: "avatar.vercel.sh",
 			},
+			{
+				protocol: "http",
+				hostname: "localhost",
+			},
 		],
 	},
 	env: {

frontend/package-lock.json

@@ -21,6 +21,7 @@
 				"@radix-ui/react-separator": "^1.1.1",
 				"@radix-ui/react-slot": "^1.1.1",
 				"@radix-ui/react-switch": "^1.1.2",
+				"@radix-ui/react-tabs": "^1.1.2",
 				"@radix-ui/react-tooltip": "^1.1.6",
 				"@schedule-x/events-service": "^2.14.3",
 				"@schedule-x/react": "^2.13.3",
@@ -36,6 +37,7 @@
 				"next-themes": "^0.4.4",
 				"react": "^19.0.0",
 				"react-dom": "^19.0.0",
+				"react-dropzone": "^14.3.5",
 				"react-hook-form": "^7.54.2",
 				"react-icons": "^5.4.0",
 				"swr": "^2.3.0",
@@ -1699,6 +1701,36 @@
 				}
 			}
 		},
+		"node_modules/@radix-ui/react-tabs": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.2.tgz",
+			"integrity": "sha512-9u/tQJMcC2aGq7KXpGivMm1mgq7oRJKXphDwdypPd/j21j/2znamPU8WkXgnhUaTrSFNIt8XhOyCAupg8/GbwQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/primitive": "1.1.1",
+				"@radix-ui/react-context": "1.1.1",
+				"@radix-ui/react-direction": "1.1.0",
+				"@radix-ui/react-id": "1.1.0",
+				"@radix-ui/react-presence": "1.1.2",
+				"@radix-ui/react-primitive": "2.0.1",
+				"@radix-ui/react-roving-focus": "1.1.1",
+				"@radix-ui/react-use-controllable-state": "1.1.0"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@radix-ui/react-tooltip": {
 			"version": "1.1.6",
 			"resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.1.6.tgz",
@@ -2520,6 +2552,15 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/attr-accept": {
+			"version": "2.2.5",
+			"resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.5.tgz",
+			"integrity": "sha512-0bDNnY/u6pPwHDMoF0FieU354oBi0a8rD9FcsLwzcGWbc8KS8KPIi7y+s13OlVY+gMWc/9xEMUgNE6Qm8ZllYQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=4"
+			}
+		},
 		"node_modules/available-typed-arrays": {
 			"version": "1.0.7",
 			"resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -3855,6 +3896,18 @@
 				"node": ">=16.0.0"
 			}
 		},
+		"node_modules/file-selector": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/file-selector/-/file-selector-2.1.2.tgz",
+			"integrity": "sha512-QgXo+mXTe8ljeqUFaX3QVHc5osSItJ/Km+xpocx0aSqWGMSCf6qYs/VnzZgS864Pjn5iceMRFigeAV7AfTlaig==",
+			"license": "MIT",
+			"dependencies": {
+				"tslib": "^2.7.0"
+			},
+			"engines": {
+				"node": ">= 12"
+			}
+		},
 		"node_modules/fill-range": {
 			"version": "7.1.1",
 			"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
@@ -4792,7 +4845,6 @@
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
 			"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/js-yaml": {
@@ -4947,7 +4999,6 @@
 			"version": "1.4.0",
 			"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
 			"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"js-tokens": "^3.0.0 || ^4.0.0"
@@ -5746,7 +5797,6 @@
 			"version": "15.8.1",
 			"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
 			"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"loose-envify": "^1.4.0",
@@ -5805,6 +5855,23 @@
 				"react": "^19.0.0"
 			}
 		},
+		"node_modules/react-dropzone": {
+			"version": "14.3.5",
+			"resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.3.5.tgz",
+			"integrity": "sha512-9nDUaEEpqZLOz5v5SUcFA0CjM4vq8YbqO0WRls+EYT7+DvxUdzDPKNCPLqGfj3YL9MsniCLCD4RFA6M95V6KMQ==",
+			"license": "MIT",
+			"dependencies": {
+				"attr-accept": "^2.2.4",
+				"file-selector": "^2.1.0",
+				"prop-types": "^15.8.1"
+			},
+			"engines": {
+				"node": ">= 10.13"
+			},
+			"peerDependencies": {
+				"react": ">= 16.8 || 18.0.0"
+			}
+		},
 		"node_modules/react-hook-form": {
 			"version": "7.54.2",
 			"resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.54.2.tgz",
@@ -5834,7 +5901,6 @@
 			"version": "16.13.1",
 			"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
 			"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/react-remove-scroll": {

frontend/package.json

@@ -22,6 +22,7 @@
 		"@radix-ui/react-separator": "^1.1.1",
 		"@radix-ui/react-slot": "^1.1.1",
 		"@radix-ui/react-switch": "^1.1.2",
+		"@radix-ui/react-tabs": "^1.1.2",
 		"@radix-ui/react-tooltip": "^1.1.6",
 		"@schedule-x/events-service": "^2.14.3",
 		"@schedule-x/react": "^2.13.3",
@@ -37,6 +38,7 @@
 		"next-themes": "^0.4.4",
 		"react": "^19.0.0",
 		"react-dom": "^19.0.0",
+		"react-dropzone": "^14.3.5",
 		"react-hook-form": "^7.54.2",
 		"react-icons": "^5.4.0",
 		"swr": "^2.3.0",

frontend/public/placeholder.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1200" fill="none"><rect width="1200" height="1200" fill="#EAEAEA" rx="3"/><g opacity=".5"><g opacity=".5"><path fill="#FAFAFA" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/></g><path stroke="url(#a)" stroke-width="2.418" d="M0-1.209h553.581" transform="scale(1 -1) rotate(45 1163.11 91.165)"/><path stroke="url(#b)" stroke-width="2.418" d="M404.846 598.671h391.726"/><path stroke="url(#c)" stroke-width="2.418" d="M599.5 795.742V404.017"/><path stroke="url(#d)" stroke-width="2.418" d="m795.717 796.597-391.441-391.44"/><path fill="#fff" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/><g clip-path="url(#e)"><path fill="#666" fill-rule="evenodd" d="M616.426 586.58h-31.434v16.176l3.553-3.554.531-.531h9.068l.074-.074 8.463-8.463h2.565l7.18 7.181V586.58Zm-15.715 14.654 3.698 3.699 1.283 1.282-2.565 2.565-1.282-1.283-5.2-5.199h-6.066l-5.514 5.514-.073.073v2.876a2.418 2.418 0 0 0 2.418 2.418h26.598a2.418 2.418 0 0 0 2.418-2.418v-8.317l-8.463-8.463-7.181 7.181-.071.072Zm-19.347 5.442v4.085a6.045 6.045 0 0 0 6.046 6.045h26.598a6.044 6.044 0 0 0 6.045-6.045v-7.108l1.356-1.355-1.282-1.283-.074-.073v-17.989h-38.689v23.43l-.146.146.146.147Z" clip-rule="evenodd"/></g><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/></g><defs><linearGradient id="a" x1="554.061" x2="-.48" y1=".083" y2=".087" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="796.912" x2="404.507" y1="599.963" y2="599.965" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="600.792" x2="600.794" y1="403.677" y2="796.082" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="d" x1="404.85" x2="796.972" y1="403.903" y2="796.02" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><clipPath id="e"><path fill="#fff" d="M581.364 580.535h38.689v38.689h-38.689z"/></clipPath></defs></svg>