base template for Notary dashboard

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>;
 	}

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;
+    }
 }

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"]}>
+			<div>
+				<div className={classes["searchbar"]}>
 					<SearchBar folders={this.props.folders} onChange={this.filterFolders} />
-			<FolderList folders={this.state.filteredFolders}/>
+				</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;
 	}

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>;

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%;
+		}
+	}
+}

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>
+		);
+	}
+}

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>

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;
+    }
+}

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>
+		);
+	}
+}

src/pages/folder-informations.tsx

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