From 7cb633b4c6f650c93150f7201b528b2e7a4a5307 Mon Sep 17 00:00:00 2001
From: cdricms <36056008+cdricms@users.noreply.github.com>
Date: Thu, 6 Mar 2025 17:34:52 +0100
Subject: [PATCH] Fixed creation of users + better frontend handling of
 permissions

---
 backend/api/shortcodes/shortcodes.go          |  28 +-
 backend/api/users/new.go                      |  29 +-
 backend/api/users/update.go                   |  88 ++++-
 backend/api/users/users.go                    |   1 +
 backend/utils/get_diff.go                     |  42 ++
 frontend/app/(auth)/dashboard/blogs/blogs.tsx |  16 +-
 .../app/(auth)/dashboard/blogs/new/_new.tsx   |  16 +
 .../app/(auth)/dashboard/blogs/new/page.tsx   |  31 +-
 frontend/app/(auth)/dashboard/blogs/page.tsx  |   4 +-
 .../(auth)/dashboard/members/[uuid]/_user.tsx | 238 ------------
 .../(auth)/dashboard/members/[uuid]/page.tsx  |  20 -
 .../app/(auth)/dashboard/members/page.tsx     |   2 +-
 .../(auth)/dashboard/planning/_planning.tsx   |   8 +-
 .../app/(auth)/dashboard/planning/page.tsx    |   2 +-
 .../(auth)/dashboard/settings/media/page.tsx  |   2 +-
 .../dashboard/settings/roles/_roles.tsx       |  24 +-
 .../(auth)/dashboard/settings/roles/page.tsx  |   2 +-
 .../dashboard/settings/shortcodes/page.tsx    |   2 +-
 frontend/app/(main)/page.tsx                  |   2 +-
 frontend/app/globals.css                      |   2 +
 frontend/app/layout.tsx                       |   1 +
 frontend/app/robots.ts                        |  13 +
 frontend/app/sitemap.ts                       |  43 +++
 frontend/components/article.tsx               |   4 +-
 frontend/components/article/delete-button.tsx |  10 +-
 .../components/{ => editor}/editor-menu.tsx   | 148 +++++---
 .../components/editor/extensions/marks.ts     | 222 +++++++++++
 .../{editor.tsx => editor/index.tsx}          |   3 +
 frontend/components/event-dialog.tsx          | 359 +++++++++---------
 frontend/components/footer.tsx                |  53 +--
 frontend/components/login-form.tsx            |  43 +--
 frontend/components/member-dialog.tsx         | 337 ++++++++++------
 frontend/components/members-table.tsx         | 161 ++++----
 frontend/components/shortcodes-table.tsx      |  36 +-
 frontend/components/ui/calendar.tsx           | 142 +++----
 frontend/components/ui/hover-card.tsx         |  29 ++
 frontend/components/ui/scroll-area.tsx        |   2 +-
 frontend/components/ui/toast.tsx              |   2 +-
 frontend/components/ui/toggle-group.tsx       |   2 +-
 frontend/components/ui/toggle.tsx             |   2 +-
 frontend/lib/constants.ts                     |   1 +
 frontend/lib/hasPermissions.ts                |  40 +-
 frontend/lib/utils.ts                         |  30 ++
 frontend/package-lock.json                    | 161 ++++++++
 frontend/package.json                         |   1 +
 frontend/types/global.d.ts                    |  16 +
 46 files changed, 1511 insertions(+), 909 deletions(-)
 create mode 100644 backend/utils/get_diff.go
 create mode 100644 frontend/app/(auth)/dashboard/blogs/new/_new.tsx
 delete mode 100644 frontend/app/(auth)/dashboard/members/[uuid]/_user.tsx
 delete mode 100644 frontend/app/(auth)/dashboard/members/[uuid]/page.tsx
 create mode 100644 frontend/app/robots.ts
 create mode 100644 frontend/app/sitemap.ts
 rename frontend/components/{ => editor}/editor-menu.tsx (83%)
 create mode 100644 frontend/components/editor/extensions/marks.ts
 rename frontend/components/{editor.tsx => editor/index.tsx} (96%)
 create mode 100644 frontend/components/ui/hover-card.tsx
 create mode 100644 frontend/types/global.d.ts

diff --git a/backend/api/shortcodes/shortcodes.go b/backend/api/shortcodes/shortcodes.go
index fb30284..9905c4e 100644
--- a/backend/api/shortcodes/shortcodes.go
+++ b/backend/api/shortcodes/shortcodes.go
@@ -2,15 +2,21 @@ package shortcodes
 
 import (
 	"context"
+	"fmt"
 	"net/http"
+	"os"
 
 	"fr.latosa-escrima/core"
 	"fr.latosa-escrima/core/models"
+	"fr.latosa-escrima/utils"
 )
 
 func HandleShortcodes(w http.ResponseWriter, r *http.Request) {
 	var shortcodes []models.Shortcode
-	err := core.DB.NewSelect().Model(&shortcodes).Scan(context.Background())
+	err := core.DB.NewSelect().
+		Model(&shortcodes).
+		Relation("Media").
+		Scan(context.Background())
 	if err != nil {
 		core.JSONError{
 			Status:  core.Error,
@@ -19,6 +25,26 @@ func HandleShortcodes(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
+	scheme := "http"
+	if r.TLS != nil || os.Getenv("ENVIRONMENT") != "DEV" { // Check if the request is over HTTPS
+		scheme = "https"
+	}
+
+	// Extract the host
+	host := r.Host
+	baseURL := fmt.Sprintf("%s://%s", scheme, host)
+	if os.Getenv("ENVIRONMENT") != "DEV" {
+		baseURL += "/api"
+	}
+	shortcodes = utils.Map(shortcodes, func(s models.Shortcode) models.Shortcode {
+		if s.MediaID == nil {
+			return s
+		}
+		s.Media.Author = nil
+		s.Media.URL = fmt.Sprintf("%s/media/%s/file", baseURL, s.MediaID)
+		return s
+	})
+
 	core.JSONSuccess{
 		Status:  core.Success,
 		Message: "Shortcodes retrieved.",
diff --git a/backend/api/users/new.go b/backend/api/users/new.go
index 08c7368..74449a4 100644
--- a/backend/api/users/new.go
+++ b/backend/api/users/new.go
@@ -8,9 +8,11 @@ import (
 
 	core "fr.latosa-escrima/core"
 	"fr.latosa-escrima/core/models"
+	"fr.latosa-escrima/utils"
 )
 
 func HandleNew(w http.ResponseWriter, r *http.Request) {
+	ctx := context.Background()
 	var user models.User
 	err := json.NewDecoder(r.Body).Decode(&user)
 	if err != nil {
@@ -22,15 +24,8 @@ func HandleNew(w http.ResponseWriter, r *http.Request) {
 	}
 	log.Println("User : ", user)
 
-	res, err := user.Insert(core.DB, context.Background())
+	res, err := user.Insert(core.DB, ctx)
 	log.Println(res)
-	// if res == nil {
-	// 	core.JSONError{
-	// 		Status:  core.Error,
-	// 		Message: "The user couldn't be inserted.",
-	// 	}.Respond(w, http.StatusNotAcceptable)
-	// 	return
-	// }
 
 	if err != nil {
 		core.JSONError{
@@ -40,6 +35,24 @@ func HandleNew(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
+	userRoles := utils.Map(user.Roles, func(role models.Role) models.UserToRole {
+		return models.UserToRole{
+			UserID: user.UserID,
+			RoleID: role.ID,
+		}
+	})
+
+	for _, userRole := range userRoles {
+		_, err := core.DB.NewInsert().Model(&userRole).Ignore().Exec(ctx)
+		if err != nil {
+			core.JSONError{
+				Status:  core.Error,
+				Message: err.Error(),
+			}.Respond(w, http.StatusInternalServerError)
+			return
+		}
+	}
+
 	core.JSONSuccess{
 		Status:  core.Success,
 		Message: "User inserted successfully.",
diff --git a/backend/api/users/update.go b/backend/api/users/update.go
index 18950dc..fb05a92 100644
--- a/backend/api/users/update.go
+++ b/backend/api/users/update.go
@@ -4,6 +4,7 @@ import (
 	"context"
 	"encoding/json"
 	"fmt"
+	"log"
 	"net/http"
 	"reflect"
 	"strings"
@@ -11,6 +12,9 @@ import (
 
 	"fr.latosa-escrima/core"
 	"fr.latosa-escrima/core/models"
+	"fr.latosa-escrima/utils"
+	"github.com/google/uuid"
+	"github.com/uptrace/bun"
 )
 
 type UpdateUserArgs struct {
@@ -20,9 +24,11 @@ type UpdateUserArgs struct {
 	Password   *string                `json:"password,omitempty"`
 	Phone      *string                `json:"phone,omitempty"`
 	Attributes *models.UserAttributes `json:"attributes"`
+	Roles      *[]models.Role         `json:"roles"`
 }
 
 func HandleUpdate(w http.ResponseWriter, r *http.Request) {
+	ctx := context.Background()
 	var updateArgs UpdateUserArgs
 	err := json.NewDecoder(r.Body).Decode(&updateArgs)
 	if err != nil {
@@ -33,13 +39,34 @@ func HandleUpdate(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
+	user_uuid := r.PathValue("user_uuid")
+	uid, err := uuid.Parse(user_uuid)
+	if err != nil {
+		return
+	}
 	var user models.User
+	err = core.DB.
+		NewSelect().
+		Model(&user).
+		Where("user_id = ?", user_uuid).
+		Relation("Roles").
+		Scan(ctx)
+	if err != nil {
+		core.JSONError{
+			Status:  core.Error,
+			Message: err.Error(),
+		}.Respond(w, http.StatusInternalServerError)
+		return
+	}
 	updateQuery := core.DB.NewUpdate().Model(&user)
 
+	rolesInsert := []*bun.InsertQuery{}
+	rolesRemoved := []*bun.DeleteQuery{}
+
 	val := reflect.ValueOf(updateArgs)
 	typ := reflect.TypeOf(updateArgs)
 
-	for i := 0; i < val.NumField(); i++ {
+	for i := range val.NumField() {
 		field := val.Field(i)
 		fieldname := typ.Field(i).Name
 
@@ -52,6 +79,37 @@ func HandleUpdate(w http.ResponseWriter, r *http.Request) {
 		if field.IsValid() && !field.IsNil() && !field.IsZero() {
 			if fieldname == "Password" {
 				updateQuery.Set(fmt.Sprintf("%s = crypt(?, gen_salt('bf'))", strings.Split(tag, ",")[0]), field.Interface())
+			} else if fieldname == "Roles" {
+				_roles := field.Interface().(*[]models.Role)
+				if _roles == nil {
+					continue
+				}
+
+				currentRoles := utils.Map(user.Roles, func(role models.Role) uuid.UUID {
+					return role.ID
+				})
+
+				roles := utils.Map(*_roles, func(role models.Role) uuid.UUID {
+					return role.ID
+				})
+
+				log.Println(user.Roles)
+				toAdd, toRemove := utils.GetDiff(currentRoles, roles)
+				fmt.Println(toAdd, toRemove)
+
+				rolesInsert = utils.Map(toAdd, func(id uuid.UUID) *bun.InsertQuery {
+					userRole := models.UserToRole{
+						UserID: uid,
+						RoleID: id,
+					}
+					return core.DB.NewInsert().Model(&userRole).Ignore()
+				})
+
+				rolesRemoved = utils.Map(toRemove, func(id uuid.UUID) *bun.DeleteQuery {
+					return core.DB.NewDelete().Model((*models.UserToRole)(nil)).
+						Where("user_id = ? AND role_id = ?", uid, id)
+				})
+
 			} else {
 				updateQuery.Set(fmt.Sprintf("%s = ?", strings.Split(tag, ",")[0]), field.Interface())
 			}
@@ -61,11 +119,9 @@ func HandleUpdate(w http.ResponseWriter, r *http.Request) {
 	// Always update the `updated_at` field
 	updateQuery.Set("updated_at = ?", time.Now())
 
-	uuid := r.PathValue("user_uuid")
 	_, err = updateQuery.
-		Where("user_id = ?", uuid).
-		Returning("*").
-		Exec(context.Background())
+		Where("user_id = ?", user_uuid).
+		Exec(ctx)
 
 	if err != nil {
 		core.JSONError{
@@ -75,6 +131,28 @@ func HandleUpdate(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
+	for _, insert := range rolesInsert {
+		_, err = insert.Exec(ctx)
+		if err != nil {
+			core.JSONError{
+				Status:  core.Error,
+				Message: err.Error(),
+			}.Respond(w, http.StatusInternalServerError)
+			return
+		}
+	}
+
+	for _, remove := range rolesRemoved {
+		_, err = remove.Exec(ctx)
+		if err != nil {
+			core.JSONError{
+				Status:  core.Error,
+				Message: err.Error(),
+			}.Respond(w, http.StatusInternalServerError)
+			return
+		}
+	}
+
 	user.Password = ""
 
 	core.JSONSuccess{
diff --git a/backend/api/users/users.go b/backend/api/users/users.go
index 65bf362..35ab49b 100644
--- a/backend/api/users/users.go
+++ b/backend/api/users/users.go
@@ -13,6 +13,7 @@ func HandleUsers(w http.ResponseWriter, r *http.Request) {
 	var users []models.User
 	count, err := core.DB.NewSelect().
 		Model(&users).
+		Order("created_at ASC").
 		Relation("Roles").
 		ScanAndCount(context.Background())
 
diff --git a/backend/utils/get_diff.go b/backend/utils/get_diff.go
new file mode 100644
index 0000000..5481eb3
--- /dev/null
+++ b/backend/utils/get_diff.go
@@ -0,0 +1,42 @@
+package utils
+
+import (
+	"log"
+)
+
+// GetDiff returns two slices: elements to add and elements to remove
+func GetDiff[T comparable](current, newm []T) ([]T, []T) {
+	log.Println(current, newm)
+	// Use a single map with an int to track state:
+	// 1: only in current, 2: only in new, 3: in both
+	presence := make(map[T]int)
+
+	// Mark all items in current as 1
+	for _, item := range current {
+		presence[item] = 1
+	}
+
+	// Update map based on newm: add 2 if not present, set to 3 if present
+	for _, item := range newm {
+		if val, exists := presence[item]; exists {
+			presence[item] = val + 2 // 1 -> 3 (both)
+		} else {
+			presence[item] = 2 // only in new
+		}
+	}
+
+	var toAdd, toRemove []T
+
+	// Iterate once over the map to build results
+	for item, state := range presence {
+		switch state {
+		case 1: // Only in current -> remove
+			toRemove = append(toRemove, item)
+		case 2: // Only in new -> add
+			toAdd = append(toAdd, item)
+			// case 3: in both, do nothing
+		}
+	}
+
+	return toAdd, toRemove
+}
diff --git a/frontend/app/(auth)/dashboard/blogs/blogs.tsx b/frontend/app/(auth)/dashboard/blogs/blogs.tsx
index 34114c5..849c98d 100644
--- 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={() =>
diff --git a/frontend/app/(auth)/dashboard/blogs/new/_new.tsx b/frontend/app/(auth)/dashboard/blogs/new/_new.tsx
new file mode 100644
index 0000000..1fa8dd9
--- /dev/null
+++ 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 />;
+}
diff --git a/frontend/app/(auth)/dashboard/blogs/new/page.tsx b/frontend/app/(auth)/dashboard/blogs/new/page.tsx
index caaef21..a8b00ce 100644
--- 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 />;
 }
diff --git a/frontend/app/(auth)/dashboard/blogs/page.tsx b/frontend/app/(auth)/dashboard/blogs/page.tsx
index f9a2606..fcd32bd 100644
--- 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");
 	}
diff --git a/frontend/app/(auth)/dashboard/members/[uuid]/_user.tsx b/frontend/app/(auth)/dashboard/members/[uuid]/_user.tsx
deleted file mode 100644
index 9b7241a..0000000
--- a/frontend/app/(auth)/dashboard/members/[uuid]/_user.tsx
+++ /dev/null
@@ -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>
-	);
-}
diff --git a/frontend/app/(auth)/dashboard/members/[uuid]/page.tsx b/frontend/app/(auth)/dashboard/members/[uuid]/page.tsx
deleted file mode 100644
index 8b92c2d..0000000
--- a/frontend/app/(auth)/dashboard/members/[uuid]/page.tsx
+++ /dev/null
@@ -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} />;
-}
diff --git a/frontend/app/(auth)/dashboard/members/page.tsx b/frontend/app/(auth)/dashboard/members/page.tsx
index c75379c..1068525 100644
--- 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");
 	}
diff --git a/frontend/app/(auth)/dashboard/planning/_planning.tsx b/frontend/app/(auth)/dashboard/planning/_planning.tsx
index baa44d4..514346f 100644
--- 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}
 			/>
diff --git a/frontend/app/(auth)/dashboard/planning/page.tsx b/frontend/app/(auth)/dashboard/planning/page.tsx
index f5d326e..263790b 100644
--- 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");
 	}
diff --git a/frontend/app/(auth)/dashboard/settings/media/page.tsx b/frontend/app/(auth)/dashboard/settings/media/page.tsx
index 810e001..ea46c6b 100644
--- 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");
 	}
diff --git a/frontend/app/(auth)/dashboard/settings/roles/_roles.tsx b/frontend/app/(auth)/dashboard/settings/roles/_roles.tsx
index 219232c..21e8dff 100644
--- 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}
diff --git a/frontend/app/(auth)/dashboard/settings/roles/page.tsx b/frontend/app/(auth)/dashboard/settings/roles/page.tsx
index d2e1ef4..0a20022 100644
--- 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");
 	}
diff --git a/frontend/app/(auth)/dashboard/settings/shortcodes/page.tsx b/frontend/app/(auth)/dashboard/settings/shortcodes/page.tsx
index de9a1f5..39b3e3f 100644
--- 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");
 	}
diff --git a/frontend/app/(main)/page.tsx b/frontend/app/(main)/page.tsx
index 8a9386c..e5cd618 100644
--- 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>
 	);
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index 32bac5f..27321e2 100644
--- 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;
 	}
diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
index f4c7939..b1fed24 100644
--- 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";
diff --git a/frontend/app/robots.ts b/frontend/app/robots.ts
new file mode 100644
index 0000000..939873a
--- /dev/null
+++ 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`,
+	};
+}
diff --git a/frontend/app/sitemap.ts b/frontend/app/sitemap.ts
new file mode 100644
index 0000000..73c55e9
--- /dev/null
+++ 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,
+		},
+	];
+}
diff --git a/frontend/components/article.tsx b/frontend/components/article.tsx
index 0b50a80..c8dfc68 100644
--- 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">
diff --git a/frontend/components/article/delete-button.tsx b/frontend/components/article/delete-button.tsx
index a27348b..f1900d7 100644
--- 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;
 	}
 
diff --git a/frontend/components/editor-menu.tsx b/frontend/components/editor/editor-menu.tsx
similarity index 83%
rename from frontend/components/editor-menu.tsx
rename to frontend/components/editor/editor-menu.tsx
index ca5dfd4..1bc3b09 100644
--- a/frontend/components/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";
diff --git a/frontend/components/editor/extensions/marks.ts b/frontend/components/editor/extensions/marks.ts
new file mode 100644
index 0000000..073b555
--- /dev/null
+++ 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" }),
+		};
+	},
+});
diff --git a/frontend/components/editor.tsx b/frontend/components/editor/index.tsx
similarity index 96%
rename from frontend/components/editor.tsx
rename to frontend/components/editor/index.tsx
index f8122e1..ad73198 100644
--- a/frontend/components/editor.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,
diff --git a/frontend/components/event-dialog.tsx b/frontend/components/event-dialog.tsx
index ff7fbbe..fb10634 100644
--- 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>
 
diff --git a/frontend/components/footer.tsx b/frontend/components/footer.tsx
index e89e74a..4f053c6 100644
--- 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">
diff --git a/frontend/components/login-form.tsx b/frontend/components/login-form.tsx
index 0ee4348..7b86473 100644
--- 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>
 	);
 }
diff --git a/frontend/components/member-dialog.tsx b/frontend/components/member-dialog.tsx
index 730fb4c..13dc5ae 100644
--- 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">
diff --git a/frontend/components/members-table.tsx b/frontend/components/members-table.tsx
index 75bcb51..58176e3 100644
--- 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>
 								))}
diff --git a/frontend/components/shortcodes-table.tsx b/frontend/components/shortcodes-table.tsx
index aa69b32..ed42314 100644
--- 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)
diff --git a/frontend/components/ui/calendar.tsx b/frontend/components/ui/calendar.tsx
index 115cff9..5c0a682 100644
--- 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 };
diff --git a/frontend/components/ui/hover-card.tsx b/frontend/components/ui/hover-card.tsx
new file mode 100644
index 0000000..79f7b10
--- /dev/null
+++ 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 };
diff --git a/frontend/components/ui/scroll-area.tsx b/frontend/components/ui/scroll-area.tsx
index 6275cf1..9cc0e21 100644
--- 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
 	>
diff --git a/frontend/components/ui/toast.tsx b/frontend/components/ui/toast.tsx
index 033ed9a..d334732 100644
--- 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) => {
diff --git a/frontend/components/ui/toggle-group.tsx b/frontend/components/ui/toggle-group.tsx
index fef6b02..e62be8c 100644
--- 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) => (
diff --git a/frontend/components/ui/toggle.tsx b/frontend/components/ui/toggle.tsx
index 3b0b220..85f2e28 100644
--- 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) => (
diff --git a/frontend/lib/constants.ts b/frontend/lib/constants.ts
index f9175be..da1de46 100644
--- 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";
diff --git a/frontend/lib/hasPermissions.ts b/frontend/lib/hasPermissions.ts
index ebfc135..e935289 100644
--- 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>;
 }
diff --git a/frontend/lib/utils.ts b/frontend/lib/utils.ts
index 4dcc6f4..58ce0e6 100644
--- 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;
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index cacd2fa..6a10e29 100644
--- 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",
diff --git a/frontend/package.json b/frontend/package.json
index bc88ef3..fe90a49 100644
--- 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",
diff --git a/frontend/types/global.d.ts b/frontend/types/global.d.ts
new file mode 100644
index 0000000..49f647c
--- /dev/null
+++ 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;
+		}
+	}
+}