From b96f297c1d1bf7401f2a62655e5ef3194b866d10 Mon Sep 17 00:00:00 2001
From: hugolxt <87241914+hugolxt@users.noreply.github.com>
Date: Mon, 24 Apr 2023 17:13:03 +0200
Subject: [PATCH] URL Normalization and Modulation according to a config file
 (#17)

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


Some more questions on the subject of redirection or dynamic modulation
of pages according to the configuration file.

An example of pathname modulation can be found on the following url:

`/folders/[folderUid]/edit/description`

---------

Co-authored-by: Maxime Lalo <maxime.lalo.pro@gmail.com>
---
 .../Document/DocumentNotary/index.tsx         |  3 +-
 .../FolderBoxInformation/classes.module.scss  |  2 +-
 .../FolderBoxInformation/index.tsx            | 83 ++++++++++++-------
 .../UserFolder/DocumentList/index.tsx         |  1 +
 .../UserFolder/UserFolderHeader/index.tsx     | 20 +++--
 .../DesignSystem/UserFolder/index.tsx         | 28 ++++---
 .../DefaultNotaryDashboard/index.tsx          |  2 +
 .../LayoutTemplates/DefaultTemplate/index.tsx |  3 +-
 .../Layouts/DesignSystem/dummyData.ts         |  1 +
 .../Components/Layouts/DesignSystem/index.tsx |  3 +-
 .../FolderInformation/ClientSection/index.tsx |  6 +-
 .../Folder/FolderInformation/index.tsx        | 21 ++---
 .../Layouts/Folder/ViewDocuments/index.tsx    |  4 +-
 .../FolderInformation/ClientSection/index.tsx | 31 +------
 .../FolderInformation/index.tsx               | 58 ++++++-------
 src/front/Config/Module/preprod.json          |  9 +-
 src/front/Config/Module/production.json       |  9 +-
 src/front/Config/Module/staging.json          |  9 +-
 .../documents}/[documentUid]/index.tsx        |  0
 .../folders/archived/[folderUid]/index.tsx    |  2 +-
 20 files changed, 160 insertions(+), 135 deletions(-)
 rename src/pages/{folder/[folderUid]/document => folders/[folderUid]/documents}/[documentUid]/index.tsx (100%)

diff --git a/src/front/Components/DesignSystem/Document/DocumentNotary/index.tsx b/src/front/Components/DesignSystem/Document/DocumentNotary/index.tsx
index 198c4ec7..66374d71 100644
--- a/src/front/Components/DesignSystem/Document/DocumentNotary/index.tsx
+++ b/src/front/Components/DesignSystem/Document/DocumentNotary/index.tsx
@@ -15,6 +15,7 @@ type IProps = {
 		uid: Document["uid"];
 		document_type: Document["document_type"];
 		document_status: Document["document_status"];
+		folder: Document["folder"];
 	};
 	openDeletionModal?: (uid: Document["uid"]) => void;
 };
@@ -45,7 +46,7 @@ class DocumentNotaryClass extends React.Component<IPropsClass, IState> {
 
 	private onClick() {
 		if (this.props.document.document_status !== "VALIDATED" && this.props.document.document_status !== "PENDING") return;
-		this.props.router.push(`/folder/${this.props.document.folder.uid}/document/${this.props.document.uid}`);
+		this.props.router.push(`/folders/${this.props.document.folder.uid}/documents/${this.props.document.uid}`);
 	}
 
 	private renderIcon(): JSX.Element {
diff --git a/src/front/Components/DesignSystem/FolderBoxInformation/classes.module.scss b/src/front/Components/DesignSystem/FolderBoxInformation/classes.module.scss
index 323dc0d5..c22fa8de 100644
--- a/src/front/Components/DesignSystem/FolderBoxInformation/classes.module.scss
+++ b/src/front/Components/DesignSystem/FolderBoxInformation/classes.module.scss
@@ -33,7 +33,7 @@
 			grid-template-columns: 1fr;
 		}
 
-		&.isSignleDescription {
+		&.single-information {
 			grid-template-columns: 1fr;
 		}
 	}
diff --git a/src/front/Components/DesignSystem/FolderBoxInformation/index.tsx b/src/front/Components/DesignSystem/FolderBoxInformation/index.tsx
index 16df26a8..de2e85d5 100644
--- a/src/front/Components/DesignSystem/FolderBoxInformation/index.tsx
+++ b/src/front/Components/DesignSystem/FolderBoxInformation/index.tsx
@@ -1,20 +1,28 @@
-import React from "react";
-import classes from "./classes.module.scss";
-import classNames from "classnames";
-import Image from "next/image";
 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";
+import classNames from "classnames";
+import Image from "next/image";
+import Link from "next/link";
+import React from "react";
+
+import Typography, { ITypo } from "../Typography";
+import classes from "./classes.module.scss";
 
 type IProps = {
 	folder: IDashBoardFolder;
-	isDescription?: boolean;
+	type: EFolderBoxInformationType;
+	isArchived?: boolean;
 };
 
+export enum EFolderBoxInformationType {
+	INFORMATIONS = "informations",
+	DESCRIPTION = "description",
+	ARCHIVED_DESCRIPTION = "archivedDescription",
+}
+
 export default function FolderBoxInformation(props: IProps) {
-	const { isDescription = false } = props;
+	const { isArchived = false, type } = props;
 	const editDescriptionPath = Module.getInstance()
 		.get()
 		.modules.pages.Folder.pages.EditDescription.props.path.replace("[folderUid]", props.folder.uid);
@@ -22,44 +30,57 @@ export default function FolderBoxInformation(props: IProps) {
 		.get()
 		.modules.pages.Folder.pages.EditDescription.props.path.replace("[folderUid]", props.folder.uid);
 
-	const path = isDescription ? editDescriptionPath : editInformationsPath;
-
+	const path = type === EFolderBoxInformationType.DESCRIPTION ? editDescriptionPath : editInformationsPath;
 	return (
-		<div className={classNames(classes["root"], isDescription && classes["isSignleDescription"])}>
-			<div className={classes["content"]}>
-				{isDescription ? (
-					<>
-						<div className={classes["text-container"]}>
-							<Typography typo={ITypo.NAV_INPUT_16}>Note dossier</Typography>
-							<Typography typo={ITypo.P_18}>{props.folder.description ?? "..."}</Typography>
-						</div>
-					</>
-				) : (
+		<div className={classNames(classes["root"], type !== EFolderBoxInformationType.INFORMATIONS && classes["single-information"])}>
+			<div className={classes["content"]}>{renderContentByType(props.folder, type)}</div>
+			{!isArchived && (
+				<Link href={path} className={classes["edit-icon-container"]}>
+					<Image src={PenICon} alt="edit informations" />
+				</Link>
+			)}
+		</div>
+	);
+
+	function renderContentByType(folder: IDashBoardFolder, type: EFolderBoxInformationType) {
+		switch (type) {
+			case EFolderBoxInformationType.DESCRIPTION:
+				return (
+					<div className={classes["text-container"]}>
+						<Typography typo={ITypo.NAV_INPUT_16}>Note dossier</Typography>
+						<Typography typo={ITypo.P_18}>{folder.description ?? ""}</Typography>
+					</div>
+				);
+			case EFolderBoxInformationType.ARCHIVED_DESCRIPTION:
+				return (
+					<div className={classes["text-container"]}>
+						<Typography typo={ITypo.NAV_INPUT_16}>Note archive</Typography>
+						<Typography typo={ITypo.P_18}>{folder.archived_description ?? ""}</Typography>
+					</div>
+				);
+			case EFolderBoxInformationType.INFORMATIONS:
+				return (
 					<>
 						<div className={classes["text-container"]}>
 							<Typography typo={ITypo.NAV_INPUT_16}>Intitulé du dossier</Typography>
-							<Typography typo={ITypo.P_18}>{props.folder.name ?? "..."}</Typography>
+							<Typography typo={ITypo.P_18}>{folder.name ?? ""}</Typography>
 						</div>
 						<div className={classes["text-container"]}>
 							<Typography typo={ITypo.NAV_INPUT_16}>Numéro de dossier</Typography>
-							<Typography typo={ITypo.P_18}>{props.folder.folder_number ?? "..."}</Typography>
+							<Typography typo={ITypo.P_18}>{folder.folder_number ?? ""}</Typography>
 						</div>
 						<div className={classes["text-container"]}>
 							<Typography typo={ITypo.NAV_INPUT_16}>Type d’acte</Typography>
-							<Typography typo={ITypo.P_18}>{props.folder.deed.deed_type.name ?? "..."}</Typography>
+							<Typography typo={ITypo.P_18}>{folder.deed.deed_type.name ?? ""}</Typography>
 						</div>
 						<div className={classes["text-container"]}>
 							<Typography typo={ITypo.NAV_INPUT_16}>Ouverture du dossier</Typography>
-							<Typography typo={ITypo.P_18}>{formatDate(props.folder.created_at)}</Typography>
+							<Typography typo={ITypo.P_18}>{formatDate(folder.created_at)}</Typography>
 						</div>
 					</>
-				)}
-			</div>
-			<Link href={path} className={classes["edit-icon-container"]}>
-				<Image src={PenICon} alt="edit informations" />
-			</Link>
-		</div>
-	);
+				);
+		}
+	}
 }
 
 function formatDate(date: Date | null): string {
diff --git a/src/front/Components/DesignSystem/UserFolder/DocumentList/index.tsx b/src/front/Components/DesignSystem/UserFolder/DocumentList/index.tsx
index 210f8f86..77129633 100644
--- a/src/front/Components/DesignSystem/UserFolder/DocumentList/index.tsx
+++ b/src/front/Components/DesignSystem/UserFolder/DocumentList/index.tsx
@@ -12,6 +12,7 @@ type IProps = {
 				uid: Document["uid"];
 				document_type: Document["document_type"];
 				document_status: Document["document_status"];
+				folder: Document["folder"];
 		  }[]
 		| null;
 	openDeletionModal: (uid: Document["uid"]) => void;
diff --git a/src/front/Components/DesignSystem/UserFolder/UserFolderHeader/index.tsx b/src/front/Components/DesignSystem/UserFolder/UserFolderHeader/index.tsx
index 02b683d0..3ffe5317 100644
--- a/src/front/Components/DesignSystem/UserFolder/UserFolderHeader/index.tsx
+++ b/src/front/Components/DesignSystem/UserFolder/UserFolderHeader/index.tsx
@@ -18,10 +18,14 @@ type IProps = {
 		email: Contact["email"];
 	};
 	selectedFolderUid: string;
+	isArchived?: boolean;
 };
 type IState = {};
 
-export default class UserFolderHeaderClass extends React.Component<IProps, IState> {
+export default class UserFolderHeader extends React.Component<IProps, IState> {
+	static defaultProps = {
+		isArchived: false,
+	};
 	public override render(): JSX.Element {
 		const redirectPath = Module.getInstance()
 			.get()
@@ -53,12 +57,14 @@ export default class UserFolderHeaderClass extends React.Component<IProps, IStat
 						<Typography typo={ITypo.P_18}>{this.props.contact.email}</Typography>
 					</div>
 				</div>
-				<div className={classes["icons"]}>
-					<WarningBadge />
-					<Link href={redirectPath}>
-						<Image src={PenIcon} alt="edit" className={classes["edit-icon"]} onClick={this.onEditClick} />
-					</Link>
-				</div>
+				{!this.props.isArchived && (
+					<div className={classes["icons"]}>
+						<WarningBadge />
+						<Link href={redirectPath}>
+							<Image src={PenIcon} alt="edit" className={classes["edit-icon"]} onClick={this.onEditClick} />
+						</Link>
+					</div>
+				)}
 			</div>
 		);
 	}
diff --git a/src/front/Components/DesignSystem/UserFolder/index.tsx b/src/front/Components/DesignSystem/UserFolder/index.tsx
index 4d56f190..e0fc1d82 100644
--- a/src/front/Components/DesignSystem/UserFolder/index.tsx
+++ b/src/front/Components/DesignSystem/UserFolder/index.tsx
@@ -1,6 +1,7 @@
 import ChevronIcon from "@Assets/Icons/chevron.svg";
 import PlusIcon from "@Assets/Icons/plus.svg";
 import { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
+import Module from "@Front/Config/Module";
 import classNames from "classnames";
 import Customer, { Document } from "le-coffre-resources/dist/Customer";
 import Image from "next/image";
@@ -13,12 +14,12 @@ 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;
 	animationDelay?: number;
 	folder: IDashBoardFolder;
+	isArchived?: boolean;
 };
 type IState = {
 	isOpen: boolean;
@@ -29,6 +30,7 @@ type IState = {
 export default class UserFolder extends React.Component<IProps, IState> {
 	static defaultProps = {
 		animationDelay: 300,
+		isArchived: false,
 	};
 	public rootRefElement = React.createRef<HTMLDivElement>();
 
@@ -64,7 +66,11 @@ export default class UserFolder extends React.Component<IProps, IState> {
 				</Confirm>
 
 				<div className={classes["header"]} onClick={this.toggleOpen}>
-					<UserFolderHeader contact={this.props.customer.contact} selectedFolderUid={this.props.folder.uid} />
+					<UserFolderHeader
+						contact={this.props.customer.contact}
+						selectedFolderUid={this.props.folder.uid}
+						isArchived={this.props.isArchived}
+					/>
 					<Image
 						src={ChevronIcon}
 						alt="chevron open close"
@@ -97,14 +103,16 @@ export default class UserFolder extends React.Component<IProps, IState> {
 								openDeletionModal={this.openDeletionModal}
 							/>
 						</div>
-						<div className={classes["button-container"]}>
-							<Link href={redirectPath}>
-								<Button variant={EButtonVariant.LINE} icon={PlusIcon}>
-									Demander un autre document{" "}
-								</Button>
-							</Link>
-							{<Button disabled={documentsAsked ? false : true}>Envoyer un mail de demande de documents</Button>}
-						</div>
+						{!this.props.isArchived && (
+							<div className={classes["button-container"]}>
+								<Link href={redirectPath}>
+									<Button variant={EButtonVariant.LINE} icon={PlusIcon}>
+										Demander un autre document{" "}
+									</Button>
+								</Link>
+								{<Button disabled={documentsAsked ? false : true}>Envoyer un mail de demande de documents</Button>}
+							</div>
+						)}
 					</div>
 				)}
 			</div>
diff --git a/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/index.tsx b/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/index.tsx
index 3133c29a..1b20db23 100644
--- a/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/index.tsx
+++ b/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/index.tsx
@@ -41,7 +41,9 @@ export type IDashBoardFolder = {
 	deed: OfficeFolder["deed"];
 	created_at: OfficeFolder["created_at"];
 	office_folder_has_customers?: OfficeFolder["office_folder_has_customers"];
+	archived_description: OfficeFolder["archived_description"];
 };
+
 export default class DefaultNotaryDashboard extends React.Component<IProps, IState> {
 	private onWindowResize = () => {};
 	public static defaultProps: Partial<IProps> = {
diff --git a/src/front/Components/LayoutTemplates/DefaultTemplate/index.tsx b/src/front/Components/LayoutTemplates/DefaultTemplate/index.tsx
index c31fafc6..c4c6edcf 100644
--- a/src/front/Components/LayoutTemplates/DefaultTemplate/index.tsx
+++ b/src/front/Components/LayoutTemplates/DefaultTemplate/index.tsx
@@ -1,8 +1,9 @@
+import "reflect-metadata";
+
 import React, { ReactNode } from "react";
 import classes from "./classes.module.scss";
 import Header from "@Front/Components/DesignSystem/Header";
 import Version from "@Front/Components/DesignSystem/Version";
-import "reflect-metadata";
 
 type IProps = {
 	title: string;
diff --git a/src/front/Components/Layouts/DesignSystem/dummyData.ts b/src/front/Components/Layouts/DesignSystem/dummyData.ts
index 95da8113..0bef5a44 100644
--- a/src/front/Components/Layouts/DesignSystem/dummyData.ts
+++ b/src/front/Components/Layouts/DesignSystem/dummyData.ts
@@ -247,6 +247,7 @@ export const folderWithPendingDocumentArchived1: OfficeFolder = {
 	description: "Description",
 	archived_description: "Archived description",
 	documents: [documentDeposited],
+	office_folder_has_customers: [officeFolderHasCustomer1, officeFolderHasCustomer2],
 };
 export const folderWithPendingDocumentArchived2: OfficeFolder = {
 	uid: "adzefdazdaazzrtgtr",
diff --git a/src/front/Components/Layouts/DesignSystem/index.tsx b/src/front/Components/Layouts/DesignSystem/index.tsx
index f1e0742d..18310c61 100644
--- a/src/front/Components/Layouts/DesignSystem/index.tsx
+++ b/src/front/Components/Layouts/DesignSystem/index.tsx
@@ -1,3 +1,5 @@
+import "reflect-metadata";
+
 import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import CheckBox from "@Front/Components/DesignSystem/CheckBox";
 import DocumentNotary from "@Front/Components/DesignSystem/Document/DocumentNotary";
@@ -22,7 +24,6 @@ import Toasts, { IToast } from "@Front/Stores/Toasts";
 import classes from "./classes.module.scss";
 import { customer2, document, documentDeposited, documentPending, folder, folders, folderWithPendingDocument } from "./dummyData";
 
-import "reflect-metadata";
 
 type IState = {
 	isModalDisplayed: boolean;
diff --git a/src/front/Components/Layouts/Folder/FolderInformation/ClientSection/index.tsx b/src/front/Components/Layouts/Folder/FolderInformation/ClientSection/index.tsx
index 2acba430..b0d4b830 100644
--- a/src/front/Components/Layouts/Folder/FolderInformation/ClientSection/index.tsx
+++ b/src/front/Components/Layouts/Folder/FolderInformation/ClientSection/index.tsx
@@ -51,11 +51,7 @@ export default class ClientSection extends React.Component<IProps, IState> {
 		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 <UserFolder folder={this.props.folder} customer={folderHasCustomer.customer} key={key} />;
 		});
 		return output ?? null;
 	}
diff --git a/src/front/Components/Layouts/Folder/FolderInformation/index.tsx b/src/front/Components/Layouts/Folder/FolderInformation/index.tsx
index f88e1d9d..bc2ef367 100644
--- a/src/front/Components/Layouts/Folder/FolderInformation/index.tsx
+++ b/src/front/Components/Layouts/Folder/FolderInformation/index.tsx
@@ -2,27 +2,25 @@ 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 FolderBoxInformation, { EFolderBoxInformationType } 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 Module from "@Front/Config/Module";
+import Link from "next/link";
 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 IProps = {};
 
 type IPropsClass = IProps & {
 	selectedFolderUid: string;
-	isArchivedFolders: boolean;
 };
 
 type IState = {
@@ -48,7 +46,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 			.get()
 			.modules.pages.Folder.pages.EditCollaborators.props.path.replace("[folderUid]", this.props.selectedFolderUid);
 		return (
-			<DefaultNotaryDashboard title={"Dossier"} onSelectedFolder={this.onSelectedFolder} isArchived={this.props.isArchivedFolders}>
+			<DefaultNotaryDashboard title={"Dossier"} onSelectedFolder={this.onSelectedFolder} isArchived={false}>
 				<div className={classes["root"]}>
 					{this.state.selectedFolder ? (
 						<div className={classes["folder-informations"]}>
@@ -63,9 +61,9 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 										</Button>
 									</Link>
 								</div>
-								<FolderBoxInformation folder={this.state.selectedFolder} />
+								<FolderBoxInformation folder={this.state.selectedFolder} type={EFolderBoxInformationType.INFORMATIONS} />
 								<div className={classes["second-box"]}>
-									<FolderBoxInformation folder={this.state.selectedFolder} isDescription />
+									<FolderBoxInformation folder={this.state.selectedFolder} type={EFolderBoxInformationType.DESCRIPTION} />
 								</div>
 								<div className={classes["progress-bar"]}>
 									<QuantityProgressBar title="Complétion du dossier" total={100} currentNumber={0} />
@@ -142,8 +140,5 @@ 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");
-	return <FolderInformationClass {...props} selectedFolderUid={folderUid} isArchivedFolders={isArchivedFolders} />;
+	return <FolderInformationClass {...props} selectedFolderUid={folderUid} />;
 }
diff --git a/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx b/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx
index 9cb8ed2a..94a0545c 100644
--- a/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx
+++ b/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx
@@ -175,7 +175,7 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 	private goToPrevious() {
 		if (this.hasPrevious()) {
 			this.props.router.push(
-				`/folder/${this.props.folderUid}/document/${this.props.documentsList[this.state.selectedDocumentIndex - 1]!.uid}`,
+				`/folders/${this.props.folderUid}/documents/${this.props.documentsList[this.state.selectedDocumentIndex - 1]!.uid}`,
 			);
 		}
 	}
@@ -183,7 +183,7 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 	private goToNext() {
 		if (this.hasNext()) {
 			this.props.router.push(
-				`/folder/${this.props.folderUid}/document/${this.props.documentsList[this.state.selectedDocumentIndex + 1]!.uid}`,
+				`/folders/${this.props.folderUid}/documents/${this.props.documentsList[this.state.selectedDocumentIndex + 1]!.uid}`,
 			);
 		}
 	}
diff --git a/src/front/Components/Layouts/FolderArchived/FolderInformation/ClientSection/index.tsx b/src/front/Components/Layouts/FolderArchived/FolderInformation/ClientSection/index.tsx
index 2acba430..15924744 100644
--- a/src/front/Components/Layouts/FolderArchived/FolderInformation/ClientSection/index.tsx
+++ b/src/front/Components/Layouts/FolderArchived/FolderInformation/ClientSection/index.tsx
@@ -2,11 +2,7 @@ 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;
@@ -15,32 +11,17 @@ 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>
+						<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
+							Aucun client dans ce dossier
+						</Typography>
 					</div>
 				)}
 			</div>
@@ -51,11 +32,7 @@ export default class ClientSection extends React.Component<IProps, IState> {
 		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 <UserFolder folder={this.props.folder} customer={folderHasCustomer.customer} key={key} isArchived />;
 		});
 		return output ?? null;
 	}
diff --git a/src/front/Components/Layouts/FolderArchived/FolderInformation/index.tsx b/src/front/Components/Layouts/FolderArchived/FolderInformation/index.tsx
index 25ee7d73..1e249bfb 100644
--- a/src/front/Components/Layouts/FolderArchived/FolderInformation/index.tsx
+++ b/src/front/Components/Layouts/FolderArchived/FolderInformation/index.tsx
@@ -2,9 +2,7 @@ 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 FolderBoxInformation, { EFolderBoxInformationType } from "@Front/Components/DesignSystem/FolderBoxInformation";
 import QuantityProgressBar from "@Front/Components/DesignSystem/QuantityProgressBar";
 import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
 import { folders } from "@Front/Components/Layouts/DesignSystem/dummyData";
@@ -14,13 +12,11 @@ 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 = {
@@ -43,7 +39,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 	// 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}>
+			<DefaultNotaryDashboard title={"Dossier"} onSelectedFolder={this.onSelectedFolder} isArchived={true}>
 				<div className={classes["root"]}>
 					{this.state.selectedFolder ? (
 						<div className={classes["folder-informations"]}>
@@ -56,10 +52,26 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 										Modifier les collaborateurs
 									</Button>
 								</div>
-								<FolderBoxInformation folder={this.state.selectedFolder} />
+								<FolderBoxInformation
+									folder={this.state.selectedFolder}
+									isArchived
+									type={EFolderBoxInformationType.INFORMATIONS}
+								/>
 								<div className={classes["second-box"]}>
-									<FolderBoxInformation folder={this.state.selectedFolder} isDescription />
+									<FolderBoxInformation
+										folder={this.state.selectedFolder}
+										isArchived
+										type={EFolderBoxInformationType.DESCRIPTION}
+									/>
 								</div>
+								<div className={classes["second-box"]}>
+									<FolderBoxInformation
+										folder={this.state.selectedFolder}
+										isArchived
+										type={EFolderBoxInformationType.ARCHIVED_DESCRIPTION}
+									/>
+								</div>
+
 								<div className={classes["progress-bar"]}>
 									<QuantityProgressBar title="Complétion du dossier" total={100} currentNumber={0} />
 								</div>
@@ -69,27 +81,10 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 							{!this.doesFolderHaveCustomer() && <ClientSection folder={this.state.selectedFolder} />}
 
 							<div className={classes["button-container"]}>
-								<Button variant={EButtonVariant.GHOST} onClick={this.openArchivedModal}>
-									Archiver le dossier
+								<Button variant={EButtonVariant.GHOST} onClick={this.restoreFolder}>
+									Restaurer 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"]}>
@@ -106,6 +101,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 		);
 	}
 	public override async componentDidMount() {
+		// TODO : GET Current folder from the api
 		for (const folder of folders) {
 			if (folder.uid === this.props.selectedFolderUid) {
 				this.setState({ selectedFolder: folder });
@@ -122,6 +118,8 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 		this.setState({ selectedFolder: folder });
 	}
 
+	private restoreFolder() {}
+	// should call the api to restore the folder
 	private openArchivedModal(): void {
 		this.setState({ isArchivedModalOpen: true });
 	}
@@ -135,9 +133,5 @@ 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} />;
+	return <FolderInformationClass {...props} selectedFolderUid={folderUid} />;
 }
diff --git a/src/front/Config/Module/preprod.json b/src/front/Config/Module/preprod.json
index b5d6f276..b449fef6 100644
--- a/src/front/Config/Module/preprod.json
+++ b/src/front/Config/Module/preprod.json
@@ -48,7 +48,7 @@
 					"AddClient": {
 						"enabled": true,
 						"props": {
-							"path": "/folders/add/client",
+							"path": "/folders/add/clients",
 							"labelKey": "add_client_to_folder"
 						}
 					},
@@ -80,6 +80,13 @@
 							"labelKey": "edit_informations"
 						}
 					},
+					"EditCollaborators": {
+						"enabled": true,
+						"props": {
+							"path": "/folders/[folderUid]/edit/collaborators",
+							"labelKey": "edit_collaborators"
+						}
+					},
 					"FolderArchived": {
 						"enabled": true,
 						"props": {
diff --git a/src/front/Config/Module/production.json b/src/front/Config/Module/production.json
index b5d6f276..b449fef6 100644
--- a/src/front/Config/Module/production.json
+++ b/src/front/Config/Module/production.json
@@ -48,7 +48,7 @@
 					"AddClient": {
 						"enabled": true,
 						"props": {
-							"path": "/folders/add/client",
+							"path": "/folders/add/clients",
 							"labelKey": "add_client_to_folder"
 						}
 					},
@@ -80,6 +80,13 @@
 							"labelKey": "edit_informations"
 						}
 					},
+					"EditCollaborators": {
+						"enabled": true,
+						"props": {
+							"path": "/folders/[folderUid]/edit/collaborators",
+							"labelKey": "edit_collaborators"
+						}
+					},
 					"FolderArchived": {
 						"enabled": true,
 						"props": {
diff --git a/src/front/Config/Module/staging.json b/src/front/Config/Module/staging.json
index b5d6f276..b449fef6 100644
--- a/src/front/Config/Module/staging.json
+++ b/src/front/Config/Module/staging.json
@@ -48,7 +48,7 @@
 					"AddClient": {
 						"enabled": true,
 						"props": {
-							"path": "/folders/add/client",
+							"path": "/folders/add/clients",
 							"labelKey": "add_client_to_folder"
 						}
 					},
@@ -80,6 +80,13 @@
 							"labelKey": "edit_informations"
 						}
 					},
+					"EditCollaborators": {
+						"enabled": true,
+						"props": {
+							"path": "/folders/[folderUid]/edit/collaborators",
+							"labelKey": "edit_collaborators"
+						}
+					},
 					"FolderArchived": {
 						"enabled": true,
 						"props": {
diff --git a/src/pages/folder/[folderUid]/document/[documentUid]/index.tsx b/src/pages/folders/[folderUid]/documents/[documentUid]/index.tsx
similarity index 100%
rename from src/pages/folder/[folderUid]/document/[documentUid]/index.tsx
rename to src/pages/folders/[folderUid]/documents/[documentUid]/index.tsx
diff --git a/src/pages/folders/archived/[folderUid]/index.tsx b/src/pages/folders/archived/[folderUid]/index.tsx
index 2b6680d9..d3a8ef97 100644
--- a/src/pages/folders/archived/[folderUid]/index.tsx
+++ b/src/pages/folders/archived/[folderUid]/index.tsx
@@ -1,4 +1,4 @@
-import FolderInformation from "@Front/Components/Layouts/Folder/FolderInformation";
+import FolderInformation from "@Front/Components/Layouts/FolderArchived/FolderInformation";
 
 export default function Route() {
 	return <FolderInformation />;