format all front repo

.vscode/settings.json

@@ -31,5 +31,8 @@
     "rust-client.rustupPath": "${env:HOME}/elrondsdk/vendor-rust/bin/rustup",
     "rust-client.rlsPath": "${env:HOME}/elrondsdk/vendor-rust/bin/rls",
     "rust-client.disableRustup": true,
-    "rust-client.autoStartRls": false
+    "rust-client.autoStartRls": false,
+    "[typescriptreact]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    }
 }

package.json

@@ -1,35 +1,35 @@
 {
-  "name": "lecoffre-front",
+	"name": "lecoffre-front",
-  "version": "0.1.0",
+	"version": "0.1.0",
-  "private": true,
+	"private": true,
-  "scripts": {
+	"scripts": {
-    "dev": "next dev",
+		"dev": "next dev",
-    "build": "next build",
+		"build": "next build",
-    "start": "next start",
+		"start": "next start",
-    "lint": "next lint"
+		"lint": "next lint",
-  },
+		"format": "prettier --write src"
-  "dependencies": {
+	},
-    "@emotion/react": "^11.10.6",
+	"dependencies": {
-    "@emotion/styled": "^11.10.6",
+		"@emotion/react": "^11.10.6",
-    "@mui/material": "^5.11.13",
+		"@emotion/styled": "^11.10.6",
-    "@types/node": "18.15.1",
+		"@mui/material": "^5.11.13",
-    "@types/react": "18.0.28",
+		"@types/node": "18.15.1",
-    "@types/react-dom": "18.0.11",
+		"@types/react": "18.0.28",
-    "class-validator": "^0.14.0",
+		"@types/react-dom": "18.0.11",
-    "classnames": "^2.3.2",
+		"class-validator": "^0.14.0",
-    "dotenv": "^16.0.3",
+		"classnames": "^2.3.2",
-    "eslint": "8.36.0",
+		"dotenv": "^16.0.3",
-    "eslint-config-next": "13.2.4",
+		"eslint": "8.36.0",
-    "le-coffre-resources": "git@github.com:smart-chain-fr/leCoffre-resources.git#v2.18",
+		"eslint-config-next": "13.2.4",
-    "next": "13.2.4",
+		"le-coffre-resources": "git@github.com:smart-chain-fr/leCoffre-resources.git#v2.18",
-    "react": "18.2.0",
+		"next": "13.2.4",
-    "react-dom": "18.2.0",
+		"prettier": "^2.8.7",
-    "react-select": "^5.7.2",
+		"react": "18.2.0",
-    "reflect-metadata": "^0.1.13",
+		"react-dom": "18.2.0",
-    "sass": "^1.59.2",
+		"react-select": "^5.7.2",
-    "typedi": "^0.10.0",
+		"reflect-metadata": "^0.1.13",
-    "typescript": "4.9.5"
+		"sass": "^1.59.2",
-  }
+		"typedi": "^0.10.0",
+		"typescript": "4.9.5"
+	}
 }
-
-

src/front/Api/Auth/IdNot/index.ts

@@ -4,28 +4,26 @@ import { FrontendVariables } from "@Front/Config/VariablesFront";
 
 @Service()
 export default class Auth extends BaseApiService {
-  private static instance: Auth;
+	private static instance: Auth;
 
-  private constructor() {
+	private constructor() {
-    super();
+		super();
-  }
+	}
 
-  public static getInstance(): Auth {
+	public static getInstance(): Auth {
-    return (this.instance = this.instance ?? new this());
+		return (this.instance = this.instance ?? new this());
-  }
+	}
 
-  public async getIdnotJwt(autorizationCode: string | string[]): Promise<any> {
+	public async getIdnotJwt(autorizationCode: string | string[]): Promise<any> {
-    const variables = FrontendVariables.getInstance();
+		const variables = FrontendVariables.getInstance();
-    const baseBackUrl =
+		const baseBackUrl =
-      variables.BACK_API_PROTOCOL +
+			variables.BACK_API_PROTOCOL + variables.BACK_API_HOST + (variables.BACK_API_PORT ? ":" + variables.BACK_API_PORT : "");
-      variables.BACK_API_HOST +
+		const url = new URL(`${baseBackUrl}/api/v1/idnot-user/${autorizationCode}`);
-      (variables.BACK_API_PORT ? ":" + variables.BACK_API_PORT : "");
+		try {
-    const url = new URL(`${baseBackUrl}/api/v1/idnot-user/${autorizationCode}`);
+			return await this.postRequest<any>(url);
-    try {
+		} catch (err) {
-      return await this.postRequest<any>(url);
+			this.onError(err);
-    } catch (err) {
+			return Promise.reject(err);
-      this.onError(err);
+		}
-      return Promise.reject(err);
+	}
-    }
-  }
 }

src/front/Api/BaseApiService.ts

@@ -1,145 +1,128 @@
 import { FrontendVariables } from "@Front/Config/VariablesFront";
 
 export enum ContentType {
-  JSON = "application/json",
+	JSON = "application/json",
-  FORM_DATA = "multipart/form-data;",
+	FORM_DATA = "multipart/form-data;",
 }
 export default abstract class BaseApiService {
-  private static baseUrl: string;
+	private static baseUrl: string;
-  protected readonly variables = FrontendVariables.getInstance();
+	protected readonly variables = FrontendVariables.getInstance();
 
-  protected constructor() {
+	protected constructor() {
-    BaseApiService.baseUrl ??=
+		BaseApiService.baseUrl ??=
-      FrontendVariables.getInstance().BACK_API_PROTOCOL +
+			FrontendVariables.getInstance().BACK_API_PROTOCOL +
-      FrontendVariables.getInstance().BACK_API_HOST +
+			FrontendVariables.getInstance().BACK_API_HOST +
-      (FrontendVariables.getInstance().BACK_API_PORT
+			(FrontendVariables.getInstance().BACK_API_PORT ? ":" + FrontendVariables.getInstance().BACK_API_PORT : "") +
-        ? ":" + FrontendVariables.getInstance().BACK_API_PORT
+			FrontendVariables.getInstance().BACK_API_ROOT_URL +
-        : "") +
+			FrontendVariables.getInstance().BACK_API_VERSION;
-      FrontendVariables.getInstance().BACK_API_ROOT_URL +
+	}
-      FrontendVariables.getInstance().BACK_API_VERSION;
-  }
 
-  protected getBaseUrl() {
+	protected getBaseUrl() {
-    return BaseApiService.baseUrl;
+		return BaseApiService.baseUrl;
-  }
+	}
 
-  protected buildHeaders(contentType: ContentType) {
+	protected buildHeaders(contentType: ContentType) {
-    const headers = new Headers();
+		const headers = new Headers();
 
-    if (contentType === ContentType.JSON) {
+		if (contentType === ContentType.JSON) {
-      headers.set("Content-Type", contentType);
+			headers.set("Content-Type", contentType);
-    }
+		}
-    return headers;
+		return headers;
-  }
+	}
 
-  protected buildBody(body: { [key: string]: unknown }): string {
+	protected buildBody(body: { [key: string]: unknown }): string {
-    return JSON.stringify(body);
+		return JSON.stringify(body);
-  }
+	}
 
-  protected async getRequest<T>(url: URL) {
+	protected async getRequest<T>(url: URL) {
-    const request = async () =>
+		const request = async () =>
-      await fetch(url, {
+			await fetch(url, {
-        method: "GET",
+				method: "GET",
-        headers: this.buildHeaders(ContentType.JSON),
+				headers: this.buildHeaders(ContentType.JSON),
-      });
+			});
-    return this.sendRequest<T>(request);
+		return this.sendRequest<T>(request);
-  }
+	}
 
-  protected async postRequest<T>(
+	protected async postRequest<T>(url: URL, body: { [key: string]: unknown } = {}) {
-    url: URL,
+		return this.sendRequest<T>(
-    body: { [key: string]: unknown } = {}
+			async () =>
-  ) {
+				await fetch(url, {
-    return this.sendRequest<T>(
+					method: "POST",
-      async () =>
+					headers: this.buildHeaders(ContentType.JSON),
-        await fetch(url, {
+					body: this.buildBody(body),
-          method: "POST",
+				}),
-          headers: this.buildHeaders(ContentType.JSON),
+		);
-          body: this.buildBody(body),
+	}
-        })
-    );
-  }
 
-  protected async putRequest<T>(
+	protected async putRequest<T>(url: URL, body: { [key: string]: unknown } = {}) {
-    url: URL,
+		const request = async () =>
-    body: { [key: string]: unknown } = {}
+			await fetch(url, {
-  ) {
+				method: "PUT",
-    const request = async () =>
+				headers: this.buildHeaders(ContentType.JSON),
-      await fetch(url, {
+				body: this.buildBody(body),
-        method: "PUT",
+			});
-        headers: this.buildHeaders(ContentType.JSON),
-        body: this.buildBody(body),
-      });
 
-    return this.sendRequest<T>(request);
+		return this.sendRequest<T>(request);
-  }
+	}
 
-  protected async patchRequest<T>(
+	protected async patchRequest<T>(url: URL, body: { [key: string]: unknown } = {}) {
-    url: URL,
+		const request = async () =>
-    body: { [key: string]: unknown } = {}
+			await fetch(url, {
-  ) {
+				method: "PATCH",
-    const request = async () =>
+				headers: this.buildHeaders(ContentType.JSON),
-      await fetch(url, {
+				body: this.buildBody(body),
-        method: "PATCH",
+			});
-        headers: this.buildHeaders(ContentType.JSON),
-        body: this.buildBody(body),
-      });
 
-    return this.sendRequest<T>(request);
+		return this.sendRequest<T>(request);
-  }
+	}
 
-  protected async deleteRequest<T>(
+	protected async deleteRequest<T>(url: URL, body: { [key: string]: unknown } = {}) {
-    url: URL,
+		const request = async () =>
-    body: { [key: string]: unknown } = {}
+			await fetch(url, {
-  ) {
+				method: "DELETE",
-    const request = async () =>
+				headers: this.buildHeaders(ContentType.JSON),
-      await fetch(url, {
+				body: this.buildBody(body),
-        method: "DELETE",
+			});
-        headers: this.buildHeaders(ContentType.JSON),
-        body: this.buildBody(body),
-      });
 
-    return this.sendRequest<T>(request);
+		return this.sendRequest<T>(request);
-  }
+	}
 
-  protected async putFormDataRequest<T>(url: URL, body: FormData) {
+	protected async putFormDataRequest<T>(url: URL, body: FormData) {
-    const request = async () =>
+		const request = async () =>
-      await fetch(url, {
+			await fetch(url, {
-        method: "PUT",
+				method: "PUT",
-        headers: this.buildHeaders(ContentType.FORM_DATA),
+				headers: this.buildHeaders(ContentType.FORM_DATA),
-        body,
+				body,
-      });
+			});
 
-    return this.sendRequest<T>(request);
+		return this.sendRequest<T>(request);
-  }
+	}
 
-  private async sendRequest<T>(request: () => Promise<Response>): Promise<T> {
+	private async sendRequest<T>(request: () => Promise<Response>): Promise<T> {
-    const response = await request();
+		const response = await request();
-    return this.processResponse<T>(response, request);
+		return this.processResponse<T>(response, request);
-  }
+	}
 
-  protected async processResponse<T>(
+	protected async processResponse<T>(response: Response, request: () => Promise<Response>): Promise<T> {
-    response: Response,
+		let responseJson: any | null;
-    request: () => Promise<Response>
+		try {
-  ): Promise<T> {
+			responseJson = await response.json();
-    let responseJson: any | null;
+		} catch (err: unknown) {
-    try {
+			responseJson = null;
-      responseJson = await response.json();
+		}
-    } catch (err: unknown) {
-      responseJson = null;
-    }
 
-    if (!response.ok) {
+		if (!response.ok) {
-      return Promise.reject(response);
+			return Promise.reject(response);
-    }
+		}
 
-    return responseJson as T;
+		return responseJson as T;
-  }
+	}
 
-  protected onError(error: unknown) {
+	protected onError(error: unknown) {
-    console.error(error);
+		console.error(error);
-  }
+	}
 }
 
 export interface IResponse {
-  http_status: number;
+	http_status: number;
 }

src/front/Api/LeCoffreApi/Notary/Users/Users.ts

@@ -4,64 +4,63 @@ import User from "le-coffre-resources/dist/Notary";
 
 @Service()
 export default class Users extends BaseNotary {
-  private static instance: Users;
+	private static instance: Users;
-  private readonly baseURl = this.namespaceUrl.concat("/Users");
+	private readonly baseURl = this.namespaceUrl.concat("/Users");
 
-  private constructor() {
+	private constructor() {
-    super();
+		super();
-  }
+	}
 
-  public static getInstance() {
+	public static getInstance() {
-    if (!this.instance) {
+		if (!this.instance) {
-      return new Users();
+			return new Users();
-    } else {
+		} else {
-      return this.instance;
+			return this.instance;
-    }
+		}
-  }
+	}
 
-  public async get(): Promise<User[]> {
+	public async get(): Promise<User[]> {
-    const url = new URL(this.baseURl);
+		const url = new URL(this.baseURl);
-    try {
+		try {
-      return await this.getRequest<User[]>(url);
+			return await this.getRequest<User[]>(url);
-    } catch (err) {
+		} catch (err) {
-      this.onError(err);
+			this.onError(err);
-      return Promise.reject(err);
+			return Promise.reject(err);
-    }
+		}
-  }
+	}
 
-  public async getAuthorizationCode(): Promise<any> {
+	public async getAuthorizationCode(): Promise<any> {
-    try {
+		try {
-      const url =
+			const url = new URL(`https://qual-connexion.idnot.fr/IdPOAuth2/authorize/idnot_idp_v1?
-        new URL(`https://qual-connexion.idnot.fr/IdPOAuth2/authorize/idnot_idp_v1?
       client_id=4501646203F3EF67
       &redirect_uri=https://app.stg.lecoffre.smart-chain.fr/
       &scope=openid,profile,offline_access
       &response_type=code`);
-      //   const url = new URL("https://jsonplaceholder.typicode.com/todos/1");
+			//   const url = new URL("https://jsonplaceholder.typicode.com/todos/1");
-      await this.getRequest(url);
+			await this.getRequest(url);
-    } catch (err) {
+		} catch (err) {
-      this.onError(err);
+			this.onError(err);
-      return Promise.reject(err);
+			return Promise.reject(err);
-    }
+		}
-  }
+	}
 
-  public async getByUid(uid: string): Promise<User> {
+	public async getByUid(uid: string): Promise<User> {
-    const url = new URL(this.baseURl.concat("/").concat(uid));
+		const url = new URL(this.baseURl.concat("/").concat(uid));
-    try {
+		try {
-      return await this.getRequest<User>(url);
+			return await this.getRequest<User>(url);
-    } catch (err) {
+		} catch (err) {
-      this.onError(err);
+			this.onError(err);
-      return Promise.reject(err);
+			return Promise.reject(err);
-    }
+		}
-  }
+	}
 
-  // public async post(params: User): Promise<User> {
+	// public async post(params: User): Promise<User> {
-  // 	const url = new URL(this.baseURl);
+	// 	const url = new URL(this.baseURl);
-  // 	try {
+	// 	try {
-  // 		return await this.postRequest<User>(url, params);
+	// 		return await this.postRequest<User>(url, params);
-  // 	} catch (err) {
+	// 	} catch (err) {
-  // 		this.onError(err);
+	// 		this.onError(err);
-  // 		return Promise.reject(err);
+	// 		return Promise.reject(err);
-  // 	}
+	// 	}
-  // }
+	// }
 }

src/front/Api/LeCoffreApi/SuperAdmin/Users/Users.ts

@@ -4,38 +4,38 @@ import BaseSuperAdmin from "../BaseSuperAdmin";
 
 @Service()
 export default class Users extends BaseSuperAdmin {
-  private static instance: Users;
+	private static instance: Users;
-  private readonly baseURl = this.namespaceUrl.concat("/Users");
+	private readonly baseURl = this.namespaceUrl.concat("/Users");
 
-  private constructor() {
+	private constructor() {
-    super();
+		super();
-  }
+	}
 
-  public static getInstance() {
+	public static getInstance() {
-    if (!this.instance) {
+		if (!this.instance) {
-      return new this();
+			return new this();
-    } else {
+		} else {
-      return this.instance;
+			return this.instance;
-    }
+		}
-  }
+	}
 
-  public async get(): Promise<User[]> {
+	public async get(): Promise<User[]> {
-    const url = new URL(this.baseURl);
+		const url = new URL(this.baseURl);
-    try {
+		try {
-      return await this.getRequest<User[]>(url);
+			return await this.getRequest<User[]>(url);
-    } catch (err) {
+		} catch (err) {
-      this.onError(err);
+			this.onError(err);
-      return Promise.reject(err);
+			return Promise.reject(err);
-    }
+		}
-  }
+	}
 
-  public async getByUid(uid: string): Promise<User> {
+	public async getByUid(uid: string): Promise<User> {
-    const url = new URL(this.baseURl.concat("/").concat(uid));
+		const url = new URL(this.baseURl.concat("/").concat(uid));
-    try {
+		try {
-      return await this.getRequest<User>(url);
+			return await this.getRequest<User>(url);
-    } catch (err) {
+		} catch (err) {
-      this.onError(err);
+			this.onError(err);
-      return Promise.reject(err);
+			return Promise.reject(err);
-    }
+		}
-  }
+	}
 }

src/front/Assets/docs/content.md

@@ -7,9 +7,7 @@ Then, add the tezoslink.net RPC endpoint to your prefered Tezos JS library.
 > i.e with [Sotez](https://github.com/AndrewKishino/sotez) :
 >
 > ```js
-> const sotez = new Sotez(
+> const sotez = new Sotez("https://<NETWORK>.tezoslink.net/v1/<YOUR_PROJECT_ID>");
->   "https://<NETWORK>.tezoslink.net/v1/<YOUR_PROJECT_ID>"
-> );
 > ```
 
 ## Networks
@@ -42,14 +40,14 @@ All requests of type `/chains/main/blocks(.*?)` are accepted.
 
 > Example of valid paths:
 >
-> - `/chains/main/blocks/head/context/contracts/<ADDRESS>/balance`
+> -   `/chains/main/blocks/head/context/contracts/<ADDRESS>/balance`
-> - `/chains/main/blocks/head/context/contracts/<ADDRESS>/delegate`
+> -   `/chains/main/blocks/head/context/contracts/<ADDRESS>/delegate`
-> - `/chains/main/blocks/head/context/contracts/<ADDRESS>/manager_key`
+> -   `/chains/main/blocks/head/context/contracts/<ADDRESS>/manager_key`
-> - `/chains/main/blocks/head/context/contracts/<ADDRESS>/counter`
+> -   `/chains/main/blocks/head/context/contracts/<ADDRESS>/counter`
-> - `/chains/main/blocks/head/context/delegates/<ADDRESS>`
+> -   `/chains/main/blocks/head/context/delegates/<ADDRESS>`
-> - `/chains/main/blocks/head/header`
+> -   `/chains/main/blocks/head/header`
-> - `/chains/main/blocks/head/votes/proposals`
+> -   `/chains/main/blocks/head/votes/proposals`
-> - `/chains/main/blocks/head/votes/current_quorum`
+> -   `/chains/main/blocks/head/votes/current_quorum`
 
 [More about the Tezos `JSON/RPC` endpoints](https://tezos.gitlab.io/api/rpc.html)
 
@@ -57,13 +55,13 @@ All requests of type `/chains/main/blocks(.*?)` are accepted.
 
 Tezos has three types of nodes:
 
-- Full mode (default mode)
+-   Full mode (default mode)
-- **Rolling mode**
+-   **Rolling mode**
-- **Archive mode**
+-   **Archive mode**
 
 We use two types of mode:
 
-- **Archive** to store the whole blockchain. Archive is the heaviest mode as it keeps the whole chain data to be able to query any information stored on the chain since the genesis. It is particularly suitable for indexers or block explorer, that is why we use archive nodes.
+-   **Archive** to store the whole blockchain. Archive is the heaviest mode as it keeps the whole chain data to be able to query any information stored on the chain since the genesis. It is particularly suitable for indexers or block explorer, that is why we use archive nodes.
-- **Rolling** to store last blocks (and scale them faster)
+-   **Rolling** to store last blocks (and scale them faster)
 
 > [More about history modes](https://blog.nomadic-labs.com/introducing-snapshots-and-history-modes-for-the-tezos-node.html)

src/front/Assets/docs/menu.md

@@ -1,6 +1,6 @@
-- [Usage](##usage)
+-   [Usage](##usage)
-- [Networks](#networks)
+-   [Networks](#networks)
-- [Make Requests](#make-requests)
+-   [Make Requests](#make-requests)
-- [Security](##security)
+-   [Security](##security)
-- [RPC Endpoints](#rpc-endpoints)
+-   [RPC Endpoints](#rpc-endpoints)
-- [Nodes](#nodes)
+-   [Nodes](#nodes)

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

@@ -109,4 +109,4 @@
 		line-height: 22px;
 		text-decoration-line: underline;
 	}
-}
+}

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

@@ -31,7 +31,7 @@ export default function Button(props: IProps) {
 		onClick,
 		children,
 		icon,
-		iconStyle
+		iconStyle,
 	} = props;
 
 	const attributes = { ...props, variant, disabled, type, isloading, fullwidth };

src/front/Components/DesignSystem/Document/DocumentNotary/classes.module.scss

@@ -1,25 +1,23 @@
 @import "@Themes/constants.scss";
 
 .root {
-    border: 1px solid $grey-medium;
+	border: 1px solid $grey-medium;
-    padding: 16px;
+	padding: 16px;
-    display: flex;
+	display: flex;
-    justify-content: space-between;
+	justify-content: space-between;
-    align-items: center;
+	align-items: center;
-    &.PENDING{
+	&.PENDING {
-        border-color: $orange-soft;
+		border-color: $orange-soft;
-    }
+	}
-    &.VALIDATED{
+	&.VALIDATED {
-        border-color: $green-soft;
+		border-color: $green-soft;
-    }
+	}
-    .valid-radius{
+	.valid-radius {
-        background-color: $green-flash;
+		background-color: $green-flash;
-        padding: 6px;
+		padding: 6px;
-        border-radius: 20px;
+		border-radius: 20px;
-    }
+	}
-    .trash{
+	.trash {
-        cursor: pointer;
+		cursor: pointer;
-    }
+	}
-
 }
-

src/front/Components/DesignSystem/Document/DocumentNotary/index.tsx

@@ -13,8 +13,7 @@ type IProps = {
 		uid: Document["uid"];
 		document_type: Document["document_type"];
 		document_status: Document["document_status"];
-
+	};
-	}
 	openDeletionModal?: (uid: Document["uid"]) => void;
 };
 type IState = {};
@@ -25,30 +24,34 @@ export default class DocumentNotary extends React.Component<IProps, IState> {
 		this.onOpenDeletionModal = this.onOpenDeletionModal.bind(this);
 	}
 	public override render(): JSX.Element {
-		return <div className={classNames(classes["root"], classes[this.props.document.document_status])}>
+		return (
-			<div>
+			<div className={classNames(classes["root"], classes[this.props.document.document_status])}>
-				<Typography typo={ITypo.P_SB_16}>{this.props.document?.document_type?.name}</Typography>
+				<div>
-				<Typography typo={ITypo.CAPTION_14}>Aucun document déposé</Typography>
+					<Typography typo={ITypo.P_SB_16}>{this.props.document?.document_type?.name}</Typography>
+					<Typography typo={ITypo.CAPTION_14}>Aucun document déposé</Typography>
+				</div>
+				{this.renderIcon()}
 			</div>
-			{this.renderIcon()}
+		);
-		</div>;
 	}
 
 	private renderIcon(): JSX.Element {
 		switch (this.props.document.document_status) {
 			case "VALIDATED":
-				return <div className={classes["valid-radius"]}>
+				return (
-					<Image src={ValidIcon} alt="valid icon" />
+					<div className={classes["valid-radius"]}>
-				</div>
+						<Image src={ValidIcon} alt="valid icon" />
+					</div>
+				);
 			case "PENDING":
-				return <WarningBadge />
+				return <WarningBadge />;
 			default:
-				return <Image src={TrashIcon} alt="trash icon" className={classes["trash"]} onClick={this.onOpenDeletionModal}/>;
+				return <Image src={TrashIcon} alt="trash icon" className={classes["trash"]} onClick={this.onOpenDeletionModal} />;
 		}
 	}
 
 	private onOpenDeletionModal(): void {
-		if(!this.props.openDeletionModal) return;
+		if (!this.props.openDeletionModal) return;
 		this.props.openDeletionModal(this.props.document.uid);
 	}
 }

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

@@ -1,31 +1,29 @@
 @import "@Themes/constants.scss";
 
 .root {
-    background-color: $grey-soft;
+	background-color: $grey-soft;
-    padding: 24px;
+	padding: 24px;
-    width: 100%;
+	width: 100%;
-    display: flex;
+	display: flex;
-    align-items: center;
+	align-items: center;
-    justify-content: space-between;
+	justify-content: space-between;
 
-    .content {
+	.content {
-        display:grid;
+		display: grid;
-        grid-template-columns: 1fr 1fr 1fr 1fr;
+		grid-template-columns: 1fr 1fr 1fr 1fr;
-        gap: 32px;
+		gap: 32px;
-        @media (max-width: $screen-l) {
+		@media (max-width: $screen-l) {
-            grid-template-columns: 1fr 1fr;
+			grid-template-columns: 1fr 1fr;
+		}
+		@media (max-width: $screen-s) {
+			grid-template-columns: 1fr;
+		}
 
-        }
+		&.isSignleDescription {
-        @media (max-width: $screen-s) {
+			grid-template-columns: 1fr;
-            grid-template-columns: 1fr;
+		}
-
+	}
-        }
+	.edit-icon {
-
+		margin-left: 48px;
-        &.isSignleDescription {
+	}
-            grid-template-columns: 1fr;
+}
-        }
-    }
-    .edit-icon{
-        margin-left: 48px;
-    }
-}

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

@@ -14,36 +14,38 @@ type IProps = {
 export default function FolderBoxInformation(props: IProps) {
 	const { isDescription = false } = props;
 
-	return <div className={classNames(classes["root"], isDescription && classes["isSignleDescription"])}>
+	return (
-		<div className={classes["content"]}>
+		<div className={classNames(classes["root"], isDescription && classes["isSignleDescription"])}>
-			{isDescription ?
+			<div className={classes["content"]}>
-				<div className={classes["text-container"]}>
+				{isDescription ? (
-					<Typography typo={ITypo.NAV_INPUT_16}>Note dossier :</Typography>
-					<Typography typo={ITypo.P_18}>{props.folder.description ?? "..."}</Typography>
-				</div>
-				:
-				<>
 					<div className={classes["text-container"]}>
-						<Typography typo={ITypo.NAV_INPUT_16}>Intitulé du dossier</Typography>
+						<Typography typo={ITypo.NAV_INPUT_16}>Note dossier :</Typography>
-						<Typography typo={ITypo.P_18}>{props.folder.name ?? "..."}</Typography>
+						<Typography typo={ITypo.P_18}>{props.folder.description ?? "..."}</Typography>
 					</div>
-					<div className={classes["text-container"]}>
+				) : (
-						<Typography typo={ITypo.NAV_INPUT_16}>Numéro de dossier</Typography>
+					<>
-						<Typography typo={ITypo.P_18}>{props.folder.folder_number ?? "..."}</Typography>
+						<div className={classes["text-container"]}>
-					</div>
+							<Typography typo={ITypo.NAV_INPUT_16}>Intitulé du dossier</Typography>
-					<div className={classes["text-container"]}>
+							<Typography typo={ITypo.P_18}>{props.folder.name ?? "..."}</Typography>
-						<Typography typo={ITypo.NAV_INPUT_16}>Type d’acte</Typography>
+						</div>
-						<Typography typo={ITypo.P_18}>{props.folder.deed.deed_type.name ?? "..."}</Typography>
+						<div className={classes["text-container"]}>
-					</div>
+							<Typography typo={ITypo.NAV_INPUT_16}>Numéro de dossier</Typography>
-					<div className={classes["text-container"]}>
+							<Typography typo={ITypo.P_18}>{props.folder.folder_number ?? "..."}</Typography>
-						<Typography typo={ITypo.NAV_INPUT_16}>Ouverture du dossier</Typography>
+						</div>
-						<Typography typo={ITypo.P_18}>{formatDate(props.folder.created_at)}</Typography>
+						<div className={classes["text-container"]}>
-					</div>
+							<Typography typo={ITypo.NAV_INPUT_16}>Type d’acte</Typography>
-				</>
+							<Typography typo={ITypo.P_18}>{props.folder.deed.deed_type.name ?? "..."}</Typography>
-			}
+						</div>
+						<div className={classes["text-container"]}>
+							<Typography typo={ITypo.NAV_INPUT_16}>Ouverture du dossier</Typography>
+							<Typography typo={ITypo.P_18}>{formatDate(props.folder.created_at)}</Typography>
+						</div>
+					</>
+				)}
+			</div>
+			<Image src={PenICon} alt="edit informations" className={classes["edit-icon"]} />
 		</div>
-		<Image src={PenICon} alt="edit informations" className={classes["edit-icon"]} />
+	);
-	</div>;
 }
 
 function formatDate(date: Date | null): string {
@@ -53,4 +55,4 @@ function formatDate(date: Date | null): string {
 		month: "long",
 		day: "numeric",
 	});
-}
+}

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

@@ -1,25 +1,25 @@
 @import "@Themes/constants.scss";
 
 .root {
-    display: inline-flex;
+	display: inline-flex;
-    justify-content: space-between;
+	justify-content: space-between;
-    align-items: center;
+	align-items: center;
-    width: 100%;
+	width: 100%;
-    padding: 24px;
+	padding: 24px;
-    border: 1px solid $grey-medium;
+	border: 1px solid $grey-medium;
-    cursor: pointer;
+	cursor: pointer;
 
-    &:hover{
+	&:hover {
-        background-color: $grey-medium;
+		background-color: $grey-medium;
-    }
+	}
 
-    .left-side {
+	.left-side {
-        display: inline-flex;
+		display: inline-flex;
-        justify-content: space-between;
+		justify-content: space-between;
-        align-items: center;
+		align-items: center;
 
-        .warning{
+		.warning {
-            margin-left: 32px;
+			margin-left: 32px;
-        }
+		}
-    }
+	}
-}
+}

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

@@ -9,7 +9,7 @@ import { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotar
 type IProps = {
 	folder: IDashBoardFolder;
 	onSelectedFolder?: (folder: IDashBoardFolder) => void;
-}
+};
 type IState = {};
 
 export default class FolderContainer extends React.Component<IProps, IState> {
@@ -19,13 +19,19 @@ export default class FolderContainer extends React.Component<IProps, IState> {
 	}
 
 	public override render(): JSX.Element {
-		return <div className={classes["root"]} onClick={this.onSelectedFolder}>
+		return (
-			<div className={classes["left-side"]}>
+			<div className={classes["root"]} onClick={this.onSelectedFolder}>
-				<Typography typo={ITypo.P_16}>{"Dossier ".concat(this.props.folder.folder_number)}</Typography>
+				<div className={classes["left-side"]}>
-				{this.countPendingDocuments() > 0 && <div className={classes["warning"]}><WarningBadge /></div>}
+					<Typography typo={ITypo.P_16}>{"Dossier ".concat(this.props.folder.folder_number)}</Typography>
+					{this.countPendingDocuments() > 0 && (
+						<div className={classes["warning"]}>
+							<WarningBadge />
+						</div>
+					)}
+				</div>
+				<Image alt="chevron" src={ChevronIcon} />
 			</div>
-			<Image alt="chevron" src={ChevronIcon} />
+		);
-		</div>;
 	}
 
 	private countPendingDocuments(): number {

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

@@ -14,14 +14,19 @@ type IState = {};
 
 export default class FolderList extends React.Component<IProps, IState> {
 	public override render(): JSX.Element {
-		return <div className={classes["root"]}>
+		return (
-			{this.props.folders.map((folder) => {
+			<div className={classes["root"]}>
-				return <div onClick={this.props.onCloseLeftSide} key={folder.uid}>
+				{this.props.folders.map((folder) => {
-					<Link href={"/dossier/".concat(folder.uid)}>
+					return (
-					<FolderContainer folder={folder} onSelectedFolder={this.props.onSelectedFolder} />;
+						<div onClick={this.props.onCloseLeftSide} key={folder.uid}>
-					</Link>
+							<Link href={"/dossier/".concat(folder.uid)}>
-				</div>
+								<FolderContainer folder={folder} onSelectedFolder={this.props.onSelectedFolder} />;
-			})};
+							</Link>
-		</div>;
+						</div>
+					);
+				})}
+				;
+			</div>
+		);
 	}
 }

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

@@ -1,13 +1,13 @@
 @import "@Themes/constants.scss";
 
 .root {
-    min-height: 100%;
+	min-height: 100%;
-    width: 100%;
+	width: 100%;
-    display: flex;
+	display: flex;
-    flex-direction: column;
+	flex-direction: column;
-    justify-content: space-between;
+	justify-content: space-between;
 
-    .searchbar {
+	.searchbar {
-        padding: 40px 24px 24px 24px;
+		padding: 40px 24px 24px 24px;
-    }
+	}
-}
+}

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

@@ -24,22 +24,27 @@ export default class FolderListContainer extends React.Component<IProps, IState>
 	}
 
 	public override render(): JSX.Element {
-		return <div className={classes["root"]}>
+		return (
-			<div>
+			<div className={classes["root"]}>
-				<div className={classes["searchbar"]}>
+				<div>
-					<SearchBar folders={this.props.folders} onChange={this.filterFolders} />
+					<div className={classes["searchbar"]}>
+						<SearchBar folders={this.props.folders} onChange={this.filterFolders} />
+					</div>
+					<FolderList
+						folders={this.state.filteredFolders}
+						onSelectedFolder={this.props.onSelectedFolder && this.props.onSelectedFolder}
+						onCloseLeftSide={this.props.onCloseLeftSide}
+					/>
+				</div>
+				<div>
+					<Button fullwidth={"true"}>Créer un dossier</Button>
 				</div>
-				<FolderList folders={this.state.filteredFolders} onSelectedFolder={this.props.onSelectedFolder && this.props.onSelectedFolder} onCloseLeftSide={this.props.onCloseLeftSide}/>
 			</div>
-			<div>
+		);
-
-				<Button fullwidth={"true"}>Créer un dossier</Button>
-			</div>
-		</div>;
 	}
 
 	private filterFolders(folders: IDashBoardFolder[]): IDashBoardFolder[] {
-		this.setState({ filteredFolders: folders })
+		this.setState({ filteredFolders: folders });
 		return folders;
 	}
 }

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

@@ -2,11 +2,11 @@
 
 .root {
 	position: relative;
-	textarea{
+	textarea {
 		resize: none;
 		height: auto;
 		box-sizing: border-box;
-		font-family: 'Inter';
+		font-family: "Inter";
 		font-style: normal;
 		font-weight: 400;
 		font-size: 18px;

src/front/Components/DesignSystem/Header/Notifications/index.tsx

@@ -17,7 +17,7 @@ type IState = {
 };
 
 export default class Notifications extends React.Component<IProps, IState> {
-	private removeOnToastChange: () => void = () => { };
+	private removeOnToastChange: () => void = () => {};
 
 	constructor(props: IProps) {
 		super(props);
@@ -38,7 +38,9 @@ export default class Notifications extends React.Component<IProps, IState> {
 					)}
 				</div>
 
-				{this.props.isModalOpen && <NotificationModal isOpen={this.props.isModalOpen} closeModal={this.props.closeNotificationModal} />}
+				{this.props.isModalOpen && (
+					<NotificationModal isOpen={this.props.isModalOpen} closeModal={this.props.closeNotificationModal} />
+				)}
 			</div>
 		);
 	}

src/front/Components/DesignSystem/Header/Profile/index.tsx

@@ -9,8 +9,7 @@ type IProps = {
 	openProfileModal: () => void;
 	closeProfileModal: () => void;
 };
-type IState = {
+type IState = {};
-};
 
 export default class Profile extends React.Component<IProps, IState> {
 	constructor(props: IProps) {

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

@@ -60,4 +60,4 @@
 			}
 		}
 	}
-}
+}

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

@@ -26,7 +26,7 @@ type IState = {
 };
 
 export default class Header extends React.Component<IProps, IState> {
-	private onWindowResize = () => { };
+	private onWindowResize = () => {};
 	private headerBreakpoint = 1300;
 
 	constructor(props: IProps) {
@@ -53,31 +53,40 @@ export default class Header extends React.Component<IProps, IState> {
 						<Image src={LogoIcon} alt="logo" className={classes["logo"]} />
 					</Link>
 				</div>
-				{this.props.isUserConnected &&
+				{this.props.isUserConnected && (
 					<>
 						<Navigation />
 						<div className={classes["right-section"]}>
 							<div className={classes["notification-section"]}>
-								<Notifications isModalOpen={this.state.isNotificationMenuOpen} openNotificationModal={this.openNotificationMenu} closeNotificationModal={this.closeNotificationMenu} />
+								<Notifications
+									isModalOpen={this.state.isNotificationMenuOpen}
+									openNotificationModal={this.openNotificationMenu}
+									closeNotificationModal={this.closeNotificationMenu}
+								/>
 							</div>
 							<div className={classes["profile-section"]}>
-								<Profile isModalOpen={this.state.isProfileMenuOpen} closeProfileModal={this.closeProfileMenu} openProfileModal={this.openProfileMenu} />
+								<Profile
+									isModalOpen={this.state.isProfileMenuOpen}
+									closeProfileModal={this.closeProfileMenu}
+									openProfileModal={this.openProfileMenu}
+								/>
 							</div>
 							<div className={classes["burger-menu"]}>
-								<BurgerMenu isModalOpen={this.state.isBurgerMenuOpen} closeBurgerMenu={this.closeBurgerMenu} openBurgerMenu={this.openBurgerMenu} />
+								<BurgerMenu
+									isModalOpen={this.state.isBurgerMenuOpen}
+									closeBurgerMenu={this.closeBurgerMenu}
+									openBurgerMenu={this.openBurgerMenu}
+								/>
 							</div>
 						</div>
 					</>
-				}
+				)}
-
 			</div>
 		);
 	}
 
 	public override componentDidMount() {
-		this.onWindowResize = WindowStore.getInstance().onResize((window) =>
+		this.onWindowResize = WindowStore.getInstance().onResize((window) => this.onResize(window));
-			this.onResize(window)
-		);
 	}
 
 	public override componentWillUnmount() {

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

@@ -9,19 +9,20 @@ type IState = {};
 type IFolderInformation = {
 	label: string;
 	value: string;
-}
+};
-
 
 export default class InformationBox extends React.Component<IProps, IState> {
 	public override render(): JSX.Element {
-		return <div className={classes["root"]}>
+		return (
-			{/* {this.props.informations.map((information, key) => {
+			<div className={classes["root"]}>
+				{/* {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>;
 				return output;
 			})}; */}
-		</div>;
+			</div>
+		);
 	}
 }

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

@@ -19,6 +19,5 @@ export default class LogOutButton extends React.Component<IProps, IState> {
 		);
 	}
 
-	private disconnect() {
+	private disconnect() {}
-	}
 }

src/front/Components/DesignSystem/Modal/Alert/index.tsx

@@ -13,14 +13,14 @@ type IState = {
 export default class Alert extends React.Component<IProps, IState> {
 	static defaultProps = {
 		closeText: "Ok",
-		...Modal.defaultProps
+		...Modal.defaultProps,
 	};
 
 	constructor(props: IProps) {
 		super(props);
 		this.state = {
 			isOpen: this.props.isOpen ?? true,
-		}
+		};
 		this.onClose = this.onClose.bind(this);
 	}
 

src/front/Components/DesignSystem/Modal/Confirm/index.tsx

@@ -19,7 +19,7 @@ export default class Confirm extends React.Component<IProps, IState> {
 		cancelText: "Cancel",
 		confirmText: "Confirm",
 		isConfirmButtonDisabled: false,
-		...Modal.defaultProps
+		...Modal.defaultProps,
 	};
 
 	public override render(): JSX.Element | null {
@@ -30,8 +30,7 @@ export default class Confirm extends React.Component<IProps, IState> {
 				onClose={this.props.onClose}
 				header={this.props.header}
 				footer={this.footer()}
-				animationDelay={this.props.animationDelay}
+				animationDelay={this.props.animationDelay}>
-			>
 				{this.props.children}
 			</Modal>
 		);
@@ -40,7 +39,6 @@ export default class Confirm extends React.Component<IProps, IState> {
 	private footer(): JSX.Element {
 		return (
 			<div className={classes["buttons-container"]}>
-
 				{this.props.showCancelButton && (
 					<Button variant={EButtonVariant.GHOST} onClick={this.props.onClose}>
 						{this.props.cancelText}

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

@@ -121,4 +121,4 @@
 			}
 		}
 	}
-}
+}

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

@@ -28,7 +28,7 @@ type IState = {
 
 export default class Modal extends React.Component<IProps, IState> {
 	static defaultProps = {
-		animationDelay: 250
+		animationDelay: 250,
 	};
 	public rootRefElement = React.createRef<HTMLDivElement>();
 	constructor(props: IProps) {
@@ -36,19 +36,23 @@ export default class Modal extends React.Component<IProps, IState> {
 		this.close = this.close.bind(this);
 
 		this.state = {
-			willClose: false
+			willClose: false,
 		};
 	}
 
 	public override render(): JSX.Element | null {
 		if (!this.props.isOpen) return null;
-		const onClick = (this.props.hasContainerClosable && this.close) || (() => { });
+		const onClick = (this.props.hasContainerClosable && this.close) || (() => {});
 		return (
-			<div ref={this.rootRefElement} className={classes["root"]} data-side-background={this.props.withSideBackground} data-will-close={this.state.willClose.toString()}>
+			<div
+				ref={this.rootRefElement}
+				className={classes["root"]}
+				data-side-background={this.props.withSideBackground}
+				data-will-close={this.state.willClose.toString()}>
 				<div className={classes["background"]} onClick={this.close} />
 				<div
 					className={[classes["container"], this.props.hasTransparentBackground && classes["transparant-background"]].join(" ")}
-					onClick={onClick} >
+					onClick={onClick}>
 					{this.props.closeBtn && (
 						<div className={classes["cross"]}>
 							<Image alt="Unplugged" src={CrossIcon} className={classes["close-icon"]} onClick={this.close} />
@@ -73,12 +77,12 @@ export default class Modal extends React.Component<IProps, IState> {
 
 	protected close() {
 		if (this.state.willClose) return;
-		this.setState({ willClose: true })
+		this.setState({ willClose: true });
 		window.setTimeout(() => {
 			this.setState({
-				willClose: false
+				willClose: false,
-			})
+			});
-			this.props.onClose()
+			this.props.onClose();
-		}, this.props.animationDelay)
+		}, this.props.animationDelay);
 	}
 }

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

@@ -11,9 +11,8 @@
 		border: 1px solid $grey-medium;
 		background-color: transparent;
 
-		&.active{
+		&.active {
 			padding: 16px 24px;
-
 		}
 		.label {
 			font-family: var(--font-primary);
@@ -32,7 +31,7 @@
 			border: none;
 			width: 100%;
 
-			>div {
+			> div {
 				width: 100%;
 			}
 		}
@@ -46,4 +45,4 @@
 			padding: 0 16px;
 		}
 	}
-}
+}

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

@@ -1,79 +1,77 @@
-import React from "react";
+import React from "react";
-import ReactSelect, { ActionMeta, MultiValue, Options, PropsValue } from "react-select";
+import ReactSelect, { ActionMeta, MultiValue, Options, PropsValue } from "react-select";
-
+
-import { styles } from "./styles";
+import { styles } from "./styles";
-import classes from "./classes.module.scss";
+import classes from "./classes.module.scss";
-import { IOption } from "../Select";
+import { IOption } from "../Select";
-import Typography, { ITypo } from "../Typography";
+import Typography, { ITypo } from "../Typography";
-import classNames from "classnames";
+import classNames from "classnames";
-
+
-
+type IProps = {
-type IProps = {
+	options: IOption[];
-	options: IOption[];
+	label?: string | JSX.Element;
-	label?: string | JSX.Element;
+	placeholder?: string;
-	placeholder?: string;
+	onChange?: (newValue: MultiValue<IOption>, actionMeta: ActionMeta<IOption>) => void;
-	onChange?: (newValue: MultiValue<IOption>, actionMeta: ActionMeta<IOption>) => void;
+	defaultValue?: PropsValue<IOption>;
-	defaultValue?: PropsValue<IOption>;
+	value?: PropsValue<IOption>;
-	value?: PropsValue<IOption>;
+	isMulti?: boolean;
-	isMulti?: boolean;
+	shouldCloseMenuOnSelect?: boolean;
-	shouldCloseMenuOnSelect?: boolean;
+	isOptionDisabled?: (option: IOption, selectValue: Options<IOption>) => boolean;
-	isOptionDisabled?: (option: IOption, selectValue: Options<IOption>) => boolean;
+};
-};
+type IState = {
-type IState = {
+	isSelectedOption: boolean;
-	isSelectedOption: boolean;
+};
-};
+
-
+export default class MultiSelect extends React.Component<IProps, IState> {
-export default class MultiSelect extends React.Component<IProps, IState> {
+	public static defaultProps: Partial<IProps> = {
-	public static defaultProps: Partial<IProps> = {
+		placeholder: "Sélectionner une option...",
-		placeholder: "Sélectionner une option...",
+	};
-	}
+
-
+	constructor(props: IProps) {
-	constructor(props: IProps) {
+		super(props);
-		super(props);
+		this.state = {
-		this.state = {
+			isSelectedOption: this.props.defaultValue ? true : false,
-			isSelectedOption: this.props.defaultValue ? true : false
+		};
-		}
+		this.onChange = this.onChange.bind(this);
-		this.onChange = this.onChange.bind(this);
+		this.onEmptyResearch = this.onEmptyResearch.bind(this);
-		this.onEmptyResearch = this.onEmptyResearch.bind(this);
+	}
-	}
+	public override render(): JSX.Element {
-	public override render(): JSX.Element {
+		return (
-		return (
+			<div className={classes["root"]}>
-			<div className={classes["root"]}>
+				<div className={classNames(classes["label-container"], this.state.isSelectedOption && classes["active"])}>
-				<div className={classNames(classes["label-container"], this.state.isSelectedOption && classes["active"])}>
+					{this.props.label && <div className={classes["label"]}>{this.props.label}</div>}
-					{this.props.label && <div className={classes["label"]}>{this.props.label}</div>}
+					{this.state.isSelectedOption && (
-					{this.state.isSelectedOption &&
+						<>
-						<>
+							<Typography typo={ITypo.NAV_INPUT_16}>
-							< Typography typo={ITypo.NAV_INPUT_16}>
+								<div className={classes["is-active-placeholder"]}>{this.props.placeholder}</div>
-								<div className={classes["is-active-placeholder"]}>{this.props.placeholder}</div>
+							</Typography>
-							</Typography>
+						</>
-						</>
+					)}
-					}
+					<div className={classes["input-container"]}>
-					<div className={classes["input-container"]}>
+						<ReactSelect
-						<ReactSelect
+							placeholder={this.props.placeholder}
-							placeholder={this.props.placeholder}
+							options={this.props.options}
-							options={this.props.options}
+							styles={styles}
-							styles={styles}
+							onChange={this.onChange}
-							onChange={this.onChange}
+							value={this.props.value}
-							value={this.props.value}
+							defaultValue={this.props.defaultValue}
-							defaultValue={this.props.defaultValue}
+							closeMenuOnSelect={this.props.shouldCloseMenuOnSelect}
-							closeMenuOnSelect={this.props.shouldCloseMenuOnSelect}
+							isMulti
-							isMulti
+							isOptionDisabled={this.props.isOptionDisabled}
-							isOptionDisabled={this.props.isOptionDisabled}
+							noOptionsMessage={this.onEmptyResearch}
-							noOptionsMessage={this.onEmptyResearch}
+						/>
-						/>
+					</div>
-					</div>
+				</div>
-				</div>
+			</div>
-			</div >
+		);
-		);
+	}
-	}
+
-
+	private onChange(newValue: MultiValue<IOption>, actionMeta: ActionMeta<IOption>) {
-	private onChange(newValue: MultiValue<IOption>, actionMeta: ActionMeta<IOption>) {
+		this.props.onChange && this.props.onChange(newValue, actionMeta);
-		this.props.onChange && this.props.onChange(newValue, actionMeta);
+		this.setState({ isSelectedOption: newValue.length > 0 });
-		this.setState({ isSelectedOption: newValue.length > 0 });
+	}
-
+
-	}
+	private onEmptyResearch() {
-
+		return "Aucune option correspondante";
-	private onEmptyResearch(){
+	}
-		return "Aucune option correspondante"
+}
-	}
-}

src/front/Components/DesignSystem/MultiSelect/styles.tsx

@@ -31,7 +31,7 @@ export const styles = {
 		fontSize: "16px",
 		lineHeight: "22px",
 		color: "#939393",
-		letter: "0.5 px"
+		letter: "0.5 px",
 	}),
 	multiValue: (provided: any) => ({
 		...provided,
@@ -65,13 +65,12 @@ export const styles = {
 	}),
 	indicatorSeparator: () => ({
 		display: "none",
-
 	}),
 	menu: (provided: any) => ({
 		...provided,
 		position: "static",
 		border: "0",
-		boxShadow: "none"
+		boxShadow: "none",
 	}),
 	menuList: (provided: any) => ({
 		...provided,
@@ -87,7 +86,7 @@ export const styles = {
 		">svg": {
 			width: "16px",
 			height: "16px",
-		}
+		},
 	}),
 	indicatorsContainer: (provided: any) => ({
 		...provided,
@@ -99,4 +98,3 @@ export const styles = {
 		fontSize: "16px",
 	}),
 };
-

src/front/Components/DesignSystem/QuantityProgressBar/ProgressBar/classes.module.scss

@@ -24,4 +24,4 @@
 		left: 50%;
 		transform: translate(-50%);
 	}
-}
+}

src/front/Components/DesignSystem/QuantityProgressBar/ProgressBar/index.tsx

@@ -6,12 +6,11 @@ type IProps = {
 	percentage: number;
 };
 export default class ProgressBar extends React.Component<IProps> {
-
 	public override render(): JSX.Element {
-		const quantity = (this.props.percentage.toFixed(2)).toString().concat("%")
+		const quantity = this.props.percentage.toFixed(2).toString().concat("%");
 		return (
 			<div className={classes["root"]}>
-				<div className={classes["progress"]} style={{ width: quantity }} >
+				<div className={classes["progress"]} style={{ width: quantity }}>
 					<Typography typo={ITypo.P_16}>
 						<div className={classes["percentage"]}>{quantity}</div>
 					</Typography>

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

@@ -5,8 +5,8 @@
 	font-size: 14px;
 	line-height: 20px;
 	font-feature-settings: "salt" on;
-    height: 70px;
+	height: 70px;
-	
+
 	.title {
 		margin-bottom: 8px;
 	}

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

@@ -11,7 +11,9 @@ type IProps = {
 export default class QuantityProgressBar extends React.Component<IProps> {
 	public override render(): JSX.Element {
 		let numerator: number = this.props.currentNumber;
-		if (this.props.currentNumber > this.props.total) { numerator = this.props.total }
+		if (this.props.currentNumber > this.props.total) {
+			numerator = this.props.total;
+		}
 
 		const percentage = (numerator / this.props.total) * 100;
 		return (

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

@@ -1,31 +1,31 @@
 @import "@Themes/constants.scss";
 
 .root {
-    display: flex;
+	display: flex;
-    align-items: center;
+	align-items: center;
-    padding-left: 24px;
+	padding-left: 24px;
-    background-color: $white;
+	background-color: $white;
-    border: 1px solid $grey-medium;
+	border: 1px solid $grey-medium;
-    position: relative;
+	position: relative;
 
-    .fake-placeholder {
+	.fake-placeholder {
-        position: absolute;
+		position: absolute;
-        left: 47px;
+		left: 47px;
-        top: 24px;
+		top: 24px;
-        color: $grey;
+		color: $grey;
-        pointer-events: none;
+		pointer-events: none;
-    }
+	}
 
-    .input {
+	.input {
-        border: 0;
+		border: 0;
-        margin-left: 8px;
+		margin-left: 8px;
-        padding: 24px 0;
+		padding: 24px 0;
-        width: 100%;
+		width: 100%;
-        font-family: 'Inter';
+		font-family: "Inter";
-        font-style: normal;
+		font-style: normal;
-        font-weight: 400;
+		font-weight: 400;
-        font-size: 18px;
+		font-size: 18px;
-        line-height: 22px;
+		line-height: 22px;
-        color: $grey;
+		color: $grey;
-    }
+	}
-}
+}

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

@@ -13,7 +13,6 @@ type IState = {
 	hasValue: boolean;
 };
 
-
 export default class SearchBar extends React.Component<IProps, IState> {
 	public constructor(props: IProps) {
 		super(props);
@@ -24,15 +23,21 @@ export default class SearchBar extends React.Component<IProps, IState> {
 		this.onChange = this.onChange.bind(this);
 	}
 	public override render(): JSX.Element {
-		return <div className={classes["root"]}>
+		return (
-			<Image src={LoopIcon} alt="Loop icon" />
+			<div className={classes["root"]}>
-			{!this.state.hasValue && <Typography typo={ITypo.P_ERR_18}><div className={classes["fake-placeholder"]}>Select</div></Typography>}
+				<Image src={LoopIcon} alt="Loop icon" />
-			<input type="text" placeholder="" className={classes["input"]} onChange={this.onChange} />
+				{!this.state.hasValue && (
-		</div>;
+					<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
+		const hasValue = event.target.value.length > 0;
 		this.doesInputHaveValue(hasValue);
 		if (!this.props.onChange) return;
 		this.props.onChange(this.filterFolders(event));
@@ -43,7 +48,9 @@ export default class SearchBar extends React.Component<IProps, IState> {
 	}
 
 	private filterFolders(event: React.ChangeEvent<HTMLInputElement>) {
-		const filteredFolders: IDashBoardFolder[] = this.props.folders.filter((folder) => folder.folder_number.includes(event.target.value));
+		const filteredFolders: IDashBoardFolder[] = this.props.folders.filter((folder) =>
+			folder.folder_number.includes(event.target.value),
+		);
 		return filteredFolders;
 	}
 }

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

@@ -21,7 +21,7 @@
 			border-radius: 8px 0 0 8px;
 		}
 
-		.container-input chevron-icon{
+		.container-input chevron-icon {
 			display: flex;
 			align-items: center;
 
@@ -113,12 +113,12 @@
 		align-items: center;
 		margin-right: 11px;
 
-		>svg {
+		> svg {
 			height: 20px;
 			margin-right: 11px;
 		}
 
-		>img {
+		> img {
 			height: 20px;
 			width: 20px;
 		}
@@ -129,4 +129,4 @@
 		z-index: 1;
 		inset: 0;
 	}
-}
+}

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

@@ -31,7 +31,7 @@ type IState = {
 export default class Select extends React.Component<IProps, IState> {
 	private contentRef = React.createRef<HTMLUListElement>();
 	private rootRef = React.createRef<HTMLDivElement>();
-	private removeOnresize = () => { };
+	private removeOnresize = () => {};
 
 	constructor(props: IProps) {
 		super(props);
@@ -67,7 +67,6 @@ export default class Select extends React.Component<IProps, IState> {
 								</Typography>
 							</div>
 						</>
-
 					</div>
 					<Image className={classes["chevron-icon"]} data-open={this.state.isOpen} src={ChevronIcon} alt="chevron icon" />
 				</label>
@@ -82,14 +81,11 @@ export default class Select extends React.Component<IProps, IState> {
 					{this.props.options.map((option, index) => (
 						<li key={`${index}-${option.value}`} className={classes["container-li"]} onClick={(e) => this.onSelect(option, e)}>
 							<div className={classes["token-icon"]}>{option.icon}</div>
-							<Typography typo={ITypo.P_18}>
+							<Typography typo={ITypo.P_18}>{option.label}</Typography>
-								{option.label}
-							</Typography>
 						</li>
 					))}
 				</ul>
 
-
 				{this.state.isOpen && <div className={classes["backdrop"]} onClick={this.toggle} />}
 			</div>
 		);

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

@@ -16,18 +16,19 @@ type IState = {
 	event: React.MouseEvent<HTMLElement> | null;
 };
 
-const LightTooltip = styled(({ className, ...props }: TooltipProps) => (
+const LightTooltip = styled(({ className, ...props }: TooltipProps) => <TooltipMUI {...props} classes={{ popper: className }} />)(
-	<TooltipMUI {...props} classes={{ popper: className }} />
+	({ theme }) => ({
-  ))(({ theme }) => ({
+		[`& .${tooltipClasses.tooltip}`]: {
-	[`& .${tooltipClasses.tooltip}`]: {
+			backgroundColor: "var(--colormerdum)",
-	  backgroundColor: "var(--colormerdum)",
+			color: "var(--colormerdum)",
-	  color: "var(--colormerdum)",
+			//boxShadow: theme.shadows[1],
-	  //boxShadow: theme.shadows[1],
+			fontSize: 11,
-	  fontSize: 11,
+		},
-	},[`& .${tooltipClasses.arrow}`]: {
+		[`& .${tooltipClasses.arrow}`]: {
-    // color: theme.palette.common.black,
+			// color: theme.palette.common.black,
-  },
+		},
-  }));
+	}),
+);
 
 export default class Tooltip extends React.Component<IProps, IState> {
 	static defaultProps: Partial<IProps> = {
@@ -41,9 +42,7 @@ export default class Tooltip extends React.Component<IProps, IState> {
 	public override render(): JSX.Element {
 		return (
 			<LightTooltip title={this.props.text} placement="top" arrow>
-				<span
+				<span className={this.props.className} style={!this.props.isNotFlex ? { display: "flex" } : {}}>
-					className={this.props.className}
-					style={!this.props.isNotFlex ? { display: "flex" } : {}}>
 					<Image src={ToolTipIcon} alt="toolTip icon" />
 				</span>
 			</LightTooltip>

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

@@ -1,13 +1,13 @@
 @import "@Themes/constants.scss";
 
 .root {
-    width: 100%;
+	width: 100%;
-    .title{
+	.title {
-        margin-bottom: 8px;
+		margin-bottom: 8px;
-    }
+	}
-    .content{
+	.content {
-        display: grid;
+		display: grid;
-        gap: 16px;
+		gap: 16px;
-        margin-top: 32px;
+		margin-top: 32px;
-    }
+	}
 }

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

@@ -7,28 +7,34 @@ import DocumentNotary from "../../Document/DocumentNotary";
 type IProps = {
 	title: string;
 	subtitle?: string;
-	documents: {
+	documents:
-		uid: Document["uid"];
+		| {
-		document_type: Document["document_type"];
+				uid: Document["uid"];
-		document_status: Document["document_status"];
+				document_type: Document["document_type"];
-
+				document_status: Document["document_status"];
-	}[] | null;
+		  }[]
+		| null;
 	openDeletionModal: (uid: Document["uid"]) => void;
 };
 type IState = {};
 
 export default class DocumentList extends React.Component<IProps, IState> {
 	public override render(): JSX.Element {
-		return <div className={classes["root"]}>
+		return (
-			<div className={classes["title"]}>
+			<div className={classes["root"]}>
-				<Typography typo={ITypo.P_SB_18}>{this.props.title}</Typography>
+				<div className={classes["title"]}>
+					<Typography typo={ITypo.P_SB_18}>{this.props.title}</Typography>
+				</div>
+				<Typography typo={ITypo.P_16}>{this.props.subtitle}</Typography>
+				<div className={classes["content"]}>
+					{this.props.documents &&
+						this.props.documents.map((document) => {
+							return (
+								<DocumentNotary document={document} key={document.uid} openDeletionModal={this.props.openDeletionModal} />
+							);
+						})}
+				</div>
 			</div>
-			<Typography typo={ITypo.P_16}>{this.props.subtitle}</Typography>
+		);
-			<div className={classes["content"]}>
-				{this.props.documents && this.props.documents.map((document) => {
-					return <DocumentNotary document={document} key={document.uid} openDeletionModal={this.props.openDeletionModal}/>
-				})}
-			</div>
-		</div>;
 	}
 }

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

@@ -1,28 +1,27 @@
 @import "@Themes/constants.scss";
 
 .root {
-    display: flex;
+	display: flex;
-    align-items: center;
+	align-items: center;
-    justify-content: space-between;
+	justify-content: space-between;
-    padding: 24px;
+	padding: 24px;
-    background-color: $grey-soft;
+	background-color: $grey-soft;
-    width: 100%;
+	width: 100%;
 
-    .content {
+	.content {
-        width: 100%;
+		width: 100%;
-        display: grid;
+		display: grid;
-        grid-template-columns: 1fr 1fr 1fr 1fr;
+		grid-template-columns: 1fr 1fr 1fr 1fr;
 
-        @media (max-width: $screen-ls) {
+		@media (max-width: $screen-ls) {
-            grid-template-columns: 1fr 1fr;
+			grid-template-columns: 1fr 1fr;
-            gap: 32px;
+			gap: 32px;
-        }
+		}
+	}
 
-    }
+	.icons {
-
+		display: grid;
-    .icons {
+		grid-template-columns: 1fr 1fr;
-        display: grid;
+		gap: 24px;
-        grid-template-columns: 1fr 1fr;
+	}
-        gap: 24px;
+}
-    }
-}

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

@@ -8,50 +8,55 @@ import WarningBadge from "../../WarningBadge";
 
 type IProps = {
 	contact: {
-		first_name: Contact["first_name"],
+		first_name: Contact["first_name"];
-		last_name: Contact["last_name"],
+		last_name: Contact["last_name"];
-		phone_number: Contact["phone_number"],
+		phone_number: Contact["phone_number"];
-		cell_phone_number: Contact["cell_phone_number"],
+		cell_phone_number: Contact["cell_phone_number"];
-		email: Contact["email"],
+		email: Contact["email"];
-	}
+	};
 };
 type IState = {};
 
 export default class UserFolderHeader extends React.Component<IProps, IState> {
 	public override render(): JSX.Element {
-		return <div className={classes["root"]}>
+		return (
-			<div className={classes["content"]}>
+			<div className={classes["root"]}>
-				<div className={classes["container"]}>
+				<div className={classes["content"]}>
-					<Typography typo={ITypo.NAV_INPUT_16}>Nom</Typography>
+					<div className={classes["container"]}>
-					<Typography typo={ITypo.P_18}>{this.props.contact.last_name}</Typography>
+						<Typography typo={ITypo.NAV_INPUT_16}>Nom</Typography>
-				</div>
+						<Typography typo={ITypo.P_18}>{this.props.contact.last_name}</Typography>
+					</div>
 
-				<div className={classes["container"]}>
+					<div className={classes["container"]}>
-					<Typography typo={ITypo.NAV_INPUT_16}>Prénom</Typography>
+						<Typography typo={ITypo.NAV_INPUT_16}>Prénom</Typography>
-					<Typography typo={ITypo.P_18}>{this.props.contact.first_name}</Typography>
+						<Typography typo={ITypo.P_18}>{this.props.contact.first_name}</Typography>
-				</div>
+					</div>
 
-				<div className={classes["container"]}>
+					<div className={classes["container"]}>
-					<Typography typo={ITypo.NAV_INPUT_16}>Numéro de téléphone</Typography>
+						<Typography typo={ITypo.NAV_INPUT_16}>Numéro de téléphone</Typography>
-					<Typography typo={ITypo.P_18}>{this.formatPhoneNumber(this.props.contact.phone_number) ?? this.formatPhoneNumber(this.props.contact.cell_phone_number)}</Typography>
+						<Typography typo={ITypo.P_18}>
-				</div>
+							{this.formatPhoneNumber(this.props.contact.phone_number) ??
+								this.formatPhoneNumber(this.props.contact.cell_phone_number)}
+						</Typography>
+					</div>
 
-				<div className={classes["container"]}>
+					<div className={classes["container"]}>
-					<Typography typo={ITypo.NAV_INPUT_16}>E-mail</Typography>
+						<Typography typo={ITypo.NAV_INPUT_16}>E-mail</Typography>
-					<Typography typo={ITypo.P_18}>{this.props.contact.email}</Typography>
+						<Typography typo={ITypo.P_18}>{this.props.contact.email}</Typography>
+					</div>
+				</div>
+				<div className={classes["icons"]}>
+					<WarningBadge />
+					<Image src={PenIcon} alt="edit" className={classes["edit-icon"]} onClick={this.onEditClick} />
 				</div>
 			</div>
-			<div className={classes["icons"]}>
+		);
-				<WarningBadge />
-				<Image src={PenIcon} alt="edit" className={classes["edit-icon"]} onClick={this.onEditClick}/>
-			</div>
-		</div>;
 	}
 
 	private formatPhoneNumber(phoneNumber: string): string {
 		if (!phoneNumber) return "";
-		const output = phoneNumber.split('').map((char, index) => {
+		const output = phoneNumber.split("").map((char, index) => {
-			if(index%2) return char + " ";
+			if (index % 2) return char + " ";
 			return char;
 		});
 		return output.join("");

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

@@ -21,47 +21,47 @@
 }
 
 .root {
-    border: 1px solid $grey;
+	border: 1px solid $grey;
-    padding: 16px;
+	padding: 16px;
-    transition: all 350ms $custom-easing;
+	transition: all 350ms $custom-easing;
 
-    .header {
+	.header {
-        display: flex;
+		display: flex;
-        align-items: center;
+		align-items: center;
-        justify-content: space-between;
+		justify-content: space-between;
-        cursor: pointer;
+		cursor: pointer;
 
-        .chevron-icon {
+		.chevron-icon {
-            margin-left: 16px;
+			margin-left: 16px;
-            transform: rotate(90deg);
+			transform: rotate(90deg);
-            transition: all 350ms $custom-easing;
+			transition: all 350ms $custom-easing;
-            cursor: pointer;
+			cursor: pointer;
-            &.open {
+			&.open {
-                transform: rotate(-90deg);
+				transform: rotate(-90deg);
-            }
+			}
-        }
+		}
-    }
+	}
 
-    .container {
+	.container {
-        margin-top: 32px;
+		margin-top: 32px;
-        --animation-delay: 1ms;
+		--animation-delay: 1ms;
-        animation: smooth-appear var(--animation-delay) $custom-easing;
+		animation: smooth-appear var(--animation-delay) $custom-easing;
-    
-        &[data-will-close="true"] {
-            animation: smooth-disappear var(--animation-delay) $custom-easing;
-        }
-        
-        .content {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 64px;
-            margin-top: 32px;
-        }
 
-        .button-container {
+		&[data-will-close="true"] {
-            display: inline-grid;
+			animation: smooth-disappear var(--animation-delay) $custom-easing;
-            justify-items: start;
+		}
-            gap: 32px;
+
-        }
+		.content {
-    }
+			display: grid;
-}
+			grid-template-columns: 1fr 1fr;
+			gap: 64px;
+			margin-top: 32px;
+		}
+
+		.button-container {
+			display: inline-grid;
+			justify-items: start;
+			gap: 32px;
+		}
+	}
+}

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

@@ -8,12 +8,12 @@ import QuantityProgressBar from "../QuantityProgressBar";
 import classNames from "classnames";
 import DocumentList from "./DocumentList";
 import Button, { EButtonVariant } from "../Button";
-import PlusIcon from "@Assets/Icons/plus.svg"
+import PlusIcon from "@Assets/Icons/plus.svg";
 import Confirm from "../Modal/Confirm";
 import { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
 
 type IProps = {
-	customer: Customer
+	customer: Customer;
 	animationDelay?: number;
 	folder: IDashBoardFolder;
 };
@@ -25,7 +25,7 @@ type IState = {
 
 export default class UserFolder extends React.Component<IProps, IState> {
 	static defaultProps = {
-		animationDelay: 300
+		animationDelay: 300,
 	};
 	public rootRefElement = React.createRef<HTMLDivElement>();
 
@@ -34,51 +34,70 @@ export default class UserFolder extends React.Component<IProps, IState> {
 		this.state = {
 			isOpen: false,
 			isOpenDeletionModal: false,
-			willClose: false
+			willClose: false,
 		};
 		this.toggleOpen = this.toggleOpen.bind(this);
 		this.closeDeletionModal = this.closeDeletionModal.bind(this);
 		this.openDeletionModal = this.openDeletionModal.bind(this);
 		this.openComponent = this.openComponent.bind(this);
 		this.closeComponent = this.closeComponent.bind(this);
-
 	}
 	public override render(): JSX.Element {
-
 		const documentsAsked: Document[] | null = this.getDocumentsByStatus("ASKED");
 		const otherDocuments: Document[] | null = this.getValidatedAndPendindDocuments();
 
-		return <div className={classes["root"]}>
+		return (
-			<Confirm
+			<div className={classes["root"]}>
-				isOpen={this.state.isOpenDeletionModal}
+				<Confirm
-				onClose={this.closeDeletionModal}
+					isOpen={this.state.isOpenDeletionModal}
-				closeBtn
+					onClose={this.closeDeletionModal}
-				header={"Supprimer la demande de document ?"}
+					closeBtn
-				cancelText={"Cancel"}
+					header={"Supprimer la demande de document ?"}
-				confirmText={"Confirmer"}>
+					cancelText={"Cancel"}
-				Êtes-vous vous de vouloir supprimer la demande de document ?
+					confirmText={"Confirmer"}>
-			</Confirm>
+					Êtes-vous vous de vouloir supprimer la demande de document ?
+				</Confirm>
 
-			<div className={classes["header"]} onClick={this.toggleOpen}>
+				<div className={classes["header"]} onClick={this.toggleOpen}>
-				<UserFolderHeader contact={this.props.
+					<UserFolderHeader contact={this.props.customer.contact} />
-					customer.contact} />
+					<Image
-				<Image src={ChevronIcon} alt="chevron open close" className={classNames(classes["chevron-icon"], this.state.isOpen && classes["open"])} onClick={this.toggleOpen} />
+						src={ChevronIcon}
-			</div>
+						alt="chevron open close"
-
+						className={classNames(classes["chevron-icon"], this.state.isOpen && classes["open"])}
-			{this.state.isOpen &&
+						onClick={this.toggleOpen}
-				<div className={classes["container"]} data-will-close={this.state.willClose.toString()} ref={this.rootRefElement}>
+					/>
-					<QuantityProgressBar title="Complétion du dossier" total={100} currentNumber={this.calculateDocumentsPercentageProgress()} />
-					<div className={classes["content"]}>
-						<DocumentList documents={documentsAsked} title="Documents demandés" openDeletionModal={this.openDeletionModal} />
-						<DocumentList documents={otherDocuments} title="Documents à valider / validés" subtitle="Vous avez des documents à valider." openDeletionModal={this.openDeletionModal} />
-					</div>
-					<div className={classes["button-container"]}>
-						<Button variant={EButtonVariant.LINE} icon={PlusIcon}>Demander un autre document </Button>
-						<Button>Envoyer un mail de demande de documents</Button>
-					</div>
 				</div>
-			}
+
-		</div>;
+				{this.state.isOpen && (
+					<div className={classes["container"]} data-will-close={this.state.willClose.toString()} ref={this.rootRefElement}>
+						<QuantityProgressBar
+							title="Complétion du dossier"
+							total={100}
+							currentNumber={this.calculateDocumentsPercentageProgress()}
+						/>
+						<div className={classes["content"]}>
+							<DocumentList
+								documents={documentsAsked}
+								title="Documents demandés"
+								openDeletionModal={this.openDeletionModal}
+							/>
+							<DocumentList
+								documents={otherDocuments}
+								title="Documents à valider / validés"
+								subtitle="Vous avez des documents à valider."
+								openDeletionModal={this.openDeletionModal}
+							/>
+						</div>
+						<div className={classes["button-container"]}>
+							<Button variant={EButtonVariant.LINE} icon={PlusIcon}>
+								Demander un autre document{" "}
+							</Button>
+							<Button>Envoyer un mail de demande de documents</Button>
+						</div>
+					</div>
+				)}
+			</div>
+		);
 	}
 
 	public override componentDidUpdate(): void {
@@ -94,10 +113,11 @@ export default class UserFolder extends React.Component<IProps, IState> {
 
 	private getDocumentsByStatus(status: string): Document[] | null {
 		if (!this.props.customer.documents) return null;
-		return this.props.customer.documents.filter((document) => document.document_status === status && document.folder.uid === this.props.folder.uid);
+		return this.props.customer.documents.filter(
+			(document) => document.document_status === status && document.folder.uid === this.props.folder.uid,
+		);
 	}
 
-
 	// Get all documents Validated, pending
 	private getValidatedAndPendindDocuments(): Document[] | null {
 		const pendingDocuments = this.getDocumentsByStatus("PENDING");
@@ -117,40 +137,37 @@ export default class UserFolder extends React.Component<IProps, IState> {
 	private toggleOpen(): void {
 		if (this.state.isOpen) {
 			this.closeComponent();
-		}
+		} else {
-		else {
 			this.openComponent();
 		}
 	}
 
 	private openComponent(): void {
 		this.setState({
-			isOpen: true
+			isOpen: true,
 		});
 	}
 
 	private closeComponent(): void {
 		if (this.state.willClose) return;
-		this.setState({ willClose: true })
+		this.setState({ willClose: true });
 		window.setTimeout(() => {
 			this.setState({
 				isOpen: false,
-				willClose: false
+				willClose: false,
 			});
-		}, this.props.animationDelay)
+		}, this.props.animationDelay);
 	}
 
 	private openDeletionModal(uid: string): void {
 		// TODO: call API to delete document
 		this.setState({
-			isOpenDeletionModal: true
+			isOpenDeletionModal: true,
 		});
 	}
 	private closeDeletionModal(): void {
 		this.setState({
-			isOpenDeletionModal: false
+			isOpenDeletionModal: false,
-		})
+		});
 	}
-
-
 }

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

@@ -1,7 +1,7 @@
 @import "@Themes/constants.scss";
 
 .root {
-    background-color: $orange-flash;
+	background-color: $orange-flash;
-    padding: 6px;
+	padding: 6px;
-    border-radius: 20px;
+	border-radius: 20px;
-}
+}

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

@@ -8,8 +8,10 @@ type IState = {};
 
 export default class WarningBadge extends React.Component<IProps, IState> {
 	public override render(): JSX.Element {
-		return <div className={classes["root"]}>
+		return (
-			<Image src={WarningIcon} alt="warning icon" />
+			<div className={classes["root"]}>
-		</div>;
+				<Image src={WarningIcon} alt="warning icon" />
+			</div>
+		);
 	}
 }

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

@@ -42,7 +42,6 @@ export default class InputField extends React.Component<IProps> {
 						{this.props.inputStatus === "success" && <Image alt="success icon" src={SuccessIcon} />}
 						{this.props.inputStatus === "error" && <Image alt="error icon" src={ErrorIcon} />}
 					</div>
-
 				</div>
 				{this.props.errorMsg && <div className={classes["errorMsg"]}>{this.props.errorMsg}</div>}
 			</>

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

@@ -35,4 +35,4 @@
 			}
 		}
 	}
-}
+}

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

@@ -27,9 +27,7 @@ export default class DefaultDoubleSidePage extends React.Component<IProps, IStat
 				<Header isUserConnected={false} />
 				<div className={classes["content"]}>
 					<div className={classes["sides"]}>
-						<div className={classes["side-content"]}>
+						<div className={classes["side-content"]}>{this.props.children}</div>
-							{this.props.children}
-						</div>
 					</div>
 					<div className={classNames(classes["sides"], classes["image-container"])}>
 						<Image alt={"right side image"} src={this.props.image} className={classes["image"]} />
@@ -46,4 +44,4 @@ export default class DefaultDoubleSidePage extends React.Component<IProps, IStat
 			window.scrollTo(0, this.props.scrollTop);
 		}
 	}
-}
+}

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

@@ -26,7 +26,6 @@
 					min-width: 389px;
 				}
 			}
-
 		}
 
 		.closable-left-side {
@@ -44,7 +43,6 @@
 				display: none;
 			}
 
-
 			.chevron-icon {
 				margin-top: 21px;
 				transform: rotate(180deg);
@@ -58,4 +56,4 @@
 			overflow-y: auto;
 		}
 	}
-}
+}

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

@@ -1,15 +1,15 @@
-import 'reflect-metadata';
+import "reflect-metadata";
 import React, { ReactNode } from "react";
 import classes from "./classes.module.scss";
 import FolderListContainer from "@Front/Components/DesignSystem/FolderListContainer";
 import Header from "@Front/Components/DesignSystem/Header";
 import Version from "@Front/Components/DesignSystem/Version";
-import { folders } from "@Front/Components/Layouts/DesignSystem/dummyData"
+import { folders } from "@Front/Components/Layouts/DesignSystem/dummyData";
-import { OfficeFolder } from 'le-coffre-resources/dist/Customer';
+import { OfficeFolder } from "le-coffre-resources/dist/Customer";
 import chevronIcon from "@Assets/Icons/chevron.svg";
-import Image from 'next/image';
+import Image from "next/image";
-import classNames from 'classnames';
+import classNames from "classnames";
-import WindowStore from '@Front/Stores/WindowStore';
+import WindowStore from "@Front/Stores/WindowStore";
 type IProps = {
 	title: string;
 	children?: ReactNode;
@@ -25,14 +25,14 @@ export type IDashBoardFolder = {
 	uid: OfficeFolder["uid"];
 	name: OfficeFolder["name"];
 	folder_number: OfficeFolder["folder_number"];
-	documents?: OfficeFolder["documents"]
+	documents?: OfficeFolder["documents"];
 	description: OfficeFolder["description"];
 	deed: OfficeFolder["deed"];
 	created_at: OfficeFolder["created_at"];
 	office_folder_has_customers?: OfficeFolder["office_folder_has_customers"];
 };
 export default class DefaultNotaryDashboard extends React.Component<IProps, IState> {
-	private onWindowResize = () => { };
+	private onWindowResize = () => {};
 	public static defaultProps = {
 		scrollTop: 0,
 	};
@@ -49,16 +49,19 @@ export default class DefaultNotaryDashboard extends React.Component<IProps, ISta
 	}
 
 	public override render(): JSX.Element {
-
 		return (
 			<div className={classes["root"]}>
 				<Header isUserConnected={true} />
 				<div className={classes["content"]}>
 					<div className={classNames(classes["left-side"], this.state.isLeftSideOpen && classes["opened"])}>
-						<FolderListContainer folders={this.state.folders} onSelectedFolder={this.props.onSelectedFolder} onCloseLeftSide={this.onCloseLeftSide} />
+						<FolderListContainer
+							folders={this.state.folders}
+							onSelectedFolder={this.props.onSelectedFolder}
+							onCloseLeftSide={this.onCloseLeftSide}
+						/>
 					</div>
 					<div className={classNames(classes["closable-left-side"])}>
-						<Image alt='open side menu' src={chevronIcon} className={classes["chevron-icon"]} onClick={this.onOpenLeftSide} />
+						<Image alt="open side menu" src={chevronIcon} className={classes["chevron-icon"]} onClick={this.onOpenLeftSide} />
 					</div>
 					<div className={classes["right-side"]}>{this.props.children}</div>
 				</div>
@@ -68,9 +71,7 @@ export default class DefaultNotaryDashboard extends React.Component<IProps, ISta
 	}
 
 	public override componentDidMount(): void {
-		this.onWindowResize = WindowStore.getInstance().onResize((window) =>
+		this.onWindowResize = WindowStore.getInstance().onResize((window) => this.onResize(window));
-			this.onResize(window)
-		);
 	}
 	public override componentWillUnmount() {
 		this.onWindowResize();

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

@@ -2,7 +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';
+import "reflect-metadata";
 
 type IProps = {
 	title: string;

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

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

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

@@ -9,6 +9,7 @@ import { ActionMeta, MultiValue } from "react-select";
 import { IOption } from "@Front/Components/DesignSystem/Select";
 import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
 import Form from "@Front/Components/DesignSystem/Form";
+import ChevonIcon from "@Assets/icons/chevron.svg";
 
 type IProps = {};
 type IState = {
@@ -17,7 +18,7 @@ type IState = {
 	isNewClientSelected: boolean;
 	hasNewClientSelected: boolean;
 };
-export default class AddClientToFolder extends BasePage<IProps, IState>{
+export default class AddClientToFolder extends BasePage<IProps, IState> {
 	constructor(props: IProps) {
 		super(props);
 		this.state = {
@@ -41,10 +42,16 @@ export default class AddClientToFolder extends BasePage<IProps, IState>{
 		return (
 			<DefaultNotaryDashboard title={"Ajouter client(s)"} onSelectedFolder={this.onSelectedFolder}>
 				<div className={classes["root"]}>
+					<Button icon={ChevonIcon} variant={EButtonVariant.LINE}>
+						Retour
+					</Button>
 					<Typography typo={ITypo.H1Bis}>Associer un ou plusieurs client(s)</Typography>
 					<Form>
 						<div className={classes["radiobox-container"]}>
-							<RadioBox name="client" onChange={this.onExistingClientSelected} defaultChecked={this.state.isExistingClientSelected}>
+							<RadioBox
+								name="client"
+								onChange={this.onExistingClientSelected}
+								defaultChecked={this.state.isExistingClientSelected}>
 								<Typography typo={ITypo.P_ERR_18}>Client existant</Typography>
 							</RadioBox>
 							<RadioBox name="client" onChange={this.onNewClientSelected} defaultChecked={this.state.isNewClientSelected}>
@@ -52,26 +59,30 @@ export default class AddClientToFolder extends BasePage<IProps, IState>{
 							</RadioBox>
 						</div>
 
-
+						{this.state.isExistingClientSelected && (
-						{this.state.isExistingClientSelected && <div className={classes["existing-client"]}>
+							<div className={classes["existing-client"]}>
-							<MultiSelect options={selectOptions} placeholder="Client" onChange={this.onMutiSelectChange} />
+								<MultiSelect options={selectOptions} placeholder="Client" onChange={this.onMutiSelectChange} />
-							<div className={classes["button-container"]}>
+								<div className={classes["button-container"]}>
-								<Button variant={EButtonVariant.GHOST}>Annuler</Button>
+									<Button variant={EButtonVariant.GHOST}>Annuler</Button>
-								<Button disabled={!this.state.hasNewClientSelected ? true : false} type="submit">Associer au dossier</Button>
+									<Button disabled={!this.state.hasNewClientSelected ? true : false} type="submit">
+										Associer au dossier
+									</Button>
+								</div>
 							</div>
-						</div>
+						)}
-						}
 
-						{this.state.isNewClientSelected && <div className={classes["new-client"]}>
+						{this.state.isNewClientSelected && (
-							<InputField name="input field" fakeplaceholder="Nom" />
+							<div className={classes["new-client"]}>
-							<InputField name="input field" fakeplaceholder="Prénom" />
+								<InputField name="input field" fakeplaceholder="Nom" />
-							<InputField name="input field" fakeplaceholder="E-mail" isEmail />
+								<InputField name="input field" fakeplaceholder="Prénom" />
-							<InputField name="input field" fakeplaceholder="Numéro de téléphone" numbersOnly maxLength={10} />
+								<InputField name="input field" fakeplaceholder="E-mail" isEmail />
-							<div className={classes["button-container"]}>
+								<InputField name="input field" fakeplaceholder="Numéro de téléphone" numbersOnly maxLength={10} />
-								<Button variant={EButtonVariant.GHOST}>Annuler</Button>
+								<div className={classes["button-container"]}>
-								<Button type="submit">Associer au dossier</Button>
+									<Button variant={EButtonVariant.GHOST}>Annuler</Button>
+									<Button type="submit">Associer au dossier</Button>
+								</div>
 							</div>
-						</div>}
+						)}
 					</Form>
 				</div>
 			</DefaultNotaryDashboard>

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

@@ -12,7 +12,7 @@
 		display: inline-flex;
 	}
 
-	.folder-conatainer{
+	.folder-conatainer {
-		width: 389px ;
+		width: 389px;
 	}
 }

src/front/Components/Layouts/DesignSystem/dummyData.ts

@@ -1,243 +1,242 @@
 import {
-  Address,
+	Address,
-  Office,
+	Office,
-  DeedType,
+	DeedType,
-  Deed,
+	Deed,
-  OfficeFolder,
+	OfficeFolder,
-  Contact,
+	Contact,
-  Customer,
+	Customer,
-  DocumentType,
+	DocumentType,
-  Document,
+	Document,
-  OfficeFolderHasCustomer,
+	OfficeFolderHasCustomer,
 } from "le-coffre-resources/dist/Notary";
 import { ECustomerStatus } from "le-coffre-resources/dist/Customer/Customer";
 import { EFolderStatus } from "le-coffre-resources/dist/Customer/OfficeFolder";
 
 export const address: Address = {
-  uid: "a&2azedzaa3",
+	uid: "a&2azedzaa3",
-  address: "123",
+	address: "123",
-  city: "France",
+	city: "France",
-  zip_code: 78140,
+	zip_code: 78140,
-  created_at: new Date(),
+	created_at: new Date(),
-  updated_at: new Date(),
+	updated_at: new Date(),
 };
 
 export const office: Office = {
-  uid: "111zdazaefez213",
+	uid: "111zdazaefez213",
-  idNot: "12EE12",
+	idNot: "12EE12",
-  name: "Office 1",
+	name: "Office 1",
-  crpcen: "AZezdz",
+	crpcen: "AZezdz",
-  address: address,
+	address: address,
-  created_at: new Date(),
+	created_at: new Date(),
-  updated_at: new Date(),
+	updated_at: new Date(),
-  office_status: "ACTIVATED",
+	office_status: "ACTIVATED",
 };
 export const deedType: DeedType = {
-  uid: "123azefezgzeg312",
+	uid: "123azefezgzeg312",
-  name: "Acte mariage",
+	name: "Acte mariage",
-  description: "dzsdaf",
+	description: "dzsdaf",
-  archived_at: new Date(),
+	archived_at: new Date(),
-  office: office,
+	office: office,
-  created_at: new Date(),
+	created_at: new Date(),
-  updated_at: new Date(),
+	updated_at: new Date(),
 };
 
 export const deed: Deed = {
-  uid: "zegefzeferg",
+	uid: "zegefzeferg",
-  deed_type: deedType,
+	deed_type: deedType,
-  created_at: new Date(),
+	created_at: new Date(),
-  updated_at: new Date(),
+	updated_at: new Date(),
 };
 
 export const contact: Contact = {
-  uid: "g('yeh(grgrezg",
+	uid: "g('yeh(grgrezg",
-  first_name: "John",
+	first_name: "John",
-  last_name: "Doe",
+	last_name: "Doe",
-  email: "johnDoe@gmail.com",
+	email: "johnDoe@gmail.com",
-  address: address,
+	address: address,
-  created_at: new Date(),
+	created_at: new Date(),
-  updated_at: new Date(),
+	updated_at: new Date(),
-  cell_phone_number: "0132249865",
+	cell_phone_number: "0132249865",
-  phone_number: "0132249865",
+	phone_number: "0132249865",
-  civility: "MALE",
+	civility: "MALE",
 };
 
 export const contact2: Contact = {
-  uid: "g('yeh(grgrezg",
+	uid: "g('yeh(grgrezg",
-  first_name: "Customer2",
+	first_name: "Customer2",
-  last_name: "Doe",
+	last_name: "Doe",
-  email: "johnDoe@gmail.com",
+	email: "johnDoe@gmail.com",
-  address: address,
+	address: address,
-  created_at: new Date(),
+	created_at: new Date(),
-  updated_at: new Date(),
+	updated_at: new Date(),
-  cell_phone_number: "0132249865",
+	cell_phone_number: "0132249865",
-  phone_number: "0132249865",
+	phone_number: "0132249865",
-  civility: "MALE",
+	civility: "MALE",
 };
 
 export const docType: DocumentType = {
-  name: "Acte de naissance",
+	name: "Acte de naissance",
-  uid: "fezezfazegezrgrezg",
+	uid: "fezezfazegezrgrezg",
-  created_at: new Date(),
+	created_at: new Date(),
-  updated_at: new Date(),
+	updated_at: new Date(),
-  public_description: "Acte de naissance public description",
+	public_description: "Acte de naissance public description",
-  private_description: "Acte de naissance private description",
+	private_description: "Acte de naissance private description",
-  archived_at: new Date(),
+	archived_at: new Date(),
 };
 export const customer: Customer = {
-  uid: "erhtgerfzeare",
+	uid: "erhtgerfzeare",
-  contact: contact,
+	contact: contact,
-  created_at: new Date(),
+	created_at: new Date(),
-  updated_at: new Date(),
+	updated_at: new Date(),
-  status: ECustomerStatus.VALIDATED,
+	status: ECustomerStatus.VALIDATED,
 };
 export const folder: OfficeFolder = {
-  uid: "zfaefergregrezterf",
+	uid: "zfaefergregrezterf",
-  folder_number: "12331",
+	folder_number: "12331",
-  name: "Mon dossier",
+	name: "Mon dossier",
-  status: EFolderStatus.ARCHIVED,
+	status: EFolderStatus.ARCHIVED,
-  deed: deed,
+	deed: deed,
-  office: office,
+	office: office,
-  created_at: new Date(),
+	created_at: new Date(),
-  updated_at: new Date(),
+	updated_at: new Date(),
-  description: "Description",
+	description: "Description",
-  archived_description: "Archived description",
+	archived_description: "Archived description",
 };
 
 export const document: Document = {
-  uid: "fzeafergreztyzgrf",
+	uid: "fzeafergreztyzgrf",
-  depositor: customer,
+	depositor: customer,
-  document_status: "ASKED",
+	document_status: "ASKED",
-  folder: folder,
+	folder: folder,
-  document_type: docType,
+	document_type: docType,
-  updated_at: new Date(),
+	updated_at: new Date(),
-  created_at: new Date(),
+	created_at: new Date(),
 };
 
 export const documentPending: Document = {
-  uid: "fzefeazdagrtetrury",
+	uid: "fzefeazdagrtetrury",
-  depositor: customer,
+	depositor: customer,
-  document_status: "PENDING",
+	document_status: "PENDING",
-  folder: folder,
+	folder: folder,
-  document_type: docType,
+	document_type: docType,
-  updated_at: new Date(),
+	updated_at: new Date(),
-  created_at: new Date(),
+	created_at: new Date(),
 };
 
 export const documentDeposited: Document = {
-  uid: "uè§u§htfgrthytrgr",
+	uid: "uè§u§htfgrthytrgr",
-  depositor: customer,
+	depositor: customer,
-  document_status: "VALIDATED",
+	document_status: "VALIDATED",
-  folder: folder,
+	folder: folder,
-  document_type: docType,
+	document_type: docType,
-  updated_at: new Date(),
+	updated_at: new Date(),
-  created_at: new Date(),
+	created_at: new Date(),
 };
 
 export const customer2: Customer = {
-  uid: "yregrgetergrt",
+	uid: "yregrgetergrt",
-  contact: contact2,
+	contact: contact2,
-  created_at: new Date(),
+	created_at: new Date(),
-  updated_at: new Date(),
+	updated_at: new Date(),
-  status: ECustomerStatus.VALIDATED,
+	status: ECustomerStatus.VALIDATED,
-  documents: [document, documentPending, documentDeposited, ],
+	documents: [document, documentPending, documentDeposited],
 };
 
 export const folderWithPendingDocument: OfficeFolder = {
-  uid: "ferzferzfezeefzdd",
+	uid: "ferzferzfezeefzdd",
-  folder_number: "00001",
+	folder_number: "00001",
-  name: "Mon dossier",
+	name: "Mon dossier",
-  status: EFolderStatus.ARCHIVED,
+	status: EFolderStatus.ARCHIVED,
-  deed: deed,
+	deed: deed,
-  office: office,
+	office: office,
-  created_at: new Date(),
+	created_at: new Date(),
-  updated_at: new Date(),
+	updated_at: new Date(),
-  description: "Description",
+	description: "Description",
-  archived_description: "Archived description",
+	archived_description: "Archived description",
-  documents: [document, documentPending, documentDeposited],
+	documents: [document, documentPending, documentDeposited],
 };
 export const folderWithPendingDocument1: OfficeFolder = {
-  uid: "gtrtyutyhretgytu",
+	uid: "gtrtyutyhretgytu",
-  folder_number: "00002",
+	folder_number: "00002",
-  name: "Mon dossier",
+	name: "Mon dossier",
-  status: EFolderStatus.ARCHIVED,
+	status: EFolderStatus.ARCHIVED,
-  deed: deed,
+	deed: deed,
-  office: office,
+	office: office,
-  created_at: new Date(),
+	created_at: new Date(),
-  updated_at: new Date(),
+	updated_at: new Date(),
-  description: "Description",
+	description: "Description",
-  archived_description: "Archived description",
+	archived_description: "Archived description",
-  documents: [documentDeposited],
+	documents: [documentDeposited],
 };
 export const folderWithPendingDocument2: OfficeFolder = {
-  uid: "adzefzefsfrefzrtgtr",
+	uid: "adzefzefsfrefzrtgtr",
-  folder_number: "00003",
+	folder_number: "00003",
-  name: "Mon dossier",
+	name: "Mon dossier",
-  status: EFolderStatus.ARCHIVED,
+	status: EFolderStatus.ARCHIVED,
-  deed: deed,
+	deed: deed,
-  office: office,
+	office: office,
-  created_at: new Date(),
+	created_at: new Date(),
-  updated_at: new Date(),
+	updated_at: new Date(),
-  description: "Description",
+	description: "Description",
-  archived_description: "Archived description",
+	archived_description: "Archived description",
-  documents: [document],
+	documents: [document],
 };
 
 export const officeFolderHasCustomer1: OfficeFolderHasCustomer = {
-  uid: "ferzfergrzeyerezrz",
+	uid: "ferzfergrzeyerezrz",
-  customer: customer,
+	customer: customer,
-  office_folder: folderWithPendingDocument,
+	office_folder: folderWithPendingDocument,
-  created_at: new Date(),
+	created_at: new Date(),
-  updated_at: new Date(),
+	updated_at: new Date(),
 };
 
 export const officeFolderHasCustomer2: OfficeFolderHasCustomer = {
-  uid: "tezrfzdfgrggeerry",
+	uid: "tezrfzdfgrggeerry",
-  customer: customer2,
+	customer: customer2,
-  office_folder: folderWithPendingDocument,
+	office_folder: folderWithPendingDocument,
-  created_at: new Date(),
+	created_at: new Date(),
-  updated_at: new Date(),
+	updated_at: new Date(),
 };
 
 export const document8: Document = {
-  uid: "eztreggrgbyunjukhg",
+	uid: "eztreggrgbyunjukhg",
-  depositor: customer,
+	depositor: customer,
-  document_status: "ASKED",
+	document_status: "ASKED",
-  folder: folderWithPendingDocument,
+	folder: folderWithPendingDocument,
-  document_type: docType,
+	document_type: docType,
-  updated_at: new Date(),
+	updated_at: new Date(),
-  created_at: new Date(),
+	created_at: new Date(),
 };
 
 export const folderWithPendingDocument3: OfficeFolder = {
-  uid: "mkovrijvrezviev",
+	uid: "mkovrijvrezviev",
-  folder_number: "00014",
+	folder_number: "00014",
-  name: "Mon dossier",
+	name: "Mon dossier",
-  status: EFolderStatus.ARCHIVED,
+	status: EFolderStatus.ARCHIVED,
-  deed: deed,
+	deed: deed,
-  office: office,
+	office: office,
-  created_at: new Date(),
+	created_at: new Date(),
-  updated_at: new Date(),
+	updated_at: new Date(),
-  description: "Description",
+	description: "Description",
-  archived_description: "Archived description",
+	archived_description: "Archived description",
-  documents: [document, documentDeposited, documentPending],
+	documents: [document, documentDeposited, documentPending],
-  office_folder_has_customers: [officeFolderHasCustomer1, officeFolderHasCustomer2],
+	office_folder_has_customers: [officeFolderHasCustomer1, officeFolderHasCustomer2],
 };
 
 export const document2: Document = {
-  uid: "mejfihruehfoire",
+	uid: "mejfihruehfoire",
-  depositor: customer,
+	depositor: customer,
-  document_status: "ASKED",
+	document_status: "ASKED",
-  folder: folderWithPendingDocument3,
+	folder: folderWithPendingDocument3,
-  document_type: docType,
+	document_type: docType,
-  updated_at: new Date(),
+	updated_at: new Date(),
-  created_at: new Date(),
+	created_at: new Date(),
 };
 
-
 export const folders: OfficeFolder[] = [
-  folderWithPendingDocument,
+	folderWithPendingDocument,
-  folderWithPendingDocument1,
+	folderWithPendingDocument1,
-  folderWithPendingDocument2,
+	folderWithPendingDocument2,
-  folderWithPendingDocument3,
+	folderWithPendingDocument3,
 ];

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

@@ -13,7 +13,7 @@ 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, folders } 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";
@@ -28,7 +28,6 @@ type IState = {
 type IProps = {};
 
 export default class DesignSystem extends BasePage<IProps, IState> {
-
 	constructor(props: IProps) {
 		super(props);
 		this.state = {
@@ -39,18 +38,15 @@ export default class DesignSystem extends BasePage<IProps, IState> {
 		this.onSelectedOption = this.onSelectedOption.bind(this);
 	}
 
-
 	public override render(): JSX.Element {
-
 		const selectOptions: IOption[] = [
 			{ value: "1", label: "Divorce" },
 			{ value: "2", label: "Succession" },
 			{ value: "3", label: "Vente immobilière" },
-		]
+		];
 		return (
 			<DefaultTemplate title={"HomePage"}>
 				<div className={classes["root"]}>
-
 					<div className={classes["section"]}>
 						<div className={classes["sub-section"]}>
 							<Typography typo={ITypo.H1}>Website design System</Typography>
@@ -174,7 +170,6 @@ export default class DesignSystem extends BasePage<IProps, IState> {
 							</div>
 						</div>
 						<div className={classes["sub-section"]}>
-
 							<Typography typo={ITypo.P_16}>Folder with document waiting for being validate</Typography>
 							<div className={classes["folder-conatainer"]}>
 								<FolderContainer folder={folderWithPendingDocument} />
@@ -188,7 +183,12 @@ export default class DesignSystem extends BasePage<IProps, IState> {
 						</div>
 						<div className={classes["sub-section"]}>
 							<div className={classes["folder-conatainer"]}>
-								<Select options={selectOptions} onChange={this.onSelectedOption} placeholder={"Type d’acte"} selectedOption={this.state.selectedOption} />
+								<Select
+									options={selectOptions}
+									onChange={this.onSelectedOption}
+									placeholder={"Type d’acte"}
+									selectedOption={this.state.selectedOption}
+								/>
 							</div>
 						</div>
 					</div>
@@ -236,7 +236,6 @@ export default class DesignSystem extends BasePage<IProps, IState> {
 						</div>
 					</div>
 
-
 					<div className={classes["section"]}>
 						<div className={classes["sub-section"]}>
 							<Typography typo={ITypo.H3}>Document SearchBar</Typography>
@@ -254,8 +253,6 @@ export default class DesignSystem extends BasePage<IProps, IState> {
 							<FolderList folders={folders} />
 						</div>
 					</div>
-
-
 				</div>
 			</DefaultTemplate>
 		);

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

@@ -1,72 +1,72 @@
 @import "@Themes/constants.scss";
 
 .root {
-    display: flex;
+	display: flex;
-    align-items: center;
+	align-items: center;
-    flex-direction: column;
+	flex-direction: column;
-    min-height: 100%;
+	min-height: 100%;
 
-    .no-folder-selected {
+	.no-folder-selected {
-        width: 100%;
+		width: 100%;
 
-        .choose-a-folder {
+		.choose-a-folder {
-            margin-top: 96px;
+			margin-top: 96px;
-            text-align: center;
+			text-align: center;
-        }
+		}
-    }
+	}
 
-    .folder-informations {
+	.folder-informations {
-        width: 100%;
+		width: 100%;
-        min-height: 100%;
+		min-height: 100%;
-        display: flex;
+		display: flex;
-        justify-content: space-between;
+		justify-content: space-between;
-        align-items: center;
+		align-items: center;
-        flex-direction: column;
+		flex-direction: column;
-        flex-grow: 1;
+		flex-grow: 1;
 
-        .folder-header {
+		.folder-header {
-            width: 100%;
+			width: 100%;
 
-            .header {
+			.header {
-                margin-bottom: 32px;
+				margin-bottom: 32px;
-                width: 100%;
+				width: 100%;
-                display: flex;
+				display: flex;
-                justify-content: space-between;
+				justify-content: space-between;
-                align-items: center;
+				align-items: center;
-                flex-wrap: wrap;
+				flex-wrap: wrap;
-            }
+			}
-        }
+		}
 
-        .second-box {
+		.second-box {
-            margin-top: 24px;
+			margin-top: 24px;
-            margin-bottom: 32px;
+			margin-bottom: 32px;
-        }
+		}
 
-        .progress-bar {
+		.progress-bar {
-            margin-bottom: 32px;
+			margin-bottom: 32px;
-        }
+		}
 
-        .button-container {
+		.button-container {
-            width: 100%;
+			width: 100%;
-            text-align: center;
+			text-align: center;
-            :first-child {
+			:first-child {
-                margin-right: 12px;
+				margin-right: 12px;
-            }
+			}
-            > * {
+			> * {
-                margin: auto;
+				margin: auto;
-            }
+			}
-            @media (max-width: $screen-m) {
+			@media (max-width: $screen-m) {
-                :first-child {
+				:first-child {
-                    margin-right: 0;
+					margin-right: 0;
-                    margin-bottom: 12px;
+					margin-bottom: 12px;
-                }
+				}
-                > * {
+				> * {
-                    width: 100%;
+					width: 100%;
-                }
+				}
-            }
+			}
-        }
+		}
-        .modal-title{
+		.modal-title {
-            margin-bottom: 24px;
+			margin-bottom: 24px;
-        }
+		}
-    }
+	}
-}
+}

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

@@ -15,7 +15,7 @@ type IState = {
 	selectedFolder: IDashBoardFolder | null;
 	isArchivedModalOpen: boolean;
 };
-export default class Folder extends BasePage<IProps, IState>{
+export default class Folder extends BasePage<IProps, IState> {
 	public constructor(props: IProps) {
 		super(props);
 		this.state = {
@@ -70,12 +70,14 @@ export default class Folder extends BasePage<IProps, IState>{
 							</Confirm>
 						</div>
 						: */}
-						<div className={classes["no-folder-selected"]}>
+					<div className={classes["no-folder-selected"]}>
-							<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
+						<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
-							<div className={classes["choose-a-folder"]}>
+						<div className={classes["choose-a-folder"]}>
-								<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>Veuillez sélectionner un dossier.</Typography>
+							<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
-							</div>
+								Veuillez sélectionner un dossier.
+							</Typography>
 						</div>
+					</div>
 				</div>
 			</DefaultNotaryDashboard>
 		);

src/front/Components/Layouts/FolderInformation/ClientSection/classes.module.scss

@@ -1,21 +1,20 @@
 @import "@Themes/constants.scss";
 
 .root {
-    width: 100%;
+	width: 100%;
-    padding-bottom: 32px;
+	padding-bottom: 32px;
-    .no-client{
+	.no-client {
-        display: flex;
+		display: flex;
-        justify-content: center;
+		justify-content: center;
-        align-items: center;
+		align-items: center;
-        flex-direction: column;
+		flex-direction: column;
-        padding: 72px;
+		padding: 72px;
-        .title{
+		.title {
-            margin-bottom: 16px;
+			margin-bottom: 16px;
-        }
+		}
-
+	}
-    }
+	.client {
-    .client{
+		display: grid;
-        display: grid;
+		gap: 32px;
-        gap: 32px;
+	}
-    }
 }

src/front/Components/Layouts/FolderInformation/ClientSection/index.tsx

@@ -14,29 +14,36 @@ type IState = {};
 
 export default class ClientSection extends React.Component<IProps, IState> {
 	public override render(): JSX.Element {
-		return <div className={classes["root"]}>
+		return (
-			{this.doesFolderHaveCustomer() ?
+			<div className={classes["root"]}>
-				<div className={classes["client"]}>
+				{this.doesFolderHaveCustomer() ? (
-					{this.renderCustomerFolders()}
+					<div className={classes["client"]}>{this.renderCustomerFolders()}</div>
-				</div>
+				) : (
-				:
+					<div className={classes["no-client"]}>
-				<div className={classes["no-client"]}>
+						<div className={classes["title"]}>
-					<div className={classes["title"]}>
+							<Typography typo={ITypo.P_18}>Aucun client n’est associé au dossier.</Typography>
-						<Typography typo={ITypo.P_18}>Aucun client n’est associé au dossier.</Typography>
+						</div>
+						<Link href={"/dossier/".concat(this.props.folder.uid).concat("/ajouter-client")}>
+							<Button variant={EButtonVariant.LINE} icon={PlusIcon}>
+								Ajouter un client
+							</Button>
+						</Link>
 					</div>
-					<Link href={"/dossier/".concat(this.props.folder.uid).concat("/ajouter-client")}>
+				)}
-					<Button variant={EButtonVariant.LINE} icon={PlusIcon}>Ajouter un client</Button>
+			</div>
-					</Link>
+		);
-				</div>}
-		</div>;
 	}
 
 	private renderCustomerFolders() {
 		const output = this.props.folder.office_folder_has_customers?.map((folderHasCustomer, key) => {
 			if (!folderHasCustomer.customer) return null;
 			// TODO : Les documents ASKED fonctionne mais les autres documents ne doivcent etre seulement ceux qui correspondent au folder
-			return <div className={classes["user-folder"]} key={folderHasCustomer.customer.uid}><UserFolder folder={this.props.folder} customer={folderHasCustomer.customer} /></div>;
+			return (
-		})
+				<div className={classes["user-folder"]} key={folderHasCustomer.customer.uid}>
+					<UserFolder folder={this.props.folder} customer={folderHasCustomer.customer} />
+				</div>
+			);
+		});
 		return output ?? null;
 	}
 

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

@@ -1,72 +1,72 @@
 @import "@Themes/constants.scss";
 
 .root {
-    display: flex;
+	display: flex;
-    align-items: center;
+	align-items: center;
-    flex-direction: column;
+	flex-direction: column;
-    min-height: 100%;
+	min-height: 100%;
 
-    .no-folder-selected {
+	.no-folder-selected {
-        width: 100%;
+		width: 100%;
 
-        .choose-a-folder {
+		.choose-a-folder {
-            margin-top: 96px;
+			margin-top: 96px;
-            text-align: center;
+			text-align: center;
-        }
+		}
-    }
+	}
 
-    .folder-informations {
+	.folder-informations {
-        width: 100%;
+		width: 100%;
-        min-height: 100%;
+		min-height: 100%;
-        display: flex;
+		display: flex;
-        justify-content: space-between;
+		justify-content: space-between;
-        align-items: center;
+		align-items: center;
-        flex-direction: column;
+		flex-direction: column;
-        flex-grow: 1;
+		flex-grow: 1;
 
-        .folder-header {
+		.folder-header {
-            width: 100%;
+			width: 100%;
 
-            .header {
+			.header {
-                margin-bottom: 32px;
+				margin-bottom: 32px;
-                width: 100%;
+				width: 100%;
-                display: flex;
+				display: flex;
-                justify-content: space-between;
+				justify-content: space-between;
-                align-items: center;
+				align-items: center;
-                flex-wrap: wrap;
+				flex-wrap: wrap;
-            }
+			}
-        }
+		}
 
-        .second-box {
+		.second-box {
-            margin-top: 24px;
+			margin-top: 24px;
-            margin-bottom: 32px;
+			margin-bottom: 32px;
-        }
+		}
 
-        .progress-bar {
+		.progress-bar {
-            margin-bottom: 32px;
+			margin-bottom: 32px;
-        }
+		}
 
-        .button-container {
+		.button-container {
-            width: 100%;
+			width: 100%;
-            text-align: center;
+			text-align: center;
-            :first-child {
+			:first-child {
-                margin-right: 12px;
+				margin-right: 12px;
-            }
+			}
-            > * {
+			> * {
-                margin: auto;
+				margin: auto;
-            }
+			}
-            @media (max-width: $screen-m) {
+			@media (max-width: $screen-m) {
-                :first-child {
+				:first-child {
-                    margin-right: 0;
+					margin-right: 0;
-                    margin-bottom: 12px;
+					margin-bottom: 12px;
-                }
+				}
-                > * {
+				> * {
-                    width: 100%;
+					width: 100%;
-                }
+				}
-            }
+			}
-        }
+		}
-        .modal-title{
+		.modal-title {
-            margin-bottom: 24px;
+			margin-bottom: 24px;
-        }
+		}
-    }
+	}
-}
+}

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

@@ -18,7 +18,7 @@ type IState = {
 	selectedFolder: IDashBoardFolder | null;
 	isArchivedModalOpen: boolean;
 };
-class FolderInformationClass extends BasePage<IPropsClass, IState>{
+class FolderInformationClass extends BasePage<IPropsClass, IState> {
 	public constructor(props: IPropsClass) {
 		super(props);
 		this.state = {
@@ -35,13 +35,14 @@ class FolderInformationClass extends BasePage<IPropsClass, IState>{
 		return (
 			<DefaultNotaryDashboard title={"Dossier"} onSelectedFolder={this.onSelectedFolder}>
 				<div className={classes["root"]}>
-					{this.state.selectedFolder
+					{this.state.selectedFolder ? (
-						?
 						<div className={classes["folder-informations"]}>
 							<div className={classes["folder-header"]}>
 								<div className={classes["header"]}>
 									<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
-									<Button variant={EButtonVariant.LINE} icon={ChevronIcon}>Modifier les collaborateurs</Button>
+									<Button variant={EButtonVariant.LINE} icon={ChevronIcon}>
+										Modifier les collaborateurs
+									</Button>
 								</div>
 								<FolderBoxInformation folder={this.state.selectedFolder} />
 								<div className={classes["second-box"]}>
@@ -56,7 +57,9 @@ class FolderInformationClass extends BasePage<IPropsClass, IState>{
 							{!this.doesFolderHaveCustomer() && <ClientSection folder={this.state.selectedFolder} />}
 
 							<div className={classes["button-container"]}>
-								<Button variant={EButtonVariant.GHOST} onClick={this.openArchivedModal}>Archiver le dossier</Button>
+								<Button variant={EButtonVariant.GHOST} onClick={this.openArchivedModal}>
+									Archiver le dossier
+								</Button>
 								<Button variant={EButtonVariant.SECONDARY}>Supprimer le dossier</Button>
 							</div>
 							<Confirm
@@ -72,13 +75,16 @@ class FolderInformationClass extends BasePage<IPropsClass, IState>{
 								<InputField name="input field" fakeplaceholder="Description" textarea />
 							</Confirm>
 						</div>
-						:
+					) : (
 						<div className={classes["no-folder-selected"]}>
 							<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
 							<div className={classes["choose-a-folder"]}>
-								<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>Veuillez sélectionner un dossier.</Typography>
+								<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
+									Veuillez sélectionner un dossier.
+								</Typography>
 							</div>
-						</div>}
+						</div>
+					)}
 				</div>
 			</DefaultNotaryDashboard>
 		);

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

@@ -1,16 +1,16 @@
 .root {
-    display: flex;
+	display: flex;
-    align-items: center;
+	align-items: center;
-    justify-content: center;
+	justify-content: center;
-    flex-direction: column;
+	flex-direction: column;
 
-    .title {
+	.title {
-        margin: 32px 0;
+		margin: 32px 0;
-        text-align: center;
+		text-align: center;
-    }
+	}
 
-    .forget-password {
+	.forget-password {
-        margin-top: 32px;
+		margin-top: 32px;
-        margin-bottom: 8px;
+		margin-bottom: 8px;
-    }
+	}
-}
+}

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

@@ -9,41 +9,31 @@ import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoub
 import { FrontendVariables } from "@Front/Config/VariablesFront";
 
 export default class LoginClass extends BasePage {
-  public override render(): JSX.Element {
+	public override render(): JSX.Element {
-    return (
+		return (
-      <DefaultDoubleSidePage title={"Login"} image={LandingImage}>
+			<DefaultDoubleSidePage title={"Login"} image={LandingImage}>
-        <div className={classes["root"]}>
+				<div className={classes["root"]}>
-          <Image alt="coffre" src={CoffreIcon} />
+					<Image alt="coffre" src={CoffreIcon} />
-          <Typography typo={ITypo.H1}>
+					<Typography typo={ITypo.H1}>
-            <div className={classes["title"]}>
+						<div className={classes["title"]}>Connexion espace professionnel</div>
-              Connexion espace professionnel
+					</Typography>
-            </div>
+					<Button onClick={this.redirectUserOnConnection}>S’identifier avec ID.not</Button>
-          </Typography>
+					<Typography typo={ITypo.P_18}>
-          <Button onClick={this.redirectUserOnConnection}>
+						<div className={classes["forget-password"]}>Vous n’arrivez pas à vous connecter ?</div>
-            S’identifier avec ID.not
+					</Typography>
-          </Button>
+					<Button variant={EButtonVariant.LINE}>Contacter l’administrateur</Button>
-          <Typography typo={ITypo.P_18}>
+				</div>
-            <div className={classes["forget-password"]}>
+			</DefaultDoubleSidePage>
-              Vous n’arrivez pas à vous connecter ?
+		);
-            </div>
+	}
-          </Typography>
-          <Button variant={EButtonVariant.LINE}>
-            Contacter l’administrateur
-          </Button>
-        </div>
-      </DefaultDoubleSidePage>
-    );
-  }
 
-  private redirectUserOnConnection() {
+	private redirectUserOnConnection() {
-    const variables = FrontendVariables.getInstance();
+		const variables = FrontendVariables.getInstance();
-    const baseFronturl =
+		const baseFronturl =
-      variables.BACK_API_PROTOCOL +
+			variables.BACK_API_PROTOCOL + variables.FRONT_APP_HOST + (variables.FRONT_APP_PORT ? ":" + variables.FRONT_APP_PORT : "");
-      variables.FRONT_APP_HOST +
+		const authorizeEndPoint = variables.IDNOT_AUTHORIZE_ENDPOINT;
-      (variables.FRONT_APP_PORT ? ":" + variables.FRONT_APP_PORT : "");
+		const clientId = variables.IDNOT_CLIENT_ID;
-	const authorizeEndPoint = variables.IDNOT_AUTHORIZE_ENDPOINT;
+		const url = `${authorizeEndPoint}?client_id=${clientId}&redirect_uri=${baseFronturl}/authorized-client&scope=openid,profile,offline_access&response_type=code`;
-	const clientId = variables.IDNOT_CLIENT_ID;
+		window.location.assign(url);
-    const url = `${authorizeEndPoint}?client_id=${clientId}&redirect_uri=${baseFronturl}/authorized-client&scope=openid,profile,offline_access&response_type=code`;
+	}
-    window.location.assign(url);
-  }
 }

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

@@ -1,16 +1,16 @@
 .root {
-    display: flex;
+	display: flex;
-    align-items: center;
+	align-items: center;
-    justify-content: center;
+	justify-content: center;
-    flex-direction: column;
+	flex-direction: column;
 
-    .title {
+	.title {
-        margin: 32px 0;
+		margin: 32px 0;
-        text-align: center;
+		text-align: center;
-    }
+	}
 
-    .forget-password {
+	.forget-password {
-        margin-top: 32px;
+		margin-top: 32px;
-        margin-bottom: 8px;
+		margin-bottom: 8px;
-    }
+	}
-}
+}

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

@@ -14,7 +14,7 @@ import Auth from "@Front/Api/Auth/IdNot";
 import Folder from "../Folder";
 import LoginClass from "../Login";
 
- type IPropsClass = {};
+type IPropsClass = {};
 
 // type IStateClass = {};
 
@@ -76,15 +76,15 @@ export default function LoginCallBack(props: IPropsClass) {
 	const { code } = router.query;
 	if (code) {
 		const getIdNotJwt = async () => {
-		  try {
+			try {
-			const authService = Auth.getInstance();
+				const authService = Auth.getInstance();
-			await authService.getIdnotJwt(code);
+				await authService.getIdnotJwt(code);
-		  } catch (error) {
+			} catch (error) {
-			console.error(error);
+				console.error(error);
-		  }
+			}
 		};
 		getIdNotJwt();
-	  return <Folder {...props} />;
+		return <Folder {...props} />;
 	}
-	return <LoginClass {...props}/>
+	return <LoginClass {...props} />;
-  }
+}

src/front/Config/VariablesFront.ts

@@ -1,30 +1,30 @@
 export class FrontendVariables {
-  private static instance: FrontendVariables;
+	private static instance: FrontendVariables;
 
-  public BACK_API_PROTOCOL!: string;
+	public BACK_API_PROTOCOL!: string;
 
-  public BACK_API_HOST!: string;
+	public BACK_API_HOST!: string;
 
-  public BACK_API_PORT!: string;
+	public BACK_API_PORT!: string;
 
-  public BACK_API_ROOT_URL!: string;
+	public BACK_API_ROOT_URL!: string;
 
-  public BACK_API_VERSION!: string;
+	public BACK_API_VERSION!: string;
 
-  public FRONT_APP_HOST!: string;
+	public FRONT_APP_HOST!: string;
 
-  public FRONT_APP_PORT!: string;
+	public FRONT_APP_PORT!: string;
 
-  public IDNOT_AUTHORIZE_ENDPOINT!: string;
+	public IDNOT_AUTHORIZE_ENDPOINT!: string;
 
-  public IDNOT_CLIENT_ID!: string;
+	public IDNOT_CLIENT_ID!: string;
 
-  private constructor() {}
+	private constructor() {}
 
-  public static getInstance(): FrontendVariables {
+	public static getInstance(): FrontendVariables {
-    if (!this.instance) {
+		if (!this.instance) {
-      this.instance = new this();
+			this.instance = new this();
-    }
+		}
-    return this.instance;
+		return this.instance;
-  }
+	}
 }

src/front/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "v0.4.1"
+	"version": "v0.4.1"
 }

src/pages/_app.tsx

@@ -12,18 +12,30 @@ export type NextPageWithLayout<TProps = Record<string, unknown>, TInitialProps =
 type AppPropsWithLayout = AppProps & {
 	Component: NextPageWithLayout;
 } & {
-	backApiProtocol: string,
+	backApiProtocol: string;
-	backApiHost: string,
+	backApiHost: string;
-	backApiPort: string,
+	backApiPort: string;
-	backApiRootUrl: string,
+	backApiRootUrl: string;
-	backApiVersion: string,
+	backApiVersion: string;
-	frontAppHost: string,
+	frontAppHost: string;
-	frontAppPort: string,
+	frontAppPort: string;
 	idNotAuthorizeEndpoint: string;
 	idNotClientId: string;
 };
 
-const MyApp = (({ Component, pageProps, backApiProtocol, backApiHost, backApiPort, backApiRootUrl, backApiVersion, frontAppHost, frontAppPort, idNotAuthorizeEndpoint, idNotClientId }: AppPropsWithLayout) => {
+const MyApp = (({
+	Component,
+	pageProps,
+	backApiProtocol,
+	backApiHost,
+	backApiPort,
+	backApiRootUrl,
+	backApiVersion,
+	frontAppHost,
+	frontAppPort,
+	idNotAuthorizeEndpoint,
+	idNotClientId,
+}: AppPropsWithLayout) => {
 	const getLayout = Component.getLayout ?? ((page) => <DefaultLayout children={page}></DefaultLayout>);
 
 	FrontendVariables.getInstance().BACK_API_PROTOCOL = backApiProtocol;
@@ -36,7 +48,6 @@ const MyApp = (({ Component, pageProps, backApiProtocol, backApiHost, backApiPor
 	FrontendVariables.getInstance().IDNOT_AUTHORIZE_ENDPOINT = idNotAuthorizeEndpoint;
 	FrontendVariables.getInstance().IDNOT_CLIENT_ID = idNotClientId;
 
-
 	return getLayout(<Component {...pageProps} />);
 }) as AppType;
 
@@ -52,6 +63,6 @@ MyApp.getInitialProps = async () => {
 		idNotAuthorizeEndpoint: process.env["IDNOT_AUTHORIZE_ENDPOINT"],
 		idNotClientId: process.env["IDNOT_CLIENT_ID"],
 	};
-}
+};
 
 export default MyApp;

src/pages/authorized-client.tsx

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