✨ Update folder informations

src/front/Components/DesignSystem/FolderBoxInformation/classes.module.scss

@@ -38,7 +38,8 @@
 		}
 	}
 
-	.edit-icon {
+	.edit-icon-container {
+		cursor: pointer;
 		margin-left: 48px;
 	}
 

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

@@ -5,6 +5,7 @@ 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";
 
 type IProps = {
 	folder: IDashBoardFolder;
@@ -13,15 +14,20 @@ type IProps = {
 
 export default function FolderBoxInformation(props: IProps) {
 	const { isDescription = false } = props;
+	const path = isDescription
+		? "/dossier/".concat(props.folder.uid).concat("/todo")
+		: "/dossier/".concat(props.folder.uid).concat("/modifier");
 
 	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>
+						<div className={classes["text-container"]}>
-						<Typography typo={ITypo.P_18}>{props.folder.description ?? "..."}</Typography>
+							<Typography typo={ITypo.NAV_INPUT_16}>Note dossier</Typography>
-					</div>
+							<Typography typo={ITypo.P_18}>{props.folder.description ?? "..."}</Typography>
+						</div>
+					</>
 				) : (
 					<>
 						<div className={classes["text-container"]}>
@@ -43,7 +49,9 @@ export default function FolderBoxInformation(props: IProps) {
 					</>
 				)}
 			</div>
-			<Image src={PenICon} alt="edit informations" className={classes["edit-icon"]} />
+			<Link href={path} className={classes["edit-icon-container"]}>
+				<Image src={PenICon} alt="edit informations" />
+			</Link>
 		</div>
 	);
 }

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

@@ -0,0 +1,29 @@
+@import "@Themes/constants.scss";
+
+.root {
+	display: flex;
+	flex-direction: column;
+	min-height: 100%;
+	align-items: flex-start;
+
+	.back-arrow {
+		margin-bottom: 24px;
+	}
+
+	.content {
+		margin-top: 32px;
+
+		>:not(:last-child) {
+			margin-bottom: 24px;
+		}
+
+	}
+
+	.button-container {
+		margin-top: 24px;
+
+		:first-child {
+			margin-right: 32px;
+		}
+	}
+}

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

@@ -0,0 +1,83 @@
+import DefaultNotaryDashboard, { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
+import BasePage from "../../Base";
+import classes from "./classes.module.scss";
+import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
+
+import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Select, { IOption } from "@Front/Components/DesignSystem/Select";
+import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
+import Form from "@Front/Components/DesignSystem/Form";
+import { useRouter } from "next/router";
+import BackArrow from "@Front/Components/Elements/BackArrow";
+
+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" },
+		];
+
+		return (
+			<DefaultNotaryDashboard title={"Ajouter client(s)"} onSelectedFolder={this.onSelectedFolder}>
+				<div className={classes["root"]}>
+					<div className={classes["back-arrow"]}>
+						<BackArrow url={"/dossier/".concat(this.props.selectedFolderUid)} />
+					</div>
+					<Typography typo={ITypo.H1Bis}>Modifier les informations du dossier</Typography>
+
+					<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"]}>
+							<Button variant={EButtonVariant.GHOST}>Annuler</Button>
+							<Button type="submit">Associer au dossier</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 { uid } = router.query;
+	uid = uid as string;
+	return <UpdateFolderMetadataClass selectedFolderUid={uid} />;
+}

src/pages/dossier/[uid]/modifier.tsx

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