From 4960b51ee3ad7f69eae9f0367df295a6e2a2cb84 Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Wed, 24 Jul 2024 12:39:18 +0200
Subject: [PATCH 01/12] :sparkles: Searchbar fully working

---
 .../FolderListContainer/index.tsx             | 199 ++++++++----------
 .../SearchBar/classes.module.scss             |  80 +++++--
 .../DesignSystem/SearchBar/index.tsx          |  83 ++++----
 3 files changed, 189 insertions(+), 173 deletions(-)

diff --git a/src/front/Components/DesignSystem/FolderListContainer/index.tsx b/src/front/Components/DesignSystem/FolderListContainer/index.tsx
index 0ac30339..4c3f0a39 100644
--- a/src/front/Components/DesignSystem/FolderListContainer/index.tsx
+++ b/src/front/Components/DesignSystem/FolderListContainer/index.tsx
@@ -2,8 +2,8 @@ import Module from "@Front/Config/Module";
 import { OfficeFolder } from "le-coffre-resources/dist/Notary";
 import { EDocumentStatus } from "le-coffre-resources/dist/Notary/Document";
 import Link from "next/link";
-import { NextRouter, useRouter } from "next/router";
-import React from "react";
+import { useRouter } from "next/router";
+import React, { useCallback, useEffect } from "react";
 
 import BlockList, { IBlock } from "../BlockList";
 import Button from "../Button";
@@ -19,110 +19,17 @@ type IProps = {
 	onCloseLeftSide?: () => void;
 };
 
-type IPropsClass = IProps & {
-	router: NextRouter;
-	selectedFolder: string;
-};
+export default function FolderListContainer(props: IProps) {
+	const router = useRouter();
+	const { folderUid } = router.query;
+	const { folders, isArchived } = props;
 
-type IState = {
-	filteredFolders: OfficeFolder[];
-	blocks: IBlock[];
-};
-
-class FolderListContainerClass extends React.Component<IPropsClass, IState> {
-	private redirectPath: string = this.props.isArchived
+	const redirectPath: string = isArchived
 		? Module.getInstance().get().modules.pages.Folder.pages.FolderArchived.pages.FolderInformation.props.path
 		: Module.getInstance().get().modules.pages.Folder.pages.FolderInformation.props.path;
-	public constructor(props: IPropsClass) {
-		super(props);
-		this.state = {
-			filteredFolders: this.props.folders,
-			blocks: this.getBlocks(this.props.folders),
-		};
-		this.filterFolders = this.filterFolders.bind(this);
-		this.onSelectedFolder = this.onSelectedFolder.bind(this);
-	}
 
-	public override render(): JSX.Element {
-		const navigatePath = Module.getInstance().get().modules.pages.Folder.pages.CreateFolder.props.path;
-		return (
-			<div className={classes["root"]}>
-				<div className={classes["header"]}>
-					<div className={classes["searchbar"]}>
-						<SearchBar onChange={this.filterFolders} placeholder="Chercher un dossier" />
-					</div>
-					<div className={classes["folderlist-container"]}>
-						<BlockList blocks={this.state.blocks} onSelectedBlock={this.onSelectedFolder} />
-					</div>
-				</div>
-				{!this.props.isArchived && (
-					<div>
-						<Rules
-							mode={RulesMode.NECESSARY}
-							rules={[
-								{
-									action: AppRuleActions.create,
-									name: AppRuleNames.officeFolders,
-								},
-							]}>
-							<Link href={navigatePath}>
-								<Button fullwidth={true}>Créer un dossier</Button>
-							</Link>
-						</Rules>
-					</div>
-				)}
-			</div>
-		);
-	}
-
-	public override componentDidUpdate(prevProps: Readonly<IPropsClass>, prevState: Readonly<IState>, snapshot?: any): void {
-		if (prevProps.selectedFolder !== this.props.selectedFolder) {
-			this.setState({ filteredFolders: this.props.folders, blocks: this.getBlocks(this.props.folders) });
-		}
-	}
-	private getBlocks(folders: OfficeFolder[]): IBlock[] {
-		const pendingFolders = folders
-			.filter((folder) => {
-				const pendingDocuments = (folder.documents ?? []).filter(
-					(document) => document.document_status === EDocumentStatus.DEPOSITED,
-				);
-				return pendingDocuments.length >= 1;
-			})
-			.sort((folder1, folder2) => {
-				return folder1.created_at! > folder2.created_at! ? -1 : 1;
-			});
-
-		const otherFolders = folders
-			.filter((folder) => {
-				const pendingDocuments = (folder.documents ?? []).filter(
-					(document) => document.document_status === EDocumentStatus.DEPOSITED,
-				);
-				return pendingDocuments.length === 0;
-			})
-			.sort((folder1, folder2) => {
-				return folder1.created_at! > folder2.created_at! ? -1 : 1;
-			});
-
-		return [...pendingFolders, ...otherFolders].map((folder) => {
-			return {
-				id: folder.uid!,
-				name: folder.folder_number! + " - " + folder.name!,
-				selected: this.props.selectedFolder === folder.uid,
-				hasFlag: folder.documents?.some((document) => document.document_status === EDocumentStatus.DEPOSITED),
-			};
-		});
-	}
-
-	private onSelectedFolder(block: IBlock) {
-		const folder = this.props.folders.find((folder) => folder.uid === block.id);
-		if (!folder) return;
-		this.props.onSelectedFolder && this.props.onSelectedFolder(folder);
-		const path = this.redirectPath.replace("[folderUid]", folder.uid ?? "");
-		this.props.router.push(path);
-	}
-
-	private filterFolders(value: string): void {
-		const filteredFolders: OfficeFolder[] = this.props.folders.filter((folder) => {
+	const filterFolders = (value: string): void => {
+		const filteredFolders: OfficeFolder[] = folders.filter((folder) => {
 			const name = folder.name.toLowerCase();
 			const number = folder.folder_number.toLowerCase();
 			value = value.toLowerCase();
@@ -139,12 +46,86 @@ class FolderListContainerClass extends React.Component<IPropsClass, IState> {
 			return name.includes(value) || number.includes(value);
 		});
 
-		this.setState({ filteredFolders, blocks: this.getBlocks(filteredFolders) });
-	}
-}
+		setBlocks(getBlocks(filteredFolders));
+	};
 
-export default function FolderListContainer(props: IProps) {
-	const router = useRouter();
-	const { folderUid } = router.query;
-	return <FolderListContainerClass {...props} router={router} selectedFolder={folderUid as string} />;
+	const getBlocks = useCallback(
+		(folders: OfficeFolder[]): IBlock[] => {
+			const pendingFolders = folders
+				.filter((folder) => {
+					const pendingDocuments = (folder.documents ?? []).filter(
+						(document) => document.document_status === EDocumentStatus.DEPOSITED,
+					);
+					return pendingDocuments.length >= 1;
+				})
+				.sort((folder1, folder2) => {
+					return folder1.created_at! > folder2.created_at! ? -1 : 1;
+				});
+
+			const otherFolders = folders
+				.filter((folder) => {
+					const pendingDocuments = (folder.documents ?? []).filter(
+						(document) => document.document_status === EDocumentStatus.DEPOSITED,
+					);
+					return pendingDocuments.length === 0;
+				})
+				.sort((folder1, folder2) => {
+					return folder1.created_at! > folder2.created_at! ? -1 : 1;
+				});
+
+			return [...pendingFolders, ...otherFolders].map((folder) => {
+				return {
+					id: folder.uid!,
+					name: folder.folder_number! + " - " + folder.name!,
+					selected: folderUid === folder.uid,
+					hasFlag: folder.documents?.some((document) => document.document_status === EDocumentStatus.DEPOSITED),
+				};
+			});
+		},
+		[folderUid],
+	);
+
+	const [blocks, setBlocks] = React.useState<IBlock[]>(getBlocks(folders));
+
+	const onSelectedFolder = (block: IBlock) => {
+		const folder = folders.find((folder) => folder.uid === block.id);
+		if (!folder) return;
+		props.onSelectedFolder && props.onSelectedFolder(folder);
+		const path = redirectPath.replace("[folderUid]", folder.uid ?? "");
+		router.push(path);
+	};
+
+	useEffect(() => {
+		setBlocks(getBlocks(folders));
+	}, [folders, getBlocks]);
+
+	const navigatePath = Module.getInstance().get().modules.pages.Folder.pages.CreateFolder.props.path;
+	return (
+		<div className={classes["root"]}>
+			<div className={classes["header"]}>
+				<div className={classes["searchbar"]}>
+					<SearchBar onChange={filterFolders} placeholder="Chercher un dossier" />
+				</div>
+				<div className={classes["folderlist-container"]}>
+					<BlockList blocks={blocks} onSelectedBlock={onSelectedFolder} />
+				</div>
+			</div>
+			{!isArchived && (
+				<div>
+					<Rules
+						mode={RulesMode.NECESSARY}
+						rules={[
+							{
+								action: AppRuleActions.create,
+								name: AppRuleNames.officeFolders,
+							},
+						]}>
+						<Link href={navigatePath}>
+							<Button fullwidth={true}>Créer un dossier</Button>
+						</Link>
+					</Rules>
+				</div>
+			)}
+		</div>
+	);
 }
diff --git a/src/front/Components/DesignSystem/SearchBar/classes.module.scss b/src/front/Components/DesignSystem/SearchBar/classes.module.scss
index 326e7950..e4350b4e 100644
--- a/src/front/Components/DesignSystem/SearchBar/classes.module.scss
+++ b/src/front/Components/DesignSystem/SearchBar/classes.module.scss
@@ -2,30 +2,66 @@
 
 .root {
 	display: flex;
-	align-items: center;
-	padding-left: 24px;
-	background-color: var(--color-generic-white);
-	border: 1px solid var(--color-neutral-200);
-	position: relative;
+	padding: var(--spacing-2, 16px) var(--spacing-sm, 8px);
+	align-items: flex-start;
+	gap: var(--spacing-2, 16px);
 
-	.fake-placeholder {
-		position: absolute;
-		left: 47px;
-		top: 24px;
-		color: var(--color-neutral-500);
-		pointer-events: none;
+	border-radius: var(--input-radius, 0px);
+	border: 1px solid var(--input-main-border-default, #d7dce0);
+	background: var(--input-background, #fff);
+
+	&:hover {
+		border-radius: var(--input-radius, 0px);
+		border: 1px solid var(--input-main-border-hovered, #b4bec5);
+		background: var(--input-background, #fff);
 	}
 
-	.input {
-		border: 0;
-		margin-left: 8px;
-		padding: 24px 0;
-		width: 100%;
-		font-family: "Inter", sans-serif;
-		font-style: normal;
-		font-weight: 400;
-		font-size: 18px;
-		line-height: 22px;
-		color: var(--color-neutral-500);
+	&[data-has-value="true"] {
+		border-radius: var(--input-radius, 0px);
+		border: 1px solid var(--input-main-border-filled, #6d7e8a);
+		background: var(--input-background, #fff);
+	}
+
+	&[data-is-focused="true"] {
+		border-radius: var(--input-radius, 0px);
+		border: 1px solid var(--input-main-border-focused, #005bcb);
+		background: var(--input-background, #fff);
+	}
+
+	.input-container {
+		display: flex;
+		flex: 1;
+		gap: 8px;
+		padding: 0px var(--spacing-2, 16px);
+
+		.input {
+			flex: 1;
+			border: none;
+
+			color: var(--input-placeholder-filled, #24282e);
+
+			/* text/md/semibold */
+			font-family: var(--font-text-family, Poppins);
+			font-size: 16px;
+			font-style: normal;
+			font-weight: var(--font-text-weight-semibold, 600);
+			line-height: normal;
+			letter-spacing: 0.08px;
+
+			&::placeholder {
+				color: var(--input-placeholder-empty, #6d7e8a);
+				/* text/md/regular */
+				font-family: var(--font-text-family, Poppins);
+				font-size: 16px;
+				font-style: normal;
+				font-weight: var(--font-text-weight-regular, 400);
+				line-height: normal;
+				letter-spacing: 0.08px;
+			}
+		}
+
+		.cross {
+			cursor: pointer;
+		}
 	}
 }
diff --git a/src/front/Components/DesignSystem/SearchBar/index.tsx b/src/front/Components/DesignSystem/SearchBar/index.tsx
index 8c16ee0c..9289a034 100644
--- a/src/front/Components/DesignSystem/SearchBar/index.tsx
+++ b/src/front/Components/DesignSystem/SearchBar/index.tsx
@@ -1,54 +1,53 @@
-import LoopIcon from "@Assets/Icons/loop.svg";
-import Image from "next/image";
-import React from "react";
+import React, { useCallback } from "react";
 
-import Typography, { ETypo, ETypoColor } from "../Typography";
 import classes from "./classes.module.scss";
+import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline";
 
 type IProps = {
 	onChange?: (input: string) => void;
 	placeholder?: string;
 };
 
-type IState = {
-	hasValue: boolean;
-};
+export default function SearchBar({ onChange, placeholder = "Rechercher" }: IProps) {
+	const [isFocused, setIsFocused] = React.useState(false);
+	const [value, setValue] = React.useState("");
 
-export default class SearchBar extends React.Component<IProps, IState> {
-	static defaultProps = {
-		placeholder: "Search",
-	};
+	const handleOnChange = useCallback(
+		(event: React.ChangeEvent<HTMLInputElement>) => {
+			setValue(event.target.value);
+			onChange && onChange(event.target.value);
+		},
+		[onChange],
+	);
 
-	public constructor(props: IProps) {
-		super(props);
-		this.state = {
-			hasValue: false,
-		};
-		this.doesInputHaveValue = this.doesInputHaveValue.bind(this);
-		this.onChange = this.onChange.bind(this);
-	}
-	public override render(): JSX.Element {
-		return (
-			<div className={classes["root"]}>
-				<Image src={LoopIcon} alt="Loop icon" />
-				{!this.state.hasValue && (
-					<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_ERROR_600}>
-						<div className={classes["fake-placeholder"]}>{this.props.placeholder}</div>
-					</Typography>
-				)}
-				<input type="text" placeholder="" className={classes["input"]} onChange={this.onChange} />
+	const handleFocus = useCallback(() => {
+		setIsFocused(true);
+	}, []);
+
+	const handleBlur = useCallback(() => {
+		setIsFocused(false);
+	}, []);
+
+	const clearValue = useCallback(() => {
+		setValue("");
+		onChange && onChange("");
+	}, [onChange]);
+
+	return (
+		<label className={classes["root"]} data-is-focused={isFocused} data-has-value={value !== ""}>
+			<div className={classes["input-container"]}>
+				<MagnifyingGlassIcon width="24" height="24" />
+				<input
+					type="text"
+					value={value}
+					placeholder={placeholder}
+					className={classes["input"]}
+					onChange={handleOnChange}
+					onFocus={handleFocus}
+					onBlur={handleBlur}
+				/>
+				{value !== "" && <XMarkIcon width="24" height="24" className={classes["cross"]} onClick={clearValue} />}
 			</div>
-		);
-	}
-
-	private onChange(event: React.ChangeEvent<HTMLInputElement>) {
-		const hasValue = event.target.value.length > 0;
-		this.doesInputHaveValue(hasValue);
-		if (!this.props.onChange) return;
-		this.props.onChange(event.target.value);
-	}
-
-	private doesInputHaveValue(hasValue: boolean) {
-		this.setState({ hasValue });
-	}
+		</label>
+	);
 }

From 8ff373271b6ed21f6affa0397486e73c1cbf7fdb Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Wed, 24 Jul 2024 14:54:32 +0200
Subject: [PATCH 02/12] :sparkles: New nav without responsive

---
 .../DesignSystem/BlockList/index.tsx          | 48 -------------
 .../FolderArchivedListContainer/index.tsx     | 10 +--
 .../FolderListContainer/index.tsx             | 33 +++++----
 .../SearchBar/classes.module.scss             |  1 +
 .../DesignSystem/SearchBar/index.tsx          | 24 +++----
 .../BlockList/Block/classes.module.scss       | 29 ++++++++
 .../SearchBlockList/BlockList/Block/index.tsx | 44 ++++++++++++
 .../BlockList/classes.module.scss             |  0
 .../SearchBlockList/BlockList/index.tsx       | 23 +++++++
 .../SearchBlockList/classes.module.scss       | 30 ++++++++
 .../DesignSystem/SearchBlockList/index.tsx    | 69 +++++++++++++++++++
 .../DesignSystem/Typography/index.tsx         |  9 +--
 12 files changed, 233 insertions(+), 87 deletions(-)
 delete mode 100644 src/front/Components/DesignSystem/BlockList/index.tsx
 create mode 100644 src/front/Components/DesignSystem/SearchBlockList/BlockList/Block/classes.module.scss
 create mode 100644 src/front/Components/DesignSystem/SearchBlockList/BlockList/Block/index.tsx
 rename src/front/Components/DesignSystem/{ => SearchBlockList}/BlockList/classes.module.scss (100%)
 create mode 100644 src/front/Components/DesignSystem/SearchBlockList/BlockList/index.tsx
 create mode 100644 src/front/Components/DesignSystem/SearchBlockList/classes.module.scss
 create mode 100644 src/front/Components/DesignSystem/SearchBlockList/index.tsx

diff --git a/src/front/Components/DesignSystem/BlockList/index.tsx b/src/front/Components/DesignSystem/BlockList/index.tsx
deleted file mode 100644
index e733a3ac..00000000
--- a/src/front/Components/DesignSystem/BlockList/index.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import React, { useCallback } from "react";
-import classes from "./classes.module.scss";
-import Typography, { ETypo } from "../Typography";
-import ChevronIcon from "@Assets/Icons/chevron.svg";
-import Image from "next/image";
-import WarningBadge from "../WarningBadge";
-
-export type IBlock = {
-	name: string;
-	id: string;
-	selected: boolean;
-	rightIcon?: JSX.Element;
-	hasFlag?: boolean;
-};
-
-type IProps = {
-	blocks: IBlock[];
-	onSelectedBlock: (block: IBlock) => void;
-};
-export default function BlockList({ blocks, onSelectedBlock }: IProps) {
-	const selectBlock = useCallback(
-		(e: React.MouseEvent<HTMLDivElement>) => {
-			onSelectedBlock && onSelectedBlock(blocks.find((folder) => folder.id === e.currentTarget.id)!);
-		},
-		[blocks, onSelectedBlock],
-	);
-
-	return (
-		<div>
-			{blocks.map((folder) => {
-				return (
-					<div onClick={selectBlock} key={folder.id} id={folder.id}>
-						<div className={classes["root"]} data-selected={folder.selected.toString()}>
-							<div className={classes["left-side"]}>
-								<Typography typo={ETypo.TEXT_MD_REGULAR}>{folder.name}</Typography>
-							</div>
-							<div className={classes["right-side"]}>
-								{folder.hasFlag && <WarningBadge />}
-								{folder.rightIcon}
-								<Image alt="chevron" src={ChevronIcon} />
-							</div>
-						</div>
-					</div>
-				);
-			})}
-		</div>
-	);
-}
diff --git a/src/front/Components/DesignSystem/FolderArchivedListContainer/index.tsx b/src/front/Components/DesignSystem/FolderArchivedListContainer/index.tsx
index 19797c52..c77c890c 100644
--- a/src/front/Components/DesignSystem/FolderArchivedListContainer/index.tsx
+++ b/src/front/Components/DesignSystem/FolderArchivedListContainer/index.tsx
@@ -5,12 +5,13 @@ import Link from "next/link";
 import { NextRouter, useRouter } from "next/router";
 import React from "react";
 
-import BlockList, { IBlock } from "../BlockList";
 import Button from "../Button";
 import SearchBar from "../SearchBar";
 import classes from "./classes.module.scss";
 import Rules, { RulesMode } from "@Front/Components/Elements/Rules";
 import { AppRuleActions, AppRuleNames } from "@Front/Api/Entities/rule";
+import { IBlock } from "../SearchBlockList/BlockList/Block";
+import BlockList from "../SearchBlockList/BlockList";
 
 type IProps = {
 	folders: OfficeFolder[];
@@ -106,9 +107,10 @@ class FolderArchivedListContainerClass extends React.Component<IPropsClass, ISta
 		return [...pendingFolders, ...otherFolders].map((folder) => {
 			return {
 				id: folder.uid!,
-				name: folder.folder_number! + " - " + folder.name!,
-				selected: this.props.selectedFolder === folder.uid,
-				hasFlag: folder.documents?.some((document) => document.document_status === EDocumentStatus.DEPOSITED),
+				primaryText: folder.name,
+				isActive: this.props.selectedFolder === folder.uid,
+				secondaryText: folder.folder_number,
+				showAlert: folder.documents?.some((document) => document.document_status === EDocumentStatus.DEPOSITED),
 			};
 		});
 	}
diff --git a/src/front/Components/DesignSystem/FolderListContainer/index.tsx b/src/front/Components/DesignSystem/FolderListContainer/index.tsx
index 4c3f0a39..3d04a58d 100644
--- a/src/front/Components/DesignSystem/FolderListContainer/index.tsx
+++ b/src/front/Components/DesignSystem/FolderListContainer/index.tsx
@@ -5,12 +5,14 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import React, { useCallback, useEffect } from "react";
 
-import BlockList, { IBlock } from "../BlockList";
 import Button from "../Button";
 import SearchBar from "../SearchBar";
 import classes from "./classes.module.scss";
 import Rules, { RulesMode } from "@Front/Components/Elements/Rules";
 import { AppRuleActions, AppRuleNames } from "@Front/Api/Entities/rule";
+import { IBlock } from "../SearchBlockList/BlockList/Block";
+import BlockList from "../SearchBlockList/BlockList";
+import SearchBlockList from "../SearchBlockList";
 
 type IProps = {
 	folders: OfficeFolder[];
@@ -76,9 +78,10 @@ export default function FolderListContainer(props: IProps) {
 			return [...pendingFolders, ...otherFolders].map((folder) => {
 				return {
 					id: folder.uid!,
-					name: folder.folder_number! + " - " + folder.name!,
-					selected: folderUid === folder.uid,
-					hasFlag: folder.documents?.some((document) => document.document_status === EDocumentStatus.DEPOSITED),
+					primaryText: folder.name,
+					secondaryText: folder.folder_number,
+					isActive: folderUid === folder.uid,
+					showAlert: folder.documents?.some((document) => document.document_status === EDocumentStatus.DEPOSITED),
 				};
 			});
 		},
@@ -99,18 +102,18 @@ export default function FolderListContainer(props: IProps) {
 		setBlocks(getBlocks(folders));
 	}, [folders, getBlocks]);
 
-	const navigatePath = Module.getInstance().get().modules.pages.Folder.pages.CreateFolder.props.path;
+	//const navigatePath = Module.getInstance().get().modules.pages.Folder.pages.CreateFolder.props.path;
 	return (
 		<div className={classes["root"]}>
-			<div className={classes["header"]}>
-				<div className={classes["searchbar"]}>
-					<SearchBar onChange={filterFolders} placeholder="Chercher un dossier" />
-				</div>
-				<div className={classes["folderlist-container"]}>
-					<BlockList blocks={blocks} onSelectedBlock={onSelectedFolder} />
-				</div>
-			</div>
-			{!isArchived && (
+			<SearchBlockList
+				blocks={blocks}
+				onSelectedBlock={onSelectedFolder}
+				bottomButton={{
+					link: Module.getInstance().get().modules.pages.Folder.pages.CreateFolder.props.path,
+					text: "Créer un dossier",
+				}}
+			/>
+			{/* {!isArchived && (
 				<div>
 					<Rules
 						mode={RulesMode.NECESSARY}
@@ -125,7 +128,7 @@ export default function FolderListContainer(props: IProps) {
 						</Link>
 					</Rules>
 				</div>
-			)}
+			)} */}
 		</div>
 	);
 }
diff --git a/src/front/Components/DesignSystem/SearchBar/classes.module.scss b/src/front/Components/DesignSystem/SearchBar/classes.module.scss
index e4350b4e..bfb3e58c 100644
--- a/src/front/Components/DesignSystem/SearchBar/classes.module.scss
+++ b/src/front/Components/DesignSystem/SearchBar/classes.module.scss
@@ -47,6 +47,7 @@
 			font-weight: var(--font-text-weight-semibold, 600);
 			line-height: normal;
 			letter-spacing: 0.08px;
+			width: 100%;
 
 			&::placeholder {
 				color: var(--input-placeholder-empty, #6d7e8a);
diff --git a/src/front/Components/DesignSystem/SearchBar/index.tsx b/src/front/Components/DesignSystem/SearchBar/index.tsx
index 9289a034..57a7af19 100644
--- a/src/front/Components/DesignSystem/SearchBar/index.tsx
+++ b/src/front/Components/DesignSystem/SearchBar/index.tsx
@@ -12,26 +12,18 @@ export default function SearchBar({ onChange, placeholder = "Rechercher" }: IPro
 	const [isFocused, setIsFocused] = React.useState(false);
 	const [value, setValue] = React.useState("");
 
-	const handleOnChange = useCallback(
-		(event: React.ChangeEvent<HTMLInputElement>) => {
-			setValue(event.target.value);
-			onChange && onChange(event.target.value);
+	const changeValue = useCallback(
+		(value: string) => {
+			setValue(value);
+			onChange && onChange(value);
 		},
 		[onChange],
 	);
 
-	const handleFocus = useCallback(() => {
-		setIsFocused(true);
-	}, []);
-
-	const handleBlur = useCallback(() => {
-		setIsFocused(false);
-	}, []);
-
-	const clearValue = useCallback(() => {
-		setValue("");
-		onChange && onChange("");
-	}, [onChange]);
+	const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => changeValue(event.target.value);
+	const handleFocus = () => setIsFocused(true);
+	const handleBlur = () => setIsFocused(false);
+	const clearValue = () => changeValue("");
 
 	return (
 		<label className={classes["root"]} data-is-focused={isFocused} data-has-value={value !== ""}>
diff --git a/src/front/Components/DesignSystem/SearchBlockList/BlockList/Block/classes.module.scss b/src/front/Components/DesignSystem/SearchBlockList/BlockList/Block/classes.module.scss
new file mode 100644
index 00000000..f775beaf
--- /dev/null
+++ b/src/front/Components/DesignSystem/SearchBlockList/BlockList/Block/classes.module.scss
@@ -0,0 +1,29 @@
+.root {
+	background: var(--navigation-button-background-default, #f7f8f8);
+	cursor: pointer;
+	&:hover {
+		background: var(--navigation-button-background-actived, #edeff1);
+	}
+
+	&[data-is-active="true"] {
+		border-left: 3px solid var(--navigation-border, #005bcb);
+		background: var(--navigation-button-background-actived, #edeff1);
+	}
+
+	.content {
+		display: flex;
+		padding: var(--spacing-md, 16px) var(--spacing-lg, 24px);
+		align-items: center;
+		gap: var(--spacing-sm, 8px);
+
+		.text-container {
+			flex: 1;
+		}
+	}
+
+	.separator {
+		width: 100%;
+		height: 1px;
+		background: var(--separator-stroke-light, #d7dce0);
+	}
+}
diff --git a/src/front/Components/DesignSystem/SearchBlockList/BlockList/Block/index.tsx b/src/front/Components/DesignSystem/SearchBlockList/BlockList/Block/index.tsx
new file mode 100644
index 00000000..c9914f64
--- /dev/null
+++ b/src/front/Components/DesignSystem/SearchBlockList/BlockList/Block/index.tsx
@@ -0,0 +1,44 @@
+import { ChevronRightIcon } from "@heroicons/react/24/outline";
+import classes from "./classes.module.scss";
+import { useCallback } from "react";
+import { ExclamationCircleIcon } from "@heroicons/react/20/solid";
+import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
+
+export type IBlock = {
+	id: string;
+	primaryText: string;
+	secondaryText?: string;
+	showAlert?: boolean;
+	isActive?: boolean;
+};
+
+type IProps = IBlock & {
+	hasSeparator?: boolean;
+	onClick?: (id: string) => void;
+};
+
+export default function Block(props: IProps) {
+	const { primaryText, secondaryText, showAlert = false, hasSeparator = true, isActive = false, onClick } = props;
+
+	const handleOnClick = useCallback(() => onClick && onClick(props.id), [onClick, props.id]);
+
+	return (
+		<div className={classes["root"]} data-is-active={isActive} onClick={handleOnClick}>
+			<div className={classes["content"]}>
+				<div className={classes["text-container"]}>
+					<Typography typo={ETypo.TEXT_MD_LIGHT} color={ETypoColor.NAVIGATION_BUTTON_CONTRAST_DEFAULT}>
+						{secondaryText}
+					</Typography>
+					<Typography typo={ETypo.TEXT_MD_BOLD} color={ETypoColor.NAVIGATION_BUTTON_CONTRAST_DEFAULT}>
+						{primaryText}
+					</Typography>
+				</div>
+				{showAlert && (
+					<ExclamationCircleIcon width="24" height="24" className={classes["icon"]} color={"var(--warning-default-base)"} />
+				)}
+				<ChevronRightIcon width="24" height="24" className={classes["icon"]} color={"var(--button-icon-button-default-default)"} />
+			</div>
+			{hasSeparator && <div className={classes["separator"]} />}
+		</div>
+	);
+}
diff --git a/src/front/Components/DesignSystem/BlockList/classes.module.scss b/src/front/Components/DesignSystem/SearchBlockList/BlockList/classes.module.scss
similarity index 100%
rename from src/front/Components/DesignSystem/BlockList/classes.module.scss
rename to src/front/Components/DesignSystem/SearchBlockList/BlockList/classes.module.scss
diff --git a/src/front/Components/DesignSystem/SearchBlockList/BlockList/index.tsx b/src/front/Components/DesignSystem/SearchBlockList/BlockList/index.tsx
new file mode 100644
index 00000000..ef103838
--- /dev/null
+++ b/src/front/Components/DesignSystem/SearchBlockList/BlockList/index.tsx
@@ -0,0 +1,23 @@
+import React, { useCallback } from "react";
+import Block, { IBlock } from "./Block";
+
+type IProps = {
+	blocks: IBlock[];
+	onSelectedBlock: (block: IBlock) => void;
+};
+export default function BlockList({ blocks, onSelectedBlock }: IProps) {
+	const selectBlock = useCallback(
+		(id: string) => {
+			onSelectedBlock && onSelectedBlock(blocks.find((folder) => folder.id === id)!);
+		},
+		[blocks, onSelectedBlock],
+	);
+
+	return (
+		<div>
+			{blocks.map((block) => {
+				return <Block {...block} hasSeparator onClick={selectBlock} key={block.id} />;
+			})}
+		</div>
+	);
+}
diff --git a/src/front/Components/DesignSystem/SearchBlockList/classes.module.scss b/src/front/Components/DesignSystem/SearchBlockList/classes.module.scss
new file mode 100644
index 00000000..48148e82
--- /dev/null
+++ b/src/front/Components/DesignSystem/SearchBlockList/classes.module.scss
@@ -0,0 +1,30 @@
+.root {
+	width: 336px;
+	height: 100%;
+	max-height: 100%;
+
+	border-radius: var(--navigation-radius, 0px);
+	background: var(--navigation-button-background-default, #f7f8f8);
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start;
+
+	.block-list {
+		overflow-y: auto;
+		::-webkit-scrollbar {
+			display: none;
+		}
+		-ms-overflow-style: none; /* IE and Edge */
+		scrollbar-width: none; /* Firefox */
+	}
+
+	.searchbar {
+		padding: var(--spacing-md, 16px);
+	}
+
+	.bottom-container {
+		position: fixed;
+		bottom: 0;
+		width: 336px;
+	}
+}
diff --git a/src/front/Components/DesignSystem/SearchBlockList/index.tsx b/src/front/Components/DesignSystem/SearchBlockList/index.tsx
new file mode 100644
index 00000000..6ae408ec
--- /dev/null
+++ b/src/front/Components/DesignSystem/SearchBlockList/index.tsx
@@ -0,0 +1,69 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import BlockList from "./BlockList";
+import { IBlock } from "./BlockList/Block";
+import classes from "./classes.module.scss";
+import SearchBar from "../SearchBar";
+import Button from "../Button";
+import Link from "next/link";
+
+type IProps = {
+	blocks: IBlock[];
+	onSelectedBlock: (block: IBlock) => void;
+	bottomButton?: {
+		text: string;
+		link: string;
+	};
+};
+export default function SearchBlockList(props: IProps) {
+	const { blocks, onSelectedBlock, bottomButton } = props;
+
+	const [blocksShowing, setBlocksShowing] = useState<IBlock[]>(blocks);
+	const bottomButtonRef = useRef<HTMLAnchorElement>(null);
+	const searchBarRef = useRef<HTMLDivElement>(null);
+	const handleSearchChange = useCallback(
+		(value: string) => {
+			const filteredBlocks = blocks.filter((block) => {
+				const name = block.primaryText.toLowerCase();
+				const number = block.secondaryText?.toLowerCase();
+				value = value.toLowerCase();
+				return name.includes(value) || number?.includes(value);
+			});
+			setBlocksShowing(filteredBlocks);
+		},
+		[blocks],
+	);
+
+	const getHeight = useCallback(() => {
+		let heightToSubstract = 0;
+		if (bottomButton && bottomButtonRef.current) {
+			heightToSubstract += bottomButtonRef.current.clientHeight;
+		}
+		if (searchBarRef.current) {
+			heightToSubstract += searchBarRef.current.clientHeight;
+		}
+
+		return {
+			maxHeight: `calc(100% - ${heightToSubstract}px)`,
+		};
+	}, []);
+
+	useEffect(() => {
+		setBlocksShowing(blocks);
+	}, [blocks]);
+
+	return (
+		<div className={classes["root"]}>
+			<div className={classes["searchbar"]} ref={searchBarRef}>
+				<SearchBar placeholder="Chercher" onChange={handleSearchChange} />
+			</div>
+			<div className={classes["block-list"]} style={getHeight()}>
+				<BlockList blocks={blocksShowing} onSelectedBlock={onSelectedBlock} />
+			</div>
+			{bottomButton && (
+				<Link href={bottomButton.link} className={classes["bottom-container"]} ref={bottomButtonRef}>
+					<Button fullwidth>{bottomButton.text}</Button>
+				</Link>
+			)}
+		</div>
+	);
+}
diff --git a/src/front/Components/DesignSystem/Typography/index.tsx b/src/front/Components/DesignSystem/Typography/index.tsx
index 8c5e87b1..17db7964 100644
--- a/src/front/Components/DesignSystem/Typography/index.tsx
+++ b/src/front/Components/DesignSystem/Typography/index.tsx
@@ -28,25 +28,25 @@ export enum ETypo {
 	TEXT_LG_SEMIBOLD = "text-lg-semibold",
 	TEXT_LG_REGULAR = "text-lg-regular",
 	TEXT_LG_UPPERCASE = "text-lg-uppercase",
-	TEXT_LG_light = "text-lg-light",
+	TEXT_LG_LIGHT = "text-lg-light",
 
 	TEXT_MD_BOLD = "text-md-bold",
 	TEXT_MD_SEMIBOLD = "text-md-semibold",
 	TEXT_MD_REGULAR = "text-md-regular",
 	TEXT_MD_UPPERCASE = "text-md-uppercase",
-	TEXT_MD_light = "text-md-light",
+	TEXT_MD_LIGHT = "text-md-light",
 
 	TEXT_SM_BOLD = "text-sm-bold",
 	TEXT_SM_SEMIBOLD = "text-sm-semibold",
 	TEXT_SM_REGULAR = "text-sm-regular",
 	TEXT_SM_UPPERCASE = "text-sm-uppercase",
-	TEXT_SM_light = "text-sm-light",
+	TEXT_SM_LIGHT = "text-sm-light",
 
 	TEXT_XS_BOLD = "text-xs-bold",
 	TEXT_XS_SEMIBOLD = "text-xs-semibold",
 	TEXT_XS_REGULAR = "text-xs-regular",
 	TEXT_XS_UPPERCASE = "text-xs-uppercase",
-	TEXT_XS_light = "text-xs-light",
+	TEXT_XS_LIGHT = "text-xs-light",
 
 	CAPTION_BOLD = "caption-bold",
 	CAPTION_SEMIBOLD = "caption-semibold",
@@ -153,6 +153,7 @@ export enum ETypoColor {
 	CONTRAST_DEFAULT = "--contrast-default",
 	CONTRAST_HOVERED = "--contrast-hovered",
 	ERROR_WEAK_CONTRAST = "--error-weak-contrast",
+	NAVIGATION_BUTTON_CONTRAST_DEFAULT = "--navigation-button-contrast-default",
 }
 
 export default function Typography(props: IProps) {

From 6425f8ba5eee7fa3341ff8a0ec1ee7918c392d4e Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Wed, 24 Jul 2024 14:59:54 +0200
Subject: [PATCH 03/12] :bug: Fixing build

---
 .../Components/DesignSystem/Alert/index.tsx   |  2 +-
 .../FolderListContainer/index.tsx             | 44 -------------------
 .../DesignSystem/SearchBlockList/index.tsx    |  2 +-
 .../CollaboratorListContainer/index.tsx       |  5 ++-
 .../DeedTypeListContainer/index.tsx           |  5 ++-
 .../DocumentTypeListContainer/index.tsx       |  5 ++-
 .../OfficeListContainer/index.tsx             |  5 ++-
 .../RoleListContainer/index.tsx               |  5 ++-
 .../UserListContainer/index.tsx               |  5 ++-
 .../ClientBox/DeleteCustomerModal/index.tsx   |  2 +-
 .../ClientView/ClientBox/index.tsx            |  2 +-
 .../DeleteAskedDocumentModal/index.tsx        |  2 +-
 .../NoClientView/DeleteFolderModal/index.tsx  |  2 +-
 .../elements/AnchoringModal/index.tsx         |  4 +-
 .../elements/ArchiveModal/index.tsx           |  2 +-
 .../DownloadAnchoringProofModal/index.tsx     |  2 +-
 .../elements/RequireAnchoringModal/index.tsx  |  2 +-
 .../Components/Layouts/SelectFolder/index.tsx |  5 ++-
 18 files changed, 32 insertions(+), 69 deletions(-)

diff --git a/src/front/Components/DesignSystem/Alert/index.tsx b/src/front/Components/DesignSystem/Alert/index.tsx
index a00022bc..64d70a5c 100644
--- a/src/front/Components/DesignSystem/Alert/index.tsx
+++ b/src/front/Components/DesignSystem/Alert/index.tsx
@@ -49,7 +49,7 @@ export default function Alert(props: IProps) {
 					<Typography typo={ETypo.TEXT_LG_SEMIBOLD} color={ETypoColor.COLOR_NEUTRAL_950}>
 						{title}
 					</Typography>
-					<Typography typo={ETypo.TEXT_MD_light} color={ETypoColor.COLOR_NEUTRAL_700}>
+					<Typography typo={ETypo.TEXT_MD_LIGHT} color={ETypoColor.COLOR_NEUTRAL_700}>
 						{description}
 					</Typography>
 				</div>
diff --git a/src/front/Components/DesignSystem/FolderListContainer/index.tsx b/src/front/Components/DesignSystem/FolderListContainer/index.tsx
index 3d04a58d..6b8c3e46 100644
--- a/src/front/Components/DesignSystem/FolderListContainer/index.tsx
+++ b/src/front/Components/DesignSystem/FolderListContainer/index.tsx
@@ -1,17 +1,11 @@
 import Module from "@Front/Config/Module";
 import { OfficeFolder } from "le-coffre-resources/dist/Notary";
 import { EDocumentStatus } from "le-coffre-resources/dist/Notary/Document";
-import Link from "next/link";
 import { useRouter } from "next/router";
 import React, { useCallback, useEffect } from "react";
 
-import Button from "../Button";
-import SearchBar from "../SearchBar";
 import classes from "./classes.module.scss";
-import Rules, { RulesMode } from "@Front/Components/Elements/Rules";
-import { AppRuleActions, AppRuleNames } from "@Front/Api/Entities/rule";
 import { IBlock } from "../SearchBlockList/BlockList/Block";
-import BlockList from "../SearchBlockList/BlockList";
 import SearchBlockList from "../SearchBlockList";
 
 type IProps = {
@@ -30,27 +24,6 @@ export default function FolderListContainer(props: IProps) {
 		? Module.getInstance().get().modules.pages.Folder.pages.FolderArchived.pages.FolderInformation.props.path
 		: Module.getInstance().get().modules.pages.Folder.pages.FolderInformation.props.path;
 
-	const filterFolders = (value: string): void => {
-		const filteredFolders: OfficeFolder[] = folders.filter((folder) => {
-			const name = folder.name.toLowerCase();
-			const number = folder.folder_number.toLowerCase();
-			value = value.toLowerCase();
-			if (folder.customers) {
-				const customerNames = folder.customers
-					.map((customer) => {
-						return `${customer.contact?.first_name.toLowerCase()} ${customer.contact?.last_name.toLowerCase()}`;
-					})
-					.join(", ");
-
-				return name.includes(value) || number.includes(value) || customerNames.includes(value);
-			}
-
-			return name.includes(value) || number.includes(value);
-		});
-
-		setBlocks(getBlocks(filteredFolders));
-	};
-
 	const getBlocks = useCallback(
 		(folders: OfficeFolder[]): IBlock[] => {
 			const pendingFolders = folders
@@ -102,7 +75,6 @@ export default function FolderListContainer(props: IProps) {
 		setBlocks(getBlocks(folders));
 	}, [folders, getBlocks]);
 
-	//const navigatePath = Module.getInstance().get().modules.pages.Folder.pages.CreateFolder.props.path;
 	return (
 		<div className={classes["root"]}>
 			<SearchBlockList
@@ -113,22 +85,6 @@ export default function FolderListContainer(props: IProps) {
 					text: "Créer un dossier",
 				}}
 			/>
-			{/* {!isArchived && (
-				<div>
-					<Rules
-						mode={RulesMode.NECESSARY}
-						rules={[
-							{
-								action: AppRuleActions.create,
-								name: AppRuleNames.officeFolders,
-							},
-						]}>
-						<Link href={navigatePath}>
-							<Button fullwidth={true}>Créer un dossier</Button>
-						</Link>
-					</Rules>
-				</div>
-			)} */}
 		</div>
 	);
 }
diff --git a/src/front/Components/DesignSystem/SearchBlockList/index.tsx b/src/front/Components/DesignSystem/SearchBlockList/index.tsx
index 6ae408ec..46434edd 100644
--- a/src/front/Components/DesignSystem/SearchBlockList/index.tsx
+++ b/src/front/Components/DesignSystem/SearchBlockList/index.tsx
@@ -45,7 +45,7 @@ export default function SearchBlockList(props: IProps) {
 		return {
 			maxHeight: `calc(100% - ${heightToSubstract}px)`,
 		};
-	}, []);
+	}, [bottomButton]);
 
 	useEffect(() => {
 		setBlocksShowing(blocks);
diff --git a/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/CollaboratorListContainer/index.tsx b/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/CollaboratorListContainer/index.tsx
index 792c377e..9df33274 100644
--- a/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/CollaboratorListContainer/index.tsx
+++ b/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/CollaboratorListContainer/index.tsx
@@ -3,9 +3,10 @@ import React, { useCallback, useState } from "react";
 import classes from "./classes.module.scss";
 import SearchBar from "@Front/Components/DesignSystem/SearchBar";
 import User from "le-coffre-resources/dist/Notary";
-import BlockList, { IBlock } from "@Front/Components/DesignSystem/BlockList";
 import { useRouter } from "next/router";
 import Module from "@Front/Config/Module";
+import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block";
+import BlockList from "@Front/Components/DesignSystem/SearchBlockList/BlockList";
 
 type IProps = {
 	collaborators: User[];
@@ -50,7 +51,7 @@ export default function CollaboratorListContainer(props: IProps) {
 					<BlockList
 						blocks={filteredUsers.map((user) => {
 							return {
-								name: user.contact?.first_name + " " + user.contact?.last_name,
+								primaryText: user.contact?.first_name + " " + user.contact?.last_name,
 								id: user.uid!,
 								selected: user.uid === collaboratorUid,
 								rightIcon: user.seats?.some((seat) => new Date(seat.subscription!.end_date) >= new Date()) ? (
diff --git a/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/DeedTypeListContainer/index.tsx b/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/DeedTypeListContainer/index.tsx
index a4889258..6dc34c85 100644
--- a/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/DeedTypeListContainer/index.tsx
+++ b/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/DeedTypeListContainer/index.tsx
@@ -1,5 +1,4 @@
 import DeedTypes from "@Front/Api/LeCoffreApi/Admin/DeedTypes/DeedTypes";
-import BlockList, { IBlock } from "@Front/Components/DesignSystem/BlockList";
 import Button from "@Front/Components/DesignSystem/Button";
 import SearchBar from "@Front/Components/DesignSystem/SearchBar";
 import Module from "@Front/Config/Module";
@@ -9,6 +8,8 @@ import { useRouter } from "next/router";
 import React, { useCallback, useState } from "react";
 
 import classes from "./classes.module.scss";
+import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block";
+import BlockList from "@Front/Components/DesignSystem/SearchBlockList/BlockList";
 
 type IProps = {
 	deedTypes: DeedType[];
@@ -50,7 +51,7 @@ export default function DeedListContainer(props: IProps) {
 					<BlockList
 						blocks={filteredUsers.map((deed) => {
 							return {
-								name: deed.name,
+								primaryText: deed.name,
 								id: deed.uid!,
 								selected: deedTypeUid === deed.uid,
 							};
diff --git a/src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/DocumentTypeListContainer/index.tsx b/src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/DocumentTypeListContainer/index.tsx
index ada6b7a7..3e41b785 100644
--- a/src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/DocumentTypeListContainer/index.tsx
+++ b/src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/DocumentTypeListContainer/index.tsx
@@ -1,4 +1,3 @@
-import BlockList, { IBlock } from "@Front/Components/DesignSystem/BlockList";
 import Button from "@Front/Components/DesignSystem/Button";
 import SearchBar from "@Front/Components/DesignSystem/SearchBar";
 import Module from "@Front/Config/Module";
@@ -8,6 +7,8 @@ import { useRouter } from "next/router";
 import React, { useCallback, useState } from "react";
 
 import classes from "./classes.module.scss";
+import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block";
+import BlockList from "@Front/Components/DesignSystem/SearchBlockList/BlockList";
 
 type IProps = {
 	documentTypes: DocumentType[];
@@ -49,7 +50,7 @@ export default function DocumentTypeListContainer(props: IProps) {
 					<BlockList
 						blocks={filteredDocumentTypes.map((documentType) => {
 							return {
-								name: documentType.name,
+								primaryText: documentType.name,
 								id: documentType.uid!,
 								selected: documentType.uid === documentTypeUid,
 							};
diff --git a/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/OfficeListContainer/index.tsx b/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/OfficeListContainer/index.tsx
index fec898d0..b6db9a28 100644
--- a/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/OfficeListContainer/index.tsx
+++ b/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/OfficeListContainer/index.tsx
@@ -1,4 +1,3 @@
-import BlockList, { IBlock } from "@Front/Components/DesignSystem/BlockList";
 import SearchBar from "@Front/Components/DesignSystem/SearchBar";
 import Module from "@Front/Config/Module";
 import { Office } from "le-coffre-resources/dist/SuperAdmin";
@@ -6,6 +5,8 @@ import { useRouter } from "next/router";
 import React, { useCallback, useState } from "react";
 
 import classes from "./classes.module.scss";
+import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block";
+import BlockList from "@Front/Components/DesignSystem/SearchBlockList/BlockList";
 
 type IProps = {
 	offices: Office[];
@@ -49,7 +50,7 @@ export default function OfficeListContainer(props: IProps) {
 					<BlockList
 						blocks={filteredOffices.map((office) => {
 							return {
-								name: office.crpcen + " - " + office.name,
+								primaryText: office.crpcen + " - " + office.name,
 								id: office.uid!,
 								selected: office.uid === officeUid,
 							};
diff --git a/src/front/Components/LayoutTemplates/DefaultRoleDashboard/RoleListContainer/index.tsx b/src/front/Components/LayoutTemplates/DefaultRoleDashboard/RoleListContainer/index.tsx
index 1f52f6fb..1ee4c395 100644
--- a/src/front/Components/LayoutTemplates/DefaultRoleDashboard/RoleListContainer/index.tsx
+++ b/src/front/Components/LayoutTemplates/DefaultRoleDashboard/RoleListContainer/index.tsx
@@ -1,4 +1,3 @@
-import BlockList, { IBlock } from "@Front/Components/DesignSystem/BlockList";
 import SearchBar from "@Front/Components/DesignSystem/SearchBar";
 import Module from "@Front/Config/Module";
 import { OfficeRole } from "le-coffre-resources/dist/Admin";
@@ -8,6 +7,8 @@ import React, { useCallback, useState } from "react";
 import classes from "./classes.module.scss";
 import Link from "next/link";
 import Button from "@Front/Components/DesignSystem/Button";
+import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block";
+import BlockList from "@Front/Components/DesignSystem/SearchBlockList/BlockList";
 
 type IProps = {
 	roles: OfficeRole[];
@@ -55,7 +56,7 @@ export default function RoleListContainer(props: IProps) {
 							})
 							.map((role) => {
 								return {
-									name: role.name,
+									primaryText: role.name,
 									id: role.uid!,
 									selected: role.uid === roleUid,
 								};
diff --git a/src/front/Components/LayoutTemplates/DefaultUserDashboard/UserListContainer/index.tsx b/src/front/Components/LayoutTemplates/DefaultUserDashboard/UserListContainer/index.tsx
index 8128b38d..f543cba6 100644
--- a/src/front/Components/LayoutTemplates/DefaultUserDashboard/UserListContainer/index.tsx
+++ b/src/front/Components/LayoutTemplates/DefaultUserDashboard/UserListContainer/index.tsx
@@ -1,4 +1,3 @@
-import BlockList, { IBlock } from "@Front/Components/DesignSystem/BlockList";
 import SearchBar from "@Front/Components/DesignSystem/SearchBar";
 import Module from "@Front/Config/Module";
 import User from "le-coffre-resources/dist/Notary";
@@ -6,6 +5,8 @@ import { useRouter } from "next/router";
 import React, { useCallback, useState } from "react";
 
 import classes from "./classes.module.scss";
+import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block";
+import BlockList from "@Front/Components/DesignSystem/SearchBlockList/BlockList";
 
 type IProps = {
 	users: User[];
@@ -50,7 +51,7 @@ export default function UserListContainer(props: IProps) {
 					<BlockList
 						blocks={filteredUsers.map((user) => {
 							return {
-								name: user.contact?.first_name + " " + user.contact?.last_name,
+								primaryText: user.contact?.first_name + " " + user.contact?.last_name,
 								id: user.uid!,
 								selected: user.uid === userUid,
 							};
diff --git a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/ClientBox/DeleteCustomerModal/index.tsx b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/ClientBox/DeleteCustomerModal/index.tsx
index bdf407d9..7ea02fc7 100644
--- a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/ClientBox/DeleteCustomerModal/index.tsx
+++ b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/ClientBox/DeleteCustomerModal/index.tsx
@@ -24,7 +24,7 @@ export default function DeleteCustomerModal(props: IProps) {
 			title={"Êtes-vous sûr de vouloir supprimer ce client du dossier ?"}
 			firstButton={{ children: "Annuler", onClick: onClose }}
 			secondButton={{ children: "Supprimer le client", onClick: handleDelete }}>
-			<Typography typo={ETypo.TEXT_MD_light}>
+			<Typography typo={ETypo.TEXT_MD_LIGHT}>
 				Cette action retirera le client de ce dossier. Vous ne pourrez plus récupérer les informations associées à ce client dans ce
 				dossier une fois supprimées.
 			</Typography>
diff --git a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/ClientBox/index.tsx b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/ClientBox/index.tsx
index c0d1fd86..4cd16cce 100644
--- a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/ClientBox/index.tsx
+++ b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/ClientBox/index.tsx
@@ -131,7 +131,7 @@ export default function ClientBox(props: IProps) {
 				onClose={closeErrorModal}
 				title={"Suppression impossible"}
 				secondButton={{ children: "Fermer", onClick: closeErrorModal, fullwidth: true }}>
-				<Typography typo={ETypo.TEXT_MD_light}>
+				<Typography typo={ETypo.TEXT_MD_LIGHT}>
 					Ce client ne peut pas être supprimé car des documents sont associés à son dossier. Veuillez d'abord gérer ou supprimer
 					ces documents avant de tenter de supprimer le client.
 				</Typography>
diff --git a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/DocumentTables/DeleteAskedDocumentModal/index.tsx b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/DocumentTables/DeleteAskedDocumentModal/index.tsx
index 901780d9..731bb4c9 100644
--- a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/DocumentTables/DeleteAskedDocumentModal/index.tsx
+++ b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/DocumentTables/DeleteAskedDocumentModal/index.tsx
@@ -31,7 +31,7 @@ export default function DeleteAskedDocumentModal(props: IProps) {
 			title={"Êtes-vous sûr de vouloir supprimer cette demande de document ?"}
 			firstButton={{ children: "Annuler", onClick: onClose }}
 			secondButton={{ children: "Supprimer la demande", onClick: onDelete }}>
-			<Typography typo={ETypo.TEXT_MD_light}>Cette action annulera la demande du document en cours.</Typography>
+			<Typography typo={ETypo.TEXT_MD_LIGHT}>Cette action annulera la demande du document en cours.</Typography>
 		</Modal>
 	);
 }
diff --git a/src/front/Components/Layouts/Folder/FolderInformation/NoClientView/DeleteFolderModal/index.tsx b/src/front/Components/Layouts/Folder/FolderInformation/NoClientView/DeleteFolderModal/index.tsx
index 814f5d56..cf50489f 100644
--- a/src/front/Components/Layouts/Folder/FolderInformation/NoClientView/DeleteFolderModal/index.tsx
+++ b/src/front/Components/Layouts/Folder/FolderInformation/NoClientView/DeleteFolderModal/index.tsx
@@ -34,7 +34,7 @@ export default function DeleteFolderModal(props: IProps) {
 			title={"Êtes-vous sûr de vouloir supprimer ce dossier ?"}
 			firstButton={{ children: "Annuler", onClick: onClose }}
 			secondButton={{ children: "Supprimer le dossier", onClick: onDelete }}>
-			<Typography typo={ETypo.TEXT_MD_light}>
+			<Typography typo={ETypo.TEXT_MD_LIGHT}>
 				Cette action est irréversible. En supprimant ce dossier, toutes les informations associées seront définitivement perdues.
 			</Typography>
 		</Modal>
diff --git a/src/front/Components/Layouts/Folder/FolderInformation/elements/AnchoringModal/index.tsx b/src/front/Components/Layouts/Folder/FolderInformation/elements/AnchoringModal/index.tsx
index 071ddc34..24cbecf9 100644
--- a/src/front/Components/Layouts/Folder/FolderInformation/elements/AnchoringModal/index.tsx
+++ b/src/front/Components/Layouts/Folder/FolderInformation/elements/AnchoringModal/index.tsx
@@ -44,13 +44,13 @@ export default function AnchoringModal(props: IProps) {
 			firstButton={!isAnchoring ? { children: "Non, Annuler", onClick: onClose } : undefined}
 			secondButton={!isAnchoring ? { children: "Oui, certifier et ancrer", onClick: anchor } : undefined}>
 			{!isAnchoring ? (
-				<Typography typo={ETypo.TEXT_MD_light}>
+				<Typography typo={ETypo.TEXT_MD_LIGHT}>
 					La certification et l'ancrage de ce dossier dans la blockchain sont des actions définitives et garantiront la sécurité
 					et l'authenticité de tous les documents. Veuillez confirmer que vous souhaitez continuer.
 				</Typography>
 			) : (
 				<div className={classes["anchoring"]}>
-					<Typography typo={ETypo.TEXT_MD_light}>
+					<Typography typo={ETypo.TEXT_MD_LIGHT}>
 						Vos documents sont en train d'être ancrés dans la blockchain. Cela peut prendre quelques instants. Merci de votre
 						patience.
 					</Typography>
diff --git a/src/front/Components/Layouts/Folder/FolderInformation/elements/ArchiveModal/index.tsx b/src/front/Components/Layouts/Folder/FolderInformation/elements/ArchiveModal/index.tsx
index 177ddf8e..ff1c6621 100644
--- a/src/front/Components/Layouts/Folder/FolderInformation/elements/ArchiveModal/index.tsx
+++ b/src/front/Components/Layouts/Folder/FolderInformation/elements/ArchiveModal/index.tsx
@@ -37,7 +37,7 @@ export default function ArchiveModal(props: IProps) {
 			firstButton={{ children: "Annuler", onClick: onClose }}
 			secondButton={{ children: "Archiver le dossier", onClick: archive }}>
 			<div className={classes["root"]}>
-				<Typography typo={ETypo.TEXT_MD_light}>
+				<Typography typo={ETypo.TEXT_MD_LIGHT}>
 					Archiver ce dossier le déplacera dans la section des dossiers archivés. Vous pouvez ajouter une note de dossier avant
 					d'archiver si vous le souhaitez.
 				</Typography>
diff --git a/src/front/Components/Layouts/Folder/FolderInformation/elements/DownloadAnchoringProofModal/index.tsx b/src/front/Components/Layouts/Folder/FolderInformation/elements/DownloadAnchoringProofModal/index.tsx
index 910076a4..e9bd477a 100644
--- a/src/front/Components/Layouts/Folder/FolderInformation/elements/DownloadAnchoringProofModal/index.tsx
+++ b/src/front/Components/Layouts/Folder/FolderInformation/elements/DownloadAnchoringProofModal/index.tsx
@@ -38,7 +38,7 @@ export default function DownloadAnchoringProofModal(props: IProps) {
 			title={"Félicitations ! Dossier ancré avec succès"}
 			firstButton={{ children: "Fermer", onClick: onClose }}
 			secondButton={{ children: "Télécharger la preuve d’ancrage", onClick: downloadAnchoringProof }}>
-			<Typography typo={ETypo.TEXT_MD_light}>
+			<Typography typo={ETypo.TEXT_MD_LIGHT}>
 				Votre dossier a été validé et ancré dans la blockchain. Vous pouvez maintenant télécharger la preuve d'ancrage pour vos
 				archives.
 			</Typography>
diff --git a/src/front/Components/Layouts/Folder/FolderInformation/elements/RequireAnchoringModal/index.tsx b/src/front/Components/Layouts/Folder/FolderInformation/elements/RequireAnchoringModal/index.tsx
index d6273927..26e41eee 100644
--- a/src/front/Components/Layouts/Folder/FolderInformation/elements/RequireAnchoringModal/index.tsx
+++ b/src/front/Components/Layouts/Folder/FolderInformation/elements/RequireAnchoringModal/index.tsx
@@ -23,7 +23,7 @@ export default function RequireAnchoringModal(props: IProps) {
 			title={"Archiver le dossier, action requise : Ancrer et certifier le dossier"}
 			firstButton={{ children: "Annuler", onClick: onClose }}
 			secondButton={{ children: "Ancrer le dossier", onClick: onAnchor }}>
-			<Typography typo={ETypo.TEXT_MD_light}>
+			<Typography typo={ETypo.TEXT_MD_LIGHT}>
 				Pour archiver ce dossier, il est nécessaire de l'ancrer dans la blockchain afin de garantir la sécurité et l'authenticité
 				des documents. Veuillez procéder à l'ancrage avant de continuer.
 			</Typography>
diff --git a/src/front/Components/Layouts/SelectFolder/index.tsx b/src/front/Components/Layouts/SelectFolder/index.tsx
index e40b2a82..5d84f4bb 100644
--- a/src/front/Components/Layouts/SelectFolder/index.tsx
+++ b/src/front/Components/Layouts/SelectFolder/index.tsx
@@ -1,5 +1,4 @@
 import Folders from "@Front/Api/LeCoffreApi/Customer/Folders/Folders";
-import BlockList, { IBlock } from "@Front/Components/DesignSystem/BlockList";
 import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
 import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
 import JwtService from "@Front/Services/JwtService/JwtService";
@@ -9,6 +8,8 @@ import { useCallback, useEffect, useState } from "react";
 
 import LandingImage from "../Login/landing-connect.jpeg";
 import classes from "./classes.module.scss";
+import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block";
+import BlockList from "@Front/Components/DesignSystem/SearchBlockList/BlockList";
 
 export default function SelectFolder() {
 	const [folders, setFolders] = useState<OfficeFolder[]>([]);
@@ -66,7 +67,7 @@ export default function SelectFolder() {
 							blocks={folders.map((folder) => {
 								return {
 									id: folder.uid!,
-									name: folder.name!,
+									primaryText: folder.name!,
 									selected: false,
 								};
 							})}

From 75d07e0d049688a41bb1f5033ea3954a00f192ab Mon Sep 17 00:00:00 2001
From: Vins <vincent.alamelle@smart-chain.fr>
Date: Wed, 24 Jul 2024 16:08:49 +0200
Subject: [PATCH 04/12] Footer design system

---
 .../DesignSystem/Footer/classes.module.scss   | 42 +++++++++++++++++++
 .../DesignSystem/Footer/desktop.tsx           | 20 +++++++++
 .../Components/DesignSystem/Footer/index.tsx  | 17 ++++++++
 .../Components/DesignSystem/Footer/mobile.tsx | 18 ++++++++
 .../Components/DesignSystem/Footer/tablet.tsx | 20 +++++++++
 .../Components/Layouts/DesignSystem/index.tsx |  2 +
 src/front/Themes/constants.scss               |  2 +-
 7 files changed, 120 insertions(+), 1 deletion(-)
 create mode 100644 src/front/Components/DesignSystem/Footer/classes.module.scss
 create mode 100644 src/front/Components/DesignSystem/Footer/desktop.tsx
 create mode 100644 src/front/Components/DesignSystem/Footer/index.tsx
 create mode 100644 src/front/Components/DesignSystem/Footer/mobile.tsx
 create mode 100644 src/front/Components/DesignSystem/Footer/tablet.tsx

diff --git a/src/front/Components/DesignSystem/Footer/classes.module.scss b/src/front/Components/DesignSystem/Footer/classes.module.scss
new file mode 100644
index 00000000..0df500d9
--- /dev/null
+++ b/src/front/Components/DesignSystem/Footer/classes.module.scss
@@ -0,0 +1,42 @@
+@import "@Themes/constants.scss";
+
+.root {
+	border-top: 1px solid var(--footer-border, #d7dce0);
+	background: var(--footer-background, #fff);
+	padding: var(--spacing-1-5) 0;
+	font-family: var(--font-title-family, Poppins);
+	font-size: 12px;
+	font-weight: var(--font-text-weight-regular, 400);
+	letter-spacing: 0.06px;
+	.sub-root {
+		display: flex;
+		align-items: center;
+		gap: var(--Radius-lg, 16px);
+		white-space: nowrap;
+		justify-content: center;
+	}
+
+	@media (max-width: 660px) or (min-width: 768px) {
+		.tablet {
+			display: none;
+		}
+	}
+
+	@media (min-width: 660px) {
+		.mobile {
+			display: none;
+		}
+	}
+
+	@media (max-width: 769px) {
+		.desktop {
+			display: none;
+		}
+	}
+
+	.separator {
+		&::before {
+			content: "|";
+		}
+	}
+}
diff --git a/src/front/Components/DesignSystem/Footer/desktop.tsx b/src/front/Components/DesignSystem/Footer/desktop.tsx
new file mode 100644
index 00000000..d0eb1772
--- /dev/null
+++ b/src/front/Components/DesignSystem/Footer/desktop.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import classes from "./classes.module.scss";
+
+type IProps = {
+	className?: string;
+};
+
+export default function Desktop({ className }: IProps) {
+	return (
+		<div className={[classes["sub-root"], className].join(" ")}>
+			<span>© Copyright lecoffre 2024</span>
+			<span className={classes["separator"]} />
+			<a href="/terms">Conditions d'utilisation</a>
+			<span className={classes["separator"]} />
+			<a href="/privacy">Politique de confidentialité</a>
+			<span className={classes["separator"]} />
+			<a href="/cookies">Politique des cookies</a>
+		</div>
+	);
+}
diff --git a/src/front/Components/DesignSystem/Footer/index.tsx b/src/front/Components/DesignSystem/Footer/index.tsx
new file mode 100644
index 00000000..bd56d8f9
--- /dev/null
+++ b/src/front/Components/DesignSystem/Footer/index.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import classes from "./classes.module.scss";
+import Mobile from "./mobile";
+import Desktop from "./desktop";
+import Tablet from "./tablet";
+
+type IProps = {};
+
+export default function Footer(props: IProps) {
+	return (
+		<footer className={classes["root"]}>
+			<Mobile className={classes["mobile"]} />
+			<Tablet className={classes["tablet"]} />
+			<Desktop className={classes["desktop"]} />
+		</footer>
+	);
+}
diff --git a/src/front/Components/DesignSystem/Footer/mobile.tsx b/src/front/Components/DesignSystem/Footer/mobile.tsx
new file mode 100644
index 00000000..12f962bd
--- /dev/null
+++ b/src/front/Components/DesignSystem/Footer/mobile.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import classes from "./classes.module.scss";
+
+type IProps = {
+	className?: string;
+};
+
+export default function Mobile({ className }: IProps) {
+	return (
+		<div className={[classes["sub-root"], className].join(" ")}>
+			<span>© Lecoffre 2024</span>
+			<span className={classes["separator"]} />
+			<a href="/terms">Juridiques</a>
+			<span className={classes["separator"]} />
+			<a href="/cookies">Cookies</a>
+		</div>
+	);
+}
diff --git a/src/front/Components/DesignSystem/Footer/tablet.tsx b/src/front/Components/DesignSystem/Footer/tablet.tsx
new file mode 100644
index 00000000..adec78f9
--- /dev/null
+++ b/src/front/Components/DesignSystem/Footer/tablet.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import classes from "./classes.module.scss";
+
+type IProps = {
+	className?: string;
+};
+
+export default function Tablet({ className }: IProps) {
+	return (
+		<div className={[classes["sub-root"], className].join(" ")}>
+			<span>© Lecoffre 2024</span>
+			<span className={classes["separator"]} />
+			<a href="/terms">Conditions d'utilisation</a>
+			<span className={classes["separator"]} />
+			<a href="/privacy">Politique de confidentialité</a>
+			<span className={classes["separator"]} />
+			<a href="/cookies">Politique des cookies</a>
+		</div>
+	);
+}
diff --git a/src/front/Components/Layouts/DesignSystem/index.tsx b/src/front/Components/Layouts/DesignSystem/index.tsx
index 4152498b..4da7b128 100644
--- a/src/front/Components/Layouts/DesignSystem/index.tsx
+++ b/src/front/Components/Layouts/DesignSystem/index.tsx
@@ -14,6 +14,7 @@ import NumberPicker from "@Front/Components/Elements/NumberPicker";
 import Tabs from "@Front/Components/Elements/Tabs";
 import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
 import useOpenable from "@Front/Hooks/useOpenable";
+import Footer from "@Front/Components/DesignSystem/Footer";
 import {
 	ArchiveBoxIcon,
 	ArrowLongLeftIcon,
@@ -797,6 +798,7 @@ export default function DesignSystem() {
 						variant={EAlertVariant.NEUTRAL}
 					/>
 				</div>
+				<Footer />
 			</div>
 		</DefaultTemplate>
 	);
diff --git a/src/front/Themes/constants.scss b/src/front/Themes/constants.scss
index a9b8ab4a..c7ce74cb 100644
--- a/src/front/Themes/constants.scss
+++ b/src/front/Themes/constants.scss
@@ -3,7 +3,7 @@ $screen-l: 1439px;
 $screen-ls: 1280px;
 $screen-m: 1023px;
 $screen-s: 767px;
-// $screen-xs: 424px;
+$screen-xs: 424px;
 
 $custom-easing: cubic-bezier(0.645, 0.045, 0.355, 1);
 

From f81c6b6400452de5e3b63a4007c798d356ba0b4e Mon Sep 17 00:00:00 2001
From: Vins <vincent.alamelle@smart-chain.fr>
Date: Wed, 24 Jul 2024 16:50:59 +0200
Subject: [PATCH 05/12] Footer

---
 .../Components/DesignSystem/Footer/classes.module.scss    | 8 +++++++-
 src/front/Components/DesignSystem/Footer/index.tsx        | 8 +++++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/front/Components/DesignSystem/Footer/classes.module.scss b/src/front/Components/DesignSystem/Footer/classes.module.scss
index 0df500d9..f9a12433 100644
--- a/src/front/Components/DesignSystem/Footer/classes.module.scss
+++ b/src/front/Components/DesignSystem/Footer/classes.module.scss
@@ -8,12 +8,18 @@
 	font-size: 12px;
 	font-weight: var(--font-text-weight-regular, 400);
 	letter-spacing: 0.06px;
+
 	.sub-root {
 		display: flex;
 		align-items: center;
 		gap: var(--Radius-lg, 16px);
 		white-space: nowrap;
-		justify-content: center;
+		padding: 0 360px;
+		//make it sticky
+
+		@media (max-width: 1023px) {
+			padding: 0 12px;
+		}
 	}
 
 	@media (max-width: 660px) or (min-width: 768px) {
diff --git a/src/front/Components/DesignSystem/Footer/index.tsx b/src/front/Components/DesignSystem/Footer/index.tsx
index bd56d8f9..8867ec7f 100644
--- a/src/front/Components/DesignSystem/Footer/index.tsx
+++ b/src/front/Components/DesignSystem/Footer/index.tsx
@@ -4,11 +4,13 @@ import Mobile from "./mobile";
 import Desktop from "./desktop";
 import Tablet from "./tablet";
 
-type IProps = {};
+type IProps = {
+	className?: string;
+};
 
-export default function Footer(props: IProps) {
+export default function Footer({ className }: IProps) {
 	return (
-		<footer className={classes["root"]}>
+		<footer className={[classes["root"], className].join(" ")}>
 			<Mobile className={classes["mobile"]} />
 			<Tablet className={classes["tablet"]} />
 			<Desktop className={classes["desktop"]} />

From 87d6e1e93131243ece0cbf43cc9adc1466dabd57 Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Wed, 24 Jul 2024 16:54:21 +0200
Subject: [PATCH 06/12] :bug: Fix create folder button

---
 .../DesignSystem/SearchBlockList/classes.module.scss           | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/front/Components/DesignSystem/SearchBlockList/classes.module.scss b/src/front/Components/DesignSystem/SearchBlockList/classes.module.scss
index 48148e82..9f53834d 100644
--- a/src/front/Components/DesignSystem/SearchBlockList/classes.module.scss
+++ b/src/front/Components/DesignSystem/SearchBlockList/classes.module.scss
@@ -23,8 +23,7 @@
 	}
 
 	.bottom-container {
-		position: fixed;
-		bottom: 0;
+		margin-top: auto;
 		width: 336px;
 	}
 }

From 635bd45b43c2a500c6734352e76e177e5abdbbb1 Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Wed, 24 Jul 2024 16:59:36 +0200
Subject: [PATCH 07/12] :sparkles: warning in tabs

---
 .../Elements/Tabs/HorizontalTab/classes.module.scss          | 3 +++
 src/front/Components/Elements/Tabs/HorizontalTab/index.tsx   | 3 +++
 src/front/Components/Elements/Tabs/index.tsx                 | 5 ++++-
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/front/Components/Elements/Tabs/HorizontalTab/classes.module.scss b/src/front/Components/Elements/Tabs/HorizontalTab/classes.module.scss
index cfbbe33c..871a4a8a 100644
--- a/src/front/Components/Elements/Tabs/HorizontalTab/classes.module.scss
+++ b/src/front/Components/Elements/Tabs/HorizontalTab/classes.module.scss
@@ -6,6 +6,9 @@
 	border-bottom: 1px solid var(--tabs-stroke, #d7dce0);
 	cursor: pointer;
 
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-1-5, 12px);
 	&[data-is-selected="true"] {
 		border-bottom: 2px solid var(--tabs-contrast-actived, #24282e);
 	}
diff --git a/src/front/Components/Elements/Tabs/HorizontalTab/index.tsx b/src/front/Components/Elements/Tabs/HorizontalTab/index.tsx
index 990e6238..0f6cced0 100644
--- a/src/front/Components/Elements/Tabs/HorizontalTab/index.tsx
+++ b/src/front/Components/Elements/Tabs/HorizontalTab/index.tsx
@@ -3,6 +3,7 @@ import classes from "./classes.module.scss";
 import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
 import useHoverable from "@Front/Hooks/useHoverable";
 import { ITabValue } from "..";
+import { ExclamationCircleIcon } from "@heroicons/react/24/outline";
 export type ITab = {
 	label: React.ReactNode;
 };
@@ -11,6 +12,7 @@ export type IProps<T> = {
 	onSelect: (value: ITabValue<T>) => void;
 	value: ITabValue<T>;
 	isSelected: boolean;
+	hasWarning?: boolean;
 } & ITab;
 
 export default function HorizontalTabs<T>(props: IProps<T>) {
@@ -29,6 +31,7 @@ export default function HorizontalTabs<T>(props: IProps<T>) {
 				color={!isHovered && !props.isSelected ? ETypoColor.TABS_CONTRAST_DEFAULT : ETypoColor.TABS_CONTRAST_ACTIVATED}>
 				{props.label}
 			</Typography>
+			{props.hasWarning && <ExclamationCircleIcon width="24" height="24" color="var(--tabs-contrast-warning)" />}
 		</div>
 	);
 }
diff --git a/src/front/Components/Elements/Tabs/index.tsx b/src/front/Components/Elements/Tabs/index.tsx
index 7906b750..c90dbc36 100644
--- a/src/front/Components/Elements/Tabs/index.tsx
+++ b/src/front/Components/Elements/Tabs/index.tsx
@@ -8,11 +8,12 @@ import useOpenable from "@Front/Hooks/useOpenable";
 
 export type ITabValue<T> = T & {
 	id: unknown;
-}
+};
 
 type ITabInternal<T> = ITab & {
 	key?: string;
 	value: ITabValue<T>;
+	hasWarning?: boolean;
 };
 
 type IProps<T> = {
@@ -100,6 +101,7 @@ export default function Tabs<T>({ onSelect, tabs: propsTabs }: IProps<T>) {
 						value={element.value}
 						onSelect={handleSelect}
 						isSelected={element.value.id === selectedTab.id}
+						hasWarning={element.hasWarning}
 					/>
 				))}
 			</div>
@@ -112,6 +114,7 @@ export default function Tabs<T>({ onSelect, tabs: propsTabs }: IProps<T>) {
 							value={element.value}
 							onSelect={handleSelect}
 							isSelected={element.value.id === selectedTab.id}
+							hasWarning={element.hasWarning}
 						/>
 					))}
 				</div>

From c868b8cd23a538e34b9e4bce449d74589b1c993a Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Wed, 24 Jul 2024 17:01:46 +0200
Subject: [PATCH 08/12] :sparkles: warning on tabs

---
 .../Layouts/Folder/FolderInformation/ClientView/index.tsx     | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/index.tsx b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/index.tsx
index cce182f9..264db94d 100644
--- a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/index.tsx
+++ b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/index.tsx
@@ -14,6 +14,7 @@ import Link from "next/link";
 import NoDocument from "./NoDocument";
 import DocumentTables from "./DocumentTables";
 import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
+import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
 
 type IProps = {
 	folder: OfficeFolder;
@@ -42,6 +43,9 @@ export default function ClientView(props: IProps) {
 				label: `${customer.contact?.first_name} ${customer.contact?.last_name}`,
 				key: customer.uid,
 				value: customer,
+				hasWarning:
+					customer.documents &&
+					customer.documents.filter((document) => document.document_status === EDocumentStatus.DEPOSITED).length > 0,
 			})),
 		[customers],
 	);

From 6f16d05463611bd20cc3884ff021a5b13576064d Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Wed, 24 Jul 2024 17:11:26 +0200
Subject: [PATCH 09/12] :sparkles: NEw componnt

---
 .../FolderListContainer/index.tsx             |  1 +
 .../DeedTypeListContainer/index.tsx           | 54 ++++++-------------
 2 files changed, 17 insertions(+), 38 deletions(-)

diff --git a/src/front/Components/DesignSystem/FolderListContainer/index.tsx b/src/front/Components/DesignSystem/FolderListContainer/index.tsx
index 6b8c3e46..53df5b74 100644
--- a/src/front/Components/DesignSystem/FolderListContainer/index.tsx
+++ b/src/front/Components/DesignSystem/FolderListContainer/index.tsx
@@ -64,6 +64,7 @@ export default function FolderListContainer(props: IProps) {
 	const [blocks, setBlocks] = React.useState<IBlock[]>(getBlocks(folders));
 
 	const onSelectedFolder = (block: IBlock) => {
+		props.onCloseLeftSide && props.onCloseLeftSide();
 		const folder = folders.find((folder) => folder.uid === block.id);
 		if (!folder) return;
 		props.onSelectedFolder && props.onSelectedFolder(folder);
diff --git a/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/DeedTypeListContainer/index.tsx b/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/DeedTypeListContainer/index.tsx
index 6dc34c85..4386d52d 100644
--- a/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/DeedTypeListContainer/index.tsx
+++ b/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/DeedTypeListContainer/index.tsx
@@ -1,15 +1,12 @@
 import DeedTypes from "@Front/Api/LeCoffreApi/Admin/DeedTypes/DeedTypes";
-import Button from "@Front/Components/DesignSystem/Button";
-import SearchBar from "@Front/Components/DesignSystem/SearchBar";
 import Module from "@Front/Config/Module";
 import { DeedType } from "le-coffre-resources/dist/Admin";
-import Link from "next/link";
 import { useRouter } from "next/router";
-import React, { useCallback, useState } from "react";
+import React, { useCallback } from "react";
 
 import classes from "./classes.module.scss";
 import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block";
-import BlockList from "@Front/Components/DesignSystem/SearchBlockList/BlockList";
+import SearchBlockList from "@Front/Components/DesignSystem/SearchBlockList";
 
 type IProps = {
 	deedTypes: DeedType[];
@@ -18,20 +15,9 @@ type IProps = {
 };
 
 export default function DeedListContainer(props: IProps) {
-	const [filteredUsers, setFilteredUsers] = useState<DeedType[]>(props.deedTypes);
 	const router = useRouter();
 	const { deedTypeUid } = router.query;
 
-	const filterDeeds = useCallback(
-		(input: string) => {
-			const filteredUsers = props.deedTypes.filter((deedType) => {
-				return deedType.name?.toLowerCase().includes(input.toLowerCase());
-			});
-			setFilteredUsers(filteredUsers);
-		},
-		[props.deedTypes],
-	);
-
 	const onSelectedBlock = useCallback(
 		(block: IBlock) => {
 			props.onCloseLeftSide && props.onCloseLeftSide();
@@ -43,28 +29,20 @@ export default function DeedListContainer(props: IProps) {
 
 	return (
 		<div className={classes["root"]}>
-			<div className={classes["header"]}>
-				<div className={classes["searchbar"]}>
-					<SearchBar onChange={filterDeeds} placeholder="Chercher un type d'acte" />
-				</div>
-				<div className={classes["folderlist-container"]}>
-					<BlockList
-						blocks={filteredUsers.map((deed) => {
-							return {
-								primaryText: deed.name,
-								id: deed.uid!,
-								selected: deedTypeUid === deed.uid,
-							};
-						})}
-						onSelectedBlock={onSelectedBlock}
-					/>
-				</div>
-			</div>
-			<div className={classes["create-container"]}>
-				<Link href={Module.getInstance().get().modules.pages.DeedTypes.pages.Create.props.path}>
-					<Button fullwidth={true}>Créer un type d'acte</Button>
-				</Link>
-			</div>
+			<SearchBlockList
+				blocks={props.deedTypes.map((deed) => {
+					return {
+						primaryText: deed.name,
+						id: deed.uid!,
+						selected: deedTypeUid === deed.uid,
+					};
+				})}
+				onSelectedBlock={onSelectedBlock}
+				bottomButton={{
+					link: Module.getInstance().get().modules.pages.DeedTypes.pages.Create.props.path,
+					text: "Créer un type d'acte",
+				}}
+			/>
 		</div>
 	);
 }

From 02994a29591fbb9cc1b6a65cc8783ecd308b8956 Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Wed, 24 Jul 2024 17:37:22 +0200
Subject: [PATCH 10/12] :sparkles: New left nav everywhere + fix button

---
 .../FolderArchivedListContainer/index.tsx     | 33 +---------
 .../SearchBlockList/BlockList/Block/index.tsx |  4 +-
 .../SearchBlockList/classes.module.scss       |  1 -
 .../DesignSystem/SearchBlockList/index.tsx    | 17 +++--
 .../DesignSystem/Typography/index.tsx         |  1 +
 .../CollaboratorListContainer/index.tsx       | 57 ++++-------------
 .../DeedTypeListContainer/index.tsx           |  2 +-
 .../DocumentTypeListContainer/index.tsx       | 53 +++++----------
 .../OfficeListContainer/index.tsx             | 44 ++++---------
 .../RoleListContainer/index.tsx               | 64 ++++++-------------
 .../UserListContainer/index.tsx               | 45 ++++---------
 11 files changed, 93 insertions(+), 228 deletions(-)

diff --git a/src/front/Components/DesignSystem/FolderArchivedListContainer/index.tsx b/src/front/Components/DesignSystem/FolderArchivedListContainer/index.tsx
index c77c890c..30f9824b 100644
--- a/src/front/Components/DesignSystem/FolderArchivedListContainer/index.tsx
+++ b/src/front/Components/DesignSystem/FolderArchivedListContainer/index.tsx
@@ -1,17 +1,12 @@
 import Module from "@Front/Config/Module";
 import { OfficeFolder } from "le-coffre-resources/dist/Notary";
 import { EDocumentStatus } from "le-coffre-resources/dist/Notary/Document";
-import Link from "next/link";
 import { NextRouter, useRouter } from "next/router";
 import React from "react";
 
-import Button from "../Button";
-import SearchBar from "../SearchBar";
 import classes from "./classes.module.scss";
-import Rules, { RulesMode } from "@Front/Components/Elements/Rules";
-import { AppRuleActions, AppRuleNames } from "@Front/Api/Entities/rule";
 import { IBlock } from "../SearchBlockList/BlockList/Block";
-import BlockList from "../SearchBlockList/BlockList";
+import SearchBlockList from "../SearchBlockList";
 
 type IProps = {
 	folders: OfficeFolder[];
@@ -45,33 +40,9 @@ class FolderArchivedListContainerClass extends React.Component<IPropsClass, ISta
 	}
 
 	public override render(): JSX.Element {
-		const navigatePath = Module.getInstance().get().modules.pages.Folder.pages.CreateFolder.props.path;
 		return (
 			<div className={classes["root"]}>
-				<div className={classes["header"]}>
-					<div className={classes["searchbar"]}>
-						<SearchBar onChange={this.filterFolders} placeholder="Chercher un dossier" />
-					</div>
-					<div className={classes["folderlist-container"]}>
-						<BlockList blocks={this.state.blocks} onSelectedBlock={this.onSelectedFolder} />
-					</div>
-				</div>
-				{!this.props.isArchived && (
-					<div>
-						<Rules
-							mode={RulesMode.NECESSARY}
-							rules={[
-								{
-									action: AppRuleActions.create,
-									name: AppRuleNames.officeFolders,
-								},
-							]}>
-							<Link href={navigatePath}>
-								<Button fullwidth={true}>Créer un dossier</Button>
-							</Link>
-						</Rules>
-					</div>
-				)}
+				<SearchBlockList blocks={this.state.blocks} onSelectedBlock={this.onSelectedFolder} />
 			</div>
 		);
 	}
diff --git a/src/front/Components/DesignSystem/SearchBlockList/BlockList/Block/index.tsx b/src/front/Components/DesignSystem/SearchBlockList/BlockList/Block/index.tsx
index c9914f64..19ec5787 100644
--- a/src/front/Components/DesignSystem/SearchBlockList/BlockList/Block/index.tsx
+++ b/src/front/Components/DesignSystem/SearchBlockList/BlockList/Block/index.tsx
@@ -29,7 +29,9 @@ export default function Block(props: IProps) {
 					<Typography typo={ETypo.TEXT_MD_LIGHT} color={ETypoColor.NAVIGATION_BUTTON_CONTRAST_DEFAULT}>
 						{secondaryText}
 					</Typography>
-					<Typography typo={ETypo.TEXT_MD_BOLD} color={ETypoColor.NAVIGATION_BUTTON_CONTRAST_DEFAULT}>
+					<Typography
+						typo={ETypo.TEXT_MD_BOLD}
+						color={isActive ? ETypoColor.NAVIGATION_BUTTON_CONTRAST_ACTIVE : ETypoColor.NAVIGATION_BUTTON_CONTRAST_DEFAULT}>
 						{primaryText}
 					</Typography>
 				</div>
diff --git a/src/front/Components/DesignSystem/SearchBlockList/classes.module.scss b/src/front/Components/DesignSystem/SearchBlockList/classes.module.scss
index 9f53834d..e7bcaa27 100644
--- a/src/front/Components/DesignSystem/SearchBlockList/classes.module.scss
+++ b/src/front/Components/DesignSystem/SearchBlockList/classes.module.scss
@@ -24,6 +24,5 @@
 
 	.bottom-container {
 		margin-top: auto;
-		width: 336px;
 	}
 }
diff --git a/src/front/Components/DesignSystem/SearchBlockList/index.tsx b/src/front/Components/DesignSystem/SearchBlockList/index.tsx
index 46434edd..3dd43a52 100644
--- a/src/front/Components/DesignSystem/SearchBlockList/index.tsx
+++ b/src/front/Components/DesignSystem/SearchBlockList/index.tsx
@@ -4,7 +4,7 @@ import { IBlock } from "./BlockList/Block";
 import classes from "./classes.module.scss";
 import SearchBar from "../SearchBar";
 import Button from "../Button";
-import Link from "next/link";
+import { useRouter } from "next/router";
 
 type IProps = {
 	blocks: IBlock[];
@@ -17,6 +17,8 @@ type IProps = {
 export default function SearchBlockList(props: IProps) {
 	const { blocks, onSelectedBlock, bottomButton } = props;
 
+	const router = useRouter();
+
 	const [blocksShowing, setBlocksShowing] = useState<IBlock[]>(blocks);
 	const bottomButtonRef = useRef<HTMLAnchorElement>(null);
 	const searchBarRef = useRef<HTMLDivElement>(null);
@@ -47,6 +49,11 @@ export default function SearchBlockList(props: IProps) {
 		};
 	}, [bottomButton]);
 
+	const redirectOnBottomButtonClick = useCallback(() => {
+		if (!bottomButton) return;
+		router.push(bottomButton.link);
+	}, [bottomButton, router]);
+
 	useEffect(() => {
 		setBlocksShowing(blocks);
 	}, [blocks]);
@@ -60,9 +67,11 @@ export default function SearchBlockList(props: IProps) {
 				<BlockList blocks={blocksShowing} onSelectedBlock={onSelectedBlock} />
 			</div>
 			{bottomButton && (
-				<Link href={bottomButton.link} className={classes["bottom-container"]} ref={bottomButtonRef}>
-					<Button fullwidth>{bottomButton.text}</Button>
-				</Link>
+				<div className={classes["bottom-container"]}>
+					<Button fullwidth onClick={redirectOnBottomButtonClick}>
+						{bottomButton.text}
+					</Button>
+				</div>
 			)}
 		</div>
 	);
diff --git a/src/front/Components/DesignSystem/Typography/index.tsx b/src/front/Components/DesignSystem/Typography/index.tsx
index 17db7964..fd0d019f 100644
--- a/src/front/Components/DesignSystem/Typography/index.tsx
+++ b/src/front/Components/DesignSystem/Typography/index.tsx
@@ -154,6 +154,7 @@ export enum ETypoColor {
 	CONTRAST_HOVERED = "--contrast-hovered",
 	ERROR_WEAK_CONTRAST = "--error-weak-contrast",
 	NAVIGATION_BUTTON_CONTRAST_DEFAULT = "--navigation-button-contrast-default",
+	NAVIGATION_BUTTON_CONTRAST_ACTIVE = "--navigation-button-contrast-active",
 }
 
 export default function Typography(props: IProps) {
diff --git a/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/CollaboratorListContainer/index.tsx b/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/CollaboratorListContainer/index.tsx
index 9df33274..eee22e10 100644
--- a/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/CollaboratorListContainer/index.tsx
+++ b/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/CollaboratorListContainer/index.tsx
@@ -1,12 +1,11 @@
-import React, { useCallback, useState } from "react";
+import React, { useCallback } from "react";
 
 import classes from "./classes.module.scss";
-import SearchBar from "@Front/Components/DesignSystem/SearchBar";
 import User from "le-coffre-resources/dist/Notary";
 import { useRouter } from "next/router";
 import Module from "@Front/Config/Module";
 import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block";
-import BlockList from "@Front/Components/DesignSystem/SearchBlockList/BlockList";
+import SearchBlockList from "@Front/Components/DesignSystem/SearchBlockList";
 
 type IProps = {
 	collaborators: User[];
@@ -15,22 +14,9 @@ type IProps = {
 };
 
 export default function CollaboratorListContainer(props: IProps) {
-	const [filteredUsers, setFilteredUsers] = useState<User[]>(props.collaborators);
 	const router = useRouter();
 
 	const { collaboratorUid } = router.query;
-	const filterUsers = useCallback(
-		(input: string) => {
-			const filteredUsers = props.collaborators.filter((user) => {
-				return (
-					user.contact?.first_name?.toLowerCase().includes(input.toLowerCase()) ||
-					user.contact?.last_name?.toLowerCase().includes(input.toLowerCase())
-				);
-			});
-			setFilteredUsers(filteredUsers);
-		},
-		[props.collaborators],
-	);
 
 	const onSelectedBlock = useCallback(
 		(block: IBlock) => {
@@ -43,35 +29,16 @@ export default function CollaboratorListContainer(props: IProps) {
 
 	return (
 		<div className={classes["root"]}>
-			<div className={classes["header"]}>
-				<div className={classes["searchbar"]}>
-					<SearchBar onChange={filterUsers} placeholder="Chercher un collaborateur" />
-				</div>
-				<div className={classes["folderlist-container"]}>
-					<BlockList
-						blocks={filteredUsers.map((user) => {
-							return {
-								primaryText: user.contact?.first_name + " " + user.contact?.last_name,
-								id: user.uid!,
-								selected: user.uid === collaboratorUid,
-								rightIcon: user.seats?.some((seat) => new Date(seat.subscription!.end_date) >= new Date()) ? (
-									<div
-										style={{
-											height: "12px",
-											width: "12px",
-											borderRadius: "100px",
-											backgroundColor: "var(--color-success-600)",
-										}}
-									/>
-								) : (
-									<></>
-								),
-							};
-						})}
-						onSelectedBlock={onSelectedBlock}
-					/>
-				</div>
-			</div>
+			<SearchBlockList
+				blocks={props.collaborators.map((user) => {
+					return {
+						primaryText: user.contact?.first_name + " " + user.contact?.last_name,
+						id: user.uid!,
+						isActive: user.uid === collaboratorUid,
+					};
+				})}
+				onSelectedBlock={onSelectedBlock}
+			/>
 		</div>
 	);
 }
diff --git a/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/DeedTypeListContainer/index.tsx b/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/DeedTypeListContainer/index.tsx
index 4386d52d..fd94a36d 100644
--- a/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/DeedTypeListContainer/index.tsx
+++ b/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/DeedTypeListContainer/index.tsx
@@ -34,7 +34,7 @@ export default function DeedListContainer(props: IProps) {
 					return {
 						primaryText: deed.name,
 						id: deed.uid!,
-						selected: deedTypeUid === deed.uid,
+						isActive: deedTypeUid === deed.uid,
 					};
 				})}
 				onSelectedBlock={onSelectedBlock}
diff --git a/src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/DocumentTypeListContainer/index.tsx b/src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/DocumentTypeListContainer/index.tsx
index 3e41b785..da7fb26f 100644
--- a/src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/DocumentTypeListContainer/index.tsx
+++ b/src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/DocumentTypeListContainer/index.tsx
@@ -1,14 +1,11 @@
-import Button from "@Front/Components/DesignSystem/Button";
-import SearchBar from "@Front/Components/DesignSystem/SearchBar";
 import Module from "@Front/Config/Module";
 import { DocumentType } from "le-coffre-resources/dist/SuperAdmin";
-import Link from "next/link";
 import { useRouter } from "next/router";
-import React, { useCallback, useState } from "react";
+import React, { useCallback } from "react";
 
 import classes from "./classes.module.scss";
 import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block";
-import BlockList from "@Front/Components/DesignSystem/SearchBlockList/BlockList";
+import SearchBlockList from "@Front/Components/DesignSystem/SearchBlockList";
 
 type IProps = {
 	documentTypes: DocumentType[];
@@ -17,19 +14,9 @@ type IProps = {
 };
 
 export default function DocumentTypeListContainer(props: IProps) {
-	const [filteredDocumentTypes, setFilteredDocumentTypes] = useState<DocumentType[]>(props.documentTypes);
 	const router = useRouter();
 
 	const { documentTypeUid } = router.query;
-	const filterDocumentTypes = useCallback(
-		(input: string) => {
-			const filteredDocumentTypes = props.documentTypes.filter((documentType) => {
-				return documentType.name.toLowerCase().includes(input.toLowerCase());
-			});
-			setFilteredDocumentTypes(filteredDocumentTypes);
-		},
-		[props.documentTypes],
-	);
 
 	const onSelectedBlock = useCallback(
 		(block: IBlock) => {
@@ -42,28 +29,20 @@ export default function DocumentTypeListContainer(props: IProps) {
 
 	return (
 		<div className={classes["root"]}>
-			<div className={classes["header"]}>
-				<div className={classes["searchbar"]}>
-					<SearchBar onChange={filterDocumentTypes} placeholder="Chercher un document" />
-				</div>
-				<div className={classes["folderlist-container"]}>
-					<BlockList
-						blocks={filteredDocumentTypes.map((documentType) => {
-							return {
-								primaryText: documentType.name,
-								id: documentType.uid!,
-								selected: documentType.uid === documentTypeUid,
-							};
-						})}
-						onSelectedBlock={onSelectedBlock}
-					/>
-				</div>
-			</div>
-			<div className={classes["create-container"]}>
-				<Link href={Module.getInstance().get().modules.pages.DocumentTypes.pages.Create.props.path}>
-					<Button fullwidth={true}>Créer un type de document</Button>
-				</Link>
-			</div>
+			<SearchBlockList
+				blocks={props.documentTypes.map((documentType) => {
+					return {
+						primaryText: documentType.name,
+						id: documentType.uid!,
+						isActive: documentType.uid === documentTypeUid,
+					};
+				})}
+				onSelectedBlock={onSelectedBlock}
+				bottomButton={{
+					link: Module.getInstance().get().modules.pages.DocumentTypes.pages.Create.props.path,
+					text: "Créer un type de document",
+				}}
+			/>
 		</div>
 	);
 }
diff --git a/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/OfficeListContainer/index.tsx b/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/OfficeListContainer/index.tsx
index b6db9a28..b3c92662 100644
--- a/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/OfficeListContainer/index.tsx
+++ b/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/OfficeListContainer/index.tsx
@@ -1,12 +1,11 @@
-import SearchBar from "@Front/Components/DesignSystem/SearchBar";
 import Module from "@Front/Config/Module";
 import { Office } from "le-coffre-resources/dist/SuperAdmin";
 import { useRouter } from "next/router";
-import React, { useCallback, useState } from "react";
+import React, { useCallback } from "react";
 
 import classes from "./classes.module.scss";
 import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block";
-import BlockList from "@Front/Components/DesignSystem/SearchBlockList/BlockList";
+import SearchBlockList from "@Front/Components/DesignSystem/SearchBlockList";
 
 type IProps = {
 	offices: Office[];
@@ -15,21 +14,9 @@ type IProps = {
 };
 
 export default function OfficeListContainer(props: IProps) {
-	const [filteredOffices, setFilteredOffices] = useState<Office[]>(props.offices);
 	const router = useRouter();
 
 	const { officeUid } = router.query;
-	const filterOffices = useCallback(
-		(input: string) => {
-			const filteredOffices = props.offices.filter((office) => {
-				return (
-					office.name.toLowerCase().includes(input.toLowerCase()) || office.crpcen?.toLowerCase().includes(input.toLowerCase())
-				);
-			});
-			setFilteredOffices(filteredOffices);
-		},
-		[props.offices],
-	);
 
 	const onSelectedBlock = useCallback(
 		(block: IBlock) => {
@@ -42,23 +29,16 @@ export default function OfficeListContainer(props: IProps) {
 
 	return (
 		<div className={classes["root"]}>
-			<div className={classes["header"]}>
-				<div className={classes["searchbar"]}>
-					<SearchBar onChange={filterOffices} placeholder="Chercher un office" />
-				</div>
-				<div className={classes["folderlist-container"]}>
-					<BlockList
-						blocks={filteredOffices.map((office) => {
-							return {
-								primaryText: office.crpcen + " - " + office.name,
-								id: office.uid!,
-								selected: office.uid === officeUid,
-							};
-						})}
-						onSelectedBlock={onSelectedBlock}
-					/>
-				</div>
-			</div>
+			<SearchBlockList
+				blocks={props.offices.map((office) => {
+					return {
+						primaryText: office.crpcen + " - " + office.name,
+						id: office.uid!,
+						isActive: office.uid === officeUid,
+					};
+				})}
+				onSelectedBlock={onSelectedBlock}
+			/>
 		</div>
 	);
 }
diff --git a/src/front/Components/LayoutTemplates/DefaultRoleDashboard/RoleListContainer/index.tsx b/src/front/Components/LayoutTemplates/DefaultRoleDashboard/RoleListContainer/index.tsx
index 1ee4c395..b02309c9 100644
--- a/src/front/Components/LayoutTemplates/DefaultRoleDashboard/RoleListContainer/index.tsx
+++ b/src/front/Components/LayoutTemplates/DefaultRoleDashboard/RoleListContainer/index.tsx
@@ -1,14 +1,11 @@
-import SearchBar from "@Front/Components/DesignSystem/SearchBar";
 import Module from "@Front/Config/Module";
 import { OfficeRole } from "le-coffre-resources/dist/Admin";
 import { useRouter } from "next/router";
-import React, { useCallback, useState } from "react";
+import React, { useCallback } from "react";
 
 import classes from "./classes.module.scss";
-import Link from "next/link";
-import Button from "@Front/Components/DesignSystem/Button";
 import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block";
-import BlockList from "@Front/Components/DesignSystem/SearchBlockList/BlockList";
+import SearchBlockList from "@Front/Components/DesignSystem/SearchBlockList";
 
 type IProps = {
 	roles: OfficeRole[];
@@ -17,21 +14,10 @@ type IProps = {
 };
 
 export default function RoleListContainer(props: IProps) {
-	const [filteredRoles, setFilteredRoles] = useState<OfficeRole[]>(props.roles);
 	const router = useRouter();
 
 	const { roleUid } = router.query;
 
-	const filterRoles = useCallback(
-		(input: string) => {
-			const filteredRoles = props.roles.filter((role) => {
-				return role.name?.toLowerCase().includes(input.toLowerCase());
-			});
-			setFilteredRoles(filteredRoles);
-		},
-		[props.roles],
-	);
-
 	const onSelectedBlock = useCallback(
 		(block: IBlock) => {
 			props.onCloseLeftSide && props.onCloseLeftSide();
@@ -43,33 +29,25 @@ export default function RoleListContainer(props: IProps) {
 
 	return (
 		<div className={classes["root"]}>
-			<div className={classes["header"]}>
-				<div className={classes["searchbar"]}>
-					<SearchBar onChange={filterRoles} placeholder="Chercher un rôle" />
-				</div>
-				<div className={classes["folderlist-container"]}>
-					<BlockList
-						blocks={filteredRoles
-							.filter((role) => {
-								if (role.name === "admin") return false;
-								return true;
-							})
-							.map((role) => {
-								return {
-									primaryText: role.name,
-									id: role.uid!,
-									selected: role.uid === roleUid,
-								};
-							})}
-						onSelectedBlock={onSelectedBlock}
-					/>
-				</div>
-			</div>
-			<div className={classes["create-container"]}>
-				<Link href={Module.getInstance().get().modules.pages.Roles.pages.Create.props.path}>
-					<Button fullwidth={true}>Créer un rôle</Button>
-				</Link>
-			</div>
+			<SearchBlockList
+				blocks={props.roles
+					.filter((role) => {
+						if (role.name === "admin") return false;
+						return true;
+					})
+					.map((role) => {
+						return {
+							primaryText: role.name,
+							id: role.uid!,
+							isActive: role.uid === roleUid,
+						};
+					})}
+				onSelectedBlock={onSelectedBlock}
+				bottomButton={{
+					link: Module.getInstance().get().modules.pages.Roles.pages.Create.props.path,
+					text: "Créer un rôle",
+				}}
+			/>
 		</div>
 	);
 }
diff --git a/src/front/Components/LayoutTemplates/DefaultUserDashboard/UserListContainer/index.tsx b/src/front/Components/LayoutTemplates/DefaultUserDashboard/UserListContainer/index.tsx
index f543cba6..0842539d 100644
--- a/src/front/Components/LayoutTemplates/DefaultUserDashboard/UserListContainer/index.tsx
+++ b/src/front/Components/LayoutTemplates/DefaultUserDashboard/UserListContainer/index.tsx
@@ -1,12 +1,11 @@
-import SearchBar from "@Front/Components/DesignSystem/SearchBar";
 import Module from "@Front/Config/Module";
 import User from "le-coffre-resources/dist/Notary";
 import { useRouter } from "next/router";
-import React, { useCallback, useState } from "react";
+import React, { useCallback } from "react";
 
 import classes from "./classes.module.scss";
 import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block";
-import BlockList from "@Front/Components/DesignSystem/SearchBlockList/BlockList";
+import SearchBlockList from "@Front/Components/DesignSystem/SearchBlockList";
 
 type IProps = {
 	users: User[];
@@ -15,22 +14,9 @@ type IProps = {
 };
 
 export default function UserListContainer(props: IProps) {
-	const [filteredUsers, setFilteredUsers] = useState<User[]>(props.users);
 	const router = useRouter();
 
 	const { userUid } = router.query;
-	const filterUsers = useCallback(
-		(input: string) => {
-			const filteredUsers = props.users.filter((user) => {
-				return (
-					user.contact?.first_name?.toLowerCase().includes(input.toLowerCase()) ||
-					user.contact?.last_name?.toLowerCase().includes(input.toLowerCase())
-				);
-			});
-			setFilteredUsers(filteredUsers);
-		},
-		[props.users],
-	);
 
 	const onSelectedBlock = useCallback(
 		(block: IBlock) => {
@@ -43,23 +29,16 @@ export default function UserListContainer(props: IProps) {
 
 	return (
 		<div className={classes["root"]}>
-			<div className={classes["header"]}>
-				<div className={classes["searchbar"]}>
-					<SearchBar onChange={filterUsers} placeholder="Chercher un utilisateur" />
-				</div>
-				<div className={classes["folderlist-container"]}>
-					<BlockList
-						blocks={filteredUsers.map((user) => {
-							return {
-								primaryText: user.contact?.first_name + " " + user.contact?.last_name,
-								id: user.uid!,
-								selected: user.uid === userUid,
-							};
-						})}
-						onSelectedBlock={onSelectedBlock}
-					/>
-				</div>
-			</div>
+			<SearchBlockList
+				blocks={props.users.map((user) => {
+					return {
+						primaryText: user.contact?.first_name + " " + user.contact?.last_name,
+						id: user.uid!,
+						isActive: user.uid === userUid,
+					};
+				})}
+				onSelectedBlock={onSelectedBlock}
+			/>
 		</div>
 	);
 }

From 19fec6e4a2cfe492c0e8c75a4e5b46515769d87c Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Wed, 24 Jul 2024 17:46:50 +0200
Subject: [PATCH 11/12] :bug: fonts bug

---
 src/front/index.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/front/index.scss b/src/front/index.scss
index f0794043..3b8e1f7e 100644
--- a/src/front/index.scss
+++ b/src/front/index.scss
@@ -1,5 +1,5 @@
-@import "@Themes/constants.scss";
 @import "@Themes/fonts.scss";
+@import "@Themes/constants.scss";
 @import "@Themes/variables.scss";
 
 * {

From 53f98b2f36ede7e8ce52f602f0742613ffc1b8af Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Wed, 24 Jul 2024 17:53:37 +0200
Subject: [PATCH 12/12] :bug: trying to fix font

---
 src/pages/_app.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index c2205983..4776411b 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,6 +1,6 @@
+import "@Front/index.scss";
 import { DefaultLayout } from "@Front/Components/LayoutTemplates/DefaultLayout";
 import { FrontendVariables } from "@Front/Config/VariablesFront";
-import "@Front/index.scss";
 import type { NextPage } from "next";
 import type { AppType, AppProps } from "next/app";
 import { useEffect, type ReactElement, type ReactNode } from "react";