Fixed creation of users + better frontend handling of permissions

2025-03-06 17:34:52 +01:00
parent 3c6038bce1
commit 7cb633b4c6
46 changed files with 1511 additions and 909 deletions
--- a/frontend/app/(auth)/dashboard/blogs/blogs.tsx
+++ b/frontend/app/(auth)/dashboard/blogs/blogs.tsx
@@ -48,9 +48,9 @@ export default function BlogTable({ user }: { user: IUser }) {

 	const { replace } = useRouter();

-	const canUpdate = hasPermissions(user.roles, { blogs: ["update"] });
-	const canInsert = hasPermissions(user.roles, { blogs: ["insert"] });
-	const canDelete = hasPermissions(user.roles, { blogs: ["delete"] });
+	const { blogs: blogsPerm } = hasPermissions(user.roles, {
+		blogs: ["update", "insert", "delete"],
+	} as const);

 	const updateSearchParam = useCallback(
 		(key: string, value?: string) => {
@@ -136,7 +136,7 @@ export default function BlogTable({ user }: { user: IUser }) {
 						</Button>
 					)}
 				</div>
-				{canInsert && (
+				{blogsPerm.insert && (
 					<Button asChild>
 						<Link href="/dashboard/blogs/new">Nouvel article</Link>
 					</Button>
@@ -151,7 +151,7 @@ export default function BlogTable({ user }: { user: IUser }) {
 							<TableHead>Catégorie</TableHead>
 							<TableHead>Auteur</TableHead>
 							<TableHead>Publié</TableHead>
-							{(canUpdate || canDelete) && (
+							{(blogsPerm.update || blogsPerm.delete) && (
 								<TableHead className="w-[100px]">
 									Actions
 								</TableHead>
@@ -175,7 +175,7 @@ export default function BlogTable({ user }: { user: IUser }) {
 										"MMM d, yyyy",
 									)}
 								</TableCell>
-								{(canDelete || canUpdate) && (
+								{(blogsPerm.delete || blogsPerm.update) && (
 									<TableCell>
 										<DropdownMenu>
 											<DropdownMenuTrigger asChild>
@@ -190,7 +190,7 @@ export default function BlogTable({ user }: { user: IUser }) {
 												</Button>
 											</DropdownMenuTrigger>
 											<DropdownMenuContent align="end">
-												{canUpdate && (
+												{blogsPerm.update && (
 													<DropdownMenuItem asChild>
 														<Link
 															href={`/dashboard/blogs/${blog.blogID}`}
@@ -201,7 +201,7 @@ export default function BlogTable({ user }: { user: IUser }) {
 														</Link>
 													</DropdownMenuItem>
 												)}
-												{canDelete && (
+												{blogsPerm.delete && (
 													<DropdownMenuItem
 														className="flex items-center text-destructive focus:text-destructive"
 														onClick={() =>
--- a/frontend/app/(auth)/dashboard/blogs/new/_new.tsx
+++ b/frontend/app/(auth)/dashboard/blogs/new/_new.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import { Loader2 } from "lucide-react";
+import dynamic from "next/dynamic";
+
+const BlogEditor = dynamic(
+	() => import("@/components/article/edit").then((mod) => mod.default),
+	{
+		ssr: false,
+		loading: () => <Loader2 className="animate-spin" />,
+	},
+);
+
+export default function NewBlog() {
+	return <BlogEditor />;
+}
--- a/frontend/app/(auth)/dashboard/blogs/new/page.tsx
+++ b/frontend/app/(auth)/dashboard/blogs/new/page.tsx
@@ -1,16 +1,21 @@
-"use client";
+"use server";
+import getMe from "@/lib/getMe";
+import hasPermissions from "@/lib/hasPermissions";
+import { redirect } from "next/navigation";
+import NewBlog from "./_new";

-import { Loader2 } from "lucide-react";
-import dynamic from "next/dynamic";
+export default async function Page() {
+	const me = await getMe();
+	if (
+		!me ||
+		me.status === "Error" ||
+		!me.data ||
+		!hasPermissions(me.data.roles, {
+			blogs: ["insert"],
+		} as const).all
+	) {
+		redirect("/dashboard");
+	}

-const BlogEditor = dynamic(
-	() => import("@/components/article/edit").then((mod) => mod.default),
-	{
-		ssr: false,
-		loading: () => <Loader2 className="animate-spin" />,
-	},
-);
-
-export default function Page() {
-	return <BlogEditor />;
+	return <NewBlog />;
 }
--- a/frontend/app/(auth)/dashboard/blogs/page.tsx
+++ b/frontend/app/(auth)/dashboard/blogs/page.tsx
@@ -11,8 +11,8 @@ export default async function Page() {
 		me.status === "Error" ||
 		!me.data ||
 		!hasPermissions(me.data.roles, {
-			blogs: ["get"],
-		})
+			blogs: ["get"] as const,
+		}).all
 	) {
 		redirect("/dashboard");
 	}
--- a/frontend/app/(auth)/dashboard/members/[uuid]/_user.tsx
+++ b/frontend/app/(auth)/dashboard/members/[uuid]/_user.tsx
@@ -1,238 +0,0 @@
-"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";
-import IUser from "@/interfaces/IUser";
-import hasPermissions from "@/lib/hasPermissions";
-
-export default function UserDetailsPage({ user }: { user: IUser }) {
-	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}
-											{hasPermissions(user.roles, {
-												users: ["update"],
-											}) && (
-												<button
-													onClick={() =>
-														removeRole(role)
-													}
-													className="ml-2 text-gray-500 hover:text-gray-700"
-												>
-													<X className="h-3 w-3" />
-												</button>
-											)}
-										</Badge>
-									))}
-								</div>
-
-								{hasPermissions(user.roles, {
-									users: ["update"],
-								}) && (
-									<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/members/[uuid]/page.tsx
+++ b/frontend/app/(auth)/dashboard/members/[uuid]/page.tsx
@@ -1,20 +0,0 @@
-import getMe from "@/lib/getMe";
-import hasPermissions from "@/lib/hasPermissions";
-import { redirect } from "next/navigation";
-import UserDetailsPage from "./_user";
-
-export default async function Page() {
-	const me = await getMe();
-	if (
-		!me ||
-		me.status === "Error" ||
-		!me.data ||
-		!hasPermissions(me.data.roles, {
-			users: ["get"],
-		})
-	) {
-		redirect("/dashboard");
-	}
-
-	return <UserDetailsPage user={me.data} />;
-}
--- a/frontend/app/(auth)/dashboard/members/page.tsx
+++ b/frontend/app/(auth)/dashboard/members/page.tsx
@@ -12,7 +12,7 @@ export default async function Page({}) {
 		!me.data ||
 		!hasPermissions(me.data.roles, {
 			users: ["get"],
-		})
+		} as const).all
 	) {
 		redirect("/dashboard");
 	}
--- a/frontend/app/(auth)/dashboard/planning/_planning.tsx
+++ b/frontend/app/(auth)/dashboard/planning/_planning.tsx
@@ -19,9 +19,11 @@ export default function PlanningPage({ user }: { user: IUser }) {
 	if (success)
 		return (
 			<Planning
-				modifiable={hasPermissions(user.roles, {
-					events: ["update", "insert", "delete"],
-				})}
+				modifiable={
+					hasPermissions(user.roles, {
+						events: ["update", "insert", "delete"],
+					} as const).all
+				}
 				events={requestedEvents ?? []}
 				mutate={mutate}
 			/>
--- a/frontend/app/(auth)/dashboard/planning/page.tsx
+++ b/frontend/app/(auth)/dashboard/planning/page.tsx
@@ -12,7 +12,7 @@ export default async function Page() {
 		!me.data ||
 		!hasPermissions(me.data.roles, {
 			events: ["get"],
-		})
+		} as const).all
 	) {
 		redirect("/dashboard");
 	}
--- a/frontend/app/(auth)/dashboard/settings/media/page.tsx
+++ b/frontend/app/(auth)/dashboard/settings/media/page.tsx
@@ -11,7 +11,7 @@ export default async function Page() {
 		!me ||
 		me.status === "Error" ||
 		!me.data ||
-		!hasPermissions(me.data.roles, { media: ["get"] })
+		!hasPermissions(me.data.roles, { media: ["get"] } as const).all
 	) {
 		redirect("/dashboard");
 	}
--- a/frontend/app/(auth)/dashboard/settings/roles/_roles.tsx
+++ b/frontend/app/(auth)/dashboard/settings/roles/_roles.tsx
@@ -41,6 +41,10 @@ export default function RolesAndPermissions({ user }: { user: IUser }) {
 	const [newRoleName, setNewRoleName] = useState<string>("");
 	const [isDialogOpen, setIsDialogOpen] = useState<boolean>(false);

+	const { roles: rolesPerm } = hasPermissions(user.roles, {
+		roles: ["insert"],
+	} as const);
+
 	const { data: permissions } = useApi<PermissionsGrouped>(
 		"/permissions/grouped",
 		{},
@@ -80,7 +84,7 @@ export default function RolesAndPermissions({ user }: { user: IUser }) {
 		<div className="container mx-auto p-4 space-y-6">
 			<div className="flex justify-between items-center">
 				<h1 className="text-2xl font-bold">Rôles et Permissions</h1>
-				{hasPermissions(user.roles, { roles: ["insert"] }) && (
+				{rolesPerm.insert && (
 					<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
 						<DialogTrigger asChild>
 							<Button>
@@ -135,14 +139,17 @@ interface RoleCardProps {
 }

 function RoleCard({ role, onDelete, permissions, user }: RoleCardProps) {
+	const { roles, permissions: permPerms } = hasPermissions(user.roles, {
+		roles: ["delete", "update"],
+		permissions: ["update"],
+	} as const);
+
 	return (
 		<Card>
 			<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
 				<CardTitle>{toTitleCase(role.name)}</CardTitle>
 				<Button
-					disabled={
-						!hasPermissions(user.roles, { roles: ["delete"] })
-					}
+					disabled={!roles.delete}
 					variant="destructive"
 					size="icon"
 					onClick={onDelete}
@@ -155,10 +162,11 @@ function RoleCard({ role, onDelete, permissions, user }: RoleCardProps) {
 					return (
 						<ResourceSection
 							disabled={
-								!hasPermissions(user.roles, {
-									permissions: ["update"],
-									roles: ["update"],
-								})
+								!(roles.update && permPerms.update)
+								// !hasPermissions(user.roles, {
+								// 	permissions: ["update"],
+								// 	roles: ["update"],
+								// })
 							}
 							key={res}
 							resource={res}
--- a/frontend/app/(auth)/dashboard/settings/roles/page.tsx
+++ b/frontend/app/(auth)/dashboard/settings/roles/page.tsx
@@ -12,7 +12,7 @@ export default async function Page() {
 		!hasPermissions(me.data.roles, {
 			roles: ["get"],
 			permissions: ["get"],
-		})
+		} as const).all
 	) {
 		redirect("/dashboard");
 	}
--- a/frontend/app/(auth)/dashboard/settings/shortcodes/page.tsx
+++ b/frontend/app/(auth)/dashboard/settings/shortcodes/page.tsx
@@ -11,7 +11,7 @@ export default async function Page() {
 		!me.data ||
 		!hasPermissions(me.data.roles, {
 			shortcodes: ["get"],
-		})
+		} as const).all
 	) {
 		redirect("/dashboard");
 	}
--- a/frontend/app/(main)/page.tsx
+++ b/frontend/app/(main)/page.tsx
@@ -183,7 +183,7 @@ export default async function Home() {
 						})}
 					</Gallery>
 				)}
-				<Testimonial />
+				{/*<Testimonial />*/}
 			</div>
 		</main>
 	);
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -4,6 +4,7 @@

 body {
 	font-family: Arial, Helvetica, sans-serif;
+	pointer-events: auto !important;
 }

@layer base {
@@ -82,6 +83,7 @@ body {
 	* {
 		@apply border-border outline-ring/50;
 	}
+
 	body {
 		@apply bg-background text-foreground;
 	}
--- a/frontend/app/layout.tsx
+++ b/frontend/app/layout.tsx
@@ -1,3 +1,4 @@
+import "@/lib/utils";
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "@/app/globals.css";
--- a/frontend/app/robots.ts
+++ b/frontend/app/robots.ts
@@ -0,0 +1,13 @@
+import { BASE_URL } from "@/lib/constants";
+import type { MetadataRoute } from "next";
+
+export default function robots(): MetadataRoute.Robots {
+	return {
+		rules: {
+			userAgent: "*",
+			allow: "/",
+			disallow: ["/dashboard/", "/gallery/"],
+		},
+		sitemap: `${BASE_URL}/sitemap.xml`,
+	};
+}
--- a/frontend/app/sitemap.ts
+++ b/frontend/app/sitemap.ts
@@ -0,0 +1,43 @@
+import { BASE_URL } from "@/lib/constants";
+import type { MetadataRoute } from "next";
+
+export default function sitemap(): MetadataRoute.Sitemap {
+	return [
+		{
+			url: BASE_URL,
+			lastModified: new Date(),
+			changeFrequency: "yearly",
+			priority: 1,
+		},
+		{
+			url: `${BASE_URL}/about`,
+			lastModified: new Date(),
+			changeFrequency: "monthly",
+			priority: 0.8,
+		},
+		{
+			url: `${BASE_URL}/blog`,
+			lastModified: new Date(),
+			changeFrequency: "weekly",
+			priority: 0.5,
+		},
+		{
+			url: `${BASE_URL}/planning`,
+			lastModified: new Date(),
+			changeFrequency: "daily",
+			priority: 0.8,
+		},
+		{
+			url: `${BASE_URL}/gallery`,
+			lastModified: new Date(),
+			changeFrequency: "daily",
+			priority: 0.8,
+		},
+		{
+			url: `${BASE_URL}/contact`,
+			lastModified: new Date(),
+			changeFrequency: "yearly",
+			priority: 0.8,
+		},
+	];
+}
--- a/frontend/components/article.tsx
+++ b/frontend/components/article.tsx
@@ -13,8 +13,10 @@ const BlogArticle: React.FC<{ blog: Blog; user?: IUser }> = ({
 	blog,
 	user,
 }) => {
+	const perms =
+		user && hasPermissions(user.roles, { blogs: ["update"] } as const);
 	const UpdateButton = () => {
-		if (!user || !hasPermissions(user.roles, { blogs: ["update"] })) return;
+		if (!perms?.blogs.update) return;

 		return (
 			<Button variant="secondary">
--- a/frontend/components/article/delete-button.tsx
+++ b/frontend/components/article/delete-button.tsx
@@ -11,14 +11,10 @@ import {
 	AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
-import { Loader2, Trash2 } from "lucide-react";
-import { useState } from "react";
+import { Trash2 } from "lucide-react";
 import hasPermissions from "@/lib/hasPermissions";
 import IUser from "@/interfaces/IUser";
-import { useToast } from "@/hooks/use-toast";
-import { useRouter } from "next/navigation";
 import request from "@/lib/request";
-import { ApiResponse } from "@/types/types";

 interface DeleteArticleButtonProps {
 	id: string;
@@ -29,7 +25,9 @@ const DeleteArticleButton: React.FC<DeleteArticleButtonProps> = ({
 	id,
 	user,
 }) => {
-	if (!user || !hasPermissions(user.roles, { blogs: ["update"] })) {
+	const perms =
+		user && hasPermissions(user.roles, { blogs: ["delete"] } as const);
+	if (!perms?.blogs.delete) {
 		return null;
 	}

--- a/frontend/components/editor/editor-menu.tsx
+++ b/frontend/components/editor/editor-menu.tsx
@@ -7,8 +7,6 @@ import {
 	AlignLeft,
 	AlignRight,
 	Bold,
-	Code,
-	Code2,
 	Heading1,
 	Heading2,
 	Heading3,
@@ -43,10 +41,14 @@ import {
 	TooltipProvider,
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
-import { Label } from "./ui/label";
-import { Input } from "./ui/input";
-import { Switch } from "./ui/switch";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
 import { useState } from "react";
 import {
 	Dialog,
@@ -55,12 +57,27 @@ import {
 	DialogFooter,
 	DialogHeader,
 	DialogTitle,
-} from "./ui/dialog";
+} from "@/components/ui/dialog";
+
+import { SizeOption } from "./extensions/marks";

 interface EditorMenuProps {
 	editor: Editor | null;
 }

+const sizeOptions: SizeOption[] = ["xs", "sm", "base", "lg", "xl"];
+const tailwindColors = [
+	{ value: "default", label: "Default" }, // Changed from '' to "default"
+	{ value: "gray-500", label: "Gray" },
+	{ value: "red-500", label: "Red" },
+	{ value: "yellow-500", label: "Yellow" },
+	{ value: "green-500", label: "Green" },
+	{ value: "blue-500", label: "Blue" },
+	{ value: "indigo-500", label: "Indigo" },
+	{ value: "purple-500", label: "Purple" },
+	{ value: "pink-500", label: "Pink" },
+];
+
 export function EditorMenu({ editor }: EditorMenuProps) {
 	if (!editor) {
 		return null;
@@ -70,6 +87,7 @@ export function EditorMenu({ editor }: EditorMenuProps) {
 		<TooltipProvider delayDuration={0}>
 			<div className="flex flex-wrap gap-2 rounded-t-lg border bg-background p-1">
 				<div className="flex flex-wrap gap-2">
+					{/* Existing formatting toggles */}
 					<ToggleGroup
 						type="multiple"
 						size="sm"
@@ -154,30 +172,82 @@ export function EditorMenu({ editor }: EditorMenuProps) {
 							</TooltipTrigger>
 							<TooltipContent>Strikethrough</TooltipContent>
 						</Tooltip>
-
-						<Tooltip>
-							<TooltipTrigger asChild>
-								<ToggleGroupItem
-									value="code"
-									aria-label="Toggle code"
-									aria-selected={editor.isActive("code")}
-									onClick={() =>
-										editor
-											.chain()
-											.focus()
-											.toggleCode()
-											.run()
-									}
-								>
-									<Code className="h-4 w-4" />
-								</ToggleGroupItem>
-							</TooltipTrigger>
-							<TooltipContent>Code</TooltipContent>
-						</Tooltip>
 					</ToggleGroup>

 					<Separator orientation="vertical" className="h-8" />

+					{/* Font Size Selector */}
+					<Select
+						value={
+							editor.isActive("fontSize")
+								? editor.getAttributes("fontSize").size ||
+									"base"
+								: "base"
+						}
+						onValueChange={(value: SizeOption) => {
+							editor
+								.chain()
+								.focus()
+								.setFontSize({ size: value })
+								.run();
+						}}
+					>
+						<SelectTrigger className="h-8 w-[100px]">
+							<SelectValue placeholder="Size" />
+						</SelectTrigger>
+						<SelectContent>
+							<SelectGroup>
+								{sizeOptions.map((size) => (
+									<SelectItem key={size} value={size}>
+										{size.toUpperCase()}
+									</SelectItem>
+								))}
+							</SelectGroup>
+						</SelectContent>
+					</Select>
+
+					{/* Text Color Selector */}
+					{/*<Select
+						value={
+							editor.isActive("textColor")
+								? editor.getAttributes("textColor").color ||
+									"default"
+								: "default"
+						}
+						onValueChange={(value) => {
+							if (value === "default") {
+								editor.chain().focus().unsetTextColor().run();
+							} else {
+								editor
+									.chain()
+									.focus()
+									.setTextColor({ color: value })
+									.run();
+							}
+						}}
+					>
+						<SelectTrigger className="h-8 w-[100px]">
+							<SelectValue placeholder="Color" />
+						</SelectTrigger>
+						<SelectContent>
+							<SelectGroup>
+								{tailwindColors.map(({ value, label }) => (
+									<SelectItem key={value} value={value}>
+										<div className="flex items-center gap-2">
+											<span
+												className={`h-3 w-3 rounded-full ${value === "default" ? "bg-gray-200" : `bg-${value}`}`}
+											/>
+											{label}
+										</div>
+									</SelectItem>
+								))}
+							</SelectGroup>
+						</SelectContent>
+					</Select> */}
+
+					<Separator orientation="vertical" className="h-8" />
+
+					{/* Heading Selector */}
 					<Select
 						value={getActiveHeading(editor)}
 						onValueChange={(value) => {
@@ -229,6 +299,7 @@ export function EditorMenu({ editor }: EditorMenuProps) {

 					<Separator orientation="vertical" className="h-8" />

+					{/* Alignment Controls */}
 					<ToggleGroup
 						type="single"
 						size="sm"
@@ -324,6 +395,7 @@ export function EditorMenu({ editor }: EditorMenuProps) {

 					<Separator orientation="vertical" className="h-8" />

+					{/* List and Blockquote Controls */}
 					<ToggleGroup
 						type="multiple"
 						size="sm"
@@ -373,26 +445,6 @@ export function EditorMenu({ editor }: EditorMenuProps) {
 							<TooltipContent>Ordered list</TooltipContent>
 						</Tooltip>

-						<Tooltip>
-							<TooltipTrigger asChild>
-								<ToggleGroupItem
-									value="codeBlock"
-									aria-label="Toggle code block"
-									aria-pressed={editor.isActive("codeBlock")}
-									onClick={() =>
-										editor
-											.chain()
-											.focus()
-											.toggleCodeBlock()
-											.run()
-									}
-								>
-									<Code2 className="h-4 w-4" />
-								</ToggleGroupItem>
-							</TooltipTrigger>
-							<TooltipContent>Code block</TooltipContent>
-						</Tooltip>
-
 						<Tooltip>
 							<TooltipTrigger asChild>
 								<ToggleGroupItem
@@ -418,6 +470,7 @@ export function EditorMenu({ editor }: EditorMenuProps) {

 					<Separator orientation="vertical" className="h-8" />

+					{/* Additional Controls */}
 					<div className="flex gap-1">
 						<Tooltip>
 							<TooltipTrigger asChild>
@@ -477,6 +530,7 @@ export function EditorMenu({ editor }: EditorMenuProps) {
 	);
 }

+// Rest of the components remain unchanged
 function getActiveHeading(editor: Editor) {
 	if (editor.isActive("heading", { level: 1 })) return "1";
 	if (editor.isActive("heading", { level: 2 })) return "2";
--- a/frontend/components/editor/extensions/marks.ts
+++ b/frontend/components/editor/extensions/marks.ts
@@ -0,0 +1,222 @@
+// extensions/customMarks.ts
+import {
+	Mark,
+	markInputRule,
+	markPasteRule,
+	mergeAttributes,
+} from "@tiptap/core";
+
+// Define available size options
+const sizeOptions = {
+	xs: "text-xs",
+	sm: "text-sm",
+	base: "text-base",
+	lg: "text-lg",
+	xl: "text-xl",
+} as const;
+
+export type SizeOption = keyof typeof sizeOptions;
+
+export interface FontSizeOptions {
+	HTMLAttributes: Record<string, any>;
+}
+
+declare module "@tiptap/core" {
+	interface Commands<ReturnType> {
+		fontSize: {
+			setFontSize: (attributes: { size: SizeOption }) => ReturnType;
+			toggleFontSize: (attributes: { size: SizeOption }) => ReturnType;
+			unsetFontSize: () => ReturnType;
+		};
+	}
+}
+
+export const fontSizeInputRegex = /(?:^|\s)(~((?:[^~]+))~)$/;
+export const fontSizePasteRegex = /(?:^|\s)(~((?:[^~]+))~)/g;
+
+export const FontSize = Mark.create<FontSizeOptions>({
+	name: "fontSize",
+
+	addOptions() {
+		return {
+			HTMLAttributes: {},
+		};
+	},
+
+	addAttributes() {
+		return {
+			size: {
+				default: "base",
+				parseHTML: (element: HTMLElement) => {
+					const sizeClass = Object.entries(sizeOptions).find(
+						([, className]) =>
+							element.classList.contains(className),
+					)?.[0];
+					return sizeClass || "base";
+				},
+				renderHTML: (attributes: { size: SizeOption }) => ({
+					class: sizeOptions[attributes.size],
+				}),
+			},
+		};
+	},
+
+	parseHTML() {
+		return [
+			{
+				tag: "span",
+				getAttrs: (node: HTMLElement) => {
+					const hasSizeClass = Object.values(sizeOptions).some(
+						(className) => node.classList.contains(className),
+					);
+					return hasSizeClass ? {} : null;
+				},
+			},
+		];
+	},
+
+	renderHTML({ HTMLAttributes }) {
+		return [
+			"span",
+			mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+			0,
+		];
+	},
+
+	addCommands() {
+		return {
+			setFontSize:
+				(attributes: { size: SizeOption }) =>
+				({ commands }) => {
+					return commands.setMark(this.name, attributes);
+				},
+			toggleFontSize:
+				(attributes: { size: SizeOption }) =>
+				({ commands }) => {
+					return commands.toggleMark(this.name, attributes);
+				},
+			unsetFontSize:
+				() =>
+				({ commands }) => {
+					return commands.unsetMark(this.name);
+				},
+		};
+	},
+
+	addKeyboardShortcuts() {
+		return {
+			"Mod-s": () => this.editor.commands.toggleFontSize({ size: "sm" }),
+		};
+	},
+
+	addInputRules() {
+		return [
+			markInputRule({
+				find: fontSizeInputRegex,
+				type: this.type,
+				getAttributes: { size: "sm" }, // Default size for input rule
+			}),
+		];
+	},
+
+	addPasteRules() {
+		return [
+			markPasteRule({
+				find: fontSizePasteRegex,
+				type: this.type,
+				getAttributes: { size: "sm" }, // Default size for paste rule
+			}),
+		];
+	},
+});
+
+// TextColor remains unchanged
+export interface TextColorOptions {
+	HTMLAttributes: Record<string, any>;
+}
+
+declare module "@tiptap/core" {
+	interface Commands<ReturnType> {
+		textColor: {
+			setTextColor: (attributes: { color: string }) => ReturnType;
+			toggleTextColor: (attributes: { color: string }) => ReturnType;
+			unsetTextColor: () => ReturnType;
+		};
+	}
+}
+
+export const TextColor = Mark.create<TextColorOptions>({
+	name: "textColor",
+	addOptions() {
+		return {
+			HTMLAttributes: {},
+		};
+	},
+	addAttributes() {
+		return {
+			color: {
+				default: null,
+				parseHTML: (element: HTMLElement) => {
+					const colorClass = Array.from(element.classList).find(
+						(cls) => cls.startsWith("text-"),
+					);
+					return colorClass ? colorClass.replace("text-", "") : null;
+				},
+				renderHTML: (attributes) => {
+					if (!attributes.color) return {};
+					// Use !important to override prose styles
+					return {
+						class: `text-${attributes.color} !text-${attributes.color}`,
+					};
+				},
+			},
+		};
+	},
+	parseHTML() {
+		return [
+			{
+				tag: "span",
+				getAttrs: (node: HTMLElement) => {
+					const colorClass = Array.from(node.classList).find((cls) =>
+						cls.startsWith("text-"),
+					);
+					return colorClass
+						? { color: colorClass.replace("text-", "") }
+						: null;
+				},
+			},
+		];
+	},
+	renderHTML({ HTMLAttributes }) {
+		return [
+			"span",
+			mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+			0,
+		];
+	},
+	addCommands() {
+		return {
+			setTextColor:
+				(attributes: { color: string }) =>
+				({ commands }) => {
+					return commands.setMark(this.name, attributes);
+				},
+			toggleTextColor:
+				(attributes: { color: string }) =>
+				({ commands }) => {
+					return commands.toggleMark(this.name, attributes);
+				},
+			unsetTextColor:
+				() =>
+				({ commands }) => {
+					return commands.unsetMark(this.name);
+				},
+		};
+	},
+	addKeyboardShortcuts() {
+		return {
+			"Mod-Shift-c": () =>
+				this.editor.commands.toggleTextColor({ color: "gray-500" }),
+		};
+	},
+});
--- a/frontend/components/editor/index.tsx
+++ b/frontend/components/editor/index.tsx
@@ -13,6 +13,7 @@ import TextAlign from "@tiptap/extension-text-align";
 import Youtube from "@tiptap/extension-youtube";
 import Dropcursor from "@tiptap/extension-dropcursor";
 import { EditorMenu } from "./editor-menu";
+import { FontSize, TextColor } from "./extensions/marks";

 interface EditorProps {
 	content: string;
@@ -59,6 +60,8 @@ export function LocalEditor({
 	const editor = useEditor({
 		extensions: [
 			StarterKit,
+			FontSize,
+			TextColor,
 			Underline,
 			Link,
 			Youtube,
--- a/frontend/components/event-dialog.tsx
+++ b/frontend/components/event-dialog.tsx
@@ -30,25 +30,14 @@ import {
 	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 { useForm } from "react-hook-form";
 import { useEffect } from "react";

 export const eventFormSchema = z.object({
 	title: z.string().min(1, "Titre requis"),
-	startDate: z.date({
-		required_error: "Date de début requise",
-	}),
+	startDate: z.date({ required_error: "Date de début requise" }),
 	startTime: z.string(),
-	endDate: z.date({
-		required_error: "Date finale requise",
-	}),
+	endDate: z.date({ required_error: "Date finale requise" }),
 	endTime: z.string(),
 	fullDay: z.boolean().default(false),
 	frequency: z.enum(["unique", "quotidien", "hebdomadaire", "mensuel"]),
@@ -65,37 +54,34 @@ const frequencies = [
 	{ label: "Mensuel", value: "mensuel" },
 ];

-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">;
+	event: any;
 	setForm: React.Dispatch<
-		React.SetStateAction<UseFormReturn<EventFormValues> | undefined>
+		React.SetStateAction<
+			ReturnType<typeof useForm<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),
+			title: event.title || "",
+			startDate: _start,
 			startTime: format(_start, "HH:mm"),
-			endDate: _end, // event.end),
+			endDate: _end,
 			endTime: format(_end, "HH:mm"),
-			fullDay: event.fullday,
+			fullDay: event.fullday ?? false,
 			frequency: "unique",
-			isVisible: event.isVisible,
+			isVisible: event.isVisible ?? true,
 		},
 	});

 	useEffect(() => {
 		setForm(form);
-	}, []);
+	}, [form, setForm]);

 	const frequency = form.watch("frequency");

@@ -120,53 +106,63 @@ export const EventForm: React.FC<{
 				/>

 				<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,
-														"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>
-						)}
-					/>
+					{/* Simplified startDate without FormField */}
+					<FormItem className="flex flex-col">
+						<FormLabel>Début</FormLabel>
+						<Popover>
+							<PopoverTrigger asChild>
+								<Button
+									variant="outline"
+									className={cn(
+										"w-full pl-3 text-left font-normal",
+										!form.getValues("startDate") &&
+											"text-muted-foreground",
+									)}
+								>
+									{form.getValues("startDate") ? (
+										format(
+											form.getValues("startDate"),
+											"dd/MM/yyyy",
+										)
+									) : (
+										<span>Choisis une date</span>
+									)}
+									<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+								</Button>
+							</PopoverTrigger>
+							<PopoverContent
+								className="w-auto p-0"
+								align="start"
+							>
+								<div style={{ pointerEvents: "auto" }}>
+									{/* Force interactivity */}
+									<Calendar
+										mode="single"
+										selected={form.getValues("startDate")}
+										onSelect={(date) => {
+											console.log(
+												"Start date selected:",
+												date,
+											);
+											if (date) {
+												form.setValue(
+													"startDate",
+													date,
+													{ shouldValidate: true },
+												);
+												console.log(
+													"Updated startDate:",
+													form.getValues("startDate"),
+												);
+											}
+										}}
+										initialFocus
+									/>
+								</div>
+							</PopoverContent>
+						</Popover>
+						<FormMessage />
+					</FormItem>

 					<FormField
 						control={form.control}
@@ -187,53 +183,60 @@ export const EventForm: React.FC<{

 					<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>
-						)}
-					/>
+					{/* Simplified endDate */}
+					<FormItem className="flex flex-col">
+						<FormLabel>Fin</FormLabel>
+						<Popover>
+							<PopoverTrigger asChild>
+								<Button
+									variant="outline"
+									className={cn(
+										"w-full pl-3 text-left font-normal",
+										!form.getValues("endDate") &&
+											"text-muted-foreground",
+									)}
+								>
+									{form.getValues("endDate") ? (
+										format(
+											form.getValues("endDate"),
+											"dd/MM/yyyy",
+										)
+									) : (
+										<span>Choisis une date</span>
+									)}
+									<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+								</Button>
+							</PopoverTrigger>
+							<PopoverContent
+								className="w-auto p-0"
+								align="start"
+							>
+								<div style={{ pointerEvents: "auto" }}>
+									<Calendar
+										mode="single"
+										selected={form.getValues("endDate")}
+										onSelect={(date) => {
+											console.log(
+												"End date selected:",
+												date,
+											);
+											if (date) {
+												form.setValue("endDate", date, {
+													shouldValidate: true,
+												});
+												console.log(
+													"Updated endDate:",
+													form.getValues("endDate"),
+												);
+											}
+										}}
+										initialFocus
+									/>
+								</div>
+							</PopoverContent>
+						</Popover>
+						<FormMessage />
+					</FormItem>

 					<FormField
 						control={form.control}
@@ -303,53 +306,71 @@ export const EventForm: React.FC<{
 					/>

 					{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>
-							)}
-						/>
+						<FormItem className="flex-1">
+							<FormLabel>Jusqu'au</FormLabel>
+							<Popover>
+								<PopoverTrigger asChild>
+									<Button
+										variant="outline"
+										className={cn(
+											"w-full pl-3 text-left font-normal",
+											!form.getValues(
+												"frequencyEndDate",
+											) && "text-muted-foreground",
+										)}
+									>
+										{form.getValues("frequencyEndDate") ? (
+											format(
+												form.getValues(
+													"frequencyEndDate",
+												)!,
+												"dd/MM/yyyy",
+											)
+										) : (
+											<span>Choisis une date</span>
+										)}
+										<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+									</Button>
+								</PopoverTrigger>
+								<PopoverContent
+									className="w-auto p-0"
+									align="start"
+								>
+									<div style={{ pointerEvents: "auto" }}>
+										<Calendar
+											mode="single"
+											selected={form.getValues(
+												"frequencyEndDate",
+											)}
+											onSelect={(date) => {
+												console.log(
+													"Frequency end date selected:",
+													date,
+												);
+												if (date) {
+													form.setValue(
+														"frequencyEndDate",
+														date,
+														{
+															shouldValidate:
+																true,
+														},
+													);
+													console.log(
+														"Updated frequencyEndDate:",
+														form.getValues(
+															"frequencyEndDate",
+														),
+													);
+												}
+											}}
+											initialFocus
+										/>
+									</div>
+								</PopoverContent>
+							</Popover>
+							<FormMessage />
+						</FormItem>
 					)}
 				</div>

--- a/frontend/components/footer.tsx
+++ b/frontend/components/footer.tsx
@@ -1,38 +1,17 @@
 import { SITE_NAME } from "@/lib/constants";
-import {
-	FaFacebook,
-	FaInstagram,
-	FaLinkedin,
-	FaTwitter,
-	FaYoutube,
-} from "react-icons/fa";
+import { FaFacebook, FaYoutube } from "react-icons/fa";
+import Logo from "./logo";

 const sections = [
-	{
-		title: "Product",
-		links: [
-			{ name: "Overview", href: "#" },
-			{ name: "Pricing", href: "#" },
-			{ name: "Marketplace", href: "#" },
-			{ name: "Features", href: "#" },
-		],
-	},
-	{
-		title: "Company",
-		links: [
-			{ name: "About", href: "#" },
-			{ name: "Team", href: "#" },
-			{ name: "Blog", href: "#" },
-			{ name: "Careers", href: "#" },
-		],
-	},
 	{
 		title: "Resources",
 		links: [
-			{ name: "Help", href: "#" },
-			{ name: "Sales", href: "#" },
-			{ name: "Advertise", href: "#" },
-			{ name: "Privacy", href: "#" },
+			{ name: "Accueil", href: "/" },
+			{ name: "Planning", href: "/planning" },
+			{ name: "À propos", href: "/about" },
+			{ name: "Galerie", href: "/gallery" },
+			{ name: "Blog", href: "/blogs" },
+			{ name: "Contact", href: "/contact" },
 		],
 	},
 ];
@@ -46,20 +25,12 @@ const Footer = () => {
 						<div className="flex w-full max-w-96 shrink flex-col items-center justify-between gap-6 lg:items-start">
 							<div>
 								<span className="flex items-center justify-center gap-4 lg:justify-start">
-									<img
-										src="https://shadcnblocks.com/images/block/block-1.svg"
-										alt="logo"
-										className="h-11"
-									/>
+									<Logo className="h-11 w-11" />
 									<p className="text-3xl font-semibold">
 										{SITE_NAME}
 									</p>
 								</span>
-								<p className="mt-6 text-sm text-muted-foreground">
-									A collection of 100+ responsive HTML
-									templates for your startup business or side
-									project.
-								</p>
+								<p className="mt-6 text-sm text-muted-foreground"></p>
 							</div>
 							<ul className="flex items-center space-x-6 text-muted-foreground">
 								<li className="font-medium hover:text-primary">
@@ -74,7 +45,9 @@ const Footer = () => {
 								</li>
 							</ul>
 						</div>
-						<div className="grid grid-cols-3 gap-6 lg:gap-20">
+						<div
+							className={`grid grid-cols-[${sections.length}] gap-6 lg:gap-20`}
+						>
 							{sections.map((section, sectionIdx) => (
 								<div key={sectionIdx}>
 									<h3 className="mb-6 font-bold">
--- a/frontend/components/login-form.tsx
+++ b/frontend/components/login-form.tsx
@@ -1,12 +1,17 @@
 "use client";
 import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { useState } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import useLogin from "@/hooks/use-login";
-import { Loader2 } from "lucide-react";
+import {
+	ActionButton,
+	ActionButtonDefault,
+	ActionButtonError,
+	ActionButtonLoading,
+	ActionButtonSuccess,
+} from "./action-button";

 export function LoginForm({
 	className,
@@ -70,7 +75,7 @@ export function LoginForm({
 							href="#"
 							className="ml-auto text-sm underline-offset-4 hover:underline"
 						>
-							Forgot your password?
+							Mot de passe oublier
 						</a>
 					</div>
 					<Input
@@ -82,35 +87,23 @@ export function LoginForm({
 						required
 					/>
 				</div>
-				<Button
-					disabled={loading}
+				<ActionButton
+					isLoading={loading}
+					isSuccess={isSuccess}
 					type="submit"
-					className="w-full transition-all ease-in-out"
 				>
-					{loading && <Loader2 className="animate-spin" />}
-					Se connecter
-				</Button>
-				<div className="relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border">
-					<span className="relative z-10 bg-background px-2 text-muted-foreground">
-						Ou connectez-vous avec
-					</span>
-				</div>
-				<Button variant="outline" className="w-full">
-					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-						<path
-							d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
-							fill="currentColor"
-						/>
-					</svg>
-					Login with GitHub
-				</Button>
+					<ActionButtonDefault>Se connecter</ActionButtonDefault>
+					<ActionButtonLoading />
+					<ActionButtonError />
+					<ActionButtonSuccess />
+				</ActionButton>
 			</div>
-			<div className="text-center text-sm">
+			{/*<div className="text-center text-sm">
 				Pas de compte ?{" "}
 				<a href="#" className="underline underline-offset-4">
 					Créer un compte
 				</a>
-			</div>
+			</div>*/}
 		</form>
 	);
 }
--- a/frontend/components/member-dialog.tsx
+++ b/frontend/components/member-dialog.tsx
@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import * as z from "zod";
@@ -28,6 +28,16 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "./ui/select";
+import { useApi } from "@/hooks/use-api";
+import { Role, User } from "@/types/types";
+import { Badge } from "./ui/badge";
+import { Building, X } from "lucide-react";
+
+// Define the Role schema based on assumed Role type
+const roleSchema = z.object({
+	id: z.string().min(1, "Role ID is required"),
+	name: z.string().min(1, "Role name is required"),
+});

 const memberSchema = z.object({
 	userId: z.string().optional(),
@@ -39,7 +49,10 @@ const memberSchema = z.object({
 		.min(6, "Le mot de passe doit avoir au moins 6 caractères.")
 		.optional(),
 	phone: z.string().regex(/^\d{10}$/, "Le numéro doit avoir 10 chiffres."),
-	role: z.string().min(1, "Le rôle est requis."),
+	roles: z
+		.array(roleSchema)
+		.min(1, "At least one role is required")
+		.optional(),
 });

 const updateMemberSchema = memberSchema.partial();
@@ -60,6 +73,8 @@ export default function MemberDialog({
 	onSave,
 }: MemberDialogProps) {
 	const schema = member?.userId ? updateMemberSchema : memberSchema;
+	const { data: availableRoles = [] } = useApi<Role[]>("/roles", {}, true); // Fetch roles
+
 	const form = useForm<Member>({
 		resolver: zodResolver(schema),
 		defaultValues: member?.userId
@@ -71,7 +86,7 @@ export default function MemberDialog({
 					email: "",
 					password: "",
 					phone: "",
-					role: "",
+					roles: [], // Default to empty array
 				},
 	});

@@ -86,11 +101,38 @@ export default function MemberDialog({
 				email: "",
 				password: "",
 				phone: "",
-				role: "",
+				roles: [],
 			});
 		}
 	}, [member, form]);

+	const [selectedRole, setSelectedRole] = useState<Role | null>(null);
+
+	const addRole = () => {
+		if (selectedRole) {
+			const currentRoles = form.getValues("roles");
+			if (!currentRoles?.some((role) => role.id === selectedRole.id)) {
+				form.setValue(
+					"roles",
+					[...(currentRoles || []), selectedRole],
+					{
+						shouldValidate: true,
+					},
+				);
+			}
+			setSelectedRole(null); // Reset selection
+		}
+	};
+
+	const removeRole = (roleToRemove: Role) => {
+		const currentRoles = form.getValues("roles");
+		form.setValue(
+			"roles",
+			currentRoles?.filter((role) => role.id !== roleToRemove.id),
+			{ shouldValidate: true },
+		);
+	};
+
 	const onSubmit = (data: Member) => {
 		onSave(data);
 		onClose();
@@ -118,13 +160,13 @@ export default function MemberDialog({
 								name="firstname"
 								render={({ field }) => (
 									<FormItem className="grid gap-2">
-										<FormLabel htmlFor="name">
+										<FormLabel htmlFor="firstname">
 											Prénom
 										</FormLabel>
 										<FormControl>
 											<Input
 												id="firstname"
-												placeholder="John Doe"
+												placeholder="John"
 												type="text"
 												autoComplete="firstname"
 												{...field}
@@ -134,130 +176,69 @@ export default function MemberDialog({
 									</FormItem>
 								)}
 							/>
-							<div className="grid gap-4">
-								{/* Firstname Field */}
-								<FormField
-									control={form.control}
-									name="lastname"
-									render={({ field }) => (
-										<FormItem className="grid gap-2">
-											<FormLabel htmlFor="lastname">
-												Nom
-											</FormLabel>
-											<FormControl>
-												<Input
-													id="lastname"
-													placeholder="John Doe"
-													type="text"
-													autoComplete="lastname"
-													{...field}
-												/>
-											</FormControl>
-											<FormMessage />
-										</FormItem>
-									)}
-								/>

-								{/* Email Field */}
-								<FormField
-									control={form.control}
-									name="email"
-									render={({ field }) => (
-										<FormItem className="grid gap-2">
-											<FormLabel htmlFor="email">
-												Email
-											</FormLabel>
-											<FormControl>
-												<Input
-													id="email"
-													placeholder="johndoe@mail.com"
-													type="email"
-													autoComplete="email webauthn"
-													{...field}
-												/>
-											</FormControl>
-											<FormMessage />
-										</FormItem>
-									)}
-								/>
-								{/* Password Field */}
-								{!member?.userId && (
-									<FormField
-										control={form.control}
-										name="password"
-										render={({ field }) => (
-											<FormItem className="grid gap-2">
-												<FormLabel htmlFor="password">
-													Mot de passe
-												</FormLabel>
-												<FormControl>
-													<Input
-														id="password"
-														placeholder=""
-														type="password"
-														autoComplete="new-password webauthn"
-														{...field}
-													/>
-												</FormControl>
-												<FormMessage />
-											</FormItem>
-										)}
-									/>
+							{/* Lastname Field */}
+							<FormField
+								control={form.control}
+								name="lastname"
+								render={({ field }) => (
+									<FormItem className="grid gap-2">
+										<FormLabel htmlFor="lastname">
+											Nom
+										</FormLabel>
+										<FormControl>
+											<Input
+												id="lastname"
+												placeholder="Doe"
+												type="text"
+												autoComplete="lastname"
+												{...field}
+											/>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
 								)}
+							/>

+							{/* Email Field */}
+							<FormField
+								control={form.control}
+								name="email"
+								render={({ field }) => (
+									<FormItem className="grid gap-2">
+										<FormLabel htmlFor="email">
+											Email
+										</FormLabel>
+										<FormControl>
+											<Input
+												id="email"
+												placeholder="johndoe@mail.com"
+												type="email"
+												autoComplete="email webauthn"
+												{...field}
+											/>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							{/* Password Field (only for new members) */}
+							{!member?.userId && (
 								<FormField
 									control={form.control}
-									name="role"
+									name="password"
 									render={({ field }) => (
 										<FormItem className="grid gap-2">
-											<FormLabel htmlFor="role">
-												Role
-											</FormLabel>
-											<FormControl>
-												<Select
-													value={field.value}
-													onValueChange={(
-														value: string,
-													) => field.onChange(value)}
-												>
-													<SelectTrigger className="w-[180px]">
-														<SelectValue placeholder="Séléctionner un rôle" />
-													</SelectTrigger>
-													<SelectContent>
-														<SelectGroup>
-															<SelectLabel>
-																Role
-															</SelectLabel>
-															<SelectItem value="admin">
-																Administrateur
-															</SelectItem>
-															<SelectItem value="user">
-																Utilisateur
-															</SelectItem>
-														</SelectGroup>
-													</SelectContent>
-												</Select>
-											</FormControl>
-											<FormMessage />
-										</FormItem>
-									)}
-								/>
-
-								{/* Phone Field */}
-								<FormField
-									control={form.control}
-									name="phone"
-									render={({ field }) => (
-										<FormItem className="grid gap-2">
-											<FormLabel htmlFor="phone">
-												Phone number
+											<FormLabel htmlFor="password">
+												Mot de passe
 											</FormLabel>
 											<FormControl>
 												<Input
-													id="phone"
-													placeholder="0648265441"
-													type="tel"
-													autoComplete="phone"
+													id="password"
+													placeholder=""
+													type="password"
+													autoComplete="new-password webauthn"
 													{...field}
 												/>
 											</FormControl>
@@ -265,7 +246,121 @@ export default function MemberDialog({
 										</FormItem>
 									)}
 								/>
-							</div>
+							)}
+
+							{/* Phone Field */}
+							<FormField
+								control={form.control}
+								name="phone"
+								render={({ field }) => (
+									<FormItem className="grid gap-2">
+										<FormLabel htmlFor="phone">
+											Phone number
+										</FormLabel>
+										<FormControl>
+											<Input
+												id="phone"
+												placeholder="0648265441"
+												type="tel"
+												autoComplete="phone"
+												{...field}
+											/>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							{/* Roles Field */}
+							<FormField
+								control={form.control}
+								name="roles"
+								render={({ field }) => (
+									<FormItem className="grid gap-2">
+										<FormLabel>Roles</FormLabel>
+										<div className="flex flex-wrap gap-2">
+											{field.value?.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="flex space-x-2 mt-2">
+											<Select
+												value={
+													selectedRole
+														? selectedRole.name
+														: ""
+												}
+												onValueChange={(value) => {
+													const role =
+														availableRoles.find(
+															(r) =>
+																r.name ===
+																value,
+														);
+													if (role)
+														setSelectedRole(role);
+												}}
+											>
+												<SelectTrigger className="w-[180px]">
+													<SelectValue placeholder="Sélectionner un rôle" />
+												</SelectTrigger>
+												<SelectContent>
+													<SelectGroup>
+														<SelectLabel>
+															Roles
+														</SelectLabel>
+														{availableRoles
+															.filter(
+																(role) =>
+																	!field.value?.some(
+																		(r) =>
+																			r.id ===
+																			role.id,
+																	),
+															)
+															.map((role) => (
+																<SelectItem
+																	key={
+																		role.id
+																	}
+																	value={
+																		role.name
+																	}
+																>
+																	{role.name}
+																</SelectItem>
+															))}
+													</SelectGroup>
+												</SelectContent>
+											</Select>
+											<Button
+												type="button"
+												disabled={!selectedRole}
+												onClick={addRole}
+												className="flex items-center"
+											>
+												<Building className="mr-2 h-4 w-4" />
+												Ajouter le rôle
+											</Button>
+										</div>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
 						</div>
 						<DialogFooter>
 							<Button type="submit">
--- a/frontend/components/members-table.tsx
+++ b/frontend/components/members-table.tsx
@@ -10,21 +10,19 @@ import {
 	TableRow,
 } from "@/components/ui/table";
 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 { useApi } from "@/hooks/use-api";
 import request from "@/lib/request";
-import {
-	CircleX,
-	Loader2,
-	Trash2,
-	UserRoundPen,
-	UserRoundPlus,
-} from "lucide-react";
-import Link from "next/link";
+import { Loader2, MoreHorizontal, UserRoundPlus } from "lucide-react";
 import IUser from "@/interfaces/IUser";
 import hasPermissions from "@/lib/hasPermissions";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "./ui/dropdown-menu";

 export default function MembersTable({ user }: { user: IUser }) {
 	const {
@@ -34,23 +32,12 @@ export default function MembersTable({ user }: { user: IUser }) {
 		success,
 		isLoading,
 	} = useApi<Member[]>("/users", undefined, true, false);
-	const [selectMode, setSelectMode] = useState(false);
-	const [selectedMembers, setSelectedMembers] = useState<string[]>([]);
 	const [dialogOpen, setDialogOpen] = useState(false);
 	const [currentMember, setCurrentMember] = useState<Member | null>(null);

-	const toggleSelectMode = () => {
-		setSelectMode(!selectMode);
-		setSelectedMembers([]);
-	};
-
-	const toggleMemberSelection = (userId: string) => {
-		setSelectedMembers((prev) =>
-			prev.includes(userId)
-				? prev.filter((id) => id !== userId)
-				: [...prev, userId],
-		);
-	};
+	const { users } = hasPermissions(user.roles, {
+		users: ["delete", "update", "insert"],
+	} as const);

 	const handleOpenDialog = (member: Member | null) => {
 		setCurrentMember(member);
@@ -59,10 +46,12 @@ export default function MembersTable({ user }: { user: IUser }) {

 	const handleSaveMember = async (savedMember: Member) => {
 		if (savedMember.userId) {
+			const dif = DiffUtils.getDifferences(currentMember!, savedMember);
+			if (DiffUtils.isEmpty(dif)) return;
 			const res = await request<unknown>(
 				`/users/${savedMember.userId}/update`,
 				{
-					body: savedMember,
+					body: dif,
 					requiresAuth: true,
 					method: "PATCH",
 				},
@@ -96,105 +85,83 @@ export default function MembersTable({ user }: { user: IUser }) {
 	return (
 		<div className="space-y-4">
 			<div className="flex justify-between">
-				<Button onClick={toggleSelectMode}>
-					{selectMode ? <CircleX /> : "Selectionner"}
-				</Button>
-				{hasPermissions(user.roles, { users: ["insert"] }) && (
+				{users.insert && (
 					<Button onClick={() => handleOpenDialog(null)}>
 						<UserRoundPlus />
 					</Button>
 				)}
 			</div>
 			<div className="relative">
+				{isLoading && <Loader2 className="animate-spin" />}
 				<ScrollArea className="h-full rounded-md border">
 					<Table>
 						<TableHeader className="sticky top-0 bg-background z-10 shadow-sm">
 							<TableRow>
-								{selectMode && (
-									<TableHead className="w-[50px]">
-										Sélectionner
-									</TableHead>
-								)}
 								<TableHead>Prénom</TableHead>
 								<TableHead>Nom</TableHead>
 								<TableHead>Email</TableHead>
 								<TableHead>Téléphone</TableHead>
-								<TableHead>Rôle</TableHead>
+								<TableHead>Rôles</TableHead>
 								<TableHead className="text-right">
 									Actions
 								</TableHead>
 							</TableRow>
 						</TableHeader>
 						<TableBody>
-							{isLoading && <Loader2 className="animate-spin" />}
 							{members &&
-								members.map((member) => (
-									<TableRow key={member.userId}>
-										{selectMode && (
-											<TableCell>
-												<Checkbox
-													checked={selectedMembers.includes(
-														member.userId!,
-													)}
-													onCheckedChange={() =>
-														toggleMemberSelection(
-															member.userId!,
-														)
-													}
-												/>
-											</TableCell>
-										)}
+								members.map((_member) => (
+									<TableRow key={_member.userId}>
 										<TableCell>
-											<Link
-												href={`/dashboard/members/${member.userId}`}
-											>
-												<span className="underline">
-													{member.firstname}
-												</span>
-											</Link>
+											{_member.firstname}
 										</TableCell>
 										<TableCell>
-											<Link
-												href={`/dashboard/members/${member.userId}`}
-											>
-												<span className="underline">
-													{member.lastname}
-												</span>
-											</Link>
+											{_member.lastname}
+										</TableCell>
+										<TableCell>{_member.email}</TableCell>
+										<TableCell>{_member.phone}</TableCell>
+										<TableCell>
+											{_member.roles
+												?.map((r) => r.name)
+												.join(", ")}
 										</TableCell>
-										<TableCell>{member.email}</TableCell>
-										<TableCell>{member.phone}</TableCell>
-										<TableCell>{member.role}</TableCell>
 										<TableCell className="text-right">
-											{hasPermissions(user.roles, {
-												users: ["update"],
-											}) && (
-												<Button
-													variant="outline"
-													size="sm"
-													className="mr-2"
-													onClick={() =>
-														handleOpenDialog(member)
-													}
-												>
-													<UserRoundPen />
-												</Button>
-											)}
-											{hasPermissions(user.roles, {
-												users: ["delete"],
-											}) && (
-												<Button
-													variant="destructive"
-													size="sm"
-													onClick={() =>
-														handleDelete(
-															member.userId!,
-														)
-													}
-												>
-													<Trash2 />
-												</Button>
-											)}
+											<DropdownMenu>
+												<DropdownMenuTrigger asChild>
+													<Button
+														variant="ghost"
+														className="h-8 w-8 p-0"
+													>
+														<span className="sr-only">
+															Ouvrir le menu
+														</span>
+														<MoreHorizontal className="h-4 w-4" />
+													</Button>
+												</DropdownMenuTrigger>
+												<DropdownMenuContent align="end">
+													{users.update && (
+														<DropdownMenuItem
+															onClick={() =>
+																handleOpenDialog(
+																	_member,
+																)
+															}
+														>
+															Mettre à jour
+														</DropdownMenuItem>
+													)}
+													{users.delete && (
+														<DropdownMenuItem
+															onClick={() =>
+																handleDelete(
+																	_member.userId!,
+																)
+															}
+														>
+															Supprimer
+														</DropdownMenuItem>
+													)}
+												</DropdownMenuContent>
+											</DropdownMenu>
 										</TableCell>
 									</TableRow>
 								))}
--- a/frontend/components/shortcodes-table.tsx
+++ b/frontend/components/shortcodes-table.tsx
@@ -21,6 +21,12 @@ import ShortcodeDialog from "@/components/shortcode-dialogue";
 import { useState } from "react";
 import IUser from "@/interfaces/IUser";
 import hasPermissions from "@/lib/hasPermissions";
+import {
+	HoverCard,
+	HoverCardContent,
+	HoverCardTrigger,
+} from "@radix-ui/react-hover-card";
+import Image from "next/image";

 interface ShortcodeTableProps {
 	user: IUser;
@@ -37,13 +43,17 @@ export function ShortcodeTable({
 	onAdd,
 	user,
 }: ShortcodeTableProps) {
+	const permissions = hasPermissions(user.roles, {
+		shortcodes: ["insert", "update", "delete"],
+	} as const);
 	const [shortcodeSelected, setUpdateDialog] = useState<IShortcode | null>(
 		null,
 	);
 	const [addDialog, setAddDialog] = useState<boolean>(false);
+
 	return (
 		<div>
-			{hasPermissions(user.roles, { shortcodes: ["insert"] }) && (
+			{permissions.shortcodes.insert && (
 				<div className="mb-4">
 					<Button
 						onClick={() => {
@@ -81,7 +91,21 @@ export function ShortcodeTable({
 									{shortcode.value || "N/A"}
 								</TableCell>
 								<TableCell>
-									{shortcode.media_id || "N/A"}
+									<HoverCard>
+										<HoverCardTrigger className="underline decoration-dotted cursor-pointer">
+											{shortcode.media_id || "N/A"}
+										</HoverCardTrigger>
+										{shortcode.media && (
+											<HoverCardContent>
+												<Image
+													src={shortcode.media.url}
+													alt={shortcode.media.alt}
+													width={200}
+													height={200}
+												/>
+											</HoverCardContent>
+										)}
+									</HoverCard>
 								</TableCell>
 								<TableCell>
 									<DropdownMenu>
@@ -97,9 +121,7 @@ export function ShortcodeTable({
 											</Button>
 										</DropdownMenuTrigger>
 										<DropdownMenuContent align="end">
-											{hasPermissions(user.roles, {
-												shortcodes: ["update"],
-											}) && (
+											{permissions.shortcodes.update && (
 												<DropdownMenuItem
 													onClick={() =>
 														setUpdateDialog(
@@ -110,9 +132,7 @@ export function ShortcodeTable({
 													Mettre à jour
 												</DropdownMenuItem>
 											)}
-											{hasPermissions(user.roles, {
-												shortcodes: ["delete"],
-											}) && (
+											{permissions.shortcodes.delete && (
 												<DropdownMenuItem
 													onClick={() =>
 														onDelete(shortcode.code)
--- a/frontend/components/ui/calendar.tsx
+++ b/frontend/components/ui/calendar.tsx
@@ -1,76 +1,82 @@
-"use client"
+"use client";

-import * as React from "react"
-import { ChevronLeft, ChevronRight } from "lucide-react"
-import { DayPicker } from "react-day-picker"
+import * as React from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { DayPicker } from "react-day-picker";

-import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/components/ui/button"
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";

-export type CalendarProps = React.ComponentProps<typeof DayPicker>
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;

 function Calendar({
-  className,
-  classNames,
-  showOutsideDays = true,
-  ...props
+	className,
+	classNames,
+	showOutsideDays = true,
+	...props
 }: CalendarProps) {
-  return (
-    <DayPicker
-      showOutsideDays={showOutsideDays}
-      className={cn("p-3", className)}
-      classNames={{
-        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
-        month: "space-y-4",
-        caption: "flex justify-center pt-1 relative items-center",
-        caption_label: "text-sm font-medium",
-        nav: "space-x-1 flex items-center",
-        nav_button: cn(
-          buttonVariants({ variant: "outline" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
-        ),
-        nav_button_previous: "absolute left-1",
-        nav_button_next: "absolute right-1",
-        table: "w-full border-collapse space-y-1",
-        head_row: "flex",
-        head_cell:
-          "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
-        row: "flex w-full mt-2",
-        cell: cn(
-          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
-          props.mode === "range"
-            ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
-            : "[&:has([aria-selected])]:rounded-md"
-        ),
-        day: cn(
-          buttonVariants({ variant: "ghost" }),
-          "h-8 w-8 p-0 font-normal aria-selected:opacity-100"
-        ),
-        day_range_start: "day-range-start",
-        day_range_end: "day-range-end",
-        day_selected:
-          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
-        day_today: "bg-accent text-accent-foreground",
-        day_outside:
-          "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
-        day_disabled: "text-muted-foreground opacity-50",
-        day_range_middle:
-          "aria-selected:bg-accent aria-selected:text-accent-foreground",
-        day_hidden: "invisible",
-        ...classNames,
-      }}
-      components={{
-        IconLeft: ({ className, ...props }) => (
-          <ChevronLeft className={cn("h-4 w-4", className)} {...props} />
-        ),
-        IconRight: ({ className, ...props }) => (
-          <ChevronRight className={cn("h-4 w-4", className)} {...props} />
-        ),
-      }}
-      {...props}
-    />
-  )
+	return (
+		<DayPicker
+			showOutsideDays={showOutsideDays}
+			className={cn("p-3", className)}
+			classNames={{
+				months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+				month: "space-y-4",
+				caption: "flex justify-center pt-1 relative items-center",
+				caption_label: "text-sm font-medium",
+				nav: "space-x-1 flex items-center",
+				nav_button: cn(
+					buttonVariants({ variant: "outline" }),
+					"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+				),
+				nav_button_previous: "absolute left-1",
+				nav_button_next: "absolute right-1",
+				table: "w-full border-collapse space-y-1",
+				head_row: "flex",
+				head_cell:
+					"text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
+				row: "flex w-full mt-2",
+				cell: cn(
+					"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
+					props.mode === "range"
+						? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
+						: "[&:has([aria-selected])]:rounded-md",
+				),
+				day: cn(
+					buttonVariants({ variant: "ghost" }),
+					"h-8 w-8 p-0 font-normal aria-selected:opacity-100",
+				),
+				day_range_start: "day-range-start",
+				day_range_end: "day-range-end",
+				day_selected:
+					"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+				day_today: "bg-accent text-accent-foreground",
+				day_outside:
+					"day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
+				day_disabled: "text-muted-foreground opacity-50",
+				day_range_middle:
+					"aria-selected:bg-accent aria-selected:text-accent-foreground",
+				day_hidden: "invisible",
+				...classNames,
+			}}
+			components={{
+				IconLeft: ({ className, ...props }) => (
+					<ChevronLeft
+						className={cn("h-4 w-4", className)}
+						{...props}
+					/>
+				),
+				IconRight: ({ className, ...props }) => (
+					<ChevronRight
+						className={cn("h-4 w-4", className)}
+						{...props}
+					/>
+				),
+			}}
+			{...props}
+		/>
+	);
 }
-Calendar.displayName = "Calendar"
+Calendar.displayName = "Calendar";

-export { Calendar }
+export { Calendar };
--- a/frontend/components/ui/hover-card.tsx
+++ b/frontend/components/ui/hover-card.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import * as React from "react";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+
+import { cn } from "@/lib/utils";
+
+const HoverCard = HoverCardPrimitive.Root;
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger;
+
+const HoverCardContent = React.forwardRef<
+	React.ComponentRef<typeof HoverCardPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+	<HoverCardPrimitive.Content
+		ref={ref}
+		align={align}
+		sideOffset={sideOffset}
+		className={cn(
+			"z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+			className,
+		)}
+		{...props}
+	/>
+));
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
+
+export { HoverCard, HoverCardTrigger, HoverCardContent };
--- a/frontend/components/ui/scroll-area.tsx
+++ b/frontend/components/ui/scroll-area.tsx
@@ -24,7 +24,7 @@ const ScrollArea = React.forwardRef<
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;

 const ScrollBar = React.forwardRef<
-	React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+	React.ComponentRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
 	React.ComponentPropsWithoutRef<
 		typeof ScrollAreaPrimitive.ScrollAreaScrollbar
 	>
--- a/frontend/components/ui/toast.tsx
+++ b/frontend/components/ui/toast.tsx
@@ -41,7 +41,7 @@ const toastVariants = cva(
 );

 const Toast = React.forwardRef<
-	React.ElementRef<typeof ToastPrimitives.Root>,
+	React.ComponentRef<typeof ToastPrimitives.Root>,
 	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
 		VariantProps<typeof toastVariants>
 >(({ className, variant, ...props }, ref) => {
--- a/frontend/components/ui/toggle-group.tsx
+++ b/frontend/components/ui/toggle-group.tsx
@@ -15,7 +15,7 @@ const ToggleGroupContext = React.createContext<
 });

 const ToggleGroup = React.forwardRef<
-	React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+	React.ComponentRef<typeof ToggleGroupPrimitive.Root>,
 	React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
 		VariantProps<typeof toggleVariants>
 >(({ className, variant, size, children, ...props }, ref) => (
--- a/frontend/components/ui/toggle.tsx
+++ b/frontend/components/ui/toggle.tsx
@@ -29,7 +29,7 @@ const toggleVariants = cva(
 );

 const Toggle = React.forwardRef<
-	React.ElementRef<typeof TogglePrimitive.Root>,
+	React.ComponentRef<typeof TogglePrimitive.Root>,
 	React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
 		VariantProps<typeof toggleVariants>
 >(({ className, variant, size, ...props }, ref) => (
--- a/frontend/lib/constants.ts
+++ b/frontend/lib/constants.ts
@@ -1,2 +1,3 @@
 export const API_URL = process.env.NEXT_PUBLIC_API_URL ?? "";
 export const SITE_NAME = "Latosa® Escrima";
+export const BASE_URL = process.env.SERVER_NAME ?? "latosa.cems.dev";
--- a/frontend/lib/hasPermissions.ts
+++ b/frontend/lib/hasPermissions.ts
@@ -1,25 +1,43 @@
 import { Role } from "@/types/types";

-export default function hasPermissions(
-	roles: Role[],
-	permissions: { [key: string]: string[] },
-) {
+type PermissionResult<T extends Record<string, readonly string[]>> = {
+	[K in keyof T]: {
+		[A in T[K][number]]: boolean;
+	} & { all: boolean }; // Per-resource 'all'
+} & { all: boolean }; // Global 'all'
+
+// hasPermissions function with 'all' flags
+export default function hasPermissions<
+	T extends Record<string, readonly string[]>,
+>(roles: Role[], permissions: T): PermissionResult<T> {
+	// Build permissions set
 	const permissionsSet: Map<string, null> = new Map();
 	for (const role of roles) {
 		if (!role.permissions) continue;
-		for (const perm of role?.permissions) {
-			const key = perm.resource + ":" + perm.action;
+		for (const perm of role.permissions) {
+			const key = `${perm.resource}:${perm.action}`;
 			permissionsSet.set(key, null);
 		}
 	}

-	for (const [perm, actions] of Object.entries(permissions)) {
+	// Build result
+	const result = { all: true } as PermissionResult<T>; // Initialize global 'all' as true
+	let globalAll = true; // Track global state
+
+	for (const resource in permissions) {
+		const actions = permissions[resource];
+		let resourceAll = true; // Track per-resource state
+
+		result[resource] = { all: true } as any; // Initialize resource object
 		for (const action of actions) {
-			if (!permissionsSet.has(perm + ":" + action)) {
-				return false;
-			}
+			const hasPerm = permissionsSet.has(`${resource}:${action}`);
+			(result[resource] as Record<string, boolean>)[action] = hasPerm;
+			resourceAll = resourceAll && hasPerm; // Update resource 'all'
 		}
+		result[resource].all = resourceAll; // Set resource 'all'
+		globalAll = globalAll && resourceAll; // Update global 'all'
 	}

-	return true;
+	result.all = globalAll; // Set global 'all'
+	return result as PermissionResult<T>;
 }
--- a/frontend/lib/utils.ts
+++ b/frontend/lib/utils.ts
@@ -8,3 +8,33 @@ export function cn(...inputs: ClassValue[]) {
 export function toTitleCase(str: string) {
 	return str.replace(/\b\w/g, (char) => char.toUpperCase());
 }
+
+namespace DiffUtils {
+	export function getDifferences<T extends object>(
+		obj1: T,
+		obj2: T,
+	): Partial<T> {
+		return Object.entries(obj2).reduce((diff, [key, value]) => {
+			if (
+				JSON.stringify(obj1[key as keyof T]) !==
+				JSON.stringify(obj2[key as keyof T])
+			) {
+				diff[key as keyof T] = value as T[keyof T];
+			}
+			return diff;
+		}, {} as Partial<T>);
+	}
+
+	export function isEmpty<T extends object>(obj: T) {
+		return Object.keys(obj).length === 0;
+	}
+}
+
+// Make it globally available
+if (typeof window !== "undefined") {
+	(window as any).DiffUtils = DiffUtils;
+} else {
+	(global as any).DiffUtils = DiffUtils;
+}
+
+export default DiffUtils;
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -16,6 +16,7 @@
 				"@radix-ui/react-collapsible": "^1.1.2",
 				"@radix-ui/react-dialog": "^1.1.4",
 				"@radix-ui/react-dropdown-menu": "^2.1.4",
+				"@radix-ui/react-hover-card": "^1.1.6",
 				"@radix-ui/react-label": "^2.1.1",
 				"@radix-ui/react-navigation-menu": "^1.2.3",
 				"@radix-ui/react-popover": "^1.1.4",
@@ -1354,6 +1355,166 @@
 				}
 			}
 		},
+		"node_modules/@radix-ui/react-hover-card": {
+			"version": "1.1.6",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-hover-card/-/react-hover-card-1.1.6.tgz",
+			"integrity": "sha512-E4ozl35jq0VRlrdc4dhHrNSV0JqBb4Jy73WAhBEK7JoYnQ83ED5r0Rb/XdVKw89ReAJN38N492BAPBZQ57VmqQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/primitive": "1.1.1",
+				"@radix-ui/react-compose-refs": "1.1.1",
+				"@radix-ui/react-context": "1.1.1",
+				"@radix-ui/react-dismissable-layer": "1.1.5",
+				"@radix-ui/react-popper": "1.2.2",
+				"@radix-ui/react-portal": "1.1.4",
+				"@radix-ui/react-presence": "1.1.2",
+				"@radix-ui/react-primitive": "2.0.2",
+				"@radix-ui/react-use-controllable-state": "1.1.0"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-hover-card/node_modules/@radix-ui/react-arrow": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.2.tgz",
+			"integrity": "sha512-G+KcpzXHq24iH0uGG/pF8LyzpFJYGD4RfLjCIBfGdSLXvjLHST31RUiRVrupIBMvIppMgSzQ6l66iAxl03tdlg==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/react-primitive": "2.0.2"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-hover-card/node_modules/@radix-ui/react-dismissable-layer": {
+			"version": "1.1.5",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.5.tgz",
+			"integrity": "sha512-E4TywXY6UsXNRhFrECa5HAvE5/4BFcGyfTyK36gP+pAW1ed7UTK4vKwdr53gAJYwqbfCWC6ATvJa3J3R/9+Qrg==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/primitive": "1.1.1",
+				"@radix-ui/react-compose-refs": "1.1.1",
+				"@radix-ui/react-primitive": "2.0.2",
+				"@radix-ui/react-use-callback-ref": "1.1.0",
+				"@radix-ui/react-use-escape-keydown": "1.1.0"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-hover-card/node_modules/@radix-ui/react-popper": {
+			"version": "1.2.2",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.2.tgz",
+			"integrity": "sha512-Rvqc3nOpwseCyj/rgjlJDYAgyfw7OC1tTkKn2ivhaMGcYt8FSBlahHOZak2i3QwkRXUXgGgzeEe2RuqeEHuHgA==",
+			"license": "MIT",
+			"dependencies": {
+				"@floating-ui/react-dom": "^2.0.0",
+				"@radix-ui/react-arrow": "1.1.2",
+				"@radix-ui/react-compose-refs": "1.1.1",
+				"@radix-ui/react-context": "1.1.1",
+				"@radix-ui/react-primitive": "2.0.2",
+				"@radix-ui/react-use-callback-ref": "1.1.0",
+				"@radix-ui/react-use-layout-effect": "1.1.0",
+				"@radix-ui/react-use-rect": "1.1.0",
+				"@radix-ui/react-use-size": "1.1.0",
+				"@radix-ui/rect": "1.1.0"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-hover-card/node_modules/@radix-ui/react-portal": {
+			"version": "1.1.4",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.4.tgz",
+			"integrity": "sha512-sn2O9k1rPFYVyKd5LAJfo96JlSGVFpa1fS6UuBJfrZadudiw5tAmru+n1x7aMRQ84qDM71Zh1+SzK5QwU0tJfA==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/react-primitive": "2.0.2",
+				"@radix-ui/react-use-layout-effect": "1.1.0"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-hover-card/node_modules/@radix-ui/react-primitive": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.2.tgz",
+			"integrity": "sha512-Ec/0d38EIuvDF+GZjcMU/Ze6MxntVJYO/fRlCPhCaVUyPY9WTalHJw54tp9sXeJo3tlShWpy41vQRgLRGOuz+w==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/react-slot": "1.1.2"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@radix-ui/react-id": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz",
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -17,6 +17,7 @@
 		"@radix-ui/react-collapsible": "^1.1.2",
 		"@radix-ui/react-dialog": "^1.1.4",
 		"@radix-ui/react-dropdown-menu": "^2.1.4",
+		"@radix-ui/react-hover-card": "^1.1.6",
 		"@radix-ui/react-label": "^2.1.1",
 		"@radix-ui/react-navigation-menu": "^1.2.3",
 		"@radix-ui/react-popover": "^1.1.4",
--- a/frontend/types/global.d.ts
+++ b/frontend/types/global.d.ts
@@ -0,0 +1,16 @@
+// types/global.d.ts
+declare namespace DiffUtils {
+	function getDifferences<T extends object>(obj1: T, obj2: T): Partial<T>;
+	function isEmpty<T extends object>(obj: T): boolean;
+}
+
+declare global {
+	interface Window {
+		DiffUtils: typeof DiffUtils;
+	}
+	namespace NodeJS {
+		interface Global {
+			DiffUtils: typeof DiffUtils;
+		}
+	}
+}