From 8240bb780a559c8dd18d7841a3fcc372d3d0e8fc Mon Sep 17 00:00:00 2001
From: hugolxt <87241914+hugolxt@users.noreply.github.com>
Date: Thu, 6 Apr 2023 11:06:58 +0200
Subject: [PATCH 1/2] functionnal searchbar for front end folder list (#6)

We need to add infinite scroll to this component

1) Folder list ->
https://app.ora.pm/p/fb56ed95daa7456b888d266a050b9afa?v=86662&s=28712&t=k&c=5121c3f117db4114b998f8a560c9dc90

2) SearchBar ->
https://app.ora.pm/p/fb56ed95daa7456b888d266a050b9afa?v=86662&s=28712&t=k&c=8dd6f1a469b840fc86dd51c596e211bf

3) Fixes ->
https://app.ora.pm/p/fb56ed95daa7456b888d266a050b9afa?v=86662&s=28712&t=k&c=0b1860df9481401582e1da03d7b127d9
---
 src/front/Assets/icons/loop.svg               |  3 +
 .../FolderContainer/classes.module.scss       |  9 +--
 .../DesignSystem/FolderContainer/index.tsx    |  7 +-
 .../FolderList/classes.module.scss            |  4 ++
 .../DesignSystem/FolderList/index.tsx         | 21 ++++++
 .../FolderListContainer/classes.module.scss   |  4 ++
 .../FolderListContainer/index.tsx             | 36 ++++++++++
 .../SearchBar/classes.module.scss             | 31 ++++++++
 .../DesignSystem/SearchBar/index.tsx          | 53 ++++++++++++++
 .../DesignSystem/UserFolder/index.tsx         |  1 -
 .../Layouts/DesignSystem/dummyData.ts         | 71 +++++++++++++++----
 .../Components/Layouts/DesignSystem/index.tsx | 37 ++++++++--
 12 files changed, 249 insertions(+), 28 deletions(-)
 create mode 100644 src/front/Assets/icons/loop.svg
 create mode 100644 src/front/Components/DesignSystem/FolderList/classes.module.scss
 create mode 100644 src/front/Components/DesignSystem/FolderList/index.tsx
 create mode 100644 src/front/Components/DesignSystem/FolderListContainer/classes.module.scss
 create mode 100644 src/front/Components/DesignSystem/FolderListContainer/index.tsx
 create mode 100644 src/front/Components/DesignSystem/SearchBar/classes.module.scss
 create mode 100644 src/front/Components/DesignSystem/SearchBar/index.tsx

diff --git a/src/front/Assets/icons/loop.svg b/src/front/Assets/icons/loop.svg
new file mode 100644
index 00000000..bac9066a
--- /dev/null
+++ b/src/front/Assets/icons/loop.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.4351 10.0629H10.7124L10.4563 9.81589C11.3528 8.77301 11.8925 7.4191 11.8925 5.94625C11.8925 2.66209 9.23042 0 5.94625 0C2.66209 0 0 2.66209 0 5.94625C0 9.23042 2.66209 11.8925 5.94625 11.8925C7.4191 11.8925 8.77301 11.3528 9.81589 10.4563L10.0629 10.7124V11.4351L14.6369 16L16 14.6369L11.4351 10.0629ZM5.94625 10.0629C3.66838 10.0629 1.82962 8.22413 1.82962 5.94625C1.82962 3.66838 3.66838 1.82962 5.94625 1.82962C8.22413 1.82962 10.0629 3.66838 10.0629 5.94625C10.0629 8.22413 8.22413 10.0629 5.94625 10.0629Z" fill="#939393"/>
+</svg>
diff --git a/src/front/Components/DesignSystem/FolderContainer/classes.module.scss b/src/front/Components/DesignSystem/FolderContainer/classes.module.scss
index 2ccc11e6..0e7a13ec 100644
--- a/src/front/Components/DesignSystem/FolderContainer/classes.module.scss
+++ b/src/front/Components/DesignSystem/FolderContainer/classes.module.scss
@@ -8,16 +8,17 @@
     padding: 24px;
     border: 1px solid $grey-medium;
 
+    &:hover{
+        background-color: $grey-medium;
+    }
+
     .left-side {
         display: inline-flex;
         justify-content: space-between;
         align-items: center;
 
-        .warning-circle {
+        .warning{
             margin-left: 32px;
-            padding: 6px;
-            border-radius: 100px;
-            background-color: $orange-flash;
         }
     }
 }
\ No newline at end of file
diff --git a/src/front/Components/DesignSystem/FolderContainer/index.tsx b/src/front/Components/DesignSystem/FolderContainer/index.tsx
index 492c5c9e..d97d8be7 100644
--- a/src/front/Components/DesignSystem/FolderContainer/index.tsx
+++ b/src/front/Components/DesignSystem/FolderContainer/index.tsx
@@ -8,7 +8,7 @@ import WarningBadge from "../WarningBadge";
 
 type IProps = {
 	folder: {
-		folder_number: OfficeFolder["folder_number"];
+		folder_number: OfficeFolder["folder_number"] ;
 		documents?: OfficeFolder["documents"];
 	};
 }
@@ -19,15 +19,14 @@ export default class FolderContainer extends React.Component<IProps, IState> {
 		return <div className={classes["root"]}>
 			<div className={classes["left-side"]}>
 				<Typography typo={ITypo.P_16}>{"Dossier ".concat(this.props.folder.folder_number)}</Typography>
-				{this.countPendingDocuments() > 0 && <WarningBadge />}
-				
+				{this.countPendingDocuments() > 0 && <div className={classes["warning"]}><WarningBadge /></div>}
 			</div>
 			<Image alt="chevron" src={ChevronIcon} />
 		</div>;
 	}
 
 	private countPendingDocuments(): number {
-		if(!this.props.folder.documents) return 0;
+		if (!this.props.folder.documents) return 0;
 		return this.props.folder.documents?.filter((document) => document.document_status === "PENDING").length ?? 0;
 	}
 }
diff --git a/src/front/Components/DesignSystem/FolderList/classes.module.scss b/src/front/Components/DesignSystem/FolderList/classes.module.scss
new file mode 100644
index 00000000..f68b3ab0
--- /dev/null
+++ b/src/front/Components/DesignSystem/FolderList/classes.module.scss
@@ -0,0 +1,4 @@
+@import "@Themes/constants.scss";
+
+.root {
+}
diff --git a/src/front/Components/DesignSystem/FolderList/index.tsx b/src/front/Components/DesignSystem/FolderList/index.tsx
new file mode 100644
index 00000000..eda8afe1
--- /dev/null
+++ b/src/front/Components/DesignSystem/FolderList/index.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import classes from "./classes.module.scss";
+import FolderContainer from "../FolderContainer";
+import { IFolder } from "../SearchBar";
+
+type IProps = {
+	folders: IFolder[];
+};
+
+type IState = {};
+
+export default class FolderList extends React.Component<IProps, IState> {
+	public override render(): JSX.Element {
+		return <div className={classes["root"]}>
+			{this.props.folders.map((folder) => {
+				
+				return <FolderContainer folder={folder} />;
+			})};
+		</div>;
+	}
+}
diff --git a/src/front/Components/DesignSystem/FolderListContainer/classes.module.scss b/src/front/Components/DesignSystem/FolderListContainer/classes.module.scss
new file mode 100644
index 00000000..f68b3ab0
--- /dev/null
+++ b/src/front/Components/DesignSystem/FolderListContainer/classes.module.scss
@@ -0,0 +1,4 @@
+@import "@Themes/constants.scss";
+
+.root {
+}
diff --git a/src/front/Components/DesignSystem/FolderListContainer/index.tsx b/src/front/Components/DesignSystem/FolderListContainer/index.tsx
new file mode 100644
index 00000000..8b48b6fe
--- /dev/null
+++ b/src/front/Components/DesignSystem/FolderListContainer/index.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import classes from "./classes.module.scss";
+import SearchBar, { IFolder } from "../SearchBar";
+import Button from "../Button";
+import FolderList from "../FolderList";
+
+type IProps = {
+	folders: IFolder[];
+};
+type IState = {
+	filteredFolders: IFolder[];
+};
+
+export default class FolderListContainer extends React.Component<IProps, IState> {
+	//coinstructor
+	public constructor(props: IProps) {
+		super(props);
+		this.state = {
+			filteredFolders: this.props.folders,
+		};
+		this.filterFolders = this.filterFolders.bind(this);
+	}
+
+	public override render(): JSX.Element {
+		return <div className={classes["root"]}>
+			<SearchBar folders={this.props.folders} onChange={this.filterFolders} />
+			<FolderList folders={this.state.filteredFolders}/>
+			<Button fullwidth={"true"}>Créer un dossier</Button>
+		</div>;
+	}
+
+	private filterFolders(folders: IFolder[]) :IFolder[] {
+		this.setState({ filteredFolders: folders })
+		return folders;
+	}
+}
diff --git a/src/front/Components/DesignSystem/SearchBar/classes.module.scss b/src/front/Components/DesignSystem/SearchBar/classes.module.scss
new file mode 100644
index 00000000..c7f1a739
--- /dev/null
+++ b/src/front/Components/DesignSystem/SearchBar/classes.module.scss
@@ -0,0 +1,31 @@
+@import "@Themes/constants.scss";
+
+.root {
+    display: flex;
+    align-items: center;
+    padding-left: 24px;
+    background-color: $white;
+    border: 1px solid $grey-medium;
+    position: relative;
+
+    .fake-placeholder {
+        position: absolute;
+        left: 47px;
+        top: 24px;
+        color: $grey;
+        pointer-events: none;
+    }
+
+    .input {
+        border: 0;
+        margin-left: 8px;
+        padding: 24px 0;
+        width: 100%;
+        font-family: 'Inter';
+        font-style: normal;
+        font-weight: 400;
+        font-size: 18px;
+        line-height: 22px;
+        color: $grey;
+    }
+}
\ No newline at end of file
diff --git a/src/front/Components/DesignSystem/SearchBar/index.tsx b/src/front/Components/DesignSystem/SearchBar/index.tsx
new file mode 100644
index 00000000..f6503f19
--- /dev/null
+++ b/src/front/Components/DesignSystem/SearchBar/index.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+import classes from "./classes.module.scss";
+import LoopIcon from "@Assets/Icons/loop.svg";
+import Image from "next/image";
+import Typography, { ITypo } from "../Typography";
+import { OfficeFolder } from "le-coffre-resources/dist/Customer";
+
+type IProps = {
+	folders: IFolder[];
+	onChange?: (folders: IFolder[]) => IFolder[];
+};
+type IState = {
+	hasValue: boolean;
+};
+
+export type IFolder = {
+	folder_number: OfficeFolder["folder_number"];
+	documents?: OfficeFolder["documents"];
+};
+
+export default class SearchBar extends React.Component<IProps, IState> {
+	public constructor(props: IProps) {
+		super(props);
+		this.state = {
+			hasValue: false,
+		};
+		this.doesInputHaveValue = this.doesInputHaveValue.bind(this);
+		this.onChange = this.onChange.bind(this);
+	}
+	public override render(): JSX.Element {
+		return <div className={classes["root"]}>
+			<Image src={LoopIcon} alt="Loop icon" />
+			{!this.state.hasValue && <Typography typo={ITypo.P_ERR_18}><div className={classes["fake-placeholder"]}>Select</div></Typography>}
+			<input type="text" placeholder="" className={classes["input"]} onChange={this.onChange} />
+		</div>;
+	}
+
+	private onChange(event: React.ChangeEvent<HTMLInputElement>) {
+		const hasValue = event.target.value.length > 0
+		this.doesInputHaveValue(hasValue);
+		if (!this.props.onChange) return;
+		this.props.onChange(this.filterFolders(event));
+	}
+
+	private doesInputHaveValue(hasValue: boolean) {
+		this.setState({ hasValue });
+	}
+
+	private filterFolders(event: React.ChangeEvent<HTMLInputElement>) {
+		const filteredFolders: IFolder[] = this.props.folders.filter((folder) => folder.folder_number.includes(event.target.value));
+		return filteredFolders;
+	}
+}
diff --git a/src/front/Components/DesignSystem/UserFolder/index.tsx b/src/front/Components/DesignSystem/UserFolder/index.tsx
index 4f68f05a..1c3089fe 100644
--- a/src/front/Components/DesignSystem/UserFolder/index.tsx
+++ b/src/front/Components/DesignSystem/UserFolder/index.tsx
@@ -130,7 +130,6 @@ export default class UserFolder extends React.Component<IProps, IState> {
 	}
 
 	private openDeletionModal(uid: string): void {
-		console.log("Delete item > ", uid);
 		// TODO: call API to delete document
 		this.setState({
 			isOpenDeletionModal: true
diff --git a/src/front/Components/Layouts/DesignSystem/dummyData.ts b/src/front/Components/Layouts/DesignSystem/dummyData.ts
index a5c04efd..ce25c07f 100644
--- a/src/front/Components/Layouts/DesignSystem/dummyData.ts
+++ b/src/front/Components/Layouts/DesignSystem/dummyData.ts
@@ -48,19 +48,6 @@ export const deed: Deed = {
   updated_at: new Date(),
 };
 
-export const folder: OfficeFolder = {
-  uid: "11123312",
-  folder_number: "12331",
-  name: "Mon dossier",
-  status: EFolderStatus.ARCHIVED,
-  deed: deed,
-  office: office,
-  created_at: new Date(),
-  updated_at: new Date(),
-  description: "Description",
-  archived_description: "Archived description",
-};
-
 export const contact: Contact = {
   uid: "123123",
   first_name: "John",
@@ -90,6 +77,18 @@ export const customer: Customer = {
   updated_at: new Date(),
   status: ECustomerStatus.VALIDATED,
 };
+export const folder: OfficeFolder = {
+  uid: "11123312",
+  folder_number: "12331",
+  name: "Mon dossier",
+  status: EFolderStatus.ARCHIVED,
+  deed: deed,
+  office: office,
+  created_at: new Date(),
+  updated_at: new Date(),
+  description: "Description",
+  archived_description: "Archived description",
+};
 
 export const document: Document = {
   uid: "0",
@@ -140,9 +139,11 @@ export const customer2: Customer = {
   documents: [document, document2, documentPending, documentDeposited],
 };
 
+
+
 export const folderWithPendingDocument: OfficeFolder = {
   uid: "11123312",
-  folder_number: "12332",
+  folder_number: "00001",
   name: "Mon dossier",
   status: EFolderStatus.ARCHIVED,
   deed: deed,
@@ -151,5 +152,45 @@ export const folderWithPendingDocument: OfficeFolder = {
   updated_at: new Date(),
   description: "Description",
   archived_description: "Archived description",
-  documents: [documentPending],
+  documents: [document, document2, documentPending, documentDeposited],
 };
+export const folderWithPendingDocument1: OfficeFolder = {
+  uid: "11123312",
+  folder_number: "00002",
+  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: [documentDeposited],
+};
+export const folderWithPendingDocument2: OfficeFolder = {
+  uid: "11123312",
+  folder_number: "00003",
+  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, document2],
+};
+export const folderWithPendingDocument3: OfficeFolder = {
+  uid: "11123312",
+  folder_number: "00014",
+  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, document2, documentDeposited, documentPending],
+};
+export const folders : OfficeFolder[] = [folderWithPendingDocument, folderWithPendingDocument1, folderWithPendingDocument2, folderWithPendingDocument3]
diff --git a/src/front/Components/Layouts/DesignSystem/index.tsx b/src/front/Components/Layouts/DesignSystem/index.tsx
index 89793f90..bfb71a74 100644
--- a/src/front/Components/Layouts/DesignSystem/index.tsx
+++ b/src/front/Components/Layouts/DesignSystem/index.tsx
@@ -13,11 +13,13 @@ import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField"
 import QuantityProgressBar from "@Front/Components/DesignSystem/QuantityProgressBar";
 import "reflect-metadata";
 import FolderContainer from "@Front/Components/DesignSystem/FolderContainer";
-import { customer2, document, documentDeposited, documentPending, folder, folderWithPendingDocument } from "./dummyData"
+import { customer2, document, documentDeposited, documentPending, folder, folderWithPendingDocument, folders } from "./dummyData"
 import DocumentNotary from "@Front/Components/DesignSystem/Document/DocumentNotary";
 import Select, { IOption } from "@Front/Components/DesignSystem/Select";
 import UserFolder from "@Front/Components/DesignSystem/UserFolder";
 import MultiSelect from "@Front/Components/DesignSystem/Materials/MultiSelect";
+import SearchBar from "@Front/Components/DesignSystem/SearchBar";
+import FolderList from "@Front/Components/DesignSystem/FolderListContainer";
 
 type IState = {
 	isModalDisplayed: boolean;
@@ -37,7 +39,7 @@ export default class DesignSystem extends BasePage<IProps, IState> {
 		this.onSelectedOption = this.onSelectedOption.bind(this);
 	}
 
-	
+
 	public override render(): JSX.Element {
 
 		const selectOptions: IOption[] = [
@@ -65,8 +67,6 @@ export default class DesignSystem extends BasePage<IProps, IState> {
 							</Typography>
 						</div>
 					</div>
-					<MultiSelect options={selectOptions} placeholder="Numéro CRPCEN"/>
-
 					<div className={classes["section"]}>
 						<div className={classes["sub-section"]}>
 							<Typography typo={ITypo.H3}>Button components</Typography>
@@ -229,6 +229,35 @@ export default class DesignSystem extends BasePage<IProps, IState> {
 						</div>
 					</div>
 
+					<div className={classes["section"]}>
+						<div className={classes["sub-section"]}>
+							<Typography typo={ITypo.H3}>MultiSelect</Typography>
+						</div>
+						<div className={classes["sub-section"]}>
+							<MultiSelect options={selectOptions} placeholder="Numéro CRPCEN" />
+						</div>
+					</div>
+
+
+					<div className={classes["section"]}>
+						<div className={classes["sub-section"]}>
+							<Typography typo={ITypo.H3}>Document SearchBar</Typography>
+						</div>
+						<div className={classes["sub-section"]}>
+							<SearchBar folders={folders} />
+						</div>
+					</div>
+
+					<div className={classes["section"]}>
+						<div className={classes["sub-section"]}>
+							<Typography typo={ITypo.H3}>Folder List</Typography>
+						</div>
+						<div className={classes["sub-section"]}>
+							<FolderList folders={folders} />
+						</div>
+					</div>
+
+
 				</div>
 			</DefaultTemplate>
 		);

From e43320e90b07937977a55ef7c2821a4f2999ba43 Mon Sep 17 00:00:00 2001
From: Hugo Lextrait <hugo.lextrait@smart-chain.fr>
Date: Thu, 6 Apr 2023 11:40:02 +0200
Subject: [PATCH 2/2] base template for Notary dashboard

---
 .../DesignSystem/FolderList/index.tsx         |  4 +-
 .../FolderListContainer/classes.module.scss   |  7 ++++
 .../FolderListContainer/index.tsx             | 16 ++++---
 .../DesignSystem/InformationBox/index.tsx     |  4 +-
 .../classes.module.scss                       | 14 +++++++
 .../DefaultNotaryDashboard/index.tsx          | 42 +++++++++++++++++++
 .../LayoutTemplates/DefaultTemplate/index.tsx |  3 +-
 .../FolderInfomations/classes.module.scss     | 16 +++++++
 .../Layouts/FolderInfomations/index.tsx       | 11 +++++
 src/pages/folder-informations.tsx             |  5 +++
 10 files changed, 112 insertions(+), 10 deletions(-)
 create mode 100644 src/front/Components/LayoutTemplates/DefaultNotaryDashboard/classes.module.scss
 create mode 100644 src/front/Components/LayoutTemplates/DefaultNotaryDashboard/index.tsx
 create mode 100644 src/front/Components/Layouts/FolderInfomations/classes.module.scss
 create mode 100644 src/front/Components/Layouts/FolderInfomations/index.tsx
 create mode 100644 src/pages/folder-informations.tsx

diff --git a/src/front/Components/DesignSystem/FolderList/index.tsx b/src/front/Components/DesignSystem/FolderList/index.tsx
index eda8afe1..ad6f1de4 100644
--- a/src/front/Components/DesignSystem/FolderList/index.tsx
+++ b/src/front/Components/DesignSystem/FolderList/index.tsx
@@ -12,9 +12,9 @@ type IState = {};
 export default class FolderList extends React.Component<IProps, IState> {
 	public override render(): JSX.Element {
 		return <div className={classes["root"]}>
-			{this.props.folders.map((folder) => {
+			{this.props.folders.map((folder, key) => {
 				
-				return <FolderContainer folder={folder} />;
+				return <FolderContainer folder={folder} key={key}/>;
 			})};
 		</div>;
 	}
diff --git a/src/front/Components/DesignSystem/FolderListContainer/classes.module.scss b/src/front/Components/DesignSystem/FolderListContainer/classes.module.scss
index f68b3ab0..64dc4cf1 100644
--- a/src/front/Components/DesignSystem/FolderListContainer/classes.module.scss
+++ b/src/front/Components/DesignSystem/FolderListContainer/classes.module.scss
@@ -1,4 +1,11 @@
 @import "@Themes/constants.scss";
 
 .root {
+    min-height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    .searchbar{
+        padding: 40px 24px 24px 24px;
+    }
 }
diff --git a/src/front/Components/DesignSystem/FolderListContainer/index.tsx b/src/front/Components/DesignSystem/FolderListContainer/index.tsx
index 8b48b6fe..a29b3899 100644
--- a/src/front/Components/DesignSystem/FolderListContainer/index.tsx
+++ b/src/front/Components/DesignSystem/FolderListContainer/index.tsx
@@ -12,7 +12,6 @@ type IState = {
 };
 
 export default class FolderListContainer extends React.Component<IProps, IState> {
-	//coinstructor
 	public constructor(props: IProps) {
 		super(props);
 		this.state = {
@@ -23,13 +22,20 @@ export default class FolderListContainer extends React.Component<IProps, IState>
 
 	public override render(): JSX.Element {
 		return <div className={classes["root"]}>
-			<SearchBar folders={this.props.folders} onChange={this.filterFolders} />
-			<FolderList folders={this.state.filteredFolders}/>
-			<Button fullwidth={"true"}>Créer un dossier</Button>
+			<div>
+				<div className={classes["searchbar"]}>
+					<SearchBar folders={this.props.folders} onChange={this.filterFolders} />
+				</div>
+				<FolderList folders={this.state.filteredFolders} />
+			</div>
+			<div>
+
+				<Button fullwidth={"true"}>Créer un dossier</Button>
+			</div>
 		</div>;
 	}
 
-	private filterFolders(folders: IFolder[]) :IFolder[] {
+	private filterFolders(folders: IFolder[]): IFolder[] {
 		this.setState({ filteredFolders: folders })
 		return folders;
 	}
diff --git a/src/front/Components/DesignSystem/InformationBox/index.tsx b/src/front/Components/DesignSystem/InformationBox/index.tsx
index 22d60a53..e8969bbe 100644
--- a/src/front/Components/DesignSystem/InformationBox/index.tsx
+++ b/src/front/Components/DesignSystem/InformationBox/index.tsx
@@ -15,8 +15,8 @@ type IFolderInformation = {
 export default class InformationBox extends React.Component<IProps, IState> {
 	public override render(): JSX.Element {
 		return <div className={classes["root"]}>
-			{this.props.informations.map((information) => {
-				const output = <div className={classes["information"]}>
+			{this.props.informations.map((information, key) => {
+				const output = <div className={classes["information"] } key={key}>
 					<span className={classes["label"]}>{information.label}</span>
 					<span className={classes["value"]}>{information.value}</span>
 				</div>;
diff --git a/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/classes.module.scss
new file mode 100644
index 00000000..2d1cece8
--- /dev/null
+++ b/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/classes.module.scss
@@ -0,0 +1,14 @@
+@import "@Themes/constants.scss";
+
+.root {
+	.content {
+		.left-side {
+			max-width: 389px;
+			height: calc(100vh - 83px);
+		}
+
+		.right-side {
+			width: 100%;
+		}
+	}
+}
\ No newline at end of file
diff --git a/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/index.tsx b/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/index.tsx
new file mode 100644
index 00000000..2f22ea21
--- /dev/null
+++ b/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/index.tsx
@@ -0,0 +1,42 @@
+import 'reflect-metadata';
+import React, { ReactNode } from "react";
+import classes from "./classes.module.scss";
+import { IFolder } from "@Front/Components/DesignSystem/SearchBar";
+import { folders } from "@Front/Components/Layouts/DesignSystem/dummyData"
+import FolderListContainer from "@Front/Components/DesignSystem/FolderListContainer";
+import Header from "@Front/Components/DesignSystem/Header";
+import Version from "@Front/Components/DesignSystem/Version";
+
+type IProps = {
+	title: string;
+	children?: ReactNode;
+};
+type IState = {
+	folders: IFolder[];
+};
+
+export default class DefaultNotaryDashboard extends React.Component<IProps, IState> {
+	public static defaultProps = {
+		scrollTop: 0,
+	};
+
+	public constructor(props: IProps) {
+		super(props);
+		this.state = {
+			folders: folders,
+		};
+	}
+
+	public override render(): JSX.Element {
+		return (
+			<div className={classes["root"]}>
+				<Header isUserConnected={true} />
+				<div className={classes["content"]}>
+					<div className={classes["left-side"]}><FolderListContainer folders={this.state.folders} /></div>
+					<div className={classes["right-side"]}>{this.props.children}</div>
+				</div>
+				<Version />
+			</div>
+		);
+	}
+}
diff --git a/src/front/Components/LayoutTemplates/DefaultTemplate/index.tsx b/src/front/Components/LayoutTemplates/DefaultTemplate/index.tsx
index c7ecd3e4..e05d1e15 100644
--- a/src/front/Components/LayoutTemplates/DefaultTemplate/index.tsx
+++ b/src/front/Components/LayoutTemplates/DefaultTemplate/index.tsx
@@ -2,6 +2,7 @@ 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;
@@ -21,7 +22,7 @@ export default class DefaultTemplate extends React.Component<IProps, IState> {
 	public override render(): JSX.Element {
 		return (
 			<>
-				<Header isUserConnected={true}/>
+				<Header isUserConnected={true} />
 				<div className={classes["root"]}>
 					<div className={classes["content"]}>{this.props.children}</div>
 				</div>
diff --git a/src/front/Components/Layouts/FolderInfomations/classes.module.scss b/src/front/Components/Layouts/FolderInfomations/classes.module.scss
new file mode 100644
index 00000000..53e48bc0
--- /dev/null
+++ b/src/front/Components/Layouts/FolderInfomations/classes.module.scss
@@ -0,0 +1,16 @@
+.root {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+
+    .title {
+        margin: 32px 0;
+        text-align: center;
+    }
+
+    .forget-password {
+        margin-top: 32px;
+        margin-bottom: 8px;
+    }
+}
\ No newline at end of file
diff --git a/src/front/Components/Layouts/FolderInfomations/index.tsx b/src/front/Components/Layouts/FolderInfomations/index.tsx
new file mode 100644
index 00000000..70306e12
--- /dev/null
+++ b/src/front/Components/Layouts/FolderInfomations/index.tsx
@@ -0,0 +1,11 @@
+import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
+import BasePage from "../Base";
+
+export default class FolderInfomations extends BasePage {
+	public override render(): JSX.Element {
+		return (
+			<DefaultNotaryDashboard title={""}>
+			</DefaultNotaryDashboard>
+		);
+	}
+}
diff --git a/src/pages/folder-informations.tsx b/src/pages/folder-informations.tsx
new file mode 100644
index 00000000..6283ee50
--- /dev/null
+++ b/src/pages/folder-informations.tsx
@@ -0,0 +1,5 @@
+import FolderInfomations from "@Front/Components/Layouts/FolderInfomations";
+
+export default function Route() {
+	return <FolderInfomations />;
+}