add client dashboard (#38)

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

@@ -15,6 +15,7 @@
 	white-space: nowrap;
 	user-select: none;
 	cursor: pointer;
+	font-family: var(--font-primary);
 
 	svg {
 		width: 18px;
@@ -109,4 +110,4 @@
 		line-height: 22px;
 		text-decoration-line: underline;
 	}
-}
+}

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

@@ -1,12 +1,17 @@
 .root {
 	padding: 24px;
-	background-color: white;
+	background-color: var(--white);
 	border: 1px dashed #e7e7e7;
-    
+
-    height: fit-content;
+	height: fit-content;
-    &[data-drag-over="true"] {
+
-        border: 1px dashed grey;
+	&[data-drag-over="true"] {
-    }
+		border: 1px dashed var(--grey);
+	}
+
+	&.validated {
+		border: 1px dashed var(--green-flash);
+	}
 
 	.top-container {
 		display: flex;
@@ -25,6 +30,12 @@
 		.right {
 			margin-left: 18px;
 
+			.refused-button {
+				font-size: 14px;
+				color: var(--re-hover);
+				margin-left: 8px;
+			}
+
 			.title {
 				display: flex;
 				align-items: center;
@@ -40,9 +51,9 @@
 		margin-top: 16px;
 
 		.file-container {
-            display: flex;
+			display: flex;
-            align-items: center;
+			align-items: center;
-            justify-content: space-between;
+			justify-content: space-between;
 
 			.left-part {
 				display: flex;
@@ -50,7 +61,7 @@
 				gap: 8px;
 			}
 
-			.cross{
+			.cross {
 				cursor: pointer;
 			}
 		}
@@ -58,6 +69,7 @@
 
 	.bottom-container {
 		margin-top: 16px;
+
 		.add-button {
 			.add-document {
 				display: flex;
@@ -66,4 +78,14 @@
 			}
 		}
 	}
+
+	.text {
+		margin-bottom: 12px;
+	}
 }
+
+.modal-content{
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+}

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

@@ -9,8 +9,12 @@ import Button, { EButtonVariant } from "../Button";
 import Tooltip from "../ToolTip";
 import Typography, { ITypo, ITypoColor } from "../Typography";
 import classes from "./classes.module.scss";
-import { Document, File as FileCustomer } from "le-coffre-resources/dist/Customer";
+import { Document, DocumentHistory, File as FileCustomer } from "le-coffre-resources/dist/Customer";
 import Files from "@Front/Api/LeCoffreApi/SuperAdmin/Files/Files";
+import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
+import classNames from "classnames";
+import Confirm from "../Modal/Confirm";
+import InputField from "../Form/Elements/InputField";
 
 type IProps = {
 	title: string;
@@ -23,12 +27,15 @@ type IProps = {
 type IFile = {
 	index: number;
 	file: File;
+	uid: string;
 };
 
 type IState = {
 	files: IFile[];
 	isDragOver: boolean;
 	currentFiles?: FileCustomer[];
+	refusedReason?: string;
+	isShowRefusedReasonModalVisible: boolean;
 };
 
 export default class DepositDocument extends React.Component<IProps, IState> {
@@ -42,6 +49,8 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 			files: [],
 			isDragOver: false,
 			currentFiles: this.props.defaultFiles,
+			refusedReason: "",
+			isShowRefusedReasonModalVisible: false,
 		};
 
 		this.addDocument = this.addDocument.bind(this);
@@ -50,12 +59,19 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 		this.onDragOver = this.onDragOver.bind(this);
 		this.onDragDrop = this.onDragDrop.bind(this);
 		this.onDragLeave = this.onDragLeave.bind(this);
+		this.onCloseModalShowRefusedReason = this.onCloseModalShowRefusedReason.bind(this);
+		this.onOpenModalShowRefusedReason = this.onOpenModalShowRefusedReason.bind(this);
+		this.showRefusedReason = this.showRefusedReason.bind(this);
 	}
 
 	public override render(): JSX.Element {
+		console.log("Reason in state : ", this.state.refusedReason);
 		return (
 			<div
-				className={classes["root"]}
+				className={classNames(
+					classes["root"],
+					this.props.document.document_status === EDocumentStatus.VALIDATED && classes["validated"],
+				)}
 				onDragOver={this.onDragOver}
 				onDrop={this.onDragDrop}
 				onDragLeave={this.onDragLeave}
@@ -68,14 +84,22 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 					<div className={classes["separator"]} />
 					<div className={classes["right"]}>
 						<Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK} className={classes["title"]}>
-							{this.props.title} <Tooltip text={"Blabla"} />
+							{this.props.title}{" "}
-						</Typography>
+							{this.props.document.document_type?.public_description !== "" && (
-						<Typography typo={ITypo.CAPTION_14} color={ITypoColor.GREY}>
+								<Tooltip text={this.props.document.document_type?.public_description} />
-							Demandé par le notaire le {this.formatDate(this.props.dateAsked)}
+							)}
 						</Typography>
+						{this.props.document.document_status !== EDocumentStatus.VALIDATED && (
+							<Typography color={ITypoColor.GREY} typo={ITypo.CAPTION_14}>
+								Sélectionnez des documents .jpg, .pdf ou .png
+							</Typography>
+						)}
+						{this.props.document.document_history?.map((history) => (
+							<div key={history.uid}>{this.renderDocumentHistory(history)}</div>
+						))}
 					</div>
 				</div>
-				{this.state.files.length > 0 && (
+				{this.props.document.document_status !== EDocumentStatus.VALIDATED && this.state.files.length > 0 && (
 					<div className={classes["documents-container"]}>
 						{this.state.files.map((file) => {
 							const fileObj = file.file;
@@ -99,14 +123,31 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 						})}
 					</div>
 				)}
-
+				{this.props.document.document_status !== EDocumentStatus.VALIDATED && (
-				<div className={classes["bottom-container"]}>
+					<div className={classes["bottom-container"]}>
-					<Button variant={EButtonVariant.LINE} className={classes["add-button"]} onClick={this.addDocument}>
+						<Button variant={EButtonVariant.LINE} className={classes["add-button"]} onClick={this.addDocument}>
-						<Typography typo={ITypo.P_SB_16} color={ITypoColor.PINK_FLASH} className={classes["add-document"]}>
+							<Typography typo={ITypo.P_SB_16} color={ITypoColor.PINK_FLASH} className={classes["add-document"]}>
-							Ajouter un document <Image src={PlusIcon} alt="Plus icon" />
+								Ajouter un document <Image src={PlusIcon} alt="Plus icon" />
+							</Typography>
+						</Button>
+					</div>
+				)}
+				<Confirm
+					isOpen={this.state.isShowRefusedReasonModalVisible}
+					onClose={this.onCloseModalShowRefusedReason}
+					showCancelButton={false}
+					onAccept={this.onCloseModalShowRefusedReason}
+					closeBtn
+					header={"Motif du refus"}
+					confirmText={"J'ai compris"}>
+					<div className={classes["modal-content"]}>
+						<Typography typo={ITypo.P_16} className={classes["text"]}>
+							Votre document a été refusé pour la raison suivante :
 						</Typography>
-					</Button>
+						<InputField textarea fakeplaceholder={"Description"} defaultValue={this.state.refusedReason} readOnly />
-				</div>
+					</div>
+				</Confirm>
+				;
 			</div>
 		);
 	}
@@ -117,11 +158,63 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 				files: this.props.defaultFiles.map((file) => ({
 					index: this.index++,
 					file: new File([""], file.file_path ?? "", {}),
+					uid: file.uid!,
 				})),
 			});
 		}
 	}
 
+	private onCloseModalShowRefusedReason() {
+		this.setState({
+			isShowRefusedReasonModalVisible: false,
+		});
+	}
+
+	private onOpenModalShowRefusedReason() {
+		this.setState({
+			isShowRefusedReasonModalVisible: true,
+		});
+	}
+
+	private renderDocumentHistory(history: DocumentHistory): JSX.Element | null {
+		switch (history.document_status) {
+			case EDocumentStatus.ASKED:
+				return (
+					<Typography color={ITypoColor.GREY} typo={ITypo.CAPTION_14}>
+						Demandé par votre notaire le {this.formatDate(history.created_at!)}
+					</Typography>
+				);
+			case EDocumentStatus.VALIDATED:
+				return (
+					<Typography color={ITypoColor.GREY} typo={ITypo.CAPTION_14}>
+						Validé par votre notaire le {this.formatDate(history.created_at!)}
+					</Typography>
+				);
+			case EDocumentStatus.DEPOSITED:
+				return (
+					<Typography color={ITypoColor.GREY} typo={ITypo.CAPTION_14}>
+						Déposé le {this.formatDate(history.created_at!)}
+					</Typography>
+				);
+
+			case EDocumentStatus.REFUSED:
+				return (
+					<Typography typo={ITypo.CAPTION_14} color={ITypoColor.RE_HOVER}>
+						Document non conforme
+						{history.refused_reason && history.refused_reason.length > 0 && (
+							<Button
+								variant={EButtonVariant.LINE}
+								className={classes["refused-button"]}
+								onClick={() => this.showRefusedReason(history.refused_reason ?? "")}>
+								Voir le motif de refus
+							</Button>
+						)}
+					</Typography>
+				);
+		}
+		return null;
+	}
+
 	private shortName(name: string): string {
 		const maxLength = 20;
 		if (name.length > maxLength) {
@@ -139,6 +232,13 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 		event.preventDefault();
 	}
 
+	private showRefusedReason(refusedReason: string) {
+		this.setState({
+			refusedReason,
+		});
+		this.onOpenModalShowRefusedReason();
+	}
+
 	private onDragLeave(event: React.DragEvent<HTMLDivElement>) {
 		this.setState({
 			isDragOver: false,
@@ -156,18 +256,6 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 	}
 
 	private async addFile(file: File) {
-		this.setState({
-			files: [
-				...this.state.files,
-				{
-					index: this.index++,
-					file: file,
-				},
-			],
-		});
-
-		if (this.props.onChange) this.props.onChange(this.state.files.map((file) => file.file));
-
 		const formData = new FormData();
 		formData.append("file", file, file.name);
 		const query = JSON.stringify({ document: { uid: this.props.document.uid } });
@@ -175,25 +263,34 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 
 		const newFile = await Files.getInstance().post(formData);
 		const files = this.state.currentFiles ? [...this.state.currentFiles, newFile] : [newFile];
+
 		this.setState({
 			currentFiles: files,
+			files: [
+				...this.state.files,
+				{
+					index: this.index++,
+					file: file,
+					uid: newFile.uid!,
+				},
+			],
 		});
+
+		if (this.props.onChange) this.props.onChange(this.state.files.map((file) => file.file));
 	}
 
 	private async removeFile(e: any) {
 		const image = e.target as HTMLElement;
 		const indexToRemove = image.getAttribute("data-file");
 		if (!indexToRemove) return;
-		// const file = this.state.files.find((file) => file.index === parseInt(indexToRemove));
+		const file = this.state.files.find((file) => file.index === parseInt(indexToRemove));
+		if (!file) return;
 		this.setState({
 			files: this.state.files.filter((file) => file.index !== parseInt(indexToRemove)),
 		});
 
 		if (this.props.onChange) this.props.onChange(this.state.files.map((file) => file.file));
-		// TODO Finir la suppression de fichier
+		await Files.getInstance().delete(file.uid);
-		// const deletedFileUid = this.props.document.files?.find((file) => file.file_path === newFile.file_path)?.uid;
-		// console.log({ deletedFileUid });
-		// await Files.getInstance().delete(file?.uid);
 	}
 
 	private async onFileChange() {
@@ -211,6 +308,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 	}
 
 	private formatDate(date: Date) {
-		return date.toLocaleDateString("fr-FR");
+		const dateToConvert = new Date(date);
+		return dateToConvert.toLocaleDateString("fr-FR");
 	}
 }

src/front/Components/DesignSystem/Form/Elements/InputField/classes.module.scss

@@ -12,6 +12,10 @@
 		font-weight: 400;
 		font-size: 18px;
 		line-height: 22px;
+
+		&:read-only{
+			cursor: not-allowed;
+		}
 	}
 
 	.input {
@@ -74,7 +78,6 @@
 			&::-webkit-outer-spin-button {
 				-webkit-appearance: none;
 				margin: 0;
-				-moz-appearance: textfield;
 			}
 
 			/* For IE 10+ */

src/front/Components/DesignSystem/Form/Elements/InputField/index.tsx

@@ -14,9 +14,9 @@ export type IProps = IBaseFieldProps & {
 export default class InputField extends BaseField<IProps> {
 	static override defaultProps: Partial<IBaseFieldProps> = {
 		...BaseField.defaultProps,
-		required: true
+		required: true,
-	}
+	};
-	
+
 	public override render(): ReactNode {
 		let pattern;
 
@@ -52,8 +52,12 @@ export default class InputField extends BaseField<IProps> {
 								this.props.className ? [classes["textarea"], classes[this.props.className]].join(" ") : classes["textarea"]
 							}
 							value={value}
-						/>
+							readOnly={this.props.readOnly}>
-						<div className={classes["fake-placeholder"]}>{this.props.fakeplaceholder} {!this.props.required && " (Facultatif)"}</div>
+							{value.toString()}
+						</textarea>
+						<div className={classes["fake-placeholder"]}>
+							{this.props.fakeplaceholder} {!this.props.required && " (Facultatif)"}
+						</div>
 					</div>
 				</Typography>
 			);
@@ -74,7 +78,9 @@ export default class InputField extends BaseField<IProps> {
 							}
 							value={value}
 						/>
-						<div className={classes["fake-placeholder"]}>{this.props.fakeplaceholder} {!this.props.required && " (Facultatif)"}</div>
+						<div className={classes["fake-placeholder"]}>
+							{this.props.fakeplaceholder} {!this.props.required && " (Facultatif)"}
+						</div>
 					</div>
 				</Typography>
 			);
@@ -84,7 +90,7 @@ export default class InputField extends BaseField<IProps> {
 	public override componentDidMount() {
 		this.setState({
 			value: this.props.defaultValue ?? "",
-		})
+		});
 	}
 
 	// We filter the props we'll pass to the primitive input as they're useless for it

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

@@ -9,13 +9,14 @@
 	input[type="radio"] {
 		appearance: none;
 		background-color: transparent;
-		width: 16px;
+		width: 15px;
-		height: 16px;
+		height: 15px;
 		border: 1px solid $turquoise-flash;
 		border-radius: 100px;
 		margin-right: 16px;
-		display: grid;
+		display: flex;
-		place-content: center;
+		align-items: center;
+		justify-content: center;
 		margin-top: auto;
 		margin-bottom: auto;
 	}

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

@@ -19,13 +19,18 @@ type IState = {
 const LightTooltip = styled(({ className, ...props }: TooltipProps) => <TooltipMUI {...props} classes={{ popper: className }} />)(
 	({ theme }) => ({
 		[`& .${tooltipClasses.tooltip}`]: {
-			backgroundColor: "var(--turquoise-flash)",
+			backgroundColor: "var(--white)",
-			color: "white",
+			color: "var(--black)",
-			//boxShadow: theme.shadows[1],
+			boxShadow: "0px 4px 24px 0px #00000026",
-			fontSize: 11,
+			fontSize: 14,
+			fontWeight: 400,
+			lineHeight: "22px",
+			fontFamily: "var(--font-primary)",
+			padding: "16px",
+			borderRadius: "0px",
 		},
 		[`& .${tooltipClasses.arrow}`]: {
-			color: "var(--turquoise-flash)",
+			color: "var(--white)",
 		},
 	}),
 );

src/front/Components/DesignSystem/UserFolder/DocumentList/index.tsx

@@ -3,6 +3,7 @@ import classes from "./classes.module.scss";
 import { Document } from "le-coffre-resources/dist/Customer";
 import Typography, { ITypo } from "../../Typography";
 import DocumentNotary from "../../Document/DocumentNotary";
+import classNames from "classnames";
 
 type IProps = {
 	title: string;
@@ -17,13 +18,15 @@ type IProps = {
 		| null;
 	openDeletionModal: (uid: Document["uid"]) => void;
 	folderUid: string;
+	className?: string;
 };
 type IState = {};
 
 export default class DocumentList extends React.Component<IProps, IState> {
 	public override render(): JSX.Element {
+		const classNameToAdd = this.props.className ? classNames(classes["root"], this.props.className) : classes["root"];
 		return (
-			<div className={classes["root"]}>
+			<div className={classNameToAdd}>
 				<div className={classes["title"]}>
 					<Typography typo={ITypo.P_SB_18}>{this.props.title}</Typography>
 				</div>
@@ -32,7 +35,12 @@ export default class DocumentList extends React.Component<IProps, IState> {
 					{this.props.documents &&
 						this.props.documents.map((document) => {
 							return (
-								<DocumentNotary folderUid={this.props.folderUid} document={document} key={document.uid} openDeletionModal={this.props.openDeletionModal} />
+								<DocumentNotary
+									folderUid={this.props.folderUid}
+									document={document}
+									key={document.uid}
+									openDeletionModal={this.props.openDeletionModal}
+								/>
 							);
 						})}
 				</div>

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

@@ -57,29 +57,24 @@
 			gap: 64px;
 			margin-top: 32px;
 
-			@media(max-width: $screen-s){
+			@media (max-width: $screen-s) {
-				grid-template-columns: 1fr;
 				gap: 32px;
-			}
+				display: flex;
-		}
+				flex-direction: column;
-
-		.button-container {
-			display: inline-grid;
-			justify-items: start;
-			gap: 32px;
-			margin-top: 16px;
-
-			.button-desktop{
-				@media(max-width: $screen-s){
-					display: none;
-				}
 			}
 
-			.button-mobile{
+			.documents-asked{
-				display: none;
+				order: -1;
+			}
+
+			.button-container {
+				display: inline-grid;
+				justify-items: start;
+				gap: 32px;
+				margin-top: 16px;
 
 				@media(max-width: $screen-s){
-					display: block;
+					order: -1;
 				}
 			}
 		}

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

@@ -1,9 +1,11 @@
 import ChevronIcon from "@Assets/Icons/chevron.svg";
 import PlusIcon from "@Assets/Icons/plus.svg";
+import Documents from "@Front/Api/LeCoffreApi/SuperAdmin/Documents/Documents";
 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 { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
 import Image from "next/image";
 import Link from "next/link";
 import React from "react";
@@ -14,8 +16,6 @@ import QuantityProgressBar from "../QuantityProgressBar";
 import classes from "./classes.module.scss";
 import DocumentList from "./DocumentList";
 import UserFolderHeader from "./UserFolderHeader";
-import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
-import Documents from "@Front/Api/LeCoffreApi/SuperAdmin/Documents/Documents";
 
 type IProps = {
 	customer: Customer;
@@ -53,7 +53,8 @@ export default class UserFolder extends React.Component<IProps, IState> {
 		const otherDocuments: Document[] | null = this.getValidatedAndPendindDocuments();
 		const redirectPath = Module.getInstance()
 			.get()
-			.modules.pages.Folder.pages.AskDocument.props.path.replace("[folderUid]", this.props.folder.uid ?? "").replace("[customerUid]", this.props.customer.uid ?? "");
+			.modules.pages.Folder.pages.AskDocument.props.path.replace("[folderUid]", this.props.folder.uid ?? "")
+			.replace("[customerUid]", this.props.customer.uid ?? "");
 		return (
 			<div className={classes["root"]} data-opened={this.props.isOpened.toString()}>
 				<Confirm
@@ -68,11 +69,7 @@ export default class UserFolder extends React.Component<IProps, IState> {
 				</Confirm>
 
 				<div className={classes["header"]} onClick={this.changeUserFolder}>
-					<UserFolderHeader
+					<UserFolderHeader customer={this.props.customer} folder={this.props.folder} isArchived={this.props.isArchived} />
-						customer={this.props.customer}
-						folder={this.props.folder}
-						isArchived={this.props.isArchived}
-					/>
 					<Image
 						src={ChevronIcon}
 						alt="chevron open close"
@@ -94,6 +91,7 @@ export default class UserFolder extends React.Component<IProps, IState> {
 								title="Documents demandés"
 								openDeletionModal={this.openDeletionModal}
 								folderUid={this.props.folder.uid!}
+								className={classes["documents-asked"]}
 							/>
 							<DocumentList
 								documents={otherDocuments}
@@ -106,18 +104,19 @@ export default class UserFolder extends React.Component<IProps, IState> {
 								openDeletionModal={this.openDeletionModal}
 								folderUid={this.props.folder.uid!}
 							/>
-						</div>
+							{!this.props.isArchived && (
-						{!this.props.isArchived && (
+								<div className={classes["button-container"]}>
-							<div className={classes["button-container"]}>
+									<Link href={redirectPath}>
-								<Link href={redirectPath}>
+										<Button variant={EButtonVariant.LINE} icon={PlusIcon}>
-									<Button variant={EButtonVariant.LINE} icon={PlusIcon}>
+											Demander un autre document{" "}
-										Demander un autre document{" "}
+										</Button>
+									</Link>
+									<Button disabled={documentsAsked ? false : true}>
+										Envoyer un mail de demande
 									</Button>
-								</Link>
+								</div>
-								{<Button disabled={documentsAsked ? false : true} className={classes["button-desktop"]}>Envoyer un mail de demande de documents</Button>}
+							)}
-								{<Button disabled={documentsAsked ? false : true} className={classes["button-mobile"]}>Envoyer un mail de demande</Button>}
+						</div>
-							</div>
-						)}
 					</div>
 				)}
 			</div>
@@ -128,11 +127,11 @@ export default class UserFolder extends React.Component<IProps, IState> {
 		this.rootRefElement.current?.style.setProperty("--animation-delay", this.props.animationDelay!.toString().concat("ms"));
 	}
 
-	private async deleteAskedDocument(){
+	private async deleteAskedDocument() {
-		try{
+		try {
 			await Documents.getInstance().delete(this.state.selectedDocumentToDelete);
 			window.location.reload();
-		}catch(e){
+		} catch (e) {
 			console.error(e);
 		}
 	}
@@ -140,7 +139,7 @@ export default class UserFolder extends React.Component<IProps, IState> {
 	private calculateDocumentsPercentageProgress(): number {
 		if (!this.props.customer.documents) return 0;
 		const totalDocuments: number = this.props.customer.documents.length;
-		const numberDocumentsRefused: number = this.getDocumentsByStatus(EDocumentStatus.REFUSED)?.length || 0;		
+		const numberDocumentsRefused: number = this.getDocumentsByStatus(EDocumentStatus.REFUSED)?.length || 0;
 		const numberDocumentsAsked: number = this.getDocumentsByStatus(EDocumentStatus.ASKED)?.length || 0;
 		const depositedDocuments: number = totalDocuments - numberDocumentsAsked - numberDocumentsRefused;
 
@@ -172,13 +171,12 @@ export default class UserFolder extends React.Component<IProps, IState> {
 	// 	return this.props.customer.documents.filter((document) => !documentToExclude.includes(document));
 	// }
 
-
+	private changeUserFolder() {
-	private changeUserFolder(){
 		this.props.onChange(this.props.customer.uid!);
 	}
 
 	private openDeletionModal(uid?: string): void {
-		if(!uid) return;
+		if (!uid) return;
 
 		this.setState({
 			isOpenDeletionModal: true,

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

@@ -1,3 +1,4 @@
+import "reflect-metadata";
 import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import DepositDocument from "@Front/Components/DesignSystem/DepositDocument";
 import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
@@ -112,6 +113,8 @@ export default class ClientDashboard extends Base<IProps, IState> {
 			where: { depositor: mockUsers?.uid },
 			include: {
 				files: true,
+				document_history: true,
+				document_type: true,
 			},
 		};
 		const documents: Document[] = await Documents.getInstance().get(query);

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

@@ -10,7 +10,7 @@ import RadioBox from "@Front/Components/DesignSystem/RadioBox";
 import { IOption } from "@Front/Components/DesignSystem/Select";
 import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
 import BackArrow from "@Front/Components/Elements/BackArrow";
-import DefaultNotaryDashboard, { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
+import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
 import Module from "@Front/Config/Module";
 import { ECivility } from "le-coffre-resources/dist/Customer/Contact";
 import { Customer } from "le-coffre-resources/dist/Notary";
@@ -20,17 +20,18 @@ import { NextRouter, useRouter } from "next/router";
 import BasePage from "../../Base";
 import classes from "./classes.module.scss";
 
+
 enum ESelectedOption {
 	EXISTING_CUSTOMER = "existing_customer",
 	NEW_CUSTOMER = "new_customer",
-} 
+}
 type IProps = {};
 type IState = {
-	selectedFolder: IDashBoardFolder | null;
 	selectedOption: ESelectedOption;
 	availableCustomers: Customer[];
 	selectedCustomers: readonly IOption[];
 	existingCustomers: IOption[];
+	isLoaded: boolean;
 };
 
 type IPropsClass = IProps & {
@@ -41,13 +42,12 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
 	constructor(props: IPropsClass) {
 		super(props);
 		this.state = {
-			selectedFolder: null,
 			selectedOption: ESelectedOption.EXISTING_CUSTOMER,
 			availableCustomers: [],
 			selectedCustomers: [],
 			existingCustomers: [],
+			isLoaded: false,
 		};
-		this.onSelectedFolder = this.onSelectedFolder.bind(this);
 		this.onExistingClientSelected = this.onExistingClientSelected.bind(this);
 		this.onNewClientSelected = this.onNewClientSelected.bind(this);
 		this.onMutiSelectChange = this.onMutiSelectChange.bind(this);
@@ -60,65 +60,74 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
 			.get()
 			.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.selectedFolderUid);
 		return (
-			<DefaultNotaryDashboard title={"Ajouter client(s)"} onSelectedFolder={this.onSelectedFolder}>
+			<DefaultNotaryDashboard title={"Ajouter client(s)"}>
 				<div className={classes["root"]}>
 					<div className={classes["back-arrow"]}>
 						<BackArrow url={backwardPath} />
 					</div>
 					<Typography typo={ITypo.H1Bis}>Associer un ou plusieurs client(s)</Typography>
-					<div className={classes["radiobox-container"]}>
+					{this.state.isLoaded && (
-						{this.state.availableCustomers.length !== 0 && (
+						<>
-							<RadioBox
+							<div className={classes["radiobox-container"]}>
-								name="client"
+								{this.state.availableCustomers.length !== 0 && (
-								onChange={this.onExistingClientSelected}
+									<RadioBox
-								checked={this.state.selectedOption === "existing_customer"}
+										name="client"
-								value={"existing client"}>
+										onChange={this.onExistingClientSelected}
-								<Typography typo={ITypo.P_ERR_18}>Client existant</Typography>
+										checked={this.state.selectedOption === "existing_customer"}
-							</RadioBox>
+										value={"existing client"}>
-						)}
+										<Typography typo={ITypo.P_ERR_18}>Client existant</Typography>
+									</RadioBox>
+								)}
 
-						<RadioBox
+								<RadioBox
-							name="client"
+									name="client"
-							onChange={this.onNewClientSelected}
+									onChange={this.onNewClientSelected}
-							checked={this.state.selectedOption === "new_customer"}
+									checked={this.state.selectedOption === "new_customer"}
-							value={"new client"}>
+									value={"new client"}>
-							<Typography typo={ITypo.P_ERR_18}>Nouveau client</Typography>
+									<Typography typo={ITypo.P_ERR_18}>Nouveau client</Typography>
-						</RadioBox>
+								</RadioBox>
-					</div>
-
-					<Form className={classes["form"]} onSubmit={this.onFormSubmit}>
-						{this.state.selectedOption === "existing_customer" && (
-							<div className={classes["existing-client"]}>
-								<MultiSelect
-									options={selectOptions}
-									placeholder="Clients"
-									onChange={this.onMutiSelectChange}
-									defaultValue={this.state.selectedCustomers}
-								/>
-								<div className={classes["button-container"]}>
-									<Link href={backwardPath} className={classes["cancel-button"]}>
-										<Button variant={EButtonVariant.GHOST}>Annuler</Button>
-									</Link>
-									<Button type="submit">Associer au dossier</Button>
-								</div>
 							</div>
-						)}
 
-						{this.state.selectedOption === "new_customer" && (
+							<Form className={classes["form"]} onSubmit={this.onFormSubmit}>
-							<div className={classes["new-client"]}>
+								{this.state.selectedOption === "existing_customer" && (
-								<InputField name="last_name" fakeplaceholder="Nom" />
+									<div className={classes["existing-client"]}>
-								<InputField name="first_name" fakeplaceholder="Prénom" />
+										<MultiSelect
-								<InputField name="email" fakeplaceholder="E-mail" isEmail />
+											options={selectOptions}
-								<InputField name="cell_phone_number" fakeplaceholder="Numéro de téléphone" numbersOnly maxLength={10} />
+											placeholder="Clients"
-								<div className={classes["button-container"]}>
+											onChange={this.onMutiSelectChange}
-									<Link href={backwardPath} className={classes["cancel-button"]}>
+											defaultValue={this.state.selectedCustomers}
-										<Button variant={EButtonVariant.GHOST}>Annuler</Button>
+										/>
-									</Link>
+										<div className={classes["button-container"]}>
-									<Button type="submit">Associer au dossier</Button>
+											<Link href={backwardPath} className={classes["cancel-button"]}>
-								</div>
+												<Button variant={EButtonVariant.GHOST}>Annuler</Button>
-							</div>
+											</Link>
-						)}
+											<Button type="submit">Associer au dossier</Button>
-					</Form>
+										</div>
+									</div>
+								)}
+
+								{this.state.selectedOption === "new_customer" && (
+									<div className={classes["new-client"]}>
+										<InputField name="last_name" fakeplaceholder="Nom" />
+										<InputField name="first_name" fakeplaceholder="Prénom" />
+										<InputField name="email" fakeplaceholder="E-mail" isEmail />
+										<InputField
+											name="cell_phone_number"
+											fakeplaceholder="Numéro de téléphone"
+											numbersOnly
+											maxLength={10}
+										/>
+										<div className={classes["button-container"]}>
+											<Link href={backwardPath} className={classes["cancel-button"]}>
+												<Button variant={EButtonVariant.GHOST}>Annuler</Button>
+											</Link>
+											<Button type="submit">Associer au dossier</Button>
+										</div>
+									</div>
+								)}
+							</Form>
+						</>
+					)}
 				</div>
 			</DefaultNotaryDashboard>
 		);
@@ -135,13 +144,12 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
 			if (index !== -1) availableCustomers.splice(index, 1);
 		});
 
+		let selectedOption = ESelectedOption.EXISTING_CUSTOMER;
 		if (availableCustomers.length === 0) {
-			this.setState({
+			selectedOption = ESelectedOption.NEW_CUSTOMER;
-				selectedOption: ESelectedOption.NEW_CUSTOMER,
-			});
 		}
 
-		this.setState({ availableCustomers, existingCustomers });
+		this.setState({ availableCustomers, existingCustomers, isLoaded: true, selectedOption });
 	}
 
 	private async getFolderPreSelectedCustomers(folderUid: string): Promise<IOption[] | undefined> {
@@ -189,10 +197,6 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
 		this.setState({ selectedCustomers });
 	}
 
-	private onSelectedFolder(folder: IDashBoardFolder): void {
-		this.setState({ selectedFolder: folder });
-	}
-
 	private onExistingClientSelected(): void {
 		this.setState({ selectedOption: ESelectedOption.EXISTING_CUSTOMER });
 	}