add logout logic and wip recap

frontend/src/pages/Contracts/index.tsx

@@ -1,7 +1,7 @@
 import { ActionIcon, Group, Loader, ScrollArea, Stack, Table, Title, Tooltip } from "@mantine/core";
 import { t } from "@/config/i18n";
-import { useGetAllContractFile, useGetContracts } from "@/services/api";
-import { IconDownload } from "@tabler/icons-react";
+import { useGetAllContractFile, 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";
@@ -14,7 +14,9 @@ export default function Contracts() {
     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 closeModal = useCallback(() => {
         navigate(`/dashboard/contracts${searchParams ? `?${searchParams.toString()}` : ""}`);
@@ -52,6 +54,13 @@ export default function Contracts() {
         [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%">
@@ -63,23 +72,45 @@ export default function Contracts() {
         <Stack>
             <Group justify="space-between">
                 <Title order={2}>{t("all contracts", { capfirst: true })}</Title>
-                <Tooltip label={t("download contracts", { capfirst: true })}>
-                    <ActionIcon
-                        onClick={(e) => {
-                            e.stopPropagation();
-                            navigate(
-                                `/dashboard/contracts/download${searchParams ? `?${searchParams.toString()}` : ""}`,
-                            );
-                        }}
+                <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 })}
                     >
-                        <IconDownload />
-                    </ActionIcon>
-                </Tooltip>
+                        <ActionIcon
+                            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}
+                />
             </Group>
             <ContractsFilters
                 forms={forms || []}
@@ -94,6 +125,7 @@ export default function Contracts() {
                             <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>