add contract storage fix various bugs and translations

frontend/src/components/Contracts/Filter/index.tsx

@@ -0,0 +1,30 @@
+import { Group, MultiSelect } from "@mantine/core";
+import { useMemo } from "react";
+import { t } from "@/config/i18n";
+
+export type ContractFiltersProps = {
+    forms: string[];
+    filters: URLSearchParams;
+    onFilterChange: (values: string[], filter: string) => void;
+};
+
+export default function ContractFilters({ forms, filters, onFilterChange }: ContractFiltersProps) {
+    const defaultNames = useMemo(() => {
+        return filters.getAll("forms");
+    }, [filters]);
+
+    return (
+        <Group>
+            <MultiSelect
+                aria-label={t("filter by form", { capfirst: true })}
+                placeholder={t("filter by form", { capfirst: true })}
+                data={forms}
+                defaultValue={defaultNames}
+                onChange={(values: string[]) => {
+                    onFilterChange(values, "forms");
+                }}
+                clearable
+            />
+        </Group>
+    );
+}

frontend/src/components/Contracts/Modal/index.tsx

@@ -0,0 +1,84 @@
+import { Button, Group, Modal, TextInput, Title, type ModalBaseProps } from "@mantine/core";
+import { t } from "@/config/i18n";
+import { useForm } from "@mantine/form";
+import { IconCancel, IconEdit, IconPlus } from "@tabler/icons-react";
+import { type Contract, type ContractInputs } from "@/services/resources/contracts";
+
+export type ContractModalProps = ModalBaseProps & {
+    currentContract?: Contract;
+    handleSubmit: (contract: ContractInputs, id?: number) => void;
+};
+
+export function ContractModal({
+    opened,
+    onClose,
+    currentContract,
+    handleSubmit,
+}: ContractModalProps) {
+    const form = useForm<ContractInputs>({
+        // initialValues: {
+        //     firstname: currentContract?.firstname ?? "",
+        //     lastname: currentContract?.lastname ?? "",
+        //     email: currentContract?.email ?? "",
+        // },
+        // validate: {
+        //     firstname: (value) =>
+        //         !value ? `${t("name", { capfirst: true })} ${t("is required")}` : null,
+        //     email: (value) =>
+        //         !value ? `${t("email", { capfirst: true })} ${t("is required")}` : null,
+        // },
+    });
+
+    return (
+        <Modal opened={opened} onClose={onClose} title={t("create contract", { capfirst: true })}>
+            <Title order={4}>{t("informations", { capfirst: true })}</Title>
+            <TextInput
+                label={t("contract name", { capfirst: true })}
+                placeholder={t("contract name", { capfirst: true })}
+                radius="sm"
+                withAsterisk
+                {...form.getInputProps("name")}
+            />
+            <TextInput
+                label={t("contract email", { capfirst: true })}
+                placeholder={t("contract email", { capfirst: true })}
+                radius="sm"
+                withAsterisk
+                {...form.getInputProps("email")}
+            />
+            <Group mt="sm" justify="space-between">
+                <Button
+                    variant="filled"
+                    color="red"
+                    aria-label={t("cancel", { capfirst: true })}
+                    leftSection={<IconCancel />}
+                    onClick={() => {
+                        form.clearErrors();
+                        onClose();
+                    }}
+                >
+                    {t("cancel", { capfirst: true })}
+                </Button>
+                <Button
+                    variant="filled"
+                    aria-label={
+                        currentContract
+                            ? t("edit contract", { capfirst: true })
+                            : t("create contract", { capfirst: true })
+                    }
+                    leftSection={currentContract ? <IconEdit /> : <IconPlus />}
+                    onClick={() => {
+                        form.validate();
+                        if (form.isValid()) {
+                            handleSubmit(form.getValues(), currentContract?.id);
+                        }
+                    }}
+                >
+                    {currentContract
+                        ? t("edit contract", { capfirst: true })
+                        : t("create contract", { capfirst: true })}
+                </Button>
+            </Group>
+        </Modal>
+    );
+}

frontend/src/components/Contracts/Row/index.tsx

@@ -0,0 +1,55 @@
+import { ActionIcon, Table, Tooltip } from "@mantine/core";
+import { type Contract } from "@/services/resources/contracts";
+import { IconX } from "@tabler/icons-react";
+import { t } from "@/config/i18n";
+import { useDeleteContract } from "@/services/api";
+
+export type ContractRowProps = {
+    contract: Contract;
+};
+
+export default function ContractRow({ contract }: ContractRowProps) {
+    // const [searchParams] = useSearchParams();
+    const deleteMutation = useDeleteContract();
+    // const navigate = useNavigate();
+
+    return (
+        <Table.Tr key={contract.id}>
+            <Table.Td>
+                {contract.firstname} {contract.lastname}
+            </Table.Td>
+            <Table.Td>{contract.email}</Table.Td>
+            <Table.Td>
+                {contract.cheque_quantity > 0 && contract.cheque_quantity} {contract.payment_method}
+            </Table.Td>
+            <Table.Td>
+                {/* <Tooltip label={t("edit contract", { capfirst: true })}>
+                    <ActionIcon
+                        size="sm"
+                        mr="5"
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            navigate(
+                                `/dashboard/contracts/${contract.id}/edit${searchParams ? `?${searchParams.toString()}` : ""}`,
+                            );
+                        }}
+                    >
+                        <IconEdit />
+                    </ActionIcon>
+                </Tooltip> */}
+                <Tooltip label={t("remove contract", { capfirst: true })}>
+                    <ActionIcon
+                        color="red"
+                        size="sm"
+                        mr="5"
+                        onClick={() => {
+                            deleteMutation.mutate(contract.id);
+                        }}
+                    >
+                        <IconX />
+                    </ActionIcon>
+                </Tooltip>
+            </Table.Td>
+        </Table.Tr>
+    );
+}