page add collaborators (#14)

https://app.ora.pm/p/fb56ed95daa7456b888d266a050b9afa?v=86662&s=28850&t=k&c=822333bd0995425286fa137c4c89977a

src/front/Components/DesignSystem/FolderBoxInformation/index.tsx

@@ -6,6 +6,7 @@ import PenICon from "@Assets/Icons/pen.svg";
 import { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
 import Typography, { ITypo } from "../Typography";
 import Link from "next/link";
+import Module from "@Front/Config/Module";
 
 type IProps = {
 	folder: IDashBoardFolder;
@@ -14,9 +15,14 @@ type IProps = {
 
 export default function FolderBoxInformation(props: IProps) {
 	const { isDescription = false } = props;
-	const path = isDescription
-		? "/folder/".concat(props.folder.uid).concat("/update/description")
-		: "/folder/".concat(props.folder.uid).concat("/update/metadata");
+	const editDescriptionPath = Module.getInstance()
+		.get()
+		.modules.pages.Folder.pages.EditDescription.props.path.replace("[folderUid]", props.folder.uid);
+	const editInformationsPath = Module.getInstance()
+		.get()
+		.modules.pages.Folder.pages.EditDescription.props.path.replace("[folderUid]", props.folder.uid);
+
+	const path = isDescription ? editDescriptionPath : editInformationsPath;
 
 	return (
 		<div className={classNames(classes["root"], isDescription && classes["isSignleDescription"])}>

src/front/Components/DesignSystem/FolderList/index.tsx

@@ -5,9 +5,11 @@ import React from "react";
 
 import FolderContainer from "../FolderContainer";
 import classes from "./classes.module.scss";
+import Module from "@Front/Config/Module";
 
 type IProps = {
 	folders: IDashBoardFolder[];
+	isArchived: boolean;
 	onSelectedFolder?: (folder: IDashBoardFolder) => void;
 	onCloseLeftSide?: () => void;
 };
@@ -20,6 +22,9 @@ type IState = {};
 
 class FolderListClass extends React.Component<IPropsClass, IState> {
 	public override render(): JSX.Element {
+		const redirectPath: string = this.props.isArchived
+			? Module.getInstance().get().modules.pages.Folder.pages.FolderArchived.pages.FolderInformation.props.path
+			: Module.getInstance().get().modules.pages.Folder.pages.FolderInformation.props.path;
 		return (
 			<div className={classes["root"]}>
 				{this.props.folders.map((folder) => {
@@ -28,7 +33,7 @@ class FolderListClass extends React.Component<IPropsClass, IState> {
 							onClick={this.props.onCloseLeftSide}
 							key={folder.uid}
 							className={folder.uid === this.props.selectedFolder ? classes["active"] : ""}>
-							<Link href={"/folder/".concat(folder.uid)}>
+							<Link href={redirectPath.replace("[folderUid]", folder.uid)}>
 								<FolderContainer folder={folder} onSelectedFolder={this.props.onSelectedFolder} />;
 							</Link>
 						</div>

src/front/Components/DesignSystem/FolderListContainer/index.tsx

@@ -6,9 +6,11 @@ import Button from "../Button";
 import FolderList from "../FolderList";
 import SearchBar from "../SearchBar";
 import classes from "./classes.module.scss";
+import Module from "@Front/Config/Module";
 
 type IProps = {
 	folders: IDashBoardFolder[];
+	isArchived: boolean;
 	onSelectedFolder?: (folder: IDashBoardFolder) => void;
 	onCloseLeftSide?: () => void;
 };
@@ -26,7 +28,7 @@ export default class FolderListContainer extends React.Component<IProps, IState>
 	}
 
 	public override render(): JSX.Element {
-		const navigatePath = "/folder/create";
+		const navigatePath = Module.getInstance().get().modules.pages.Folder.pages.CreateFolder.props.path;
 		return (
 			<div className={classes["root"]}>
 				<div>
@@ -37,12 +39,15 @@ export default class FolderListContainer extends React.Component<IProps, IState>
 						folders={this.state.filteredFolders}
 						onSelectedFolder={this.props.onSelectedFolder && this.props.onSelectedFolder}
 						onCloseLeftSide={this.props.onCloseLeftSide}
+						isArchived={this.props.isArchived}
 					/>
 				</div>
 				<div>
+					{!this.props.isArchived && (
 						<Link href={navigatePath}>
 							<Button fullwidth={true}>Créer un dossier</Button>
 						</Link>
+					)}
 				</div>
 			</div>
 		);

src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/index.tsx

@@ -3,6 +3,7 @@ import React from "react";
 
 import NavigationLink from "../../NavigationLink";
 import classes from "./classes.module.scss";
+import Module from "@Front/Config/Module";
 
 type IProps = {
 	isOpen: boolean;
@@ -18,7 +19,7 @@ export default class BurgerModal extends React.Component<IProps, IState> {
 			<>
 				<div className={classes["background"]} onClick={this.props.closeModal} />
 				<div className={classes["root"]}>
-					<NavigationLink path={"/folder"} text="Dossiers en cours" />
+					<NavigationLink path={Module.getInstance().get().modules.pages.Folder.props.path} text="Dossiers en cours" />
 					<NavigationLink text="Dossiers archivés" />
 					<div className={classes["separator"]} />
 					<LogOutButton />

src/front/Components/DesignSystem/Header/HeaderLink/index.tsx

@@ -1,8 +1,7 @@
 import classNames from "classnames";
 import Link from "next/link";
-import router from "next/router";
+import { useRouter } from "next/router";
 import React from "react";
-import { useEffect, useState } from "react";
 
 import Typography, { ITypo } from "../../Typography";
 import classes from "./classes.module.scss";
@@ -39,8 +38,13 @@ class HeaderLinkClass extends React.Component<IPropsClass, IStateClass> {
 }
 
 export default function HeaderLink(props: IPropsClass) {
-	const [url, setUrl] = useState("");
-	useEffect(() => setUrl(router?.asPath), []);
-	const isActive = url.includes(props.path!);
+	/**
+	 * TODO: We need to fix the check and include subPathName
+	 * BUT
+	 * `/folder/archived` and `/folder/xxx` should be differenciated
+	 */
+	const router = useRouter();
+	const { pathname } = router;
+	const isActive = pathname === props.path;
 	return <HeaderLinkClass {...props} isActive={isActive} />;
 }

src/front/Components/DesignSystem/Header/Navigation/index.tsx

@@ -2,6 +2,7 @@ import React from "react";
 
 import HeaderLink from "../HeaderLink";
 import classes from "./classes.module.scss";
+import Module from "@Front/Config/Module";
 
 type IProps = {};
 type IState = {};
@@ -10,8 +11,11 @@ export default class Navigation extends React.Component<IProps, IState> {
 	public override render(): JSX.Element {
 		return (
 			<div className={classes["root"]}>
-				<HeaderLink text={"Dossiers en cours"} path={"/folder"} />
-				<HeaderLink text={"Dossiers archivés"} path={""} isActive={false} />
+				<HeaderLink text={"Dossiers en cours"} path={Module.getInstance().get().modules.pages.Folder.props.path} />
+				<HeaderLink
+					text={"Dossiers archivés"}
+					path={Module.getInstance().get().modules.pages.Folder.pages.FolderArchived.props.path}
+				/>
 			</div>
 		);
 	}

src/front/Components/DesignSystem/SearchBar/index.tsx

@@ -45,7 +45,7 @@ export default class SearchBar extends React.Component<IProps, IState> {
 		const hasValue = event.target.value.length > 0;
 		this.doesInputHaveValue(hasValue);
 		if (!this.props.onChange) return;
-		this.props.onChange(this.filterFolders(event));
+		this.props.onChange(this.filterFolders(event)!);
 	}
 
 	private doesInputHaveValue(hasValue: boolean) {

src/front/Components/DesignSystem/UserFolder/UserFolderHeader/index.tsx

@@ -6,6 +6,7 @@ import Image from "next/image";
 import PenIcon from "@Assets/Icons/pen.svg";
 import WarningBadge from "../../WarningBadge";
 import Link from "next/link";
+import Module from "@Front/Config/Module";
 
 type IProps = {
 	contact: {
@@ -22,7 +23,10 @@ type IState = {};
 
 export default class UserFolderHeaderClass extends React.Component<IProps, IState> {
 	public override render(): JSX.Element {
-		const redirectPath = "/folder/".concat(this.props.selectedFolderUid, "/update/client/", this.props.contact.uid);
+		const redirectPath = Module.getInstance()
+			.get()
+			.modules.pages.Folder.pages.EditClient.props.path.replace("[folderUid]", this.props.selectedFolderUid)
+			.replace("[clientUid]", this.props.contact.uid);
 		return (
 			<div className={classes["root"]}>
 				<div className={classes["content"]}>

src/front/Components/DesignSystem/UserFolder/index.tsx

@@ -13,6 +13,7 @@ import QuantityProgressBar from "../QuantityProgressBar";
 import classes from "./classes.module.scss";
 import DocumentList from "./DocumentList";
 import UserFolderHeader from "./UserFolderHeader";
+import Module from "@Front/Config/Module";
 
 type IProps = {
 	customer: Customer;
@@ -47,7 +48,9 @@ export default class UserFolder extends React.Component<IProps, IState> {
 	public override render(): JSX.Element {
 		const documentsAsked: Document[] | null = this.getDocumentsByStatus("ASKED");
 		const otherDocuments: Document[] | null = this.getValidatedAndPendindDocuments();
-
+		const redirectPath = Module.getInstance()
+			.get()
+			.modules.pages.Folder.pages.AskDocument.props.path.replace("[folderUid]", this.props.folder.uid);
 		return (
 			<div className={classes["root"]}>
 				<Confirm
@@ -95,7 +98,7 @@ export default class UserFolder extends React.Component<IProps, IState> {
 							/>
 						</div>
 						<div className={classes["button-container"]}>
-							<Link href={`/folder/${this.props.folder.uid}/ask-documents`}>
+							<Link href={redirectPath}>
 								<Button variant={EButtonVariant.LINE} icon={PlusIcon}>
 									Demander un autre document{" "}
 								</Button>

src/front/Components/LayoutTemplates/DefaultNotaryDashboard/index.tsx

@@ -4,6 +4,7 @@ import FolderListContainer from "@Front/Components/DesignSystem/FolderListContai
 import Header from "@Front/Components/DesignSystem/Header";
 import Version from "@Front/Components/DesignSystem/Version";
 import { folders } from "@Front/Components/Layouts/DesignSystem/dummyData";
+import { foldersArchived } from "@Front/Components/Layouts/DesignSystem/dummyData";
 import WindowStore from "@Front/Stores/WindowStore";
 import classNames from "classnames";
 import { OfficeFolder } from "le-coffre-resources/dist/Customer";
@@ -15,10 +16,11 @@ import classes from "./classes.module.scss";
 type IProps = {
 	title: string;
 	children?: ReactNode;
+	isArchived?: boolean;
 	onSelectedFolder: (folder: IDashBoardFolder) => void;
 };
 type IState = {
-	folders: IDashBoardFolder[];
+	folders: IDashBoardFolder[] | null;
 	isLeftSideOpen: boolean;
 	leftSideCanBeClosed: boolean;
 };
@@ -37,12 +39,13 @@ export default class DefaultNotaryDashboard extends React.Component<IProps, ISta
 	private onWindowResize = () => {};
 	public static defaultProps = {
 		scrollTop: 0,
+		isArchived: false,
 	};
 
 	public constructor(props: IProps) {
 		super(props);
 		this.state = {
-			folders: folders,
+			folders: null,
 			isLeftSideOpen: false,
 			leftSideCanBeClosed: typeof window !== "undefined" ? window.innerWidth < 1024 : false,
 		};
@@ -57,11 +60,14 @@ export default class DefaultNotaryDashboard extends React.Component<IProps, ISta
 				<div className={classes["content"]}>
 					{this.state.isLeftSideOpen && <div className={classes["overlay"]} onClick={this.onCloseLeftSide} />}
 					<div className={classNames(classes["left-side"], this.state.isLeftSideOpen && classes["opened"])}>
+						{this.state.folders && (
 							<FolderListContainer
 								folders={this.state.folders}
 								onSelectedFolder={this.props.onSelectedFolder}
 								onCloseLeftSide={this.onCloseLeftSide}
+								isArchived={this.props.isArchived!}
 							/>
+						)}
 					</div>
 					<div className={classNames(classes["closable-left-side"])}>
 						<Image alt="open side menu" src={ChevronIcon} className={classes["chevron-icon"]} onClick={this.onOpenLeftSide} />
@@ -75,6 +81,15 @@ export default class DefaultNotaryDashboard extends React.Component<IProps, ISta
 
 	public override componentDidMount(): void {
 		this.onWindowResize = WindowStore.getInstance().onResize((window) => this.onResize(window));
+		/**
+		 * We set folders state according to the isArchived props
+		 * TODO:  Front connexion we need to get from bdd
+		 */
+		if (this.props.isArchived) {
+			this.setState({ folders: foldersArchived });
+		} else {
+			this.setState({ folders: folders });
+		}
 	}
 	public override componentWillUnmount() {
 		this.onWindowResize();

src/front/Components/LayoutTemplates/DefaultTemplate/classes.module.scss

@@ -4,6 +4,8 @@
 	margin: var(--root-margin);
 	padding: var(--root-padding);
 	max-width: var(--root-max-width);
+	min-width: 100%;
+	min-height: calc(100vh - 83px);
 
 	@media screen and (max-width: $screen-m) {
 		padding: 0 24px;

src/front/Components/LayoutTemplates/DefaultTemplate/index.tsx

@@ -23,9 +23,7 @@ export default class DefaultTemplate extends React.Component<IProps, IState> {
 		return (
 			<>
 				<Header isUserConnected={true} />
-				<div className={classes["root"]}>
-					<div className={classes["content"]}>{this.props.children}</div>
-				</div>
+				<div className={classes["root"]}>{this.props.children}</div>
 				<Version />
 			</>
 		);

src/front/Components/Layouts/DesignSystem/dummyData.ts

@@ -147,7 +147,7 @@ export const folderWithPendingDocument: OfficeFolder = {
 	uid: "ferzferzfezeefzdd",
 	folder_number: "00001",
 	name: "Mon dossier",
-	status: EFolderStatus.ARCHIVED,
+	status: EFolderStatus.LIVE,
 	deed: deed,
 	office: office,
 	created_at: new Date(),
@@ -160,7 +160,7 @@ export const folderWithPendingDocument1: OfficeFolder = {
 	uid: "gtrtyutyhretgytu",
 	folder_number: "00002",
 	name: "Mon dossier",
-	status: EFolderStatus.ARCHIVED,
+	status: EFolderStatus.LIVE,
 	deed: deed,
 	office: office,
 	created_at: new Date(),
@@ -173,7 +173,7 @@ export const folderWithPendingDocument2: OfficeFolder = {
 	uid: "adzefzefsfrefzrtgtr",
 	folder_number: "00003",
 	name: "Mon dossier",
-	status: EFolderStatus.ARCHIVED,
+	status: EFolderStatus.LIVE,
 	deed: deed,
 	office: office,
 	created_at: new Date(),
@@ -199,6 +199,21 @@ export const officeFolderHasCustomer2: OfficeFolderHasCustomer = {
 	updated_at: new Date(),
 };
 
+export const folderWithPendingDocument3: OfficeFolder = {
+	uid: "mkovrijvrezviev",
+	folder_number: "00014",
+	name: "Mon dossier",
+	status: EFolderStatus.LIVE,
+	deed: deed,
+	office: office,
+	created_at: new Date(),
+	updated_at: new Date(),
+	description: "Description",
+	archived_description: "Archived description",
+	documents: [document, documentDeposited, documentPending],
+	office_folder_has_customers: [officeFolderHasCustomer1, officeFolderHasCustomer2],
+};
+
 export const document8: Document = {
 	uid: "eztreggrgbyunjukhg",
 	depositor: customer,
@@ -209,9 +224,9 @@ export const document8: Document = {
 	created_at: new Date(),
 };
 
-export const folderWithPendingDocument3: OfficeFolder = {
-	uid: "mkovrijvrezviev",
-	folder_number: "00014",
+export const folderWithPendingDocumentArchived1: OfficeFolder = {
+	uid: "gtrtyutyhrdazafad&éfytu",
+	folder_number: "00007",
 	name: "Mon dossier",
 	status: EFolderStatus.ARCHIVED,
 	deed: deed,
@@ -220,8 +235,20 @@ export const folderWithPendingDocument3: OfficeFolder = {
 	updated_at: new Date(),
 	description: "Description",
 	archived_description: "Archived description",
-	documents: [document, documentDeposited, documentPending],
-	office_folder_has_customers: [officeFolderHasCustomer1, officeFolderHasCustomer2],
+	documents: [documentDeposited],
+};
+export const folderWithPendingDocumentArchived2: OfficeFolder = {
+	uid: "adzefdazdaazzrtgtr",
+	folder_number: "00008",
+	name: "Mon dossier",
+	status: EFolderStatus.ARCHIVED,
+	deed: deed,
+	office: office,
+	created_at: new Date(),
+	updated_at: new Date(),
+	description: "Description",
+	archived_description: "Archived description",
+	documents: [document],
 };
 
 export const document2: Document = {
@@ -240,3 +267,5 @@ export const folders: OfficeFolder[] = [
 	folderWithPendingDocument2,
 	folderWithPendingDocument3,
 ];
+
+export const foldersArchived: OfficeFolder[] = [folderWithPendingDocumentArchived1, folderWithPendingDocumentArchived2];

src/front/Components/Layouts/DesignSystem/index.tsx

@@ -266,7 +266,7 @@ export default class DesignSystem extends BasePage<IProps, IState> {
 							<Typography typo={ITypo.H3}>Folder List</Typography>
 						</div>
 						<div className={classes["sub-section"]}>
-							<FolderList folders={folders} />
+							<FolderList folders={folders} isArchived={false} />
 						</div>
 					</div>
 

src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx

@@ -13,6 +13,7 @@ import { ActionMeta, MultiValue } from "react-select";
 import BasePage from "../../Base";
 import classes from "./classes.module.scss";
 import Link from "next/link";
+import Module from "@Front/Config/Module";
 
 type IProps = {
 	selectedFolderUid: string;
@@ -43,7 +44,9 @@ class AddClientToFolderClass extends BasePage<IProps, IState> {
 			{ value: "rijgreipgje", label: "jane Doe" },
 			{ value: "gipjerpogkzfe", label: "Marcelino Doe" },
 		];
-		const backwardPath = "/folder/".concat(this.props.selectedFolderUid);
+		const backwardPath = Module.getInstance()
+			.get()
+			.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.selectedFolderUid);
 		return (
 			<DefaultNotaryDashboard title={"Ajouter client(s)"} onSelectedFolder={this.onSelectedFolder}>
 				<div className={classes["root"]}>

src/front/Components/Layouts/Folder/AskDocuments/index.tsx

@@ -145,8 +145,6 @@ export default class AskDocuments extends BasePage<IProps, IState> {
 	}
 
 	private addDocument() {
-		console.log(this.state.documentName);
-		console.log(this.state.visibleDescription);
 		this.setState({
 			isCreateDocumentModalVisible: false,
 			documentName: "",

src/front/Components/Layouts/Folder/FolderInformation/ClientSection/index.tsx

@@ -6,6 +6,7 @@ import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import PlusIcon from "@Assets/Icons/plus.svg";
 import UserFolder from "@Front/Components/DesignSystem/UserFolder";
 import Link from "next/link";
+import Module from "@Front/Config/Module";
 
 type IProps = {
 	folder: IDashBoardFolder;
@@ -14,7 +15,9 @@ type IState = {};
 
 export default class ClientSection extends React.Component<IProps, IState> {
 	public override render(): JSX.Element {
-		const navigatePath = "/folder/".concat(this.props.folder.uid).concat("/add/client");
+		const navigatePath = Module.getInstance()
+			.get()
+			.modules.pages.Folder.pages.AddClient.props.path.replace("[folderUid]", this.props.folder.uid);
 		return (
 			<div className={classes["root"]}>
 				{this.doesFolderHaveCustomer() ? (

src/front/Components/Layouts/Folder/FolderInformation/index.tsx

@@ -14,10 +14,17 @@ import { useRouter } from "next/router";
 import BasePage from "../../Base";
 import classes from "./classes.module.scss";
 import ClientSection from "./ClientSection";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import Module from "@Front/Config/Module";
 
-type IPropsClass = {
+type IProps = {};
+
+type IPropsClass = IProps & {
 	selectedFolderUid: string;
+	isArchivedFolders: boolean;
 };
+
 type IState = {
 	selectedFolder: IDashBoardFolder | null;
 	isArchivedModalOpen: boolean;
@@ -37,8 +44,11 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 	// TODO: Message if the user has not created any folder yet
 	// TODO: get the selected folder from the api in componentDidMount
 	public override render(): JSX.Element {
+		const redirectPathEditCollaborators = Module.getInstance()
+			.get()
+			.modules.pages.Folder.pages.EditCollaborators.props.path.replace("[folderUid]", this.props.selectedFolderUid);
 		return (
-			<DefaultNotaryDashboard title={"Dossier"} onSelectedFolder={this.onSelectedFolder}>
+			<DefaultNotaryDashboard title={"Dossier"} onSelectedFolder={this.onSelectedFolder} isArchived={this.props.isArchivedFolders}>
 				<div className={classes["root"]}>
 					{this.state.selectedFolder ? (
 						<div className={classes["folder-informations"]}>
@@ -47,9 +57,11 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 									<div className={classes["title"]}>
 										<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
 									</div>
+									<Link href={redirectPathEditCollaborators}>
 										<Button variant={EButtonVariant.LINE} icon={ChevronIcon}>
 											Modifier les collaborateurs
 										</Button>
+									</Link>
 								</div>
 								<FolderBoxInformation folder={this.state.selectedFolder} />
 								<div className={classes["second-box"]}>
@@ -101,10 +113,6 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 		);
 	}
 	public override async componentDidMount() {
-		// if()
-		// const selectedFolder = await Fodler.getInstance().getByUid(this.props.selectedFolderUid);
-		// this.setState({ selectedFolder });
-		// console.log(folders);
 		for (const folder of folders) {
 			if (folder.uid === this.props.selectedFolderUid) {
 				this.setState({ selectedFolder: folder });
@@ -130,9 +138,12 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 	}
 }
 
-export default function FolderInformation() {
+export default function FolderInformation(props: IProps) {
 	const router = useRouter();
 	let { folderUid } = router.query;
 	folderUid = folderUid as string;
-	return <FolderInformationClass selectedFolderUid={folderUid} />;
+	const [url, setUrl] = useState("");
+	useEffect(() => setUrl(router?.asPath), []);
+	const isArchivedFolders = url.includes("archived");
+	return <FolderInformationClass {...props} selectedFolderUid={folderUid} isArchivedFolders={isArchivedFolders} />;
 }

src/front/Components/Layouts/Folder/UpdateClient/index.tsx

@@ -11,6 +11,7 @@ import classes from "./classes.module.scss";
 import Link from "next/link";
 import { ChangeEvent } from "react";
 import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
+import Module from "@Front/Config/Module";
 
 type IProps = {
 	selectedFolderUid: string;
@@ -45,7 +46,9 @@ class UpdateClientClass extends BasePage<IProps, IState> {
 		this.closeLeavingModal = this.closeLeavingModal.bind(this);
 	}
 	public override render(): JSX.Element {
-		const backwardPath = "/folder/".concat(this.props.selectedFolderUid);
+		const backwardPath = Module.getInstance()
+			.get()
+			.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.selectedFolderUid);
 		return (
 			<DefaultNotaryDashboard title={"Ajouter client(s)"} onSelectedFolder={this.onSelectedFolder}>
 				<div className={classes["root"]}>

src/front/Components/Layouts/Folder/UpdateFolderCollaborators/classes.module.scss

@@ -0,0 +1,61 @@
+@import "@Themes/constants.scss";
+
+.root {
+	display: flex;
+	flex-direction: column;
+	min-height: 100%;
+	align-items: flex-start;
+	width: fit-content;
+
+	.back-arrow {
+		margin-bottom: 24px;
+	}
+
+	.form {
+		width: 100%;
+
+		.content {
+			margin-top: 32px;
+
+			>:not(:last-child) {
+				margin-bottom: 24px;
+			}
+
+		}
+
+		.sub-content {
+			margin-top: 32px;
+			margin-bottom: 24px;
+		}
+
+		.button-container {
+			width: 100%;
+			display: flex;
+			text-align: center;
+			margin-top: 24px;
+
+			.cancel-button {
+				display: flex;
+				margin-right: 12px;
+			}
+
+			@media (max-width: $screen-m) {
+				display: flex;
+				flex-direction: column-reverse;
+
+				.cancel-button {
+					margin-left: 0;
+					margin-top: 12px;
+
+					>* {
+						flex: 1;
+					}
+				}
+
+				>* {
+					width: 100%;
+				}
+			}
+		}
+	}
+}

src/front/Components/Layouts/Folder/UpdateFolderCollaborators/index.tsx

@@ -0,0 +1,104 @@
+import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Form from "@Front/Components/DesignSystem/Form";
+import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
+import BackArrow from "@Front/Components/Elements/BackArrow";
+import DefaultNotaryDashboard, { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
+
+import BasePage from "../../Base";
+import classes from "./classes.module.scss";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import RadioBox from "@Front/Components/DesignSystem/RadioBox";
+import MultiSelect from "@Front/Components/DesignSystem/MultiSelect";
+
+type IPropsClass = {
+	selectedFolderUid: string;
+};
+type IState = {
+	selectedFolder: IDashBoardFolder | null;
+	selectedOption?: ERadioBoxValue;
+};
+
+enum ERadioBoxValue {
+	ALL = "all",
+	SELECTION = "selection",
+}
+
+class UpdateFolderCollaboratorsClass extends BasePage<IPropsClass, IState> {
+	constructor(props: IPropsClass) {
+		super(props);
+		this.state = {
+			selectedFolder: null,
+		};
+		this.onSelectedFolder = this.onSelectedFolder.bind(this);
+		this.onSelectedOptionAllOffice = this.onSelectedOptionAllOffice.bind(this);
+		this.onSelectedOptionSpecific = this.onSelectedOptionSpecific.bind(this);
+	}
+	public override render(): JSX.Element {
+		const backwardPath = "/folder/".concat(this.props.selectedFolderUid);
+		const selectOptions = [
+			{ value: "adazzdsqaad", label: "John Doe" },
+			{ value: "azdzafzad", label: "Jahn Doe" },
+			{ value: "azdazkdazoaz", label: "Marcelino Doe" },
+		];
+		return (
+			<DefaultNotaryDashboard title={"Ajouter client(s)"} onSelectedFolder={this.onSelectedFolder}>
+				<div className={classes["root"]}>
+					<div className={classes["back-arrow"]}>
+						<BackArrow url={backwardPath} />
+					</div>
+					<Typography typo={ITypo.H1Bis}>Modifier les collaborateurs</Typography>
+
+					<Form className={classes["form"]}>
+						<div className={classes["content"]}>
+							<RadioBox name="office" value={ERadioBoxValue.ALL} defaultChecked onChange={this.onSelectedOptionAllOffice}>
+								Tout l’office
+							</RadioBox>
+							<RadioBox name="office" value={ERadioBoxValue.SELECTION} onChange={this.onSelectedOptionSpecific}>
+								Sélectionner des collaborateurs
+							</RadioBox>
+						</div>
+
+						{this.state.selectedOption === ERadioBoxValue.SELECTION && (
+							<div className={classes["sub-content"]}>
+								<MultiSelect options={selectOptions} placeholder="Collaborateurs" />
+							</div>
+						)}
+
+						<div className={classes["button-container"]}>
+							<Link href={backwardPath} className={classes["cancel-button"]}>
+								<Button variant={EButtonVariant.GHOST}>Annuler</Button>
+							</Link>
+							<Button type="submit">Enregistrer</Button>
+						</div>
+					</Form>
+				</div>
+			</DefaultNotaryDashboard>
+		);
+	}
+
+	private onSelectedOptionAllOffice(event: React.ChangeEvent<HTMLInputElement>) {
+		if (event.target.value !== ERadioBoxValue.ALL) return;
+		this.setState({
+			selectedOption: ERadioBoxValue.ALL,
+		});
+	}
+
+	private onSelectedOptionSpecific(event: React.ChangeEvent<HTMLInputElement>) {
+		if (event.target.value !== ERadioBoxValue.SELECTION) return;
+		this.setState({
+			selectedOption: ERadioBoxValue.SELECTION,
+		});
+	}
+
+	private onSelectedFolder(folder: IDashBoardFolder): void {
+		this.setState({ selectedFolder: folder });
+	}
+}
+
+export default function UpdateFolderCollaborators() {
+	const router = useRouter();
+	let { folderUid } = router.query;
+	folderUid = folderUid as string;
+	return <UpdateFolderCollaboratorsClass selectedFolderUid={folderUid} />;
+}

src/front/Components/Layouts/Folder/UpdateFolderDescription/index.tsx

@@ -9,6 +9,7 @@ import { useRouter } from "next/router";
 import BasePage from "../../Base";
 import classes from "./classes.module.scss";
 import Link from "next/link";
+import Module from "@Front/Config/Module";
 
 type IProps = {
 	selectedFolderUid: string;
@@ -25,7 +26,9 @@ class UpdateFolderDescriptionClass extends BasePage<IProps, IState> {
 		this.onSelectedFolder = this.onSelectedFolder.bind(this);
 	}
 	public override render(): JSX.Element {
-		const backwardPath = "/folder/".concat(this.props.selectedFolderUid);
+		const backwardPath = Module.getInstance()
+			.get()
+			.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.selectedFolderUid);
 		return (
 			<DefaultNotaryDashboard title={"Ajouter client(s)"} onSelectedFolder={this.onSelectedFolder}>
 				<div className={classes["root"]}>

src/front/Components/Layouts/Folder/UpdateFolderMetadata/index.tsx

@@ -10,6 +10,7 @@ import { useRouter } from "next/router";
 import BasePage from "../../Base";
 import classes from "./classes.module.scss";
 import Link from "next/link";
+import Module from "@Front/Config/Module";
 
 type IProps = {
 	selectedFolderUid: string;
@@ -33,7 +34,9 @@ class UpdateFolderMetadataClass extends BasePage<IProps, IState> {
 			{ value: "adazzqsdaad", label: "Vente immobilière" },
 			{ value: "adazzqsdaad", label: "Acte de divorce" },
 		];
-		const backwardPath = "/folder/".concat(this.props.selectedFolderUid);
+		const backwardPath = Module.getInstance()
+			.get()
+			.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.selectedFolderUid);
 		return (
 			<DefaultNotaryDashboard title={"Ajouter client(s)"} onSelectedFolder={this.onSelectedFolder}>
 				<div className={classes["root"]}>

src/front/Components/Layouts/Folder/index.tsx

@@ -2,13 +2,6 @@ import DefaultNotaryDashboard, { IDashBoardFolder } from "@Front/Components/Layo
 import BasePage from "../Base";
 import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
 import classes from "./classes.module.scss";
-// import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
-// import FolderBoxInformation from "@Front/Components/DesignSystem/FolderBoxInformation";
-// import QuantityProgressBar from "@Front/Components/DesignSystem/QuantityProgressBar";
-// import ClientSection from "./ClientSection";
-// import ChevronIcon from "@Assets/Icons/chevron.svg";
-// import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
-// import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
 
 type IProps = {};
 type IState = {
@@ -23,8 +16,6 @@ export default class Folder extends BasePage<IProps, IState> {
 			isArchivedModalOpen: false,
 		};
 		this.onSelectedFolder = this.onSelectedFolder.bind(this);
-		this.openArchivedModal = this.openArchivedModal.bind(this);
-		this.closeArchivedModal = this.closeArchivedModal.bind(this);
 	}
 
 	// TODO: Message if the user has not created any folder yet
@@ -48,12 +39,4 @@ export default class Folder extends BasePage<IProps, IState> {
 	private onSelectedFolder(folder: IDashBoardFolder): void {
 		this.setState({ selectedFolder: folder });
 	}
-
-	private openArchivedModal(): void {
-		this.setState({ isArchivedModalOpen: true });
-	}
-
-	private closeArchivedModal(): void {
-		this.setState({ isArchivedModalOpen: false });
-	}
 }

src/front/Components/Layouts/FolderArchived/FolderInformation/ClientSection/classes.module.scss

@@ -0,0 +1,25 @@
+@import "@Themes/constants.scss";
+
+.root {
+	width: 100%;
+	padding-bottom: 32px;
+
+	.no-client {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-direction: column;
+		padding: 72px;
+
+		.title {
+			margin-bottom: 16px;
+			text-align: center;
+		}
+	}
+
+	.client {
+		display: grid;
+		gap: 32px;
+		margin-bottom: 32px;
+	}
+}

src/front/Components/Layouts/FolderArchived/FolderInformation/ClientSection/index.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import classes from "./classes.module.scss";
+import { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
+import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
+import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import PlusIcon from "@Assets/Icons/plus.svg";
+import UserFolder from "@Front/Components/DesignSystem/UserFolder";
+import Link from "next/link";
+import Module from "@Front/Config/Module";
+
+type IProps = {
+	folder: IDashBoardFolder;
+};
+type IState = {};
+
+export default class ClientSection extends React.Component<IProps, IState> {
+	public override render(): JSX.Element {
+		const navigatePath = Module.getInstance()
+			.get()
+			.modules.pages.Folder.pages.AddClient.props.path.replace("[folderUid]", this.props.folder.uid);
+		return (
+			<div className={classes["root"]}>
+				{this.doesFolderHaveCustomer() ? (
+					<>
+						<div className={classes["client"]}>{this.renderCustomerFolders()}</div>
+						<Link href={navigatePath}>
+							<Button variant={EButtonVariant.LINE} icon={PlusIcon}>
+								Ajouter un client
+							</Button>
+						</Link>
+					</>
+				) : (
+					<div className={classes["no-client"]}>
+						<div className={classes["title"]}>
+							<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
+								Aucun client n’est associé au dossier.
+							</Typography>
+						</div>
+						<Link href={navigatePath}>
+							<Button variant={EButtonVariant.LINE} icon={PlusIcon}>
+								Ajouter un client
+							</Button>
+						</Link>
+					</div>
+				)}
+			</div>
+		);
+	}
+
+	private renderCustomerFolders() {
+		const output = this.props.folder.office_folder_has_customers?.map((folderHasCustomer, key) => {
+			if (!folderHasCustomer.customer) return null;
+			// TODO : Les documents ASKED fonctionne mais les autres documents ne doivcent etre seulement ceux qui correspondent au folder
+			return (
+				// <div className={classes["user-folder"]} key={folderHasCustomer.customer.uid}>
+				<UserFolder folder={this.props.folder} customer={folderHasCustomer.customer} key={key} />
+				// </div>
+			);
+		});
+		return output ?? null;
+	}
+
+	private doesFolderHaveCustomer(): boolean {
+		return this.props.folder.office_folder_has_customers !== undefined;
+	}
+}

src/front/Components/Layouts/FolderArchived/FolderInformation/classes.module.scss

@@ -0,0 +1,89 @@
+@import "@Themes/constants.scss";
+
+.root {
+	display: flex;
+	align-items: center;
+	flex-direction: column;
+	min-height: 100%;
+
+	.no-folder-selected {
+		width: 100%;
+
+		.choose-a-folder {
+			margin-top: 96px;
+			text-align: center;
+		}
+	}
+
+	.folder-informations {
+		width: 100%;
+		min-height: 100%;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		flex-direction: column;
+		flex-grow: 1;
+
+		.folder-header {
+			width: 100%;
+
+			.header {
+				margin-bottom: 32px;
+				width: 100%;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+
+				@media (max-width: $screen-m) {
+					flex-wrap: wrap;
+
+					.title {
+						margin-bottom: 24px;
+					}
+				}
+			}
+		}
+	}
+
+	.second-box {
+		margin-top: 24px;
+		margin-bottom: 32px;
+	}
+
+	.progress-bar {
+		margin-bottom: 32px;
+	}
+
+	.button-container {
+		width: 100%;
+		display: flex;
+		text-align: center;
+		justify-content: center;
+
+		.delete-folder {
+			display: flex;
+			margin-left: 12px;
+		}
+
+		@media (max-width: $screen-m) {
+			display: block;
+
+			.delete-folder {
+				margin-left: 0;
+				margin-top: 12px;
+
+				>* {
+					flex: 1;
+				}
+			}
+
+			>* {
+				width: 100%;
+			}
+		}
+	}
+
+	.modal-title {
+		margin-bottom: 24px;
+	}
+}

src/front/Components/Layouts/FolderArchived/FolderInformation/index.tsx

@@ -0,0 +1,143 @@
+import "reflect-metadata";
+
+import ChevronIcon from "@Assets/Icons/chevron.svg";
+import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import FolderBoxInformation from "@Front/Components/DesignSystem/FolderBoxInformation";
+import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
+import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
+import QuantityProgressBar from "@Front/Components/DesignSystem/QuantityProgressBar";
+import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
+import { folders } from "@Front/Components/Layouts/DesignSystem/dummyData";
+import DefaultNotaryDashboard, { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
+import { useRouter } from "next/router";
+
+import BasePage from "../../Base";
+import classes from "./classes.module.scss";
+import ClientSection from "./ClientSection";
+import { useEffect, useState } from "react";
+
+type IProps = {};
+
+type IPropsClass = IProps & {
+	selectedFolderUid: string;
+	isArchivedFolders: boolean;
+};
+
+type IState = {
+	selectedFolder: IDashBoardFolder | null;
+	isArchivedModalOpen: boolean;
+};
+class FolderInformationClass extends BasePage<IPropsClass, IState> {
+	public constructor(props: IPropsClass) {
+		super(props);
+		this.state = {
+			selectedFolder: null,
+			isArchivedModalOpen: false,
+		};
+		this.onSelectedFolder = this.onSelectedFolder.bind(this);
+		this.openArchivedModal = this.openArchivedModal.bind(this);
+		this.closeArchivedModal = this.closeArchivedModal.bind(this);
+	}
+
+	// TODO: Message if the user has not created any folder yet
+	// TODO: get the selected folder from the api in componentDidMount
+	public override render(): JSX.Element {
+		return (
+			<DefaultNotaryDashboard title={"Dossier"} onSelectedFolder={this.onSelectedFolder} isArchived={this.props.isArchivedFolders}>
+				<div className={classes["root"]}>
+					{this.state.selectedFolder ? (
+						<div className={classes["folder-informations"]}>
+							<div className={classes["folder-header"]}>
+								<div className={classes["header"]}>
+									<div className={classes["title"]}>
+										<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
+									</div>
+									<Button variant={EButtonVariant.LINE} icon={ChevronIcon}>
+										Modifier les collaborateurs
+									</Button>
+								</div>
+								<FolderBoxInformation folder={this.state.selectedFolder} />
+								<div className={classes["second-box"]}>
+									<FolderBoxInformation folder={this.state.selectedFolder} isDescription />
+								</div>
+								<div className={classes["progress-bar"]}>
+									<QuantityProgressBar title="Complétion du dossier" total={100} currentNumber={0} />
+								</div>
+								{this.doesFolderHaveCustomer() && <ClientSection folder={this.state.selectedFolder} />}
+							</div>
+
+							{!this.doesFolderHaveCustomer() && <ClientSection folder={this.state.selectedFolder} />}
+
+							<div className={classes["button-container"]}>
+								<Button variant={EButtonVariant.GHOST} onClick={this.openArchivedModal}>
+									Archiver le dossier
+								</Button>
+								{!this.doesFolderHaveCustomer() && (
+									<span className={classes["delete-folder"]}>
+										<Button variant={EButtonVariant.SECONDARY}>Supprimer le dossier</Button>
+									</span>
+								)}
+							</div>
+							<Confirm
+								isOpen={this.state.isArchivedModalOpen}
+								onClose={this.closeArchivedModal}
+								closeBtn
+								header={"Archiver le dossier ?"}
+								cancelText={"Annuler"}
+								confirmText={"Archiver"}>
+								<div className={classes["modal-title"]}>
+									<Typography typo={ITypo.P_16}>Souhaitez-vous vraiment archiver le dossier ?</Typography>
+								</div>
+								<InputField name="input field" fakeplaceholder="Description" textarea />
+							</Confirm>
+						</div>
+					) : (
+						<div className={classes["no-folder-selected"]}>
+							<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
+							<div className={classes["choose-a-folder"]}>
+								<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
+									Veuillez sélectionner un dossier.
+								</Typography>
+							</div>
+						</div>
+					)}
+				</div>
+			</DefaultNotaryDashboard>
+		);
+	}
+	public override async componentDidMount() {
+		for (const folder of folders) {
+			if (folder.uid === this.props.selectedFolderUid) {
+				this.setState({ selectedFolder: folder });
+				break;
+			}
+		}
+	}
+
+	private doesFolderHaveCustomer(): boolean {
+		return this.state.selectedFolder?.office_folder_has_customers !== undefined;
+	}
+
+	private onSelectedFolder(folder: IDashBoardFolder): void {
+		this.setState({ selectedFolder: folder });
+	}
+
+	private openArchivedModal(): void {
+		this.setState({ isArchivedModalOpen: true });
+	}
+
+	private closeArchivedModal(): void {
+		this.setState({ isArchivedModalOpen: false });
+	}
+}
+
+export default function FolderInformation(props: IProps) {
+	const router = useRouter();
+	let { folderUid } = router.query;
+	folderUid = folderUid as string;
+	const [url, setUrl] = useState("");
+	useEffect(() => setUrl(router?.asPath), []);
+	const isArchivedFolders = url.includes("archived");
+	console.log("isArchivedFolders >> ", isArchivedFolders);
+	return <FolderInformationClass {...props} selectedFolderUid={folderUid} isArchivedFolders={isArchivedFolders} />;
+}

src/front/Components/Layouts/FolderArchived/UpdateFolderDescription/classes.module.scss

@@ -0,0 +1,56 @@
+@import "@Themes/constants.scss";
+
+.root {
+	display: flex;
+	flex-direction: column;
+	min-height: 100%;
+	align-items: flex-start;
+	width: fit-content;
+
+	.back-arrow {
+		margin-bottom: 24px;
+	}
+
+	.form {
+		width: 100%;
+
+		.content {
+			margin-top: 32px;
+
+			>:not(:last-child) {
+				margin-bottom: 24px;
+			}
+
+		}
+
+		.button-container {
+			width: 100%;
+			display: flex;
+			text-align: center;
+			margin-top: 24px;
+
+			.cancel-button {
+				display: flex;
+				margin-right: 32px;
+			}
+
+			@media (max-width: $screen-m) {
+				display: flex;
+				flex-direction: column-reverse;
+
+				.cancel-button {
+					margin-left: 0;
+					margin-top: 12px;
+
+					>* {
+						flex: 1;
+					}
+				}
+
+				>* {
+					width: 100%;
+				}
+			}
+		}
+	}
+}

src/front/Components/Layouts/FolderArchived/UpdateFolderDescription/index.tsx

@@ -0,0 +1,67 @@
+import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Form from "@Front/Components/DesignSystem/Form";
+import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
+import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
+import BackArrow from "@Front/Components/Elements/BackArrow";
+import DefaultNotaryDashboard, { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
+import { useRouter } from "next/router";
+
+import BasePage from "../../Base";
+import classes from "./classes.module.scss";
+import Link from "next/link";
+import Module from "@Front/Config/Module";
+
+type IProps = {
+	selectedFolderUid: string;
+};
+type IState = {
+	selectedFolder: IDashBoardFolder | null;
+};
+class UpdateFolderDescriptionClass extends BasePage<IProps, IState> {
+	constructor(props: IProps) {
+		super(props);
+		this.state = {
+			selectedFolder: null,
+		};
+		this.onSelectedFolder = this.onSelectedFolder.bind(this);
+	}
+	public override render(): JSX.Element {
+		const backwardPath = Module.getInstance()
+			.get()
+			.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.selectedFolderUid);
+		return (
+			<DefaultNotaryDashboard title={"Ajouter client(s)"} onSelectedFolder={this.onSelectedFolder}>
+				<div className={classes["root"]}>
+					<div className={classes["back-arrow"]}>
+						<BackArrow url={backwardPath} />
+					</div>
+					<Typography typo={ITypo.H1Bis}>Modifier la note du dossier</Typography>
+
+					<Form className={classes["form"]}>
+						<div className={classes["content"]}>
+							<InputField name="input field" fakeplaceholder="Note du dossier" textarea />
+						</div>
+
+						<div className={classes["button-container"]}>
+							<Link href={backwardPath} className={classes["cancel-button"]}>
+								<Button variant={EButtonVariant.GHOST}>Annuler</Button>
+							</Link>
+							<Button type="submit">Enregistrer</Button>
+						</div>
+					</Form>
+				</div>
+			</DefaultNotaryDashboard>
+		);
+	}
+
+	private onSelectedFolder(folder: IDashBoardFolder): void {
+		this.setState({ selectedFolder: folder });
+	}
+}
+
+export default function UpdateFolderDescription() {
+	const router = useRouter();
+	let { folderUid } = router.query;
+	folderUid = folderUid as string;
+	return <UpdateFolderDescriptionClass selectedFolderUid={folderUid} />;
+}

src/front/Components/Layouts/FolderArchived/UpdateFolderMetadata/classes.module.scss

@@ -0,0 +1,56 @@
+@import "@Themes/constants.scss";
+
+.root {
+	display: flex;
+	flex-direction: column;
+	min-height: 100%;
+	align-items: flex-start;
+	width: fit-content;
+
+	.back-arrow {
+		margin-bottom: 24px;
+	}
+
+	.form {
+		width: 100%;
+
+		.content {
+			margin-top: 32px;
+
+			>:not(:last-child) {
+				margin-bottom: 24px;
+			}
+
+		}
+
+		.button-container {
+			width: 100%;
+			display: flex;
+			text-align: center;
+			margin-top: 24px;
+
+			.cancel-button {
+				display: flex;
+				margin-right: 12px;
+			}
+
+			@media (max-width: $screen-m) {
+				display: flex;
+				flex-direction: column-reverse;
+
+				.cancel-button {
+					margin-left: 0;
+					margin-top: 12px;
+
+					>* {
+						flex: 1;
+					}
+				}
+
+				>* {
+					width: 100%;
+				}
+			}
+		}
+	}
+}

src/front/Components/Layouts/FolderArchived/UpdateFolderMetadata/index.tsx

@@ -0,0 +1,89 @@
+import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Form from "@Front/Components/DesignSystem/Form";
+import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
+import Select, { IOption } from "@Front/Components/DesignSystem/Select";
+import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
+import BackArrow from "@Front/Components/Elements/BackArrow";
+import DefaultNotaryDashboard, { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
+import { useRouter } from "next/router";
+
+import BasePage from "../../Base";
+import classes from "./classes.module.scss";
+import Link from "next/link";
+import Module from "@Front/Config/Module";
+
+type IProps = {
+	selectedFolderUid: string;
+};
+type IState = {
+	selectedFolder: IDashBoardFolder | null;
+	selectedOption?: IOption;
+};
+class UpdateFolderMetadataClass extends BasePage<IProps, IState> {
+	constructor(props: IProps) {
+		super(props);
+		this.state = {
+			selectedFolder: null,
+		};
+		this.onSelectedFolder = this.onSelectedFolder.bind(this);
+		this.onSelectedOption = this.onSelectedOption.bind(this);
+	}
+	public override render(): JSX.Element {
+		const selectOptions = [
+			{ value: "adazzdsqaad", label: "Acte de mariage" },
+			{ value: "adazzqsdaad", label: "Vente immobilière" },
+			{ value: "adazzqsdaad", label: "Acte de divorce" },
+		];
+		const backwardPath = Module.getInstance()
+			.get()
+			.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.selectedFolderUid);
+		return (
+			<DefaultNotaryDashboard title={"Ajouter client(s)"} onSelectedFolder={this.onSelectedFolder}>
+				<div className={classes["root"]}>
+					<div className={classes["back-arrow"]}>
+						<BackArrow url={backwardPath} />
+					</div>
+					<Typography typo={ITypo.H1Bis}>Modifier les informations du dossier</Typography>
+
+					<Form className={classes["form"]}>
+						<div className={classes["content"]}>
+							<InputField name="input field" fakeplaceholder="Intitulé du dossier" />
+							<InputField name="input field" fakeplaceholder="Numéro de dossier" />
+							<Select
+								options={selectOptions}
+								onChange={this.onSelectedOption}
+								placeholder={"Type d’acte"}
+								selectedOption={this.state.selectedOption}
+							/>
+							<InputField name="input field" fakeplaceholder="Ouverture du dossier" />
+						</div>
+
+						<div className={classes["button-container"]}>
+							<Link href={backwardPath} className={classes["cancel-button"]}>
+								<Button variant={EButtonVariant.GHOST}>Annuler</Button>
+							</Link>
+							<Button type="submit">Enregistrer</Button>
+						</div>
+					</Form>
+				</div>
+			</DefaultNotaryDashboard>
+		);
+	}
+
+	private onSelectedOption(option: IOption) {
+		this.setState({
+			selectedOption: option,
+		});
+	}
+
+	private onSelectedFolder(folder: IDashBoardFolder): void {
+		this.setState({ selectedFolder: folder });
+	}
+}
+
+export default function UpdateFolderMetadata() {
+	const router = useRouter();
+	let { folderUid } = router.query;
+	folderUid = folderUid as string;
+	return <UpdateFolderMetadataClass selectedFolderUid={folderUid} />;
+}

src/front/Components/Layouts/FolderArchived/classes.module.scss

@@ -0,0 +1,72 @@
+@import "@Themes/constants.scss";
+
+.root {
+	display: flex;
+	align-items: center;
+	flex-direction: column;
+	min-height: 100%;
+
+	.no-folder-selected {
+		width: 100%;
+
+		.choose-a-folder {
+			margin-top: 96px;
+			text-align: center;
+		}
+	}
+
+	.folder-informations {
+		width: 100%;
+		min-height: 100%;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		flex-direction: column;
+		flex-grow: 1;
+
+		.folder-header {
+			width: 100%;
+
+			.header {
+				margin-bottom: 32px;
+				width: 100%;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				flex-wrap: wrap;
+			}
+		}
+
+		.second-box {
+			margin-top: 24px;
+			margin-bottom: 32px;
+		}
+
+		.progress-bar {
+			margin-bottom: 32px;
+		}
+
+		.button-container {
+			width: 100%;
+			text-align: center;
+			:first-child {
+				margin-right: 12px;
+			}
+			> * {
+				margin: auto;
+			}
+			@media (max-width: $screen-m) {
+				:first-child {
+					margin-right: 0;
+					margin-bottom: 12px;
+				}
+				> * {
+					width: 100%;
+				}
+			}
+		}
+		.modal-title {
+			margin-bottom: 24px;
+		}
+	}
+}

src/front/Components/Layouts/FolderArchived/index.tsx

@@ -0,0 +1,42 @@
+import DefaultNotaryDashboard, { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
+import BasePage from "../Base";
+import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
+import classes from "./classes.module.scss";
+
+type IProps = {};
+type IState = {
+	selectedFolder: IDashBoardFolder | null;
+	isArchivedModalOpen: boolean;
+};
+export default class Folder extends BasePage<IProps, IState> {
+	public constructor(props: IProps) {
+		super(props);
+		this.state = {
+			selectedFolder: null,
+			isArchivedModalOpen: false,
+		};
+		this.onSelectedFolder = this.onSelectedFolder.bind(this);
+	}
+
+	// TODO: Message if the user has not created any folder yet
+	public override render(): JSX.Element {
+		return (
+			<DefaultNotaryDashboard title={"Dossier"} onSelectedFolder={this.onSelectedFolder} isArchived>
+				<div className={classes["root"]}>
+					<div className={classes["no-folder-selected"]}>
+						<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
+						<div className={classes["choose-a-folder"]}>
+							<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
+								Veuillez sélectionner un dossier.
+							</Typography>
+						</div>
+					</div>
+				</div>
+			</DefaultNotaryDashboard>
+		);
+	}
+
+	private onSelectedFolder(folder: IDashBoardFolder): void {
+		this.setState({ selectedFolder: folder });
+	}
+}

src/front/Components/Layouts/PageNotFound/classes.module.scss

@@ -2,20 +2,8 @@
 @import "@Themes/animation.scss";
 
 .root {
-	margin: 100px auto 20px auto;
-	font-size: 4em;
-	text-align: center;
-	will-change: opacity, transform;
-	animation: fadeInFromTop 500ms;
-
-	.text {
-		margin: 20px auto 20px auto;
-		font-size: 0.5em;
-		text-align: center;
-	}
-
-	.home-button {
-		margin: 50px auto;
-		max-width: 150px;
-	}
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
 }

src/front/Components/Layouts/PageNotFound/index.tsx

@@ -2,21 +2,19 @@ import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
 import Link from "next/link";
 import BasePage from "../Base";
 import classes from "./classes.module.scss";
+import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
+import Button from "@Front/Components/DesignSystem/Button";
+import Module from "@Front/Config/Module";
 
 export default class PageNotFound extends BasePage {
 	public override render(): JSX.Element {
 		return (
 			<DefaultTemplate title={"Project Not Found"}>
 				<div className={classes["root"]}>
-					{/* <Image alt="Unplugged" height="50" src={UnpluggedIcon} /> Oops */}
-					<div className={classes["text"]}>There isn't anything here...</div>
-					<div className={classes["home-button"]}>
-						<Link href="/">{/* <Button text="Go to Home" icon={CardsIcon} /> */}</Link>
-					</div>
-
-					<label>
-						<input />
-					</label>
+					<Typography typo={ITypo.H3}>Il n'y a rien ici, la page que vous avez demandé n'existe pas</Typography>
+					<Link href={Module.getInstance().get().modules.pages.Home.props.path}>
+						<Button>Retourner à la page d'accueil</Button>
+					</Link>
 				</div>
 			</DefaultTemplate>
 		);

src/front/Config/Module/development.json

@@ -0,0 +1,124 @@
+{
+	"app": "lecoffre",
+	"theme": {},
+	"modules": {
+		"pages": {
+			"Home": {
+				"enabled": true,
+				"props": {
+					"path": "/",
+					"labelKey": "homepage"
+				}
+			},
+			"DesignSystem": {
+				"enabled": true,
+				"props": {
+					"path": "/design-system",
+					"labelKey": "design_system"
+				}
+			},
+			"Login": {
+				"enabled": true,
+				"props": {
+					"path": "/login",
+					"labelKey": "design_system"
+				}
+			},
+			"Folder": {
+				"enabled": true,
+				"props": {
+					"path": "/folders",
+					"labelKey": "folder"
+				},
+				"pages": {
+					"FolderInformation": {
+						"enabled": true,
+						"props": {
+							"path": "/folders/[folderUid]",
+							"labelKey": "folder_information"
+						}
+					},
+					"CreateFolder": {
+						"enabled": true,
+						"props": {
+							"path": "/folders/create",
+							"labelKey": "create_folder"
+						}
+					},
+					"AddClient": {
+						"enabled": true,
+						"props": {
+							"path": "/folders/add/clients",
+							"labelKey": "add_client_to_folder"
+						}
+					},
+					"AskDocument": {
+						"enabled": true,
+						"props": {
+							"path": "/folders/[folderUid]/ask-documents",
+							"labelKey": "ask_documents"
+						}
+					},
+					"EditDescription": {
+						"enabled": true,
+						"props": {
+							"path": "/folders/[folderUid]/edit/description",
+							"labelKey": "edit_description"
+						}
+					},
+					"EditInformations": {
+						"enabled": true,
+						"props": {
+							"path": "/folders/[folderUid]/edit/informations",
+							"labelKey": "edit_informations"
+						}
+					},
+					"EditClient": {
+						"enabled": true,
+						"props": {
+							"path": "/folders/[folderUid]/edit/clients/[clientUid]",
+							"labelKey": "edit_informations"
+						}
+					},
+					"EditCollaborators": {
+						"enabled": true,
+						"props": {
+							"path": "/folders/[folderUid]/edit/collaborators",
+							"labelKey": "edit_collaborators"
+						}
+					},
+					"FolderArchived": {
+						"enabled": true,
+						"props": {
+							"path": "/folders/archived",
+							"labelKey": "archived_folders"
+						},
+						"pages": {
+							"FolderInformation": {
+								"enabled": true,
+								"props": {
+									"path": "/folders/archived/[folderUid]",
+									"labelKey": "archived_folder_information"
+								}
+							}
+						}
+					}
+				}
+			},
+			"MyAccount": {
+				"enabled": true,
+				"props": {
+					"path": "/my-account",
+					"labelKey": "my_account"
+				}
+			},
+			"404": {
+				"enabled": true,
+				"props": {
+					"path": "/404",
+					"labelKey": "not_found"
+				}
+			}
+		}
+	}
+}

src/front/Config/Module/index.ts

@@ -0,0 +1,38 @@
+import developmentConfig from "./development.json";
+import productionConfig from "./production.json";
+import stagingConfig from "./staging.json";
+import preprodConfig from "./preprod.json";
+
+export default class Module {
+	private static ctx: Module;
+	private config: typeof developmentConfig = developmentConfig;
+	constructor() {
+		if (Module.ctx) return Module.ctx;
+		Module.ctx = this;
+		this.setConfig();
+		return Module.ctx;
+	}
+
+	public static getInstance() {
+		if (!Module.ctx) new this();
+		return Module.ctx;
+	}
+
+	public get() {
+		return this.config;
+	}
+
+	private setConfig() {
+		switch (process.env["NEXTJS_APP_ENV_NAME"]) {
+			case "staging":
+				this.config = stagingConfig;
+				break;
+			case "preprod":
+				this.config = preprodConfig;
+				break;
+			case "production":
+				this.config = productionConfig;
+				break;
+		}
+	}
+}

src/front/Config/Module/preprod.json

@@ -0,0 +1,117 @@
+{
+	"app": "lecoffre",
+	"theme": {},
+	"modules": {
+		"pages": {
+			"Home": {
+				"enabled": true,
+				"props": {
+					"path": "/",
+					"labelKey": "homepage"
+				}
+			},
+			"DesignSystem": {
+				"enabled": true,
+				"props": {
+					"path": "/design-system",
+					"labelKey": "design_system"
+				}
+			},
+			"Login": {
+				"enabled": true,
+				"props": {
+					"path": "/login",
+					"labelKey": "design_system"
+				}
+			},
+			"Folder": {
+				"enabled": true,
+				"props": {
+					"path": "/folders",
+					"labelKey": "folder"
+				},
+				"pages": {
+					"FolderInformation": {
+						"enabled": true,
+						"props": {
+							"path": "/folders/[folderUid]",
+							"labelKey": "folder_information"
+						}
+					},
+					"CreateFolder": {
+						"enabled": true,
+						"props": {
+							"path": "/folders/create",
+							"labelKey": "create_folder"
+						}
+					},
+					"AddClient": {
+						"enabled": true,
+						"props": {
+							"path": "/folders/add/client",
+							"labelKey": "add_client_to_folder"
+						}
+					},
+					"AskDocument": {
+						"enabled": true,
+						"props": {
+							"path": "/folders/[folderUid]/ask-documents",
+							"labelKey": "ask_documents"
+						}
+					},
+					"EditDescription": {
+						"enabled": true,
+						"props": {
+							"path": "/folders/[folderUid]/edit/description",
+							"labelKey": "edit_description"
+						}
+					},
+					"EditInformations": {
+						"enabled": true,
+						"props": {
+							"path": "/folders/[folderUid]/edit/informations",
+							"labelKey": "edit_informations"
+						}
+					},
+					"EditClient": {
+						"enabled": true,
+						"props": {
+							"path": "/folders/[folderUid]/edit/clients/[clientUid]",
+							"labelKey": "edit_informations"
+						}
+					},
+					"FolderArchived": {
+						"enabled": true,
+						"props": {
+							"path": "/folders/archived",
+							"labelKey": "archived_folders"
+						},
+						"pages": {
+							"FolderInformation": {
+								"enabled": true,
+								"props": {
+									"path": "/folders/archived/[folderUid]",
+									"labelKey": "archived_folder_information"
+								}
+							}
+						}
+					}
+				}
+			},
+			"MyAccount": {
+				"enabled": true,
+				"props": {
+					"path": "/my-account",
+					"labelKey": "my_account"
+				}
+			},
+			"404": {
+				"enabled": true,
+				"props": {
+					"path": "/404",
+					"labelKey": "not_found"
+				}
+			}
+		}
+	}
+}

src/front/Config/Module/production.json

@@ -0,0 +1,117 @@
+{
+	"app": "lecoffre",
+	"theme": {},
+	"modules": {
+		"pages": {
+			"Home": {
+				"enabled": true,
+				"props": {
+					"path": "/",
+					"labelKey": "homepage"
+				}
+			},
+			"DesignSystem": {
+				"enabled": true,
+				"props": {
+					"path": "/design-system",
+					"labelKey": "design_system"
+				}
+			},
+			"Login": {
+				"enabled": true,
+				"props": {
+					"path": "/login",
+					"labelKey": "design_system"
+				}
+			},
+			"Folder": {
+				"enabled": true,
+				"props": {
+					"path": "/folders",
+					"labelKey": "folder"
+				},
+				"pages": {
+					"FolderInformation": {
+						"enabled": true,
+						"props": {
+							"path": "/folders/[folderUid]",
+							"labelKey": "folder_information"
+						}
+					},
+					"CreateFolder": {
+						"enabled": true,
+						"props": {
+							"path": "/folders/create",
+							"labelKey": "create_folder"
+						}
+					},
+					"AddClient": {
+						"enabled": true,
+						"props": {
+							"path": "/folders/add/client",
+							"labelKey": "add_client_to_folder"
+						}
+					},
+					"AskDocument": {
+						"enabled": true,
+						"props": {
+							"path": "/folders/[folderUid]/ask-documents",
+							"labelKey": "ask_documents"
+						}
+					},
+					"EditDescription": {
+						"enabled": true,
+						"props": {
+							"path": "/folders/[folderUid]/edit/description",
+							"labelKey": "edit_description"
+						}
+					},
+					"EditInformations": {
+						"enabled": true,
+						"props": {
+							"path": "/folders/[folderUid]/edit/informations",
+							"labelKey": "edit_informations"
+						}
+					},
+					"EditClient": {
+						"enabled": true,
+						"props": {
+							"path": "/folders/[folderUid]/edit/clients/[clientUid]",
+							"labelKey": "edit_informations"
+						}
+					},
+					"FolderArchived": {
+						"enabled": true,
+						"props": {
+							"path": "/folders/archived",
+							"labelKey": "archived_folders"
+						},
+						"pages": {
+							"FolderInformation": {
+								"enabled": true,
+								"props": {
+									"path": "/folders/archived/[folderUid]",
+									"labelKey": "archived_folder_information"
+								}
+							}
+						}
+					}
+				}
+			},
+			"MyAccount": {
+				"enabled": true,
+				"props": {
+					"path": "/my-account",
+					"labelKey": "my_account"
+				}
+			},
+			"404": {
+				"enabled": true,
+				"props": {
+					"path": "/404",
+					"labelKey": "not_found"
+				}
+			}
+		}
+	}
+}

src/front/Config/Module/staging.json

@@ -0,0 +1,117 @@
+{
+	"app": "lecoffre",
+	"theme": {},
+	"modules": {
+		"pages": {
+			"Home": {
+				"enabled": true,
+				"props": {
+					"path": "/",
+					"labelKey": "homepage"
+				}
+			},
+			"DesignSystem": {
+				"enabled": true,
+				"props": {
+					"path": "/design-system",
+					"labelKey": "design_system"
+				}
+			},
+			"Login": {
+				"enabled": true,
+				"props": {
+					"path": "/login",
+					"labelKey": "design_system"
+				}
+			},
+			"Folder": {
+				"enabled": true,
+				"props": {
+					"path": "/folders",
+					"labelKey": "folder"
+				},
+				"pages": {
+					"FolderInformation": {
+						"enabled": true,
+						"props": {
+							"path": "/folders/[folderUid]",
+							"labelKey": "folder_information"
+						}
+					},
+					"CreateFolder": {
+						"enabled": true,
+						"props": {
+							"path": "/folders/create",
+							"labelKey": "create_folder"
+						}
+					},
+					"AddClient": {
+						"enabled": true,
+						"props": {
+							"path": "/folders/add/client",
+							"labelKey": "add_client_to_folder"
+						}
+					},
+					"AskDocument": {
+						"enabled": true,
+						"props": {
+							"path": "/folders/[folderUid]/ask-documents",
+							"labelKey": "ask_documents"
+						}
+					},
+					"EditDescription": {
+						"enabled": true,
+						"props": {
+							"path": "/folders/[folderUid]/edit/description",
+							"labelKey": "edit_description"
+						}
+					},
+					"EditInformations": {
+						"enabled": true,
+						"props": {
+							"path": "/folders/[folderUid]/edit/informations",
+							"labelKey": "edit_informations"
+						}
+					},
+					"EditClient": {
+						"enabled": true,
+						"props": {
+							"path": "/folders/[folderUid]/edit/clients/[clientUid]",
+							"labelKey": "edit_informations"
+						}
+					},
+					"FolderArchived": {
+						"enabled": true,
+						"props": {
+							"path": "/folders/archived",
+							"labelKey": "archived_folders"
+						},
+						"pages": {
+							"FolderInformation": {
+								"enabled": true,
+								"props": {
+									"path": "/folders/archived/[folderUid]",
+									"labelKey": "archived_folder_information"
+								}
+							}
+						}
+					}
+				}
+			},
+			"MyAccount": {
+				"enabled": true,
+				"props": {
+					"path": "/my-account",
+					"labelKey": "my_account"
+				}
+			},
+			"404": {
+				"enabled": true,
+				"props": {
+					"path": "/404",
+					"labelKey": "not_found"
+				}
+			}
+		}
+	}
+}

src/pages/folder/[folderUid]/update/description.tsx

@@ -1,5 +0,0 @@
-import UpdateFolderDescription from "@Front/Components/Layouts/Folder/UpdateFolderDescription";
-
-export default function Route() {
-	return <UpdateFolderDescription />;
-}

src/pages/folders/[folderUid]/edit/collaborators.tsx

@@ -0,0 +1,5 @@
+import UpdateFolderCollaborators from "@Front/Components/Layouts/Folder/UpdateFolderCollaborators";
+
+export default function Route() {
+	return <UpdateFolderCollaborators />;
+}

src/pages/folders/[folderUid]/edit/description.tsx

@@ -0,0 +1,13 @@
+import UpdateFolderDescription from "@Front/Components/Layouts/Folder/UpdateFolderDescription";
+import Module from "@Front/Config/Module";
+import { useRouter } from "next/router";
+
+export default function Route() {
+	const isEnabled: boolean = Module.getInstance().get().modules.pages.Folder.pages.EditDescription.enabled;
+	const router = useRouter();
+	if (!isEnabled) {
+		router.push("/404");
+		return null;
+	}
+	return <UpdateFolderDescription />;
+}

src/pages/folders/archived/[folderUid]/index.tsx

@@ -0,0 +1,5 @@
+import FolderInformation from "@Front/Components/Layouts/Folder/FolderInformation";
+
+export default function Route() {
+	return <FolderInformation />;
+}

src/pages/folders/archived/index.tsx

@@ -0,0 +1,5 @@
+import FolderArchived from "@Front/Components/Layouts/FolderArchived";
+
+export default function Route() {
+	return <FolderArchived />;
+}