Refacto/folder information wip 2 (#173)

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

@@ -3,6 +3,9 @@
 .root {
 	cursor: pointer;
 	border-radius: var(--button-icon-button-radius, 8px);
+	display: inline-flex;
+	padding: var(--spacing-sm, 8px);
+	align-items: flex-start;
 
 	svg {
 		width: 24px;

src/front/Components/DesignSystem/Table/MuiTable/index.tsx

@@ -1,5 +1,4 @@
 import InfiniteScroll from "@Front/Components/Elements/InfiniteScroll";
-import { ChevronDownIcon } from "@heroicons/react/20/solid";
 import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
 import TableCell from "@mui/material/TableCell";
@@ -67,7 +66,7 @@ export default function MuiTable(props: IProps) {
 												color={ETypoColor.COLOR_NEUTRAL_600}>
 												{column.title}
 											</Typography>
-											<ChevronDownIcon width={21} />
+											{/* <ChevronDownIcon width={21} /> */}
 										</span>
 									)}
 								</TableCell>

src/front/Components/Layouts/Folder/FolderInformation/ClientView/ClientBox/DeleteCustomerModal/index.tsx

@@ -0,0 +1,39 @@
+import Modal from "@Front/Components/DesignSystem/Modal";
+import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
+import React, { useCallback } from "react";
+
+type IProps = {
+	customerUid: string;
+	isOpen: boolean;
+	onClose?: () => void;
+
+	onDeleteSuccess: (uid: string) => void;
+};
+
+export default function DeleteCustomerModal(props: IProps) {
+	const { isOpen, onClose, customerUid, onDeleteSuccess } = props;
+
+	const onDelete = useCallback(
+		() => onDeleteSuccess(customerUid),
+		// Documents.getInstance()
+		// 	.delete(documentUid)
+		// 	.then(() => onDeleteSuccess(documentUid))
+		// 	.then(onClose)
+		// 	.catch((error) => console.warn(error)),
+		[customerUid, onDeleteSuccess],
+	);
+
+	return (
+		<Modal
+			isOpen={isOpen}
+			onClose={onClose}
+			title={"Êtes-vous sûr de vouloir supprimer ce client du dossier ?"}
+			firstButton={{ text: "Annuler", onClick: onClose }}
+			secondButton={{ text: "Supprimer le client", onClick: onDelete }}>
+			<Typography typo={ETypo.TEXT_MD_light}>
+				Cette action retirera le client de ce dossier. Vous ne pourrez plus récupérer les informations associées à ce client dans ce
+				dossier une fois supprimées.
+			</Typography>
+		</Modal>
+	);
+}

src/front/Components/Layouts/Folder/FolderInformation/ClientView/ClientBox/classes.module.scss

@@ -8,4 +8,11 @@
 	gap: var(--spacing-md, 16px);
 	background: var(--primary-weak-higlight, #e5eefa);
 	min-width: 300px;
+
+	.header{
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		width: 100%;
+	}
 }

src/front/Components/Layouts/Folder/FolderInformation/ClientView/ClientBox/index.tsx

@@ -1,9 +1,12 @@
+import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import IconButton, { EIconButtonVariant } from "@Front/Components/DesignSystem/IconButton";
 import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
+import useOpenable from "@Front/Hooks/useOpenable";
+import { PencilSquareIcon, TrashIcon } from "@heroicons/react/24/outline";
+
 import { ICustomer } from "..";
 import classes from "./classes.module.scss";
-import { PencilSquareIcon, TrashIcon } from "@heroicons/react/24/outline";
+import DeleteCustomerModal from "./DeleteCustomerModal";
-import IconButton, { EIconButtonVariant } from "@Front/Components/DesignSystem/IconButton";
-import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 
 type IProps = {
 	customer: ICustomer;
@@ -12,6 +15,8 @@ type IProps = {
 export default function ClientBox(props: IProps) {
 	const { customer } = props;
 
+	const { isOpen, open, close } = useOpenable();
+
 	return (
 		<div className={classes["root"]}>
 			<div className={classes["header"]}>
@@ -49,9 +54,11 @@ export default function ClientBox(props: IProps) {
 				className={classes["delete-button"]}
 				variant={EButtonVariant.ERROR}
 				styletype={EButtonstyletype.TEXT}
-				rightIcon={<TrashIcon />}>
+				rightIcon={<TrashIcon />}
+				onClick={open}>
 				Supprimer le client
 			</Button>
+			<DeleteCustomerModal isOpen={isOpen} onClose={close} customerUid={customer.uid ?? ""} onDeleteSuccess={() => {}} />
 		</div>
 	);
 }

src/front/Components/Layouts/Folder/FolderInformation/ClientView/DocumentTables/DeleteAskedDocumentModal/index.tsx

@@ -0,0 +1,37 @@
+import Documents from "@Front/Api/LeCoffreApi/Notary/Documents/Documents";
+import Modal from "@Front/Components/DesignSystem/Modal";
+import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
+import React, { useCallback } from "react";
+
+type IProps = {
+	documentUid: string;
+	isOpen: boolean;
+	onClose?: () => void;
+
+	onDeleteSuccess: (uid: string) => void;
+};
+
+export default function DeleteAskedDocumentModal(props: IProps) {
+	const { isOpen, onClose, documentUid, onDeleteSuccess } = props;
+
+	const onDelete = useCallback(
+		() =>
+			Documents.getInstance()
+				.delete(documentUid)
+				.then(() => onDeleteSuccess(documentUid))
+				.then(onClose)
+				.catch((error) => console.warn(error)),
+		[documentUid, onClose, onDeleteSuccess],
+	);
+
+	return (
+		<Modal
+			isOpen={isOpen}
+			onClose={onClose}
+			title={"Êtes-vous sûr de vouloir supprimer cette demande de document ?"}
+			firstButton={{ text: "Annuler", onClick: onClose }}
+			secondButton={{ text: "Supprimer la demande", onClick: onDelete }}>
+			<Typography typo={ETypo.TEXT_MD_light}>Cette action annulera la demande du document en cours.</Typography>
+		</Modal>
+	);
+}

src/front/Components/Layouts/Folder/FolderInformation/ClientView/DocumentTables/index.tsx

@@ -1,16 +1,17 @@
-import Documents from "@Front/Api/LeCoffreApi/Notary/Documents/Documents";
 import CircleProgress from "@Front/Components/DesignSystem/CircleProgress";
 import IconButton from "@Front/Components/DesignSystem/IconButton";
 import Table from "@Front/Components/DesignSystem/Table";
 import { IHead, IRowProps } from "@Front/Components/DesignSystem/Table/MuiTable";
 import Tag, { ETagColor, ETagVariant } from "@Front/Components/DesignSystem/Tag";
 import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
+import useOpenable from "@Front/Hooks/useOpenable";
 import { ArrowDownTrayIcon, EyeIcon, TrashIcon } from "@heroicons/react/24/outline";
 import { Document } from "le-coffre-resources/dist/Customer";
 import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
 import { useCallback, useEffect, useMemo, useState } from "react";
 
 import classes from "./classes.module.scss";
+import DeleteAskedDocumentModal from "./DeleteAskedDocumentModal";
 
 type IProps = {
 	documents: Document[];
@@ -39,20 +40,21 @@ const header: readonly IHead[] = [
 export default function DocumentTables(props: IProps) {
 	const { documents: documentsProps, totalOfDocumentTypes } = props;
 	const [documents, setDocuments] = useState<Document[]>(documentsProps);
+	const [documentUid, setDocumentUid] = useState<string | null>(null);
+
+	const deleteAskedOocumentModal = useOpenable();
 
 	useEffect(() => {
 		setDocuments(documentsProps);
 	}, [documentsProps]);
 
-	const deleteAskedDocument = useCallback(
+	const openDeleteAskedDocumentModal = useCallback(
 		(uid: string | undefined) => {
 			if (!uid) return;
-			return Documents.getInstance()
+			setDocumentUid(uid);
-				.delete(uid)
+			deleteAskedOocumentModal.open();
-				.then(() => setDocuments(documents.filter((document) => document.uid !== uid)))
-				.catch((error) => console.warn(error));
 		},
-		[documents],
+		[deleteAskedOocumentModal],
 	);
 
 	const askDocuments: IRowProps[] = useMemo(
@@ -67,11 +69,11 @@ export default function DocumentTables(props: IProps) {
 							<Tag color={ETagColor.INFO} variant={ETagVariant.SEMI_BOLD} label={document.document_status.toUpperCase()} />
 						),
 						created_at: document.created_at ? new Date(document.created_at).toLocaleDateString() : "_",
-						actions: <IconButton icon={<TrashIcon onClick={() => deleteAskedDocument(document.uid)} />} />,
+						actions: <IconButton icon={<TrashIcon onClick={() => openDeleteAskedDocumentModal(document.uid)} />} />,
 					};
 				})
 				.filter((document) => document !== null) as IRowProps[],
-		[deleteAskedDocument, documents],
+		[documents, openDeleteAskedDocumentModal],
 	);
 
 	const toValidateDocuments: IRowProps[] = useMemo(
@@ -136,7 +138,11 @@ export default function DocumentTables(props: IProps) {
 		[documents],
 	);
 
-	const progressValidated = useMemo(() => validatedDocuments.length / totalOfDocumentTypes, [validatedDocuments, totalOfDocumentTypes]);
+	const progressValidated = useMemo(() => {
+		if (totalOfDocumentTypes === 0) return 100;
+		if (validatedDocuments.length === 0) return 0;
+		return (validatedDocuments.length / totalOfDocumentTypes) * 100;
+	}, [validatedDocuments, totalOfDocumentTypes]);
 
 	return (
 		<div className={classes["root"]}>
@@ -150,6 +156,14 @@ export default function DocumentTables(props: IProps) {
 			{toValidateDocuments.length > 0 && <Table header={header} rows={toValidateDocuments} />}
 			{validatedDocuments.length > 0 && <Table header={header} rows={validatedDocuments} />}
 			{refusedDocuments.length > 0 && <Table header={header} rows={refusedDocuments} />}
+			{documentUid && (
+				<DeleteAskedDocumentModal
+					isOpen={deleteAskedOocumentModal.isOpen}
+					onClose={deleteAskedOocumentModal.close}
+					onDeleteSuccess={(uid: string) => setDocuments(documents.filter((document) => document.uid !== uid))}
+					documentUid={documentUid}
+				/>
+			)}
 		</div>
 	);
 }

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

@@ -1,13 +1,15 @@
 import CircleProgress from "@Front/Components/DesignSystem/CircleProgress";
+import IconButton, { EIconButtonVariant } from "@Front/Components/DesignSystem/IconButton";
 import Tag, { ETagColor } from "@Front/Components/DesignSystem/Tag";
 import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
-import { UserGroupIcon, PencilSquareIcon, ArchiveBoxIcon } from "@heroicons/react/24/outline";
+import Module from "@Front/Config/Module";
+import { ArchiveBoxIcon, PencilSquareIcon, UserGroupIcon } from "@heroicons/react/24/outline";
 import { OfficeFolder } from "le-coffre-resources/dist/Notary";
 import { EDocumentStatus } from "le-coffre-resources/dist/Notary/Document";
+import Link from "next/link";
 import { useCallback } from "react";
 
 import classes from "./classes.module.scss";
-import IconButton, { EIconButtonVariant } from "@Front/Components/DesignSystem/IconButton";
 
 type IProps = {
 	folder: OfficeFolder | null;
@@ -51,11 +53,23 @@ export default function InformationSection(props: IProps) {
 				<div className={classes["progress-container"]}>
 					<CircleProgress percentage={getCompletionNumber()} />
 					<div className={classes["icon-container"]}>
-						<IconButton icon={<UserGroupIcon title="Modifier les collaborateurs" />} variant={EIconButtonVariant.NEUTRAL} />
+						<Link
-						<IconButton
+							href={Module.getInstance()
-							icon={<PencilSquareIcon title="Modifier les informations du dossiers" />}
+								.get()
-							variant={EIconButtonVariant.NEUTRAL}
+								.modules.pages.Folder.pages.EditCollaborators.props.path.replace("[folderUid]", folder?.uid ?? "")}
-						/>
+							title="Modifier les collaborateurs">
+							<IconButton icon={<UserGroupIcon title="Modifier les collaborateurs" />} variant={EIconButtonVariant.NEUTRAL} />
+						</Link>
+						<Link
+							href={Module.getInstance()
+								.get()
+								.modules.pages.Folder.pages.EditInformations.props.path.replace("[folderUid]", folder?.uid ?? "")}
+							title="Modifier les informations du dossiers">
+							<IconButton
+								icon={<PencilSquareIcon title="Modifier les informations du dossiers" />}
+								variant={EIconButtonVariant.NEUTRAL}
+							/>
+						</Link>
 						<IconButton icon={<ArchiveBoxIcon title="Archiver le dossier" />} variant={EIconButtonVariant.ERROR} />
 					</div>
 				</div>