✨ client dashboard

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

@@ -2,11 +2,13 @@
 
 .root {
 	margin: var(--root-margin);
-	padding: var(--root-padding);
 	max-width: var(--root-max-width);
 	min-width: 100%;
 	min-height: calc(100vh - 83px);
 
+	&.padding {
+		padding: var(--root-padding);
+
 		@media screen and (max-width: $screen-m) {
 			padding: 0 24px;
 		}
@@ -15,3 +17,4 @@
 			padding: 0 16px;
 		}
 	}
+}

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

@@ -4,6 +4,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 classNames from "classnames";
 
 type IProps = {
 	title: string;
@@ -12,19 +13,21 @@ type IProps = {
 	 * @description scroll top with number or disabled with null
 	 */
 	scrollTop: number | null;
+	isPadding?: boolean;
 };
 type IState = {};
 
 export default class DefaultTemplate extends React.Component<IProps, IState> {
 	public static defaultProps = {
 		scrollTop: 0,
+		isPadding: true,
 	};
 
 	public override render(): JSX.Element {
 		return (
 			<>
 				<Header isUserConnected={true} />
-				<div className={classes["root"]}>{this.props.children}</div>
+				<div className={classNames(classes["root"], this.props.isPadding && classes["padding"])}>{this.props.children}</div>
 				<Version />
 			</>
 		);

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

@@ -0,0 +1,86 @@
+@import "@Themes/constants.scss";
+
+.root {
+	.header {
+		display: flex;
+		padding: 64px;
+
+		@media (max-width: $screen-m) {
+			flex-wrap: wrap;
+
+			.text {
+				margin: 32px 0;
+			}
+		}
+
+		@media (max-width: $screen-s) {
+			flex-wrap: wrap;
+
+			.text {
+				margin: 32px 0;
+			}
+
+			.button {
+				flex: 1;
+			}
+		}
+
+		.subtitle {
+			margin: 32px 0;
+		}
+	}
+
+	.sub-container {
+		background-color: var(--grey-soft);
+		padding: 64px;
+
+		.content {
+			display: grid;
+			grid-template-columns: 1fr 1fr;
+			gap: 32px;
+			margin-bottom: 64px;
+
+			@media (max-width: $screen-s) {
+				grid-template-columns: 1fr;
+			}
+
+
+
+		}
+
+		.component-to-replace {
+			min-width: 124px;
+			height: 98px;
+			background-color: white;
+		}
+
+		.text {
+			margin: 32px 0;
+		}
+
+		.button {
+			width: fit-content;
+		}
+
+		@media (max-width: $screen-s) {
+			.button {
+				width: 100%;
+			}
+		}
+	}
+
+	.modal-content {
+		.text {
+			margin: 24px 0;
+		}
+
+		.component-to-replace {
+			background-color: var(--grey-soft);
+			height: 98px;
+			width: 100%;
+
+		}
+	}
+
+
+}

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

@@ -0,0 +1,105 @@
+import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
+import Base from "@Front/Components/Layouts/Base";
+import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
+import React from "react";
+
+import classes from "./classes.module.scss";
+import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
+import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
+
+type IProps = {};
+type IState = {
+	isAddDocumentModalVisible: boolean;
+};
+
+export default class ClientDashboard extends Base<IProps, IState> {
+	public constructor(props: IProps) {
+		super(props);
+		this.state = {
+			isAddDocumentModalVisible: false,
+		};
+		this.onCloseModalAddDocument = this.onCloseModalAddDocument.bind(this);
+		this.onOpenModalAddDocument = this.onOpenModalAddDocument.bind(this);
+	}
+
+	public override render(): JSX.Element {
+		return (
+			<DefaultTemplate title={"Mon compte"} isPadding={false}>
+				<div className={classes["root"]}>
+					{this.renderHeader()}
+					<div className={classes["sub-container"]}>
+						<div className={classes["content"]}>
+							<div className={classes["component-to-replace"]}></div>
+							<div className={classes["component-to-replace"]}></div>
+							<div className={classes["component-to-replace"]}></div>
+							<div className={classes["component-to-replace"]}></div>
+							<div className={classes["component-to-replace"]}></div>
+							<div className={classes["component-to-replace"]}></div>
+						</div>
+						<Typography typo={ITypo.H2}>Documents supplémentaires (facultatif)</Typography>
+						<Typography typo={ITypo.P_16} className={classes["text"]}>
+							Vous souhaitez envoyer d’autres documents à votre notaire ?
+						</Typography>
+						<Button variant={EButtonVariant.GHOST} className={classes["button"]} onClick={this.onOpenModalAddDocument}>
+							Ajouter d’autres documents
+						</Button>
+					</div>
+					<Confirm
+						isOpen={this.state.isAddDocumentModalVisible}
+						onClose={this.onCloseModalAddDocument}
+						onAccept={this.onOpenModalAddDocument}
+						closeBtn
+						header={"Ajouter un document"}
+						cancelText={"Annuler"}
+						confirmText={"Déposer le document"}>
+						<div className={classes["modal-content"]}>
+							<Typography typo={ITypo.P_16} className={classes["text"]}>
+								Vous souhaitez envoyer un autre document à votre notaire ?
+							</Typography>
+							<InputField fakeplaceholder={"Nom du document"} />
+							<Typography typo={ITypo.P_16} className={classes["text"]}>
+								Glissez / Déposez votre document dans la zone prévue à cet effet ou cliquez sur la zone puis sélectionnez le
+								document correspondant.
+							</Typography>
+							<div className={classes["component-to-replace"]}></div>
+						</div>
+					</Confirm>
+				</div>
+			</DefaultTemplate>
+		);
+	}
+
+	private renderHeader(): JSX.Element {
+		return (
+			<div className={classes["header"]}>
+				<div className={classes["text-container"]}>
+					{/* TODO Get name from userStore */}
+					<Typography typo={ITypo.H1} className={classes["title"]}>
+						Bonjour John Doe
+					</Typography>
+
+					<Typography typo={ITypo.H2} className={classes["subtitle"]}>
+						Documents à envoyer
+					</Typography>
+
+					<Typography typo={ITypo.P_16} className={classes["text"]}>
+						Votre notaire est dans l'attente de documents pour valider votre dossier. Voici la liste des documents.
Veuillez
+						glisser / déposez chaque document dans la zone prévue à cet effet ou cliquez sur la zone puis sélectionnez le
+						document correspondant. Si un des documents demandés ne vous concernent pas, veuillez contacter votre notaire à
+						l’aide du bouton ci-dessus.
+					</Typography>
+				</div>
+				<Button className={classes["button"]}>Contacter mon notaire</Button>
+			</div>
+		);
+	}
+
+	private onCloseModalAddDocument() {
+		this.setState({ isAddDocumentModalVisible: false });
+	}
+
+	private onOpenModalAddDocument() {
+		this.setState({ isAddDocumentModalVisible: true });
+	}
+}

src/pages/client-dashboard.tsx

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