add contract storage fix various bugs and translations

2026-02-16 01:23:31 +01:00
parent 627ddfc464
commit be8e32ebed
28 changed files with 1225 additions and 401 deletions
--- a/frontend/src/pages/Contracts/index.tsx
+++ b/frontend/src/pages/Contracts/index.tsx
@@ -0,0 +1,120 @@
+import { ActionIcon, Group, Loader, ScrollArea, Stack, Table, Title, Tooltip } from "@mantine/core";
+import { t } from "@/config/i18n";
+import { useCreateContract, useGetContract, useGetContracts } from "@/services/api";
+import { IconPlus } 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, type ContractInputs } from "@/services/resources/contracts";
+import ContractsFilters from "@/components/Contracts/Filter";
+
+export default function Contracts() {
+    const [searchParams, setSearchParams] = useSearchParams();
+    // const location = useLocation();
+    // const navigate = useNavigate();
+
+    // const isCreate = location.pathname === "/dashboard/contracts/create";
+    // const isEdit = location.pathname.includes("/edit");
+
+    // const editId = useMemo(() => {
+    //     if (isEdit) {
+    //         return location.pathname.split("/")[3];
+    //     }
+    //     return null;
+    // }, [location, isEdit]);
+
+    // const closeModal = useCallback(() => {
+    //     navigate(`/dashboard/contracts${searchParams ? `?${searchParams.toString()}` : ""}`);
+    // }, [navigate, searchParams]);
+
+    const { data: contracts, isPending } = useGetContracts(searchParams);
+    // const { data: currentContract } = useGetContract(Number(editId), {
+    //     enabled: !!editId,
+    // });
+
+    const { data: allContracts } = useGetContracts();
+
+    const forms = useMemo(() => {
+        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],
+    );
+
+    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 referers", { capfirst: true })}</Title>
+                {/* <Tooltip label={t("create contract", { capfirst: true })}>
+                    <ActionIcon
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            navigate(
+                                `/dashboard/contracts/create${searchParams ? `?${searchParams.toString()}` : ""}`,
+                            );
+                        }}
+                    >
+                        <IconPlus />
+                    </ActionIcon>
+                </Tooltip>
+                <ContractModal
+                    key={`${currentContract?.id}_create`}
+                    opened={isCreate}
+                    onClose={closeModal}
+                    handleSubmit={handleCreateContract}
+                />
+                <ContractModal
+                    key={`${currentContract?.id}_edit`}
+                    opened={isEdit}
+                    onClose={closeModal}
+                    currentContract={currentContract}
+                    handleSubmit={handleEditContract}
+                /> */}
+            </Group>
+            <ContractsFilters
+                forms={forms || []}
+                filters={searchParams}
+                onFilterChange={onFilterChange}
+            />
+            <ScrollArea type="auto">
+                <Table striped>
+                    <Table.Thead>
+                        <Table.Tr>
+                            <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("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>
+    );
+}