Merge branch 'dev/cedric' into dev/guerby

2025-02-19 12:30:43 +01:00
parent 3e5543e61c 446813315d
commit 70cce97c6a
63 changed files with 3024 additions and 1063 deletions
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -11,11 +11,11 @@ WORKDIR /app
 # Install dependencies based on the preferred package manager
 COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* .npmrc* ./
 RUN \
-  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
-  elif [ -f package-lock.json ]; then npm ci; \
-  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \
-  else echo "Lockfile not found." && exit 1; \
-  fi
+	if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+	elif [ -f package-lock.json ]; then npm ci --force; \
+	elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \
+	else echo "Lockfile not found." && exit 1; \
+	fi


 # Rebuild the source code only when needed
@@ -30,11 +30,11 @@ COPY . .
 # ENV NEXT_TELEMETRY_DISABLED=1

 RUN \
-  if [ -f yarn.lock ]; then yarn run build; \
-  elif [ -f package-lock.json ]; then npm run build; \
-  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm run build; \
-  else echo "Lockfile not found." && exit 1; \
-  fi
+	if [ -f yarn.lock ]; then yarn run build; \
+	elif [ -f package-lock.json ]; then npm run build; \
+	elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm run build; \
+	else echo "Lockfile not found." && exit 1; \
+	fi

 # Production image, copy all the files and run next
 FROM base AS runner
--- a/frontend/app/(auth)/dashboard/blogs/new/page.tsx
+++ b/frontend/app/(auth)/dashboard/blogs/new/page.tsx
@@ -0,0 +1,144 @@
+"use client";
+
+import { Textarea } from "@/components/ui/textarea";
+import { useEffect, useRef, useState } from "react";
+import { marked } from "marked";
+import DOMPurify from "isomorphic-dompurify";
+import { Button } from "@/components/ui/button";
+import { Bold, Italic, Strikethrough, Underline } from "lucide-react";
+
+enum Command {
+	Italic = "*",
+	Bold = "**",
+	Strikethrough = "~~",
+	Underline = "__",
+}
+
+export default function NewBlog() {
+	const ref = useRef<HTMLTextAreaElement>(null);
+	const [text, setText] = useState("");
+	const [cursor, setCursor] = useState<{ line: number; column: number }>({
+		line: 0,
+		column: 0,
+	});
+	const [selection, setSelection] = useState<{
+		start: number;
+		end: number;
+	} | null>(null);
+
+	const getCursorPosition = (
+		event: React.ChangeEvent<HTMLTextAreaElement>,
+	) => {
+		const textarea = event.target;
+		const text = textarea.value;
+		const cursorPos = textarea.selectionStart;
+
+		const lines = text.substring(0, cursorPos).split("\n");
+		const line = lines.length; // Current line number (1-based)
+		const column = lines[lines.length - 1].length + 1; // Current column (1-based)
+
+		setCursor({ line, column });
+	};
+
+	const onSelect = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+		const { selectionStart, selectionEnd } = event.currentTarget;
+		if (selectionStart === selectionEnd) return;
+
+		setSelection({ start: selectionStart, end: selectionEnd });
+	};
+
+	useEffect(() => {
+		setSelection(null);
+	}, [text]);
+
+	const moveCursor = (newPos: number) => {
+		if (!ref.current) return;
+		ref.current.selectionEnd = newPos;
+		ref.current.focus();
+	};
+
+	const execCommand = (command: Command, symetry: boolean = true) => {
+		if (selection) {
+			const selectedText = text.substring(selection.start, selection.end);
+			const pre = text.slice(0, selection.start);
+			const post = text.slice(selection.end);
+			const newSelectedText = `${command}${selectedText}${symetry ? command : ""}`;
+			setText(pre + newSelectedText + post);
+			return;
+		}
+
+		const pre = text.slice(0, cursor.column);
+		const post = text.slice(cursor.column);
+
+		if (!symetry) setText(pre + command + post);
+		else {
+			const t = pre + command + command + post;
+			setText(t);
+		}
+		console.log(pre.length + command.length);
+		moveCursor(cursor.column + 2);
+	};
+
+	const sanitized = DOMPurify.sanitize(marked(text, { async: false }));
+
+	return (
+		<section className="flex">
+			<div>
+				<div className="flex gap-2 mb-2 border-b pb-2">
+					<Button
+						variant="outline"
+						size="icon"
+						onClick={() => execCommand(Command.Bold)}
+					>
+						<Bold size={16} />
+					</Button>
+					<Button
+						variant="outline"
+						size="icon"
+						onClick={() => execCommand(Command.Italic)}
+					>
+						<Italic size={16} />
+					</Button>
+					<Button
+						variant="outline"
+						size="icon"
+						onClick={() => execCommand(Command.Underline)}
+					>
+						<Underline size={16} />
+					</Button>
+					<Button
+						variant="outline"
+						size="icon"
+						onClick={() => execCommand(Command.Strikethrough)}
+					>
+						<Strikethrough size={16} />
+					</Button>
+					{/*<Button variant="outline" size="icon" onClick={handleLink}>
+						<Link size={16} />
+					</Button> */}
+				</div>
+				<Textarea
+					ref={ref}
+					value={text}
+					onSelect={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
+						getCursorPosition(e);
+						onSelect(e);
+					}}
+					onChange={(e) => setText(e.currentTarget.value)}
+				/>
+				<div>
+					Line: {cursor.line}; Column: {cursor.column}
+					<br />
+					Selection: Start {selection?.start} End {selection?.end}
+				</div>
+			</div>
+			<div
+				className="mt-4 p-2 bg-gray-100 border rounded-md text-sm text-black"
+				dangerouslySetInnerHTML={{
+					// @ts-ignore
+					__html: sanitized,
+				}}
+			></div>
+		</section>
+	);
+}
--- a/frontend/app/(auth)/dashboard/members/[uuid]/page.tsx
+++ b/frontend/app/(auth)/dashboard/members/[uuid]/page.tsx
@@ -0,0 +1,221 @@
+"use client";
+
+import { UserIcon, Building, X } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { Role, User } from "@/types/types";
+import { useParams } from "next/navigation";
+import { useApi } from "@/hooks/use-api";
+import { useState } from "react";
+import request from "@/lib/request";
+
+export default function UserDetailsPage() {
+	const { uuid } = useParams<{ uuid: string }>();
+	const user = useApi<User>(`/users/${uuid}`, {}, true);
+
+	const availableRoles = useApi<Role[]>("/roles", {}, true);
+	availableRoles.data ??= [];
+	const [selectedRole, setSelectedRole] = useState<Role | null>(null);
+	// const [selectedOrg, setSelectedOrg] = useState("");
+
+	const addRole = async (role: Role) => {
+		const res = await request(
+			`/users/${user.data?.userId}/roles/${role.id}/add`,
+			{ method: "PATCH", requiresAuth: true },
+		);
+		if (res.status === "Success") {
+			setSelectedRole(null);
+			user.mutate();
+		}
+	};
+
+	const removeRole = async (role: Role) => {
+		const res = await request(
+			`/users/${user.data?.userId}/roles/${role.id}/remove`,
+			{ method: "PATCH", requiresAuth: true },
+		);
+		if (res.status === "Success") user.mutate();
+	};
+
+	const addOrganization = () => {
+		// if (selectedOrg && !user.organizations.includes(selectedOrg)) {
+		// 	setUser((prevUser) => ({
+		// 		...prevUser,
+		// 		organizations: [...prevUser.organizations, selectedOrg],
+		// 	}));
+		// 	setSelectedOrg("");
+		// }
+	};
+
+	const removeOrganization = (orgToRemove: string) => {
+		// setUser((prevUser) => ({
+		// 	...prevUser,
+		// 	organizations: prevUser.organizations.filter(
+		// 		(org) => org !== orgToRemove,
+		// 	),
+		// }));
+	};
+
+	if (!user.data || !user.success) return <p>Error</p>;
+
+	return (
+		<div className="container mx-auto py-10">
+			<Card>
+				<CardContent className="pt-6">
+					<div className="grid gap-6">
+						<div className="flex items-center space-x-4">
+							<UserIcon className="h-12 w-12 text-gray-400" />
+							<div>
+								<h2 className="text-xl font-semibold">
+									{user.data.firstname} {user.data.lastname}
+								</h2>
+								<p className="text-sm text-gray-500">
+									{user.data.email}
+								</p>
+							</div>
+						</div>
+
+						<div className="grid gap-6 md:grid-cols-2">
+							<div>
+								<h3 className="text-lg font-semibold mb-2">
+									Rôles
+								</h3>
+								<div className="flex flex-wrap gap-2">
+									{user.data.roles?.map((role) => (
+										<Badge
+											key={role.id}
+											variant="secondary"
+											className="text-sm py-1 px-2"
+										>
+											{role.name}
+											<button
+												onClick={() => removeRole(role)}
+												className="ml-2 text-gray-500 hover:text-gray-700"
+											>
+												<X className="h-3 w-3" />
+											</button>
+										</Badge>
+									))}
+								</div>
+
+								<div className="mt-2 flex space-x-2">
+									<Select
+										value={
+											selectedRole
+												? selectedRole.name
+												: ""
+										}
+										onValueChange={(s) => {
+											const r = availableRoles.data?.find(
+												(r) => r.name === s,
+											);
+											console.log(r);
+											if (r) setSelectedRole(r);
+										}}
+									>
+										<SelectTrigger className="w-[180px]">
+											<SelectValue placeholder="Sélectionner un rôle" />
+										</SelectTrigger>
+										<SelectContent>
+											{availableRoles.data
+												.filter(
+													(org) =>
+														!user.data?.roles?.includes(
+															org,
+														),
+												)
+												.map((role) => (
+													<SelectItem
+														key={role.id}
+														value={role.name}
+													>
+														{role.name}
+													</SelectItem>
+												))}
+										</SelectContent>
+									</Select>
+									<Button
+										disabled={!user.data || !selectedRole}
+										onClick={() => addRole(selectedRole!)}
+										className="flex items-center"
+									>
+										<Building className="mr-2 h-4 w-4" />
+										Ajouter le rôle
+									</Button>
+								</div>
+							</div>
+
+							{/*<div>
+								<h3 className="text-lg font-semibold mb-2">
+									Organizations
+								</h3>
+								<div className="flex flex-wrap gap-2">
+									{user.data.organizations.map((org) => (
+										<Badge
+											key={org}
+											variant="outline"
+											className="text-sm py-1 px-2"
+										>
+											{org}
+											<button
+												onClick={() =>
+													removeOrganization(org)
+												}
+												className="ml-2 text-gray-500 hover:text-gray-700"
+											>
+												<X className="h-3 w-3" />
+											</button>
+										</Badge>
+									))}
+								</div>
+								<div className="mt-2 flex space-x-2">
+									<Select
+										value={selectedOrg}
+										onValueChange={setSelectedOrg}
+									>
+										<SelectTrigger className="w-[180px]">
+											<SelectValue placeholder="Select an organization" />
+										</SelectTrigger>
+										<SelectContent>
+											{availableOrganizations
+												.filter(
+													(org) =>
+														!user.organizations.includes(
+															org,
+														),
+												)
+												.map((org) => (
+													<SelectItem
+														key={org}
+														value={org}
+													>
+														{org}
+													</SelectItem>
+												))}
+										</SelectContent>
+									</Select>
+									<Button
+										onClick={addOrganization}
+										className="flex items-center"
+									>
+										<Building className="mr-2 h-4 w-4" />
+										Add Org
+									</Button>
+								</div>
+							</div> */}
+						</div>
+					</div>
+				</CardContent>
+			</Card>
+		</div>
+	);
+}
--- a/frontend/app/(auth)/dashboard/planning/page.tsx
+++ b/frontend/app/(auth)/dashboard/planning/page.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import Planning from "@/components/planning";
+import { useApi } from "@/hooks/use-api";
+import ICalendarEvent from "@/interfaces/ICalendarEvent";
+import { Loader2 } from "lucide-react";
+
+export default function Page() {
+	const {
+		data: requestedEvents,
+		isLoading,
+		success,
+		mutate,
+	} = useApi<ICalendarEvent[]>("/events", undefined, false, false);
+
+	if (isLoading) return <Loader2 className="animate-spin" />;
+	if (success)
+		return (
+			<Planning
+				modifiable
+				events={requestedEvents ?? []}
+				mutate={mutate}
+			/>
+		);
+}
--- a/frontend/app/(auth)/dashboard/settings/media/old.tsx
+++ b/frontend/app/(auth)/dashboard/settings/media/old.tsx
@@ -1,30 +0,0 @@
-"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;
--- a/frontend/app/(auth)/dashboard/settings/media/page.tsx
+++ b/frontend/app/(auth)/dashboard/settings/media/page.tsx
@@ -16,7 +16,7 @@ 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";
+import request from "@/lib/request";

 export default function PhotoGallery() {
 	const {
@@ -40,8 +40,22 @@ export default function PhotoGallery() {
 		});
 	};

-	const handleUpdatePhoto = (updatedPhoto: Omit<Media, "id">) => {
+	const handleUpdatePhoto = async (
+		body: Media | Omit<Media, "id">,
+		file: File,
+	) => {
 		if (selectedPhoto) {
+			const res = await request<Media>(
+				`/media/${selectedPhoto.id}/update`,
+				{
+					method: "PATCH",
+					requiresAuth: true,
+					body,
+				},
+			);
+			if (res.status === "Success") {
+				mutate();
+			}
 		}
 		setSelectedPhoto(null);
 	};
--- a/frontend/app/(auth)/dashboard/settings/roles/page.tsx
+++ b/frontend/app/(auth)/dashboard/settings/roles/page.tsx
@@ -15,7 +15,8 @@ import {
 } from "@/components/ui/dialog";
 import { ChevronDown, ChevronRight, Plus, Trash2 } from "lucide-react";
 import { toTitleCase } from "@/lib/utils";
-import { request, useApi } from "@/hooks/use-api";
+import { useApi } from "@/hooks/use-api";
+import request from "@/lib/request";

 type Action = string;

--- a/frontend/app/(auth)/dashboard/settings/shortcodes/page.tsx
+++ b/frontend/app/(auth)/dashboard/settings/shortcodes/page.tsx
@@ -3,7 +3,8 @@
 import { useState } from "react";
 import { ShortcodeTable } from "@/components/shortcodes-table";
 import type IShortcode from "@/interfaces/IShortcode";
-import { request, useApi } from "@/hooks/use-api";
+import { useApi } from "@/hooks/use-api";
+import request from "@/lib/request";
 import { Loader2 } from "lucide-react";

 export default function ShortcodesPage() {
@@ -15,6 +16,8 @@ export default function ShortcodesPage() {
 		success,
 	} = useApi<IShortcode[]>("/shortcodes", undefined, true);

+	console.log(shortcodes);
+
 	const handleUpdate = async (updatedShortcode: IShortcode) => {
 		const res = await request<IShortcode>(
 			`/shortcodes/${updatedShortcode.code}/update`,
--- a/frontend/app/(main)/about/page.tsx
+++ b/frontend/app/(main)/about/page.tsx
@@ -1,4 +1,4 @@
-"use server";
+export const dynamic = "force-dynamic"; // Prevents static rendering

 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -10,7 +10,7 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
-import { Avatar, AvatarFallback, AvatarImage } from "@radix-ui/react-avatar";
+import getShortcode from "@/lib/getShortcode";
 import { CheckIcon } from "lucide-react";

 export default async function About() {
@@ -21,13 +21,17 @@ export default async function About() {
 			</Button>
 		</a>
 	);
+
+	const profileImage = await getShortcode("profile_image");
+
 	return (
 		<>
 			<div className="">
-				<div className="flex flex-col lg:flex-row gap-4 justify-between w-full p-12">
-					<div className="flex flex-col lg:w-1/2 xl:w-full gap-4 w-full justify-center">
-						<Card className="py-5 max-h-fit">
-							<CardHeader className="text-center p-2">
+				<div className="grid grid-cols-1 lg:grid-cols-3 gap-4 w-full p-12 items-stretch">
+					{/* Text Section - Takes 2/3 on large screens */}
+					<div className="lg:col-span-2 flex flex-col justify-center">
+						<Card className="h-full">
+							<CardHeader className="text-center p-4">
 								<CardTitle className="text-5xl">
 									Nicolas GORUK
 								</CardTitle>
@@ -38,10 +42,10 @@ export default async function About() {
 							</CardHeader>
 							<CardContent className="px-8 sm:px-10 py-14">
 								<div className="flex flex-col gap-4 justify-center">
-									<h2 className="text-pretty text-center text-xl font-semibold md:mb-0.5 lg:mb-1 lg:max-w-3xl sm:text-3xl">
+									<h2 className="text-center text-xl font-semibold sm:text-3xl">
 										Lorem ipsum, dolor sit amet
 									</h2>
-									<p className="blog-paragraph text-muted-foreground">
+									<p className="text-muted-foreground">
 										Lorem ipsum dolor sit amet consectetur
 										adipisicing elit. Debitis accusamus
 										illum, nam nemo quod delectus velit
@@ -49,10 +53,10 @@ export default async function About() {
 										aliquam atque praesentium ea placeat ad,
 										neque eveniet adipisci?
 									</p>
-									<h2 className="text-pretty text-center text-xl font-semibold md:mb-0.5 lg:mb-1 lg:max-w-3xl sm:text-3xl">
+									<h2 className="text-center text-xl font-semibold sm:text-3xl">
 										Lorem ipsum, dolor sit amet
 									</h2>
-									<p className="blog-paragraph text-muted-foreground">
+									<p className="text-muted-foreground">
 										Lorem ipsum dolor sit amet consectetur
 										adipisicing elit. Debitis accusamus
 										illum, nam nemo quod delectus velit
@@ -64,10 +68,15 @@ export default async function About() {
 							</CardContent>
 						</Card>
 					</div>
-					<div className="w-full lg:w-1/2 border rounded">
+
+					{/* Image Section - Takes 1/3 on large screens */}
+					<div className="lg:col-span-1 flex items-center">
 						<img
-							className="w-full aspect-square"
-							src="https://shadcnblocks.com/images/block/placeholder-dark-1.svg"
+							className="w-full h-full object-cover rounded"
+							src={
+								profileImage?.media?.url ??
+								"https://shadcnblocks.com/images/block/placeholder-dark-1.svg"
+							}
 							alt="president profile image"
 						/>
 					</div>
--- a/frontend/app/(main)/gallery/page.tsx
+++ b/frontend/app/(main)/gallery/page.tsx
@@ -0,0 +1,118 @@
+"use client";
+
+import Image from "next/image";
+import {
+	Pagination,
+	PaginationContent,
+	PaginationItem,
+	PaginationLink,
+	PaginationNext,
+	PaginationPrevious,
+} from "@/components/ui/pagination";
+import useMedia from "@/hooks/use-media";
+import { Loader2 } from "lucide-react";
+import Lightbox from "yet-another-react-lightbox";
+import "yet-another-react-lightbox/styles.css";
+import Zoom from "yet-another-react-lightbox/plugins/zoom";
+import { useState } from "react";
+
+export default function PhotoGallery() {
+	const {
+		data,
+		error: mediaError,
+		isLoading,
+		success,
+		setPage,
+		setLimit,
+		mutate,
+	} = useMedia();
+
+	const [index, setIndex] = useState<number | null>(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>
+			</div>
+			{isLoading ? (
+				<div className="flex w-full h-full justify-center">
+					<Loader2 className="animate-spin" />
+				</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, idx) => (
+						<div
+							key={photo.id}
+							className="aspect-square overflow-hidden rounded-lg shadow-md cursor-pointer"
+							onClick={() => setIndex(idx)}
+						>
+							<Image
+								src={photo.url || "/placeholder.svg"}
+								alt={photo.alt}
+								width={300}
+								height={300}
+								unoptimized
+								className="w-full h-full object-cover"
+							/>
+						</div>
+					))}
+					<Lightbox
+						open={index !== null}
+						close={() => setIndex(null)}
+						slides={data?.items.map((i) => ({ src: i.url }))}
+						index={index ?? 0}
+						plugins={[Zoom]}
+					/>
+				</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>
+		</div>
+	);
+}
--- a/frontend/app/(main)/page.tsx
+++ b/frontend/app/(main)/page.tsx
@@ -1,23 +1,36 @@
-"use server";
-
+export const dynamic = "force-dynamic"; // Prevents static rendering
 import Features, { FeatureItem } from "@/components/features";
 import Gallery from "@/components/gallery";
 import Hero from "@/components/hero";
+import HomepageGalleryItems from "@/components/homepage-gallery";
 import Testimonial from "@/components/testimonial";
 import { CarouselItem } from "@/components/ui/carousel";
 import YouTubeEmbed from "@/components/youtube-embed";
 import { IYoutube } from "@/interfaces/youtube";
+import getShortcode from "@/lib/getShortcode";
+
+const PLAYLIST_ID = "PLh8PxbpRguvNlmarfGkCTAd-UVAG4QpE9";

 export default async function Home() {
 	let videos: IYoutube | null = null;
 	if (process.env.YOUTUBE_API_KEY) {
-		const query = `https://www.googleapis.com/youtube/v3/search?key=${process.env.YOUTUBE_API_KEY}&channelId=UCzuFLl5I0WxSMqbeMaiq_FQ&part=snippet,id&order=date&maxResults=50`;
+		const query = `https://www.googleapis.com/youtube/v3/playlistItems?key=${process.env.YOUTUBE_API_KEY}&playlistId=${PLAYLIST_ID}&part=snippet,id&maxResults=50`;
 		const res = await fetch(query);
 		videos = await res.json();
 	}
+	console.log(videos);
+	const hero = await getShortcode("hero_image");
+	const systemEvolution = await getShortcode("evolution_systeme");
+	const fondations = await getShortcode("fondements");
+	const todaysPrinciples = await getShortcode("aujourdhui");
 	return (
 		<main>
-			<Hero />
+			<Hero
+				background={
+					hero?.media?.url ??
+					"https://shadcnblocks.com/images/block/placeholder-2.svg"
+				}
+			/>
 			<div className="p-12">
 				<YouTubeEmbed
 					loadIframe
@@ -36,7 +49,10 @@ export default async function Home() {
 					<FeatureItem
 						title="Les Fondements de Latosa Escrima Concepts"
 						position="left"
-						image="https://shadcnblocks.com/images/block/placeholder-2.svg"
+						image={
+							fondations?.media?.url ??
+							"https://shadcnblocks.com/images/block/placeholder-2.svg"
+						}
 					>
 						<ol className="flex list-decimal flex-col gap-4 text-justify">
 							<li>
@@ -72,7 +88,10 @@ export default async function Home() {
 					<FeatureItem
 						title="L’Évolution du Système"
 						position="right"
-						image="https://shadcnblocks.com/images/block/placeholder-2.svg"
+						image={
+							systemEvolution?.media?.url ??
+							"https://shadcnblocks.com/images/block/placeholder-2.svg"
+						}
 					>
 						<ol className="flex list-none flex-col gap-4 text-justify">
 							<li>
@@ -117,7 +136,10 @@ export default async function Home() {
 					<FeatureItem
 						title="Les Principes du Système Aujourd’hui"
 						position="left"
-						image="https://shadcnblocks.com/images/block/placeholder-2.svg"
+						image={
+							todaysPrinciples?.media?.url ??
+							"https://shadcnblocks.com/images/block/placeholder-2.svg"
+						}
 					>
 						Latosa Escrima Concepts repose sur cinq concepts
 						fondamentaux :
@@ -131,11 +153,13 @@ export default async function Home() {
 					</FeatureItem>
 				</Features>
 				<Gallery
-					tagLine="Tag Line"
-					cta="Book a demo"
-					ctaHref="#"
-					title="Gallery"
-				/>
+					tagLine=""
+					cta="Voir toutes les photos"
+					ctaHref="/gallery"
+					title="Gallerie"
+				>
+					<HomepageGalleryItems />
+				</Gallery>
 				{videos && (
 					<Gallery
 						tagLine=""
@@ -144,9 +168,13 @@ export default async function Home() {
 						title="Vidéos YouTube"
 					>
 						{videos.items.map((video) => {
+							const id =
+								typeof video.id !== "string"
+									? video.id.videoId
+									: video.snippet.resourceId.videoId;
 							return (
 								<CarouselItem
-									key={video.id.videoId}
+									key={id}
 									className="pl-[20px] md:max-w-[452px]"
 								>
 									<YouTubeEmbed video={video} />
--- a/frontend/app/(main)/planning/page.tsx
+++ b/frontend/app/(main)/planning/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 import Planning from "@/components/planning";
 import { useApi } from "@/hooks/use-api";
-import { type CalendarEventExternal } from "@schedule-x/calendar";
+import ICalendarEvent from "@/interfaces/ICalendarEvent";
 import { Loader2 } from "lucide-react";

 const Page = () => {
@@ -10,7 +10,7 @@ const Page = () => {
 		isLoading,
 		success,
 		mutate,
-	} = useApi<CalendarEventExternal[]>("/events", undefined, false, false);
+	} = useApi<ICalendarEvent[]>("/events", undefined, false, false);

 	if (isLoading) return <Loader2 className="animate-spin" />;
 	if (success)
--- a/frontend/app/layout.tsx
+++ b/frontend/app/layout.tsx
@@ -3,6 +3,7 @@ import { Geist, Geist_Mono } from "next/font/google";
 import "@/app/globals.css";
 import SWRLayout from "@/components/layouts/swr-layout";
 import { ThemeProvider } from "@/components/ThemeProvider";
+import { Toaster } from "@/components/ui/toaster";

 const geistSans = Geist({
 	variable: "--font-geist-sans",
@@ -47,6 +48,7 @@ export default function RootLayout({
 					disableTransitionOnChange
 				>
 					<SWRLayout>{children}</SWRLayout>
+					<Toaster />
 				</ThemeProvider>
 			</body>
 		</html>
--- a/frontend/components/app-sidebar.tsx
+++ b/frontend/components/app-sidebar.tsx
@@ -63,8 +63,14 @@ const data = {
 		},
 		{
 			title: "Planning",
-			url: "/dashboard/planning",
 			icon: Calendar,
+			url: "/dashboard/planning",
+			items: [
+				{
+					title: "Planning",
+					url: "/dashboard/planning",
+				},
+			],
 		},
 		{
 			title: "Blogs",
--- a/frontend/components/contact.tsx
+++ b/frontend/components/contact.tsx
@@ -3,8 +3,8 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
-import { ApiResponse } from "@/hooks/use-api";
 import { API_URL } from "@/lib/constants";
+import { ApiResponse } from "@/types/types";
 import { useEffect, useState } from "react";

 interface FormData {
--- a/frontend/components/event-dialog.tsx
+++ b/frontend/components/event-dialog.tsx
@@ -1,23 +1,44 @@
-"use client"
+"use client";

-import * as React from "react"
-import { CalendarIcon } from "lucide-react"
-import { format } from "date-fns"
-import { zodResolver } from "@hookform/resolvers/zod"
-import * as z from "zod"
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { Calendar } from "@/components/ui/calendar"
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
-import { Input } from "@/components/ui/input"
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
-import { Checkbox } from "@/components/ui/checkbox"
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
-import { useForm } from "react-hook-form"
+import * as React from "react";
+import { CalendarIcon } from "lucide-react";
+import { format } from "date-fns";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
 import {
-	CalendarEventExternal,
-} from "@schedule-x/calendar";
-import ICalendarEvent from "@/interfaces/ICalendarEvent"
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import {
+	SubmitErrorHandler,
+	SubmitHandler,
+	useForm,
+	UseFormReturn,
+} from "react-hook-form";
+import { CalendarEventExternal } from "@schedule-x/calendar";
+import ICalendarEvent from "@/interfaces/ICalendarEvent";
+import { useEffect } from "react";

 export const eventFormSchema = z.object({
 	title: z.string().min(1, "Titre requis"),
@@ -33,254 +54,325 @@ export const eventFormSchema = z.object({
 	frequency: z.enum(["unique", "quotidien", "hebdomadaire", "mensuel"]),
 	frequencyEndDate: z.date().optional(),
 	isVisible: z.boolean().default(true),
-})
+});

-export type EventFormValues = z.infer<typeof eventFormSchema>
+export type EventFormValues = z.infer<typeof eventFormSchema>;

 const frequencies = [
 	{ label: "Unique", value: "unique" },
 	{ label: "Quotidien", value: "quotidien" },
 	{ label: "Hebdomadaire", value: "hebdomadaire" },
 	{ label: "Mensuel", value: "mensuel" },
-]
+];

-const isCalendarEventExternal = (event: CalendarEventExternal | Omit<CalendarEventExternal, "id">): event is CalendarEventExternal => {
-  return (event as CalendarEventExternal).id !== undefined;
+const isCalendarEventExternal = (
+	event: CalendarEventExternal | Omit<CalendarEventExternal, "id">,
+): event is CalendarEventExternal => {
+	return (event as CalendarEventExternal).id !== undefined;
 };

-export const EventForm: React.FC<
-	{
-		event: ICalendarEvent | Omit<ICalendarEvent, "id">;
-		onSubmitEvent: (eventFormValues: EventFormValues) => void;
-	}
-> = ({
-	event,
-	onSubmitEvent,
-}) => {
-		
-		const form =  useForm<EventFormValues>({
-			resolver: zodResolver(eventFormSchema),
-			defaultValues: {
-				title:		event.title ? event.title : "",
-				startDate:	new Date(), // event.start),
-				startTime:	`${new Date(event.start).getHours()}:${new Date(event.start).getMinutes()}`,
-				endDate:    new Date(), // event.end),
-				endTime:	`${new Date(event.end).getHours()}:${new Date(event.end).getMinutes()}`,
-				fullDay:	event.fullday,
-				frequency:	"unique",
-				isVisible:  event.isVisible,
-			},
-		}) 	
+export const EventForm: React.FC<{
+	event: ICalendarEvent | Omit<ICalendarEvent, "id">;
+	setForm: React.Dispatch<
+		React.SetStateAction<UseFormReturn<EventFormValues> | undefined>
+	>;
+}> = ({ event, setForm }) => {
+	const _start = new Date(event.start ?? Date.now());
+	const _end = new Date(event.end ?? Date.now());
+	const form = useForm<EventFormValues>({
+		resolver: zodResolver(eventFormSchema),
+		defaultValues: {
+			title: event.title ? event.title : "",
+			startDate: _start, // event.start),
+			startTime: format(_start, "HH:mm"),
+			endDate: _end, // event.end),
+			endTime: format(_end, "HH:mm"),
+			fullDay: event.fullday,
+			frequency: "unique",
+			isVisible: event.isVisible,
+		},
+	});

-		const frequency = form.watch("frequency")
+	useEffect(() => {
+		setForm(form);
+	}, []);

-		async function onSubmit(data: EventFormValues) {
-			try {
-				const validatedData = eventFormSchema.parse(data)
-				onSubmitEvent(validatedData)
-			} catch (error) {
-				console.error("On submit error : ", error)
-			}
-		}
+	const frequency = form.watch("frequency");

-		return (
-			<Form {...form}>
-				<form onSubmit={form.handleSubmit(onSubmit)} className="w-full max-w-md space-y-4">
+	return (
+		<Form {...form}>
+			<form className="w-full max-w-md space-y-4">
+				<FormField
+					control={form.control}
+					name="title"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Titre</FormLabel>
+							<FormControl>
+								<Input
+									placeholder="Ajouter un titre"
+									{...field}
+								/>
+							</FormControl>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+
+				<div className="grid grid-cols-[1fr,auto,1fr] items-end gap-2">
 					<FormField
 						control={form.control}
-						name="title"
+						name="startDate"
+						render={({ field }) => (
+							<FormItem className="flex flex-col">
+								<FormLabel>Début</FormLabel>
+								<Popover>
+									<PopoverTrigger asChild>
+										<FormControl>
+											<Button
+												variant="outline"
+												className={cn(
+													"w-full pl-3 text-left font-normal",
+													!field.value &&
+														"text-muted-foreground",
+												)}
+											>
+												{field.value ? (
+													format(
+														field.value,
+														"dd/MM/yyyy",
+													)
+												) : (
+													<span>
+														Choisis une date
+													</span>
+												)}
+												<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+											</Button>
+										</FormControl>
+									</PopoverTrigger>
+									<PopoverContent
+										className="w-auto p-0"
+										align="start"
+									>
+										<Calendar
+											mode="single"
+											selected={field.value}
+											onSelect={field.onChange}
+											initialFocus
+										/>
+									</PopoverContent>
+								</Popover>
+								<FormMessage />
+							</FormItem>
+						)}
+					/>
+
+					<FormField
+						control={form.control}
+						name="startTime"
 						render={({ field }) => (
 							<FormItem>
-								<FormLabel>Titre</FormLabel>
 								<FormControl>
-									<Input placeholder="Ajouter un titre" {...field} />
-								</FormControl>
-								<FormMessage />
-							</FormItem>
-						)}
-					/>
-
-					<div className="grid grid-cols-[1fr,auto,1fr] items-end gap-2">
-						<FormField
-							control={form.control}
-							name="startDate"
-							render={({ field }) => (
-								<FormItem className="flex flex-col">
-									<FormLabel>Début</FormLabel>
-									<Popover>
-										<PopoverTrigger asChild>
-											<FormControl>
-												<Button
-													variant="outline"
-													className={cn("w-full pl-3 text-left font-normal", !field.value && "text-muted-foreground")}
-												>
-													{field.value ? format(field.value, "yyyy-mm-dd hh:mm") : <span>Choisis une date</span>}
-													<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
-												</Button>
-											</FormControl>
-										</PopoverTrigger>
-										<PopoverContent className="w-auto p-0" align="start">
-											<Calendar mode="single" selected={field.value} onSelect={field.onChange} initialFocus />
-										</PopoverContent>
-									</Popover>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
-
-						<FormField
-							control={form.control}
-							name="startTime"
-							render={({ field }) => (
-								<FormItem>
-									<FormControl>
-										<Input type="time" {...field} className="w-[120px]" />
-									</FormControl>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
-
-						<span className="invisible">Until</span>
-
-						<FormField
-							control={form.control}
-							name="endDate"
-							render={({ field }) => (
-								<FormItem className="flex flex-col">
-									<FormLabel>Fin</FormLabel>
-									<Popover>
-										<PopoverTrigger asChild>
-											<FormControl>
-												<Button
-													variant="outline"
-													className={cn("w-full pl-3 text-left font-normal", !field.value && "text-muted-foreground")}
-												>
-													{field.value ? format(field.value,  "yyyy-mm-dd hh:mm") : <span>Choisis une date</span>}
-													<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
-												</Button>
-											</FormControl>
-										</PopoverTrigger>
-										<PopoverContent className="w-auto p-0" align="start">
-											<Calendar mode="single" selected={field.value} onSelect={field.onChange} initialFocus />
-										</PopoverContent>
-									</Popover>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
-
-						<FormField
-							control={form.control}
-							name="endTime"
-							render={({ field }) => (
-								<FormItem>
-									<FormControl>
-										<Input type="time" {...field} className="w-[120px]" />
-									</FormControl>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
-					</div>
-
-					<FormField
-						control={form.control}
-						name="fullDay"
-						render={({ field }) => (
-							<FormItem className="flex flex-row items-start space-x-3 space-y-0">
-								<FormControl>
-									<Checkbox checked={field.value} onCheckedChange={field.onChange} />
-								</FormControl>
-								<FormLabel>Journée complète</FormLabel>
-								<FormMessage />
-							</FormItem>
-						)}
-					/>
-
-					<div className="flex gap-4 items-end">
-						<FormField
-							control={form.control}
-							name="frequency"
-							render={({ field }) => (
-								<FormItem className="flex-1">
-									<FormLabel>Fréquence</FormLabel>
-									<Select onValueChange={field.onChange} defaultValue={field.value}>
-										<FormControl>
-											<SelectTrigger>
-												<SelectValue placeholder="Selectionner Fréquence" />
-											</SelectTrigger>
-										</FormControl>
-										<SelectContent>
-											{frequencies.map((frequency) => (
-												<SelectItem key={frequency.value} value={frequency.value}>
-													{frequency.label}
-												</SelectItem>
-											))}
-										</SelectContent>
-									</Select>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
-
-						{frequency !== "unique" && (
-							<FormField
-								control={form.control}
-								name="frequencyEndDate"
-								render={({ field }) => (
-									<FormItem className="flex-1">
-										<FormLabel>Jusqu'au</FormLabel>
-										<Popover>
-											<PopoverTrigger asChild>
-												<FormControl>
-													<Button
-														variant="outline"
-														className={cn("w-full pl-3 text-left font-normal", !field.value && "text-muted-foreground")}
-													>
-														{field.value ? format(field.value, "MM/dd/yyyy") : <span>Choisis une date</span>}
-														<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
-													</Button>
-												</FormControl>
-											</PopoverTrigger>
-											<PopoverContent className="w-auto p-0" align="start">
-												<Calendar mode="single" selected={field.value} onSelect={field.onChange} initialFocus />
-											</PopoverContent>
-										</Popover>
-										<FormMessage />
-									</FormItem>
-								)}
-							/>
-						)}
-					</div>
-
-					<FormField
-						control={form.control}
-						name="isVisible"
-						render={({ field }) => (
-							<FormItem className="flex-1">
-								<FormLabel className="align-sub">Evènement visible ?</FormLabel>
-								<FormControl>
-									<Checkbox className="m-3 align-top justify-center"
-										checked={field.value}
-										onCheckedChange={field.onChange}
+									<Input
+										type="time"
+										{...field}
+										className="w-[120px]"
 									/>
 								</FormControl>
 								<FormMessage />
 							</FormItem>
 						)}
 					/>
-					<div className="flex justify-end space-x-2">
-						<Button variant="outline" type="button">
-							Abandonner
-						</Button>
-						<Button type="submit" className="bg-[#6B4EFF] hover:bg-[#5B3FEF]">
-							Sauvegarder
-						</Button>
-					</div>
-				</form>
-			</Form>
-		)
-	}

+					<span className="invisible">Until</span>

+					<FormField
+						control={form.control}
+						name="endDate"
+						render={({ field }) => (
+							<FormItem className="flex flex-col">
+								<FormLabel>Fin</FormLabel>
+								<Popover>
+									<PopoverTrigger asChild>
+										<FormControl>
+											<Button
+												variant="outline"
+												className={cn(
+													"w-full pl-3 text-left font-normal",
+													!field.value &&
+														"text-muted-foreground",
+												)}
+											>
+												{field.value ? (
+													format(
+														field.value,
+														"dd/MM/yyyy",
+													)
+												) : (
+													<span>
+														Choisis une date
+													</span>
+												)}
+												<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+											</Button>
+										</FormControl>
+									</PopoverTrigger>
+									<PopoverContent
+										className="w-auto p-0"
+										align="start"
+									>
+										<Calendar
+											mode="single"
+											selected={field.value}
+											onSelect={field.onChange}
+											initialFocus
+										/>
+									</PopoverContent>
+								</Popover>
+								<FormMessage />
+							</FormItem>
+						)}
+					/>
+
+					<FormField
+						control={form.control}
+						name="endTime"
+						render={({ field }) => (
+							<FormItem>
+								<FormControl>
+									<Input
+										type="time"
+										{...field}
+										className="w-[120px]"
+									/>
+								</FormControl>
+								<FormMessage />
+							</FormItem>
+						)}
+					/>
+				</div>
+
+				<FormField
+					control={form.control}
+					name="fullDay"
+					render={({ field }) => (
+						<FormItem className="flex flex-row items-start space-x-3 space-y-0">
+							<FormControl>
+								<Checkbox
+									checked={field.value}
+									onCheckedChange={field.onChange}
+								/>
+							</FormControl>
+							<FormLabel>Journée complète</FormLabel>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+
+				<div className="flex gap-4 items-end">
+					<FormField
+						control={form.control}
+						name="frequency"
+						render={({ field }) => (
+							<FormItem className="flex-1">
+								<FormLabel>Fréquence</FormLabel>
+								<Select
+									onValueChange={field.onChange}
+									defaultValue={field.value}
+								>
+									<FormControl>
+										<SelectTrigger>
+											<SelectValue placeholder="Selectionner Fréquence" />
+										</SelectTrigger>
+									</FormControl>
+									<SelectContent>
+										{frequencies.map((frequency) => (
+											<SelectItem
+												key={frequency.value}
+												value={frequency.value}
+											>
+												{frequency.label}
+											</SelectItem>
+										))}
+									</SelectContent>
+								</Select>
+								<FormMessage />
+							</FormItem>
+						)}
+					/>
+
+					{frequency !== "unique" && (
+						<FormField
+							control={form.control}
+							name="frequencyEndDate"
+							render={({ field }) => (
+								<FormItem className="flex-1">
+									<FormLabel>Jusqu'au</FormLabel>
+									<Popover>
+										<PopoverTrigger asChild>
+											<FormControl>
+												<Button
+													variant="outline"
+													className={cn(
+														"w-full pl-3 text-left font-normal",
+														!field.value &&
+															"text-muted-foreground",
+													)}
+												>
+													{field.value ? (
+														format(
+															field.value,
+															"dd/MM/yyyy",
+														)
+													) : (
+														<span>
+															Choisis une date
+														</span>
+													)}
+													<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+												</Button>
+											</FormControl>
+										</PopoverTrigger>
+										<PopoverContent
+											className="w-auto p-0"
+											align="start"
+										>
+											<Calendar
+												mode="single"
+												selected={field.value}
+												onSelect={field.onChange}
+												initialFocus
+											/>
+										</PopoverContent>
+									</Popover>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+					)}
+				</div>
+
+				<FormField
+					control={form.control}
+					name="isVisible"
+					render={({ field }) => (
+						<FormItem className="flex-1">
+							<FormLabel className="align-sub">
+								Evènement visible ?
+							</FormLabel>
+							<FormControl>
+								<Checkbox
+									className="m-3 align-top justify-center"
+									checked={field.value}
+									onCheckedChange={field.onChange}
+								/>
+							</FormControl>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+			</form>
+		</Form>
+	);
+};
--- a/frontend/components/hero.tsx
+++ b/frontend/components/hero.tsx
@@ -2,12 +2,24 @@ import { ExternalLink } from "lucide-react";

 import { Button } from "@/components/ui/button";
 import Link from "next/link";
+import { API_URL } from "@/lib/constants";
+import Image from "next/image";

-const Hero = () => {
+const Hero: React.FC<{ background: string }> = ({ background }) => {
 	return (
 		<section className="relative flex h-[calc(100vh-68px)] items-center justify-center overflow-hidden py-32">
 			<div className="">
-				<div className="magicpattern absolute inset-x-0 top-0 -z-10 flex h-full w-full items-center justify-center bg-blue-50 opacity-100" />
+				<Image
+					src={background}
+					layout="fill"
+					// objectFit="cover"
+					priority
+					alt="Hero image"
+					unoptimized
+					className="grayscale object-cover "
+				/>
+				{/* Gradient and Blur Overlay */}
+				<div className="absolute inset-0 bg-gradient-to-r from-transparent via-transparent to-transparent bg-opacity-30 backdrop-blur-sm"></div>
 				<div className="mx-auto flex max-w-5xl flex-col items-center">
 					<div className="z-10 flex flex-col items-center gap-6 text-center">
 						<img
@@ -16,10 +28,12 @@ const Hero = () => {
 							className="h-16"
 						/>
 						<div>
-							<h1 className="mb-6 text-pretty text-2xl font-bold text-primary lg:text-5xl">
-								Trouvez votre équilibre
+							<h1 className="mb-6 text-pretty text-2xl font-bold text-primary lg:text-5xl font-times">
+								Trouvez votre <em>équilibre</em> avec
 								<br />
-								avec Latosa-Escrima
+								<span className="font-extrabold text-3xl lg:text-6xl">
+									Latosa Escrima
+								</span>
 							</h1>
 							<p className="text-muted-foreground lg:text-xl">
 								Une évolution des arts martiaux Philippins
--- a/frontend/components/homepage-gallery.tsx
+++ b/frontend/components/homepage-gallery.tsx
@@ -0,0 +1,59 @@
+"use client";
+
+import useMedia from "@/hooks/use-media";
+import { CarouselItem } from "./ui/carousel";
+import { Loader2 } from "lucide-react";
+import { useState } from "react";
+import Lightbox, { SlideImage } from "yet-another-react-lightbox";
+import "yet-another-react-lightbox/styles.css";
+import Zoom from "yet-another-react-lightbox/plugins/zoom";
+
+export default function HomepageGalleryItems() {
+	const {
+		data,
+		error,
+		mutate,
+		setPage,
+		success,
+		setLimit,
+		isLoading,
+		isValidating,
+	} = useMedia(20);
+
+	const [index, setIndex] = useState<number | null>(null);
+
+	if (isLoading) {
+		return (
+			<div className="flex justify-center w-full h-full">
+				<Loader2 className="animate-spin" />
+			</div>
+		);
+	}
+
+	return (
+		<>
+			{data?.items.map((i, idx) => (
+				<CarouselItem
+					key={i.id}
+					onClick={() => setIndex(idx)}
+					className="pl-[20px] md:max-w-[452px] cursor-pointer"
+				>
+					<div className="w-full aspect-square">
+						<img
+							src={i.url}
+							alt={i.alt}
+							className="inset-0 border rounded-sm w-full h-full object-cover"
+						/>
+					</div>
+				</CarouselItem>
+			))}
+			<Lightbox
+				open={index !== null}
+				close={() => setIndex(null)}
+				slides={data?.items.map((i) => ({ src: i.url }))}
+				index={index ?? 0}
+				plugins={[Zoom]}
+			/>
+		</>
+	);
+}
--- a/frontend/components/login-form.tsx
+++ b/frontend/components/login-form.tsx
@@ -3,12 +3,10 @@ import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { useRouter } from "next/navigation";
 import useLogin from "@/hooks/use-login";
 import { Loader2 } from "lucide-react";
-import { API_URL } from "@/lib/constants";
-import { ApiResponse } from "@/hooks/use-api";

 export function LoginForm({
 	className,
--- a/frontend/components/members-table.tsx
+++ b/frontend/components/members-table.tsx
@@ -13,8 +13,8 @@ import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import MemberDialog, { Member } from "./member-dialog";
-import * as z from "zod";
-import { request, useApi } from "@/hooks/use-api";
+import { useApi } from "@/hooks/use-api";
+import request from "@/lib/request";
 import {
 	CircleX,
 	Loader2,
@@ -22,6 +22,7 @@ import {
 	UserRoundPen,
 	UserRoundPlus,
 } from "lucide-react";
+import Link from "next/link";

 export default function MembersTable() {
 	const {
@@ -107,7 +108,7 @@ export default function MembersTable() {
 							<TableRow>
 								{selectMode && (
 									<TableHead className="w-[50px]">
-										Selectionner
+										Sélectionner
 									</TableHead>
 								)}
 								<TableHead>Prénom</TableHead>
@@ -140,9 +141,23 @@ export default function MembersTable() {
 											</TableCell>
 										)}
 										<TableCell>
-											{member.firstname}
+											<Link
+												href={`/dashboard/members/${member.userId}`}
+											>
+												<span className="underline">
+													{member.firstname}
+												</span>
+											</Link>
+										</TableCell>
+										<TableCell>
+											<Link
+												href={`/dashboard/members/${member.userId}`}
+											>
+												<span className="underline">
+													{member.lastname}
+												</span>
+											</Link>
 										</TableCell>
-										<TableCell>{member.lastname}</TableCell>
 										<TableCell>{member.email}</TableCell>
 										<TableCell>{member.phone}</TableCell>
 										<TableCell>{member.role}</TableCell>
--- a/frontend/components/nav-bar.css
+++ b/frontend/components/nav-bar.css
@@ -0,0 +1,15 @@
+.animate-header-slide-down-fade {
+	animation: header-slide-down-fade 1s ease-in-out;
+}
+
+@keyframes header-slide-down-fade {
+	0% {
+		opacity: 0;
+		transform: translateY(-16px);
+	}
+
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
--- a/frontend/components/nav-bar.tsx
+++ b/frontend/components/nav-bar.tsx
@@ -1,14 +1,8 @@
 "use client";
-import { Book, Menu, Sunset, Trees, Zap } from "lucide-react";
+import { Menu } from "lucide-react";

 import { cn } from "@/lib/utils";

-import {
-	Accordion,
-	AccordionContent,
-	AccordionItem,
-	AccordionTrigger,
-} from "@/components/ui/accordion";
 import { Button, buttonVariants } from "@/components/ui/button";
 import { navigationMenuTriggerStyle } from "@/components/ui/navigation-menu";
 import {
@@ -22,53 +16,27 @@ import Link from "next/link";
 import { deleteCookie, getCookie } from "cookies-next";
 import { useEffect, useState } from "react";
 import { ThemeSwitcher } from "./theme-switcher";
+import "./nav-bar.css";

-const subMenuItemsOne = [
-	{
-		title: "Blog",
-		description: "The latest industry news, updates, and info",
-		icon: <Book className="size-5 shrink-0" />,
-	},
-	{
-		title: "Compnay",
-		description: "Our mission is to innovate and empower the world",
-		icon: <Trees className="size-5 shrink-0" />,
-	},
-	{
-		title: "Careers",
-		description: "Browse job listing and discover our workspace",
-		icon: <Sunset className="size-5 shrink-0" />,
-	},
-	{
-		title: "Support",
-		description:
-			"Get in touch with our support team or visit our community forums",
-		icon: <Zap className="size-5 shrink-0" />,
-	},
-];
-
-const subMenuItemsTwo = [
-	{
-		title: "Help Center",
-		description: "Get all the answers you need right here",
-		icon: <Zap className="size-5 shrink-0" />,
-	},
-	{
-		title: "Contact Us",
-		description: "We are here to help you with any questions you have",
-		icon: <Sunset className="size-5 shrink-0" />,
-	},
-	{
-		title: "Status",
-		description: "Check the current status of our services and APIs",
-		icon: <Trees className="size-5 shrink-0" />,
-	},
-	{
-		title: "Terms of Service",
-		description: "Our terms and conditions for using our services",
-		icon: <Book className="size-5 shrink-0" />,
-	},
-];
+const Href: React.FC<React.PropsWithChildren<{ href: string }>> = ({
+	href,
+	children,
+}) => {
+	return (
+		<Link
+			className={cn(
+				"text-foreground font-bold",
+				navigationMenuTriggerStyle,
+				buttonVariants({
+					variant: "ghost",
+				}),
+			)}
+			href={href}
+		>
+			{children}
+		</Link>
+	);
+};

 const Navbar = () => {
 	const [cookie, setCookie] = useState<string | null>(null);
@@ -77,7 +45,7 @@ const Navbar = () => {
 		setCookie(_cookie?.toString() ?? null);
 	}, []);
 	return (
-		<section className="sticky top-0 z-50 bg-background p-4">
+		<section className="sticky top-0 z-50 bg-background/50 border-b border-b-white/10 backdrop-blur-md p-4 transition duration-200 ease-in-out animate-header-slide-down-fade">
 			<div>
 				<nav className="hidden justify-between lg:flex">
 					<div className="flex items-center gap-6">
@@ -92,65 +60,42 @@ const Navbar = () => {
 							</span>
 						</div>
 						<div className="flex items-center">
+							<Href href="/">Accueil</Href>
+							<Href href="/planning">Planning</Href>
+							<Href href="/about">À propos</Href>
+							<Href href="/gallery">Gallerie</Href>
+							<Href href="/blogs">Blog</Href>
+						</div>
+					</div>
+					<div className="flex gap-2 animate-in ease-in-out">
+						<ThemeSwitcher />
+						{cookie ? (
 							<Link
 								className={cn(
 									"text-muted-foreground",
 									navigationMenuTriggerStyle,
 									buttonVariants({
-										variant: "ghost",
+										variant: "outline",
 									}),
 								)}
-								href="/"
+								href="/dashboard"
 							>
-								Accueil
+								Compte
 							</Link>
-							<a
+						) : (
+							<Link
 								className={cn(
 									"text-muted-foreground",
 									navigationMenuTriggerStyle,
 									buttonVariants({
-										variant: "ghost",
+										variant: "outline",
 									}),
 								)}
-								href="/planning"
+								href="/login"
 							>
-								Planning
-							</a>
-							<a
-								className={cn(
-									"text-muted-foreground",
-									navigationMenuTriggerStyle,
-									buttonVariants({
-										variant: "ghost",
-									}),
-								)}
-								href="/about"
-							>
-								A propos
-							</a>
-							<a
-								className={cn(
-									"text-muted-foreground",
-									navigationMenuTriggerStyle,
-									buttonVariants({
-										variant: "ghost",
-									}),
-								)}
-								href="/blogs"
-							>
-								Blog
-							</a>
-						</div>
-					</div>
-					<div className="flex gap-2 animate-in ease-in-out">
-						<ThemeSwitcher />
-						<Button variant="outline">
-							{cookie ? (
-								<Link href="/dashboard">Compte</Link>
-							) : (
-								<Link href="/login">Se connecter</Link>
-							)}
-						</Button>
+								Se connecter
+							</Link>
+						)}
 						{cookie ? (
 							<Button
 								onClick={() => {
@@ -219,6 +164,12 @@ const Navbar = () => {
 										>
 											À propos
 										</Link>
+										<Link
+											href="/gallery"
+											className="font-semibold"
+										>
+											Gallerie
+										</Link>
 										<Link
 											href="/blog"
 											className="font-semibold"
--- a/frontend/components/photo-dialog.tsx
+++ b/frontend/components/photo-dialog.tsx
@@ -23,7 +23,7 @@ interface PhotoDialogProps {
 	isOpen: boolean;
 	onClose: () => void;
 	onDelete?: (id: Media["id"]) => void;
-	onSave: (photo: Omit<Media, "id">, file: File) => void;
+	onSave: (photo: Omit<Media, "id"> | Media, file: File) => void;
 }

 export function PhotoDialog({
@@ -34,7 +34,7 @@ export function PhotoDialog({
 	onSave,
 }: PhotoDialogProps) {
 	const [file, setFile] = useState<File | null>(null);
-	const [newPhoto, setNewPhoto] = useState<Omit<Media, "id">>({
+	const [newPhoto, setNewPhoto] = useState<Omit<Media, "id"> | Media>({
 		url: "",
 		alt: "",
 		path: "",
--- a/frontend/components/photo-viewer.tsx
+++ b/frontend/components/photo-viewer.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import {
+	Dialog,
+	DialogContent,
+	DialogTitle,
+	DialogTrigger,
+} from "@radix-ui/react-dialog";
+import Image, { ImageProps } from "next/image";
+import React, { useState } from "react";
+
+const PhotoViewer: React.FC<ImageProps> = ({ ...props }) => {
+	const [selected, setSelected] = useState(false);
+	return (
+		<Dialog open={selected} onOpenChange={setSelected}>
+			<DialogTitle>{props.alt}</DialogTitle>
+			<DialogTrigger asChild>
+				<Image onClick={() => setSelected(true)} {...props} />
+			</DialogTrigger>
+			<DialogContent>
+				<Image {...props} unoptimized />
+			</DialogContent>
+		</Dialog>
+	);
+};
+
+export default PhotoViewer;
--- a/frontend/components/planning.tsx
+++ b/frontend/components/planning.tsx
@@ -1,16 +1,14 @@
 "use client";

-import { ApiResponse, request } from "@/hooks/use-api";
+import { ApiResponse } from "@/types/types";
+import request from "@/lib/request";
 import "@schedule-x/theme-shadcn/dist/index.css";
 import { useNextCalendarApp, ScheduleXCalendar } from "@schedule-x/react";
 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 {
-	createViewDay,
-	createViewWeek,
-} from "@schedule-x/calendar";
+import { createViewDay, createViewWeek } from "@schedule-x/calendar";
 import { useEffect, useState } from "react";
 import { format } from "date-fns";
 import { Dialog, DialogProps } from "@radix-ui/react-dialog";
@@ -27,62 +25,43 @@ import { getCookie } from "cookies-next";
 import { useTheme } from "next-themes";
 import { EventForm, EventFormValues } from "./event-dialog";
 import ICalendarEvent from "@/interfaces/ICalendarEvent";
-
-const mapFrequencyToRrule = (frequency: "unique" | "quotidien" | "hebdomadaire" | "mensuel", frequencyEndDate?: Date): string => {
-  let rrule = "";
-
-  switch (frequency) {
-    case "quotidien":
-      rrule = "FREQ=DAILY";
-      break;
-    case "hebdomadaire":
-      rrule = "FREQ=WEEKLY";
-      break;
-    case "mensuel":
-      rrule = "FREQ=MONTHLY";
-      break;
-    default:
-      return "";
-  }
-
-  if (frequencyEndDate) {
-    const until = frequencyEndDate.getTime();
-    const untilDate = new Date(until);
-    const epochDateString = untilDate.toISOString().replace(/[-:]/g, "").split(".")[0]; // Format as YYYYMMDDTHHmmss
-    rrule += `;UNTIL=${epochDateString}`;
-  }
-
-  return rrule;
-};
+import { UseFormReturn } from "react-hook-form";
+import mapFrequencyToRrule from "@/lib/mapFrequencyToRrule";
+import { useToast } from "@/hooks/use-toast";

 const Planning: React.FC<{
 	events: ICalendarEvent[];
 	mutate?: KeyedMutator<ApiResponse<ICalendarEvent[]>>;
-}> = ({ events, mutate }) => {
+	modifiable?: boolean;
+}> = ({ events, mutate, modifiable = false }) => {
+	const { toast } = useToast();
 	const { resolvedTheme } = useTheme();
-	console.log(resolvedTheme);
 	const isConnected = getCookie("auth_token");
-	const plugins = isConnected
-		? [
-			createEventsServicePlugin(),
-			createDragAndDropPlugin(),
-			createResizePlugin(),
-			createEventRecurrencePlugin(),
-		]
-		: [];
-	const [eventSelected, setEventSelected] =
-		useState<ICalendarEvent | null>(null);
-	const [newEvent, setNewEvent] = useState<Omit<
-		ICalendarEvent,
-		"id"
-	> | null>(null);
+	const plugins =
+		isConnected && modifiable
+			? [
+					createEventsServicePlugin(),
+					createDragAndDropPlugin(),
+					createResizePlugin(),
+					createEventRecurrencePlugin(),
+				]
+			: [];
+	const [eventSelected, setEventSelected] = useState<ICalendarEvent | null>(
+		null,
+	);
+	const [newEvent, setNewEvent] = useState<Omit<ICalendarEvent, "id"> | null>(
+		null,
+	);

-	const handleEventUpdate = async (eventSelected: ICalendarEvent) => {
-		const event: ICalendarEvent = {
+	const handleEventUpdate = async (
+		eventSelected: ICalendarEvent | Omit<ICalendarEvent, "id">,
+	) => {
+		if (!isConnected || !modifiable) return;
+		const event = {
 			...eventSelected,
 			start: `${new Date(eventSelected.start).toISOString()}`,
 			end: `${new Date(eventSelected.end).toISOString()}`,
-		};
+		} as ICalendarEvent;
 		try {
 			const res = await request<undefined>(`/events/${event.id}/update`, {
 				method: "PATCH",
@@ -91,10 +70,19 @@ const Planning: React.FC<{
 				csrfToken: false,
 			});
 			if (res.status === "Error") {
-				// calendar?.events?.update(oldEvent);
+				toast({
+					title: "Une erreur est survenue.",
+					description: res.message,
+				});
+			} else {
+				mutate?.();
 			}
 		} catch (e) {
-			console.log(e);
+			if (e instanceof Error)
+				toast({
+					title: "Une erreur est survenue.",
+					description: e.message,
+				});
 		}
 	};

@@ -116,11 +104,10 @@ const Planning: React.FC<{
 				end: format(new Date(event.end), "yyyy-MM-dd HH:mm"),
 			})),
 			callbacks: {
-				onEventClick(event, e) {	
+				onEventClick(event, e) {
 					setEventSelected(event as ICalendarEvent);
-				},	
+				},
 				async onEventUpdate(newEvent) {
-	
 					await handleEventUpdate(newEvent as ICalendarEvent);
 				},
 			},
@@ -136,11 +123,14 @@ const Planning: React.FC<{
 		calendar?.setTheme(resolvedTheme === "dark" ? "dark" : "light");
 	}, [resolvedTheme]);

-	const AddButton: React.FC = () => (
-		<Button onClick={() => setNewEvent({})} variant="outline">
-			Nouveau
-		</Button>
-	);
+	const AddButton: React.FC = () => {
+		if (!isConnected || !modifiable) return <></>;
+		return (
+			<Button onClick={() => setNewEvent({})} variant="outline">
+				Nouveau
+			</Button>
+		);
+	};

 	return (
 		<div>
@@ -148,85 +138,125 @@ const Planning: React.FC<{
 				<AddButton />
 				<ScheduleXCalendar calendarApp={calendar} />
 			</div>
-			{newEvent && (
+			{newEvent && isConnected && modifiable && (
 				<EventDialog
 					open={newEvent !== null || false}
 					onOpenChange={(open) => {
 						setNewEvent((e) => (open ? e : null));
 					}}
-					event={newEvent}
-					onSubmitEvent={async (eventFormValues) => {
+					onAdd={async (formValues) => {
+						if (!isConnected || !modifiable) return;
 						const rrule = mapFrequencyToRrule(
-							eventFormValues.frequency,
-							eventFormValues.frequencyEndDate
-						)
-						try {
-							const event: Omit<ICalendarEvent, "id"> = {
-								...newEvent,
-								start: `${eventFormValues.startDate} ${eventFormValues.startTime}`,
-								end: `${eventFormValues.endDate} ${eventFormValues.endTime}`,
-								title: `${eventFormValues.title}`,
-								fullDay: eventFormValues.fullDay,
-								rrule: rrule,
-								isVisible: eventFormValues.isVisible
-							}
-							const res = await request<undefined>(
-								`/events/new`,
-								{
-									method: "POST",
-									body: event,
-									requiresAuth: true,
-									csrfToken: false,
-								},
-							);
-							if (res.status === "Error") {
-								console.log("Error");
-							}
-							if (res.status === "Success") {
-								mutate?.();
-								console.log("Success");
-							}
-						} catch (e) {
-							console.log(e);
+							formValues.frequency,
+							formValues.frequencyEndDate,
+						);
+						const [sHours, sMinutes] =
+							formValues.startTime.split(":");
+						formValues.startDate.setHours(
+							parseInt(sHours),
+							parseInt(sMinutes),
+						);
+						const [eHours, eMinutes] =
+							formValues.endTime.split(":");
+						formValues.endDate.setHours(
+							parseInt(eHours),
+							parseInt(eMinutes),
+						);
+						console.log(formValues.endDate);
+						const event: Omit<ICalendarEvent, "id"> = {
+							...newEvent,
+							start: formValues.startDate.toISOString(),
+							end: formValues.endDate.toISOString(),
+							title: `${formValues.title}`,
+							fullday: formValues.fullDay,
+							rrule: rrule,
+							isVisible: formValues.isVisible,
+						};
+						const res = await request<undefined>(`/events/new`, {
+							method: "POST",
+							body: event,
+							requiresAuth: true,
+							csrfToken: false,
+						});
+						if (res.status === "Error") {
+							toast({
+								title: "Une erreur est survenue.",
+								description: res.message,
+							});
+						}
+						if (res.status === "Success") {
+							mutate?.();
+							console.log("Success");
 						}
 					}}
+					event={newEvent}
 				/>
 			)}
-			{eventSelected && (
+			{eventSelected && modifiable && isConnected && (
 				<EventDialog
 					open={eventSelected !== null || false}
 					onOpenChange={(open) => {
 						setEventSelected((e) => (open ? e : null));
 					}}
 					event={eventSelected}
-					onSubmitEvent={ (eventForm) => {
-						console.log("Event form: " + eventForm)
-					}}
-					onDelete={async () => {
-						calendar?.events?.remove(eventSelected.id);
+					onDelete={async (id) => {
+						if (!isConnected || !modifiable) return;
+						calendar?.events?.remove(id);
 						try {
 							const res = await request<undefined>(
-								`/events/${eventSelected.id}/delete`,
+								`/events/${id}/delete`,
 								{
 									method: "DELETE",
-									body: eventSelected,
-									requiresAuth: false,
+									requiresAuth: true,
 									csrfToken: false,
 								},
 							);
 							if (res.status === "Error") {
-								console.log("Error");
+								toast({
+									title: "Une erreur est survenue.",
+									description: res.message,
+								});
 							}
 							if (res.status === "Success") {
 								console.log("Success");
 							}
-						} catch (e) {
-							console.log(e);
+						} catch (e: unknown) {
+							if (e instanceof Error)
+								toast({
+									title: "Une erreur est survenue.",
+									description: e.message,
+								});
 						}
 						setEventSelected(null);
 					}}
-					onUpdate={async () => {
-						await handleEventUpdate(eventSelected);
+					onUpdate={async (formValues) => {
+						if (!isConnected || !modifiable) return;
+						const rrule = mapFrequencyToRrule(
+							formValues.frequency,
+							formValues.frequencyEndDate,
+						);
+						const [sHours, sMinutes] =
+							formValues.startTime.split(":");
+						formValues.startDate.setHours(
+							parseInt(sHours),
+							parseInt(sMinutes),
+						);
+						const [eHours, eMinutes] =
+							formValues.endTime.split(":");
+						formValues.endDate.setHours(
+							parseInt(eHours),
+							parseInt(eMinutes),
+						);
+						const event: ICalendarEvent = {
+							...eventSelected,
+							start: formValues.startDate.toISOString(),
+							end: formValues.endDate.toISOString(),
+							title: `${formValues.title}`,
+							fullday: formValues.fullDay,
+							rrule: rrule,
+							isVisible: formValues.isVisible,
+						};
+						await handleEventUpdate(event);
 						setEventSelected(null);
 					}}
 				/>
@@ -237,59 +267,55 @@ const Planning: React.FC<{

 const EventDialog: React.FC<
 	{
-		onSubmitEvent: (eventFormValues: EventFormValues) => void;
-		onDelete?: () => void;
-		onUpdate?: () => void;
-		onAdd?: () => void;
+		onDelete?: (id: string) => void;
+		onUpdate?: (formValues: EventFormValues) => void;
+		onAdd?: (formValues: EventFormValues) => void;
 		event: ICalendarEvent | Omit<ICalendarEvent, "id">;
 	} & DialogProps
-> = ({
-	open,
-	onOpenChange,
-	onSubmitEvent,
-	onDelete,
-	onUpdate,
-	onAdd,
-	event,
-}) => {
-		return (
-			<Dialog open={open} onOpenChange={onOpenChange}>
-				<DialogContent className="sm:max-w-md">
-					<DialogHeader>
-						<DialogTitle>{event.title}</DialogTitle>
-						<DialogDescription>{event.description}</DialogDescription>
-					</DialogHeader>
-					<EventForm 
-						event={event} 
-						onSubmitEvent={onSubmitEvent}/>
-					<DialogFooter className="flex flex-row justify-end">
-						{onUpdate && (
-							<Button
-								variant="outline"
-								onClick={() => onUpdate()}
-								type="submit"
-							>
-								Actualiser
-							</Button>
-						)}
-						{onDelete && (
-							<Button
-								variant="destructive"
-								onClick={() => onDelete()}
-								type="submit"
-							>
-								Supprimer
-							</Button>
-						)}
-						{onAdd && !onUpdate && !onDelete && (
-							<Button onClick={() => onAdd()} type="submit">
-								Créer
-							</Button>
-						)}
-					</DialogFooter>
-				</DialogContent >
-			</Dialog >
-		);
+> = ({ open, onOpenChange, onDelete, onUpdate, onAdd, event }) => {
+	const [form, setForm] = useState<UseFormReturn<EventFormValues>>();
+
+	const submitForm = (event: "add" | "update") => {
+		const callback = event === "add" ? onAdd : onUpdate;
+		if (callback) form?.handleSubmit(callback)();
 	};

+	return (
+		<Dialog open={open} onOpenChange={onOpenChange}>
+			<DialogContent className="sm:max-w-md">
+				<DialogHeader>
+					<DialogTitle>{event.title}</DialogTitle>
+					<DialogDescription>{event.description}</DialogDescription>
+				</DialogHeader>
+				<EventForm event={event} 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={() => onDelete(event.id)}
+							type="submit"
+						>
+							Supprimer
+						</Button>
+					)}
+					{onAdd && !onUpdate && !onDelete && (
+						<Button onClick={() => submitForm("add")} type="submit">
+							Créer
+						</Button>
+					)}
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+};
+
 export default Planning;
--- a/frontend/components/shortcode-dialogue.tsx
+++ b/frontend/components/shortcode-dialogue.tsx
@@ -14,6 +14,18 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import type IShortcode from "@/interfaces/IShortcode";
+import Image from "next/image";
+import Media from "@/interfaces/Media";
+import {
+	Pagination,
+	PaginationContent,
+	PaginationItem,
+	PaginationLink,
+	PaginationNext,
+	PaginationPrevious,
+} from "./ui/pagination";
+import useMedia from "@/hooks/use-media";
+import { Loader2 } from "lucide-react";

 interface ShortcodeDialogProps {
 	onSave: (shortcode: IShortcode) => void;
@@ -33,6 +45,8 @@ export default function ShortcodeDialog({
 	);

 	const handleSave = () => {
+		if (!(_shortcode?.code && (_shortcode.media_id || _shortcode.value)))
+			return;
 		onSave(_shortcode);
 		setOpen();
 		resetForm();
@@ -92,6 +106,7 @@ export default function ShortcodeDialog({
 										setShortcode((p) => ({
 											...p,
 											value: e.target.value,
+											media_id: undefined,
 										}))
 									}
 									className="col-span-3"
@@ -99,27 +114,29 @@ export default function ShortcodeDialog({
 							</div>
 						</TabsContent>
 						<TabsContent value="media">
-							<div className="grid grid-cols-4 items-center gap-4">
-								<Label htmlFor="mediaId" className="text-right">
-									Media ID
-								</Label>
-								<Input
-									id="mediaId"
-									value={_shortcode.media_id}
-									onChange={(e) =>
-										setShortcode((p) => ({
-											...p,
-											media_id: e.target.value,
-										}))
-									}
-									className="col-span-3"
-								/>
-							</div>
+							<PhotoGrid
+								onSelect={(photo) => {
+									setShortcode((p) => ({
+										...p,
+										media_id: photo.id,
+										value: undefined,
+									}));
+								}}
+							/>
 						</TabsContent>
 					</Tabs>
 				</div>
 				<DialogFooter>
-					<Button type="submit" onClick={handleSave}>
+					<Button
+						disabled={
+							!(
+								_shortcode?.code &&
+								(_shortcode.media_id || _shortcode.value)
+							)
+						}
+						type="submit"
+						onClick={handleSave}
+					>
 						Enregistrer
 					</Button>
 				</DialogFooter>
@@ -127,3 +144,144 @@ export default function ShortcodeDialog({
 		</Dialog>
 	);
 }
+
+const LazyImage = ({
+	photo,
+	onClick,
+	isSelected,
+}: {
+	photo: Media;
+	onClick: () => void;
+	isSelected: boolean;
+}) => {
+	return (
+		<div
+			className={`aspect-square ${isSelected ? "ring-4 ring-primary" : ""}`}
+		>
+			<Image
+				src={photo.url || "/placeholder.svg"}
+				alt={photo.alt}
+				width={300}
+				height={300}
+				className="object-cover w-full h-full cursor-pointer transition-transform hover:scale-105"
+				onClick={onClick}
+			/>
+		</div>
+	);
+};
+
+const PhotoGrid: React.FC<{ onSelect: (photo: Media) => void }> = ({
+	onSelect,
+}) => {
+	const { data, error, isLoading, success, setPage, setLimit, mutate } =
+		useMedia(5);
+	const [selectedPhoto, setSelectedPhoto] = useState<Media | null>(null);
+
+	const handlePhotoClick = (photo: Media) => {
+		setSelectedPhoto(photo);
+		onSelect(photo);
+	};
+
+	const handleChangeSelection = () => {
+		setSelectedPhoto(null);
+		// if (!photos) return;
+		// const currentIndex = photos.findIndex(
+		// 	(photo) => photo.id === selectedPhoto?.id,
+		// );
+		// const nextIndex = (currentIndex + 1) % photos.length;
+		// setSelectedPhoto(photos[nextIndex]);
+	};
+
+	if (isLoading) return <Loader2 className="animate-spin" />;
+
+	return (
+		<div className="container mx-auto p-4">
+			<h1 className="text-2xl font-bold mb-4">Gallerie Photo</h1>
+			{selectedPhoto ? (
+				<div className="flex flex-col items-center">
+					<Image
+						src={selectedPhoto.url || "/placeholder.svg"}
+						alt={selectedPhoto.alt}
+						width={600}
+						height={600}
+						className="w-full max-w-2xl h-auto mb-4 rounded-lg"
+					/>
+					<div className="flex gap-4 mt-4">
+						<Button onClick={handleChangeSelection}>
+							Changer de sélection
+						</Button>
+					</div>
+				</div>
+			) : (
+				<>
+					<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
+						{data?.items?.map((photo) => {
+							return (
+								<LazyImage
+									photo={photo}
+									key={photo.id}
+									onClick={() => handlePhotoClick(photo)}
+									isSelected={false}
+								/>
+							);
+						})}
+					</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>
+				</>
+			)}
+		</div>
+	);
+};
--- a/frontend/components/ui/checkbox.tsx
+++ b/frontend/components/ui/checkbox.tsx
@@ -1,30 +1,30 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
-import { Check } from "lucide-react"
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 const Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+	React.ComponentRef<typeof CheckboxPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
 >(({ className, ...props }, ref) => (
-  <CheckboxPrimitive.Root
-    ref={ref}
-    className={cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-      className
-    )}
-    {...props}
-  >
-    <CheckboxPrimitive.Indicator
-      className={cn("flex items-center justify-center text-current")}
-    >
-      <Check className="h-4 w-4" />
-    </CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
-))
-Checkbox.displayName = CheckboxPrimitive.Root.displayName
+	<CheckboxPrimitive.Root
+		ref={ref}
+		className={cn(
+			"peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+			className,
+		)}
+		{...props}
+	>
+		<CheckboxPrimitive.Indicator
+			className={cn("flex items-center justify-center text-current")}
+		>
+			<Check className="h-4 w-4" />
+		</CheckboxPrimitive.Indicator>
+	</CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;

-export { Checkbox }
+export { Checkbox };
--- a/frontend/components/ui/form.tsx
+++ b/frontend/components/ui/form.tsx
@@ -104,7 +104,7 @@ const FormLabel = React.forwardRef<
 FormLabel.displayName = "FormLabel";

 const FormControl = React.forwardRef<
-	React.ElementRef<typeof Slot>,
+	React.ComponentRef<typeof Slot>,
 	React.ComponentPropsWithoutRef<typeof Slot>
 >(({ ...props }, ref) => {
 	const { error, formItemId, formDescriptionId, formMessageId } =
--- a/frontend/components/ui/scroll-area.tsx
+++ b/frontend/components/ui/scroll-area.tsx
@@ -6,7 +6,7 @@ import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import { cn } from "@/lib/utils";

 const ScrollArea = React.forwardRef<
-	React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+	React.ComponentRef<typeof ScrollAreaPrimitive.Root>,
 	React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
 >(({ className, children, ...props }, ref) => (
 	<ScrollAreaPrimitive.Root
--- a/frontend/components/ui/toast.tsx
+++ b/frontend/components/ui/toast.tsx
@@ -0,0 +1,129 @@
+"use client";
+
+import * as React from "react";
+import * as ToastPrimitives from "@radix-ui/react-toast";
+import { cva, type VariantProps } from "class-variance-authority";
+import { X } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const ToastProvider = ToastPrimitives.Provider;
+
+const ToastViewport = React.forwardRef<
+	React.ComponentRef<typeof ToastPrimitives.Viewport>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+	<ToastPrimitives.Viewport
+		ref={ref}
+		className={cn(
+			"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+			className,
+		)}
+		{...props}
+	/>
+));
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+
+const toastVariants = cva(
+	"group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+	{
+		variants: {
+			variant: {
+				default: "border bg-background text-foreground",
+				destructive:
+					"destructive group border-destructive bg-destructive text-destructive-foreground",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
+);
+
+const Toast = React.forwardRef<
+	React.ElementRef<typeof ToastPrimitives.Root>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+		VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+	return (
+		<ToastPrimitives.Root
+			ref={ref}
+			className={cn(toastVariants({ variant }), className)}
+			{...props}
+		/>
+	);
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
+
+const ToastAction = React.forwardRef<
+	React.ElementRef<typeof ToastPrimitives.Action>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+	<ToastPrimitives.Action
+		ref={ref}
+		className={cn(
+			"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+			className,
+		)}
+		{...props}
+	/>
+));
+ToastAction.displayName = ToastPrimitives.Action.displayName;
+
+const ToastClose = React.forwardRef<
+	React.ElementRef<typeof ToastPrimitives.Close>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+	<ToastPrimitives.Close
+		ref={ref}
+		className={cn(
+			"absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+			className,
+		)}
+		toast-close=""
+		{...props}
+	>
+		<X className="h-4 w-4" />
+	</ToastPrimitives.Close>
+));
+ToastClose.displayName = ToastPrimitives.Close.displayName;
+
+const ToastTitle = React.forwardRef<
+	React.ElementRef<typeof ToastPrimitives.Title>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+	<ToastPrimitives.Title
+		ref={ref}
+		className={cn("text-sm font-semibold [&+div]:text-xs", className)}
+		{...props}
+	/>
+));
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
+
+const ToastDescription = React.forwardRef<
+	React.ElementRef<typeof ToastPrimitives.Description>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+	<ToastPrimitives.Description
+		ref={ref}
+		className={cn("text-sm opacity-90", className)}
+		{...props}
+	/>
+));
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>;
+
+export {
+	type ToastProps,
+	type ToastActionElement,
+	ToastProvider,
+	ToastViewport,
+	Toast,
+	ToastTitle,
+	ToastDescription,
+	ToastClose,
+	ToastAction,
+};
--- a/frontend/components/ui/toaster.tsx
+++ b/frontend/components/ui/toaster.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import { useToast } from "@/hooks/use-toast";
+import {
+	Toast,
+	ToastClose,
+	ToastDescription,
+	ToastProvider,
+	ToastTitle,
+	ToastViewport,
+} from "@/components/ui/toast";
+
+export function Toaster() {
+	const { toasts } = useToast();
+
+	return (
+		<ToastProvider>
+			{toasts.map(function ({
+				id,
+				title,
+				description,
+				action,
+				...props
+			}) {
+				return (
+					<Toast key={id} {...props}>
+						<div className="grid gap-1">
+							{title && <ToastTitle>{title}</ToastTitle>}
+							{description && (
+								<ToastDescription>
+									{description}
+								</ToastDescription>
+							)}
+						</div>
+						{action}
+						<ToastClose />
+					</Toast>
+				);
+			})}
+			<ToastViewport />
+		</ToastProvider>
+	);
+}
--- a/frontend/components/youtube-embed.tsx
+++ b/frontend/components/youtube-embed.tsx
@@ -18,6 +18,13 @@ export default function YouTubeEmbed({
 }) {
 	const [isIframeLoaded, setIframeLoaded] = useState(loadIframe);

+	const id =
+		typeof video === "string"
+			? video
+			: typeof video.id === "string"
+				? video.snippet.resourceId.videoId
+				: video.id.videoId;
+
 	const isString = typeof video === "string";

 	const _loadIframe = () => setIframeLoaded(true);
@@ -36,7 +43,7 @@ export default function YouTubeEmbed({
 					className="rounded-md shadow-current aspect-video"
 					width={width === "full" ? "100%" : width}
 					height={height === "full" ? "100%" : height}
-					src={`https://www.youtube-nocookie.com/embed/${isString ? video : video.id.videoId}?rel=0&modestbranding=1&autoplay=${autoPlay ? 1 : 0}`}
+					src={`https://www.youtube-nocookie.com/embed/${id}?rel=0&modestbranding=1&autoplay=${autoPlay ? 1 : 0}`}
 					title={
 						isString ? "YouTube video player" : video.snippet.title
 					}
@@ -50,7 +57,7 @@ export default function YouTubeEmbed({
 							width="100%"
 							height="100%"
 							className="w-full h-full object-cover rounded-md shadow-current"
-							src={`https://img.youtube.com/vi/${isString ? video : video.id.videoId}/hqdefault.jpg`}
+							src={`https://img.youtube.com/vi/${id}/hqdefault.jpg`}
 							alt={
 								isString
 									? "YouTube video player"
@@ -62,7 +69,7 @@ export default function YouTubeEmbed({
 							width={width}
 							height={height}
 							className="w-full h-full object-cover rounded-md shadow-current"
-							src={`https://img.youtube.com/vi/${isString ? video : video.id.videoId}/hqdefault.jpg`}
+							src={`https://img.youtube.com/vi/${id}/hqdefault.jpg`}
 							alt={
 								isString
 									? "YouTube video player"
--- a/frontend/hooks/use-api.tsx
+++ b/frontend/hooks/use-api.tsx
@@ -1,60 +1,9 @@
 "use client";
-import { API_URL } from "@/lib/constants";
-import { getCookie } from "cookies-next";
+import request from "@/lib/request";
+import { ApiResponse } from "@/types/types";
 import useSWR, { SWRConfiguration } from "swr";
 import useSWRMutation, { type SWRMutationConfiguration } from "swr/mutation";

-export interface ApiResponse<T> {
-	status: "Error" | "Success";
-	message: string;
-	data?: T;
-}
-
-export async function request<T>(
-	endpoint: string,
-	options: {
-		method?: "GET" | "POST" | "PATCH" | "DELETE";
-		body?: any;
-		requiresAuth?: boolean;
-		csrfToken?: boolean;
-	} = {},
-): Promise<ApiResponse<T>> {
-	const { method = "GET", body, requiresAuth = true } = options;
-	const headers: Record<string, string> = {
-		"Content-Type": "application/json",
-	};
-
-	if (options.csrfToken) {
-		const res: ApiResponse<{ csrf: string }> = await (
-			await fetch(`${API_URL}/csrf-token`)
-		).json();
-		if (res.data) headers["X-CSRF-Token"] = res.data.csrf;
-	}
-
-	if (requiresAuth) {
-		const authToken = getCookie("auth_token");
-		if (!authToken) {
-			throw new Error("User is not authenticated");
-		}
-		headers.Authorization = `Bearer ${authToken}`;
-	}
-
-	const response = await fetch(`${API_URL}${endpoint}`, {
-		method,
-		headers,
-		body: body ? JSON.stringify(body) : undefined,
-		credentials: options.csrfToken ? "include" : "omit",
-	});
-
-	const apiResponse: ApiResponse<T> = await response.json();
-
-	if (apiResponse.status === "Error") {
-		throw new Error(apiResponse.message || "An unexpected error occurred");
-	}
-
-	return apiResponse;
-}
-
 async function fetcher<T>(
 	url: string,
 	requiresAuth: boolean = true,
--- a/frontend/hooks/use-file-upload.tsx
+++ b/frontend/hooks/use-file-upload.tsx
@@ -1,8 +1,8 @@
 "use client";
 import { API_URL } from "@/lib/constants";
+import { ApiResponse } from "@/types/types";
 import { getCookie } from "cookies-next";
 import { useState, useRef, useCallback } from "react";
-import { ApiResponse, useApi } from "./use-api";

 interface UseFileUploadReturn {
 	progress: number;
--- a/frontend/hooks/use-login.tsx
+++ b/frontend/hooks/use-login.tsx
@@ -1,9 +1,7 @@
 "use client";

 import { setCookie } from "cookies-next";
-import useApiMutation, { ApiResponse } from "./use-api";
-import { useEffect, useState } from "react";
-import { API_URL } from "@/lib/constants";
+import useApiMutation from "./use-api";

 export interface LoginArgs {
 	email: string;
--- a/frontend/hooks/use-media.tsx
+++ b/frontend/hooks/use-media.tsx
@@ -17,6 +17,9 @@ export default function useMedia(_limit: number = 20) {
 	const [limit, setLimit] = useState(_limit);
 	const res = useApi<IPaginatedResponse<Media>>(
 		`/media?page=${page}&limit=${limit}`,
+		{},
+		false,
+		false,
 	);
 	return {
 		...res,
--- a/frontend/hooks/use-toast.ts
+++ b/frontend/hooks/use-toast.ts
@@ -0,0 +1,192 @@
+"use client";
+
+// Inspired by react-hot-toast library
+import * as React from "react";
+
+import type { ToastActionElement, ToastProps } from "@/components/ui/toast";
+
+const TOAST_LIMIT = 1;
+const TOAST_REMOVE_DELAY = 1000000;
+
+type ToasterToast = ToastProps & {
+	id: string;
+	title?: React.ReactNode;
+	description?: React.ReactNode;
+	action?: ToastActionElement;
+};
+
+const actionTypes = {
+	ADD_TOAST: "ADD_TOAST",
+	UPDATE_TOAST: "UPDATE_TOAST",
+	DISMISS_TOAST: "DISMISS_TOAST",
+	REMOVE_TOAST: "REMOVE_TOAST",
+} as const;
+
+let count = 0;
+
+function genId() {
+	count = (count + 1) % Number.MAX_SAFE_INTEGER;
+	return count.toString();
+}
+
+type ActionType = typeof actionTypes;
+
+type Action =
+	| {
+			type: ActionType["ADD_TOAST"];
+			toast: ToasterToast;
+	  }
+	| {
+			type: ActionType["UPDATE_TOAST"];
+			toast: Partial<ToasterToast>;
+	  }
+	| {
+			type: ActionType["DISMISS_TOAST"];
+			toastId?: ToasterToast["id"];
+	  }
+	| {
+			type: ActionType["REMOVE_TOAST"];
+			toastId?: ToasterToast["id"];
+	  };
+
+interface State {
+	toasts: ToasterToast[];
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
+
+const addToRemoveQueue = (toastId: string) => {
+	if (toastTimeouts.has(toastId)) {
+		return;
+	}
+
+	const timeout = setTimeout(() => {
+		toastTimeouts.delete(toastId);
+		dispatch({
+			type: "REMOVE_TOAST",
+			toastId: toastId,
+		});
+	}, TOAST_REMOVE_DELAY);
+
+	toastTimeouts.set(toastId, timeout);
+};
+
+export const reducer = (state: State, action: Action): State => {
+	switch (action.type) {
+		case "ADD_TOAST":
+			return {
+				...state,
+				toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+			};
+
+		case "UPDATE_TOAST":
+			return {
+				...state,
+				toasts: state.toasts.map((t) =>
+					t.id === action.toast.id ? { ...t, ...action.toast } : t,
+				),
+			};
+
+		case "DISMISS_TOAST": {
+			const { toastId } = action;
+
+			// ! Side effects ! - This could be extracted into a dismissToast() action,
+			// but I'll keep it here for simplicity
+			if (toastId) {
+				addToRemoveQueue(toastId);
+			} else {
+				state.toasts.forEach((toast) => {
+					addToRemoveQueue(toast.id);
+				});
+			}
+
+			return {
+				...state,
+				toasts: state.toasts.map((t) =>
+					t.id === toastId || toastId === undefined
+						? {
+								...t,
+								open: false,
+							}
+						: t,
+				),
+			};
+		}
+		case "REMOVE_TOAST":
+			if (action.toastId === undefined) {
+				return {
+					...state,
+					toasts: [],
+				};
+			}
+			return {
+				...state,
+				toasts: state.toasts.filter((t) => t.id !== action.toastId),
+			};
+	}
+};
+
+const listeners: Array<(state: State) => void> = [];
+
+let memoryState: State = { toasts: [] };
+
+function dispatch(action: Action) {
+	memoryState = reducer(memoryState, action);
+	listeners.forEach((listener) => {
+		listener(memoryState);
+	});
+}
+
+type Toast = Omit<ToasterToast, "id">;
+
+function toast({ ...props }: Toast) {
+	const id = genId();
+
+	const update = (props: ToasterToast) =>
+		dispatch({
+			type: "UPDATE_TOAST",
+			toast: { ...props, id },
+		});
+	const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
+
+	dispatch({
+		type: "ADD_TOAST",
+		toast: {
+			...props,
+			id,
+			open: true,
+			onOpenChange: (open) => {
+				if (!open) dismiss();
+			},
+		},
+	});
+
+	return {
+		id: id,
+		dismiss,
+		update,
+	};
+}
+
+function useToast() {
+	const [state, setState] = React.useState<State>(memoryState);
+
+	React.useEffect(() => {
+		listeners.push(setState);
+		return () => {
+			const index = listeners.indexOf(setState);
+			if (index > -1) {
+				listeners.splice(index, 1);
+			}
+		};
+	}, [state]);
+
+	return {
+		...state,
+		toast,
+		dismiss: (toastId?: string) =>
+			dispatch({ type: "DISMISS_TOAST", toastId }),
+	};
+}
+
+export { useToast, toast };
--- a/frontend/interfaces/youtube.ts
+++ b/frontend/interfaces/youtube.ts
@@ -10,7 +10,7 @@ export interface IYoutube {
 export interface IYoutubeItem {
 	kind: string;
 	etag: string;
-	id: IYoutubeID;
+	id: IYoutubeID | string;
 	snippet: IYoutubeSnippet;
 }

@@ -28,6 +28,7 @@ export interface IYoutubeSnippet {
 	channelTitle: string;
 	liveBroadcastContent: string;
 	publishTime: Date;
+	resourceId: IYoutubeID;
 }

 export interface IYoutubeThumbnails {
--- a/frontend/lib/getShortcode.ts
+++ b/frontend/lib/getShortcode.ts
@@ -0,0 +1,14 @@
+import IShortcode from "@/interfaces/IShortcode";
+import request from "./request";
+
+export default async function getShortcode(
+	code: string,
+): Promise<IShortcode | null> {
+	const res = await request<IShortcode>(`/shortcodes/${code}`, {
+		method: "GET",
+		requiresAuth: false,
+	});
+	if (res.status === "Error") throw new Error("Shortcode doesn't exist.");
+
+	return res.data ?? null;
+}
--- a/frontend/lib/mapFrequencyToRrule.ts
+++ b/frontend/lib/mapFrequencyToRrule.ts
@@ -0,0 +1,51 @@
+// const mapRruleToFrequency = (rrule: string) => {
+//
+// 	switch (frequency) {
+// 		case "quotidien":
+// 			rrule = "FREQ=DAILY";
+// 			break;
+// 		case "hebdomadaire":
+// 			rrule = "FREQ=WEEKLY";
+// 			break;
+// 		case "mensuel":
+// 			rrule = "FREQ=MONTHLY";
+// 			break;
+// 		default:
+// 			return "";
+// 	}
+// }
+
+const mapFrequencyToRrule = (
+	frequency: "unique" | "quotidien" | "hebdomadaire" | "mensuel",
+	frequencyEndDate?: Date,
+): string => {
+	let rrule = "";
+
+	switch (frequency) {
+		case "quotidien":
+			rrule = "FREQ=DAILY";
+			break;
+		case "hebdomadaire":
+			rrule = "FREQ=WEEKLY";
+			break;
+		case "mensuel":
+			rrule = "FREQ=MONTHLY";
+			break;
+		default:
+			return "";
+	}
+
+	if (frequencyEndDate) {
+		const until = frequencyEndDate.getTime();
+		const untilDate = new Date(until);
+		const epochDateString = untilDate
+			.toISOString()
+			.replace(/[-:]/g, "")
+			.split(".")[0]; // Format as YYYYMMDDTHHmmss
+		rrule += `;UNTIL=${epochDateString}`;
+	}
+
+	return rrule;
+};
+
+export default mapFrequencyToRrule;
--- a/frontend/lib/request.ts
+++ b/frontend/lib/request.ts
@@ -0,0 +1,56 @@
+import { API_URL } from "@/lib/constants";
+import { ApiResponse } from "@/types/types";
+import { getCookie } from "cookies-next";
+import { ReadonlyRequestCookies } from "next/dist/server/web/spec-extension/adapters/request-cookies";
+export default async function request<T>(
+	endpoint: string,
+	options: {
+		method?: "GET" | "POST" | "PATCH" | "DELETE";
+		body?: any;
+		requiresAuth?: boolean;
+		csrfToken?: boolean;
+		cookies?: () => Promise<ReadonlyRequestCookies>;
+	} = {},
+): Promise<ApiResponse<T>> {
+	console.log(API_URL, endpoint);
+	const { method = "GET", body, requiresAuth = true } = options;
+	const headers: Record<string, string> = {
+		"Content-Type": "application/json",
+	};
+
+	if (options.csrfToken) {
+		const res: ApiResponse<{ csrf: string }> = await (
+			await fetch(`${API_URL}/csrf-token`)
+		).json();
+		if (res.data) headers["X-CSRF-Token"] = res.data.csrf;
+	}
+
+	if (requiresAuth) {
+		let authToken;
+		if (!options.cookies) {
+			authToken = getCookie("auth_token");
+		} else {
+			authToken = (await options.cookies()).get("auth_token")?.value;
+		}
+
+		if (!authToken) {
+			throw new Error("User is not authenticated");
+		}
+		headers.Authorization = `Bearer ${authToken}`;
+	}
+
+	const response = await fetch(`${API_URL}${endpoint}`, {
+		method,
+		headers,
+		body: body ? JSON.stringify(body) : undefined,
+		credentials: options.csrfToken ? "include" : "omit",
+	});
+
+	const apiResponse: ApiResponse<T> = await response.json();
+
+	if (apiResponse.status === "Error") {
+		throw new Error(apiResponse.message || "An unexpected error occurred");
+	}
+
+	return apiResponse;
+}
--- a/frontend/middleware.ts
+++ b/frontend/middleware.ts
@@ -1,5 +1,5 @@
 import { NextRequest, NextResponse } from "next/server";
-import { ApiResponse } from "./hooks/use-api";
+import { ApiResponse } from "./types/types";
 import { API_URL } from "./lib/constants";
 import IUser from "./interfaces/IUser";

--- a/frontend/next.config.ts
+++ b/frontend/next.config.ts
@@ -25,6 +25,10 @@ const nextConfig: NextConfig = {
 				protocol: "http",
 				hostname: "localhost",
 			},
+			{
+				protocol: "https",
+				hostname: "latosa.cems.dev",
+			},
 		],
 	},
 	env: {
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -25,6 +25,7 @@
 		"@radix-ui/react-slot": "^1.1.2",
 		"@radix-ui/react-switch": "^1.1.2",
 		"@radix-ui/react-tabs": "^1.1.2",
+		"@radix-ui/react-toast": "^1.2.6",
 		"@radix-ui/react-tooltip": "^1.1.6",
 		"@schedule-x/drag-and-drop": "^2.15.1",
 		"@schedule-x/event-modal": "^2.15.1",
@@ -39,7 +40,9 @@
 		"cookies-next": "^5.1.0",
 		"date-fns": "^3.6.0",
 		"embla-carousel-react": "^8.5.2",
+		"isomorphic-dompurify": "^2.21.0",
 		"lucide-react": "^0.471.1",
+		"marked": "^15.0.6",
 		"next": "15.1.4",
 		"next-themes": "^0.4.4",
 		"react": "^19.0.0",
@@ -51,6 +54,7 @@
 		"swr": "^2.3.0",
 		"tailwind-merge": "^2.6.0",
 		"tailwindcss-animate": "^1.0.7",
+		"yet-another-react-lightbox": "^3.21.7",
 		"zod": "^3.24.1"
 	},
 	"devDependencies": {
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -9,6 +9,9 @@ export default {
 	],
 	theme: {
 		extend: {
+			fontFamily: {
+				times: ["Times New Roman", "Times", "serif"],
+			},
 			colors: {
 				background: "hsl(var(--background))",
 				foreground: "hsl(var(--foreground))",
--- a/frontend/types/types.tsx
+++ b/frontend/types/types.tsx
@@ -1,43 +1,58 @@
+export interface Permission {
+	resource: string;
+	action: string;
+}
 // Role type as a string literal
-export type Role = 'admin' | 'user';
+export interface Role {
+	id: string;
+	name: string;
+	permissions: Permission[];
+}

 // Status type as a string literal
-export type Status = 'Active' | 'Inactive';
+export type Status = "Active" | "Inactive";

 // Event type (you can expand this type as needed based on your schema)
 export interface Event {
-  eventID: string;
-  title: string;
-  date: string; // Assuming ISO date string
+	eventID: string;
+	title: string;
+	date: string; // Assuming ISO date string
 }

 // Blog type (you may already have this defined as shown in your previous example)
 export interface Blog {
-  blogID: string;
-  slug: string;
-  content: string;
-  label?: string;
-  authorID: string;
-  published: string;
-  summary?: string;
-  image?: string;
-  href?: string;
+	blogID: string;
+	slug: string;
+	content: string;
+	label?: string;
+	authorID: string;
+	published: string;
+	summary?: string;
+	image?: string;
+	href?: string;

-  author: User; // Relation to User
+	author: User; // Relation to User
 }

 // User type definition
 export interface User {
-  userID: string; // UUID represented as a string
-  firstName: string;
-  lastName: string;
-  email: string;
-  password?: string; // Optional field, since it's omitted in the JSON
-  phone: string;
-  role: Role; // 'admin' or 'user'
-  createdAt: string; // ISO date string
-  updatedAt: string; // ISO date string
+	userId: string; // UUID represented as a string
+	firstname: string;
+	lastname: string;
+	email: string;
+	password?: string; // Optional field, since it's omitted in the JSON
+	phone: string;
+	role: Role; // 'admin' or 'user'
+	createdAt: string; // ISO date string
+	updatedAt: string; // ISO date string

-  events?: Event[]; // Many-to-many relation with Event (optional)
-  articles?: Blog[]; // One-to-many relation with Blog (optional)
+	events?: Event[]; // Many-to-many relation with Event (optional)
+	articles?: Blog[]; // One-to-many relation with Blog (optional)
+	roles?: Role[];
+}
+
+export interface ApiResponse<T> {
+	status: "Error" | "Success";
+	message: string;
+	data?: T;
 }