✨ OCR Working with mock

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

@@ -129,4 +129,16 @@
 	&.purple-flash {
 		color: var(--purple-flash);
 	}
+
+	&.green-flash {
+		color: var(--green-flash);
+	}
+
+	&.red-flash {
+		color: var(--red-flash);
+	}
+
+	&.orange-flash {
+		color: var(--orange-flash);
+	}
 }

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

@@ -35,6 +35,9 @@ export enum ITypoColor {
 	GREY = "grey",
 	BLACK = "black",
 	PURPLE_FLASH = "purple-flash",
+	GREEN_FLASH = "green-flash",
+	ORANGE_FLASH = "orange-flash",
+	RED_FLASH = "red-flash",
 }
 
 export default class Typography extends React.Component<IProps, IState> {

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

@@ -48,6 +48,7 @@ export default class UserFolder extends React.Component<IProps, IState> {
 		this.closeComponent = this.closeComponent.bind(this);
 	}
 	public override render(): JSX.Element {
+		console.log(this.props.folder.documents);
 		const documentsAsked: Document[] | null = this.getDocumentsByStatus("ASKED");
 		const otherDocuments: Document[] | null = this.getValidatedAndPendindDocuments();
 		const redirectPath = Module.getInstance()

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

@@ -73,6 +73,17 @@ export const docType: DocumentType = {
 	private_description: "Acte de naissance private description",
 	archived_at: new Date(),
 };
+
+export const identityDocType: DocumentType = {
+	name: "Carte d'identité",
+	uid: "fezezfazegezrgrezg",
+	created_at: new Date(),
+	updated_at: new Date(),
+	public_description: "Carte d'identité public description",
+	private_description: "Carte d'identité private description",
+	archived_at: new Date(),
+};
+
 export const customer: Customer = {
 	uid: "erhtgerfzeare",
 	contact: contact,
@@ -123,6 +134,25 @@ export const fileMock2: File = {
 		"https://minteed-prod-euwest3-s3.s3.eu-west-3.amazonaws.com/Qm_Wq_En1_DCA_8yt_RX_Qx_QFA_9_Fm_ZKZH_Qqb_VH_1_Q_Mnv_G_Jtt1_FS_Xp_2a35a36e19",
 };
 
+export const identityFile: File = {
+	uid: "identity_file_uid",
+	created_at: new Date(),
+	updated_at: new Date(),
+	document: document,
+	file_path: "https://minteed-stg-euwest3-s3.s3.eu-west-3.amazonaws.com/cni_fake_c7259d4923.png"
+};
+
+export const documentIdentity: Document = {
+	uid: "ethrthbkjtrbporjbh",
+	depositor: customer,
+	document_status: "PENDING",
+	folder: folder,
+	document_type: identityDocType,
+	updated_at: new Date(),
+	created_at: new Date(),
+	files: [identityFile],
+};
+
 export const documentPending: Document = {
 	uid: "fzefeazdagrtetrury",
 	depositor: customer,
@@ -151,7 +181,7 @@ export const customer2: Customer = {
 	created_at: new Date(),
 	updated_at: new Date(),
 	status: ECustomerStatus.VALIDATED,
-	documents: [document, documentPending, documentDeposited],
+	documents: [document, documentPending, documentDeposited, documentIdentity],
 };
 
 export const folderWithPendingDocument: OfficeFolder = {
@@ -165,7 +195,7 @@ export const folderWithPendingDocument: OfficeFolder = {
 	updated_at: new Date(),
 	description: "Description",
 	archived_description: "Archived description",
-	documents: [document, documentPending, documentDeposited],
+	documents: [document, documentPending, documentDeposited, documentIdentity],
 };
 export const folderWithPendingDocument1: OfficeFolder = {
 	uid: "gtrtyutyhretgytu",

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

@@ -0,0 +1,37 @@
+@import "@Themes/constants.scss";
+
+.root{
+    background-color: var(--grey-soft);
+    padding: 24px;
+
+    .result-text{
+        color: rgba(0, 0, 0, 0.4);
+    }
+
+    .result-container{
+        display: flex;
+
+        .percentage-container{
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            .dot{
+                width: 11px;
+                height: 11px;
+                border-radius: 50px;
+
+                &[data-color="green-flash"]{
+                    background-color: var(--green-flash);
+                }
+
+                &[data-color="orange-flash"]{
+                    background-color: var(--orange-flash);
+                }
+
+                &[data-color="red-flash"]{
+                    background-color: var(--red-flash);
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,41 @@
+import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
+import React from "react";
+
+import classes from "./classes.module.scss";
+
+type IProps = {
+	percentage: number;
+};
+
+type IState = {};
+
+export default class OcrResult extends React.Component<IProps, IState> {
+	public override render(): JSX.Element | null {
+		return (
+			<div className={classes["root"]}>
+				<Typography typo={ITypo.P_16} className={classes["result-text"]}>
+					Résultat de l'analyse :
+				</Typography>
+				<div className={classes["result-container"]}>
+					<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
+						Document conforme à :&nbsp;
+					</Typography>
+                    <div className={classes["percentage-container"]}>
+                        <Typography typo={ITypo.P_18} color={this.getColor()}>
+                            {this.props.percentage}%
+                        </Typography>
+                        <div className={classes["dot"]} data-color={this.getColor()} />
+                    </div>
+				</div>
+			</div>
+		);
+	}
+
+	private getColor() {
+		if (this.props.percentage > 75) {
+			return ITypoColor.GREEN_FLASH;
+		} else {
+			return ITypoColor.RED_FLASH;
+		}
+	}
+}

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

@@ -31,6 +31,12 @@
 		}
 	}
 
+	.footer{
+		width: fit-content;
+		margin: auto;
+		.ocr-container{
+			margin-top: 42px;
+		}
 		.buttons-container {
 			display: flex;
 			gap: 24px;
@@ -40,6 +46,7 @@
 				flex-direction: column-reverse;
 			}
 		}
+	}
 
 	.refuse-document-container {
 		.refuse-text {

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

@@ -1,5 +1,3 @@
-import "reflect-metadata";
-
 import LeftArrowIcon from "@Assets/Icons/left-arrow.svg";
 import RightArrowIcon from "@Assets/Icons/right-arrow.svg";
 import ValidateAnchoringGif from "@Front/Assets/images/validate_anchoring.gif";
@@ -18,7 +16,9 @@ import React from "react";
 
 import BasePage from "../../Base";
 import classes from "./classes.module.scss";
+import OcrResult from "./OcrResult";
 
+import "reflect-metadata";
 
 type IProps = {};
 type IPropsClass = {
@@ -93,6 +93,13 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 								</div>
 							)}
 						</div>
+						<div className={classes["footer"]}>
+							{this.props.selectedDocument?.document_type.name === "Carte d'identité" && (
+								<div className={classes["ocr-container"]}>
+									<OcrResult percentage={this.getRandomPercentageForOcr()} />
+								</div>
+							)}
+
 							<div className={classes["buttons-container"]}>
 								{this.props.selectedDocument?.document_status === "PENDING" && (
 									<>
@@ -109,6 +116,7 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 									</a>
 								)}
 							</div>
+						</div>
 						<Confirm
 							isOpen={this.state.isValidateModalVisible}
 							onClose={this.closeModals}
@@ -175,6 +183,22 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 		});
 	}
 
+	private getRandomPercentageForOcr() {
+		// find diff
+		let difference = 100 - 90;
+
+		// generate random number
+		let rand = Math.random();
+
+		// multiply with difference
+		rand = Math.floor(rand * difference);
+
+		// add with min value
+		rand = rand + 90;
+
+		return rand;
+	}
+
 	private goToPrevious() {
 		const index = this.state.selectedFileIndex - 1;
 		if (this.hasPrevious()) {