✨ filtrer par customer dans l'historique des relances

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

@@ -15,10 +15,11 @@ type IProps = {
 	disabled?: boolean;
 	onSelectionChange?: (option: IOption) => void;
 	selectedOption?: IOption | null;
+	className?: string;
 };
 
 export default function Dropdown(props: IProps) {
-	const { options, placeholder, disabled, onSelectionChange, selectedOption: selectedOptionProps, label } = props;
+	const { options, placeholder, disabled, onSelectionChange, selectedOption: selectedOptionProps, label, className } = props;
 	const [selectedOption, setSelectedOption] = useState<IOption | null>(selectedOptionProps ?? null);
 	const openable = useOpenable({ defaultOpen: false });
 
@@ -40,7 +41,7 @@ export default function Dropdown(props: IProps) {
 			openable={openable}
 			onSelect={handleOnSelect}
 			selectedOptions={selectedOption ? [selectedOption] : []}>
-			<div className={classes["root"]}>
+			<div className={classNames(classes["root"], className)}>
 				{label && (
 					<Typography className={classes["label"]} typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.CONTRAST_DEFAULT}>
 						{label}

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

@@ -13,6 +13,10 @@
 		width: 100%;
 	}
 
+	.customer-filter{
+		width: 472px;
+	}
+
 	@media screen and (max-width: $screen-m) {
 		padding: var(--spacing-3);
 	}

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

@@ -1,17 +1,21 @@
+import Customers from "@Front/Api/LeCoffreApi/Notary/Customers/Customers";
 import DocumentReminders from "@Front/Api/LeCoffreApi/Notary/DocumentReminders/DocumentReminders";
+import Dropdown from "@Front/Components/DesignSystem/Dropdown";
+import { IOption } from "@Front/Components/DesignSystem/Dropdown/DropdownMenu/DropdownOption";
 import Table from "@Front/Components/DesignSystem/Table";
 import { IHead, IRowProps } from "@Front/Components/DesignSystem/Table/MuiTable";
+import Tag, { ETagColor } from "@Front/Components/DesignSystem/Tag";
 import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
 import BackArrow from "@Front/Components/Elements/BackArrow";
 import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
 import Module from "@Front/Config/Module";
+import Customer from "le-coffre-resources/dist/Customer";
+import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
 import { DocumentReminder } from "le-coffre-resources/dist/Notary";
 import { useRouter } from "next/router";
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 
 import classes from "./classes.module.scss";
-import Tag, { ETagColor } from "@Front/Components/DesignSystem/Tag";
-import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
 
 type IProps = {};
 
@@ -36,12 +40,15 @@ const header: readonly IHead[] = [
 
 export default function DocumentsReminderHistory(props: IProps) {
 	const [reminders, setReminders] = useState<DocumentReminder[] | null>(null);
+	const [customers, setCustomers] = useState<Customer[] | null>(null);
+	const [customerOption, setCustomerOption] = useState<IOption | null>(null);
 	const router = useRouter();
 	let { folderUid } = router.query;
 
-	const fetchReminders = useCallback(async () => {
+	const fetchReminders = useCallback(() => {
 		DocumentReminders.getInstance()
 			.get({
+				...(customerOption && customerOption.id !== "tous" && { where: { document: { depositor: { uid: customerOption.id } } } }),
 				include: {
 					document: {
 						include: {
@@ -58,11 +65,49 @@ export default function DocumentsReminderHistory(props: IProps) {
 			})
 			.then((reminders) => setReminders(reminders))
 			.catch((e) => console.warn(e));
-	}, []);
+	}, [customerOption]);
+
+	const fetchCustomers = useCallback(async () => {
+		if (!folderUid) return;
+		Customers.getInstance()
+			.get({
+				where: {
+					office_folders: {
+						some: {
+							uid: folderUid as string,
+						},
+					},
+				},
+			})
+			.then(setCustomers)
+			.catch(console.warn);
+	}, [folderUid]);
+
+	const customersOptions: IOption[] = useMemo(() => {
+		let options = [
+			{
+				id: "tous",
+				label: "Tous",
+			},
+		];
+
+		customers?.forEach((customer) => {
+			options.push({
+				id: customer.uid ?? "",
+				label: `${customer.contact?.first_name} ${customer.contact?.last_name}`,
+			});
+		});
+		return options;
+	}, [customers]);
 
 	useEffect(() => {
 		fetchReminders();
-	}, [fetchReminders]);
+		fetchCustomers();
+	}, [customerOption, customersOptions, fetchCustomers, fetchReminders]);
+
+	const onSelectionChange = useCallback((option: IOption | null) => {
+		setCustomerOption(option ?? null);
+	}, []);
 
 	return (
 		<DefaultTemplate title={"Historique des relances de documents"} isPadding={false}>
@@ -76,6 +121,12 @@ export default function DocumentsReminderHistory(props: IProps) {
 				<Typography typo={ETypo.TITLE_H1} color={ETypoColor.TEXT_PRIMARY}>
 					Historique des relances de documents
 				</Typography>
+				<Dropdown
+					className={classes["customer-filter"]}
+					options={customersOptions}
+					onSelectionChange={onSelectionChange}
+					selectedOption={customerOption ?? customersOptions?.[0]}
+				/>
 				<Table className={classes["table"]} header={header} rows={buildRows(reminders)} />
 			</div>
 		</DefaultTemplate>