amap/frontend/src/pages/Contracts/index.tsx

import { ActionIcon, Group, Loader, ScrollArea, Stack, Table, Title, Tooltip } from "@mantine/core";
import { t } from "@/config/i18n";
import {
    useDeleteContract,
    useGetAllContractFile,
    useGetContract,
    useGetContracts,
    useGetRecap,
} from "@/services/api";
import { IconDownload, IconTableExport } from "@tabler/icons-react";
import ContractRow from "@/components/Contracts/Row";
import { useLocation, useNavigate, useSearchParams } from "react-router";
import { ContractModal } from "@/components/Contracts/Modal";
import { useCallback, useMemo } from "react";
import { type Contract } from "@/services/resources/contracts";
import ContractsFilters from "@/components/Contracts/Filter";
import { DeleteModal } from "@/components/DeleteModal";

export default function Contracts() {
    const [searchParams, setSearchParams] = useSearchParams();
    const location = useLocation();
    const navigate = useNavigate();
    const getAllContractFilesMutation = useGetAllContractFile();
    const getRecapMutation = useGetRecap();
    const isdownload = location.pathname.includes("/download");
    const isrecap = location.pathname.includes("/export");
    const isDelete = location.pathname.includes("/delete");

    const deleteId = useMemo(() => {
        if (isDelete) {
            return location.pathname.split("/")[3];
        }
        return null;
    }, [location]);

    const closeModal = useCallback(() => {
        navigate(`/dashboard/contracts${searchParams ? `?${searchParams.toString()}` : ""}`);
    }, [navigate, searchParams]);

    const { data: contracts, isPending } = useGetContracts(searchParams);
    const { data: currentContract } = useGetContract(Number(deleteId), {
        enabled: !!deleteId,
    });

    const { data: allContracts } = useGetContracts();
    const deleteContractMutation = useDeleteContract();

    const forms = useMemo(() => {
        if (!allContracts) return [];
        return allContracts
            ?.map((contract: Contract) => contract.form.name)
            .filter((contract, index, array) => array.indexOf(contract) === index);
    }, [allContracts]);

    const onFilterChange = useCallback(
        (values: string[], filter: string) => {
            setSearchParams((prev) => {
                const params = new URLSearchParams(prev);
                params.delete(filter);

                values.forEach((value) => {
                    params.append(filter, value);
                });
                return params;
            });
        },
        [setSearchParams],
    );

    const handleDownloadContracts = useCallback(
        async (id: number) => {
            await getAllContractFilesMutation.mutateAsync(id);
        },
        [getAllContractFilesMutation],
    );

    const handleDownloadRecap = useCallback(
        async (id: number) => {
            await getRecapMutation.mutateAsync(id);
        },
        [getAllContractFilesMutation],
    );

    if (!contracts || isPending)
        return (
            <Group align="center" justify="center" h="80vh" w="100%">
                <Loader color="pink" />
            </Group>
        );

    return (
        <Stack>
            <Group justify="space-between">
                <Title order={2}>{t("all contracts", { capfirst: true })}</Title>
                <Group>
                    <Tooltip label={t("download contracts", { capfirst: true })}>
                        <ActionIcon
                            onClick={(e) => {
                                e.stopPropagation();
                                navigate(
                                    `/dashboard/contracts/download${searchParams ? `?${searchParams.toString()}` : ""}`,
                                );
                            }}
                        >
                            <IconDownload />
                        </ActionIcon>
                    </Tooltip>
                    <Tooltip label={t("download recap", { capfirst: true })}>
                        <ActionIcon
                            disabled={false}
                            onClick={(e) => {
                                e.stopPropagation();
                                navigate(
                                    `/dashboard/contracts/export${searchParams ? `?${searchParams.toString()}` : ""}`,
                                );
                            }}
                        >
                            <IconTableExport />
                        </ActionIcon>
                    </Tooltip>
                </Group>

                <ContractModal
                    opened={isdownload}
                    onClose={closeModal}
                    handleSubmit={handleDownloadContracts}
                />
                <ContractModal
                    opened={isrecap}
                    onClose={closeModal}
                    handleSubmit={handleDownloadRecap}
                />
                <DeleteModal
                    opened={isDelete}
                    onClose={closeModal}
                    handleSubmit={(id: number) => {
                        deleteContractMutation.mutate(id);
                    }}
                    entityType={"contract"}
                    entity={{
                        name: `${currentContract?.form.name} ${currentContract?.firstname} ${currentContract?.lastname}`,
                        id: currentContract?.id || 0,
                    }}
                />
            </Group>
            <ContractsFilters
                forms={forms || []}
                filters={searchParams}
                onFilterChange={onFilterChange}
            />
            <ScrollArea type="auto">
                <Table striped>
                    <Table.Thead>
                        <Table.Tr>
                            <Table.Th>{t("form", { capfirst: true })}</Table.Th>
                            <Table.Th>{t("name", { capfirst: true })}</Table.Th>
                            <Table.Th>{t("email", { capfirst: true })}</Table.Th>
                            <Table.Th>{t("payment method", { capfirst: true })}</Table.Th>
                            <Table.Th>{t("total price", { capfirst: true })}</Table.Th>
                            <Table.Th>{t("actions", { capfirst: true })}</Table.Th>
                        </Table.Tr>
                    </Table.Thead>
                    <Table.Tbody>
                        {contracts.map((contract) => (
                            <ContractRow contract={contract} key={contract.id} />
                        ))}
                    </Table.Tbody>
                </Table>
            </ScrollArea>
        </Stack>
    );
}