fix all eslint errors

2026-02-15 11:25:15 +01:00
parent a7b83da149
commit 11b3a926d2
24 changed files with 314 additions and 233 deletions
--- a/frontend/src/components/Forms/Modal/index.tsx
+++ b/frontend/src/components/Forms/Modal/index.tsx
@@ -2,9 +2,9 @@ import { Button, Group, Modal, NumberInput, Select, TextInput, type ModalBasePro
 import { t } from "@/config/i18n";
 import { DatePickerInput } from "@mantine/dates";
 import { IconCancel, IconEdit, IconPlus } from "@tabler/icons-react";
-import { getProductors, getUsers } from "@/services/api";
+import { useGetProductors, useGetUsers } from "@/services/api";
 import { useForm } from "@mantine/form";
-import { useEffect, useMemo } from "react";
+import { useMemo } from "react";
 import type { Form, FormInputs } from "@/services/resources/forms";

 export type FormModalProps = ModalBaseProps & {
@@ -18,18 +18,18 @@ export default function FormModal({
    currentForm, 
    handleSubmit
 }: FormModalProps) {
-    const {data: productors} = getProductors();
-    const {data: users} = getUsers();
+    const {data: productors} = useGetProductors();
+    const {data: users} = useGetUsers();

    const form = useForm<FormInputs>({
        initialValues: {
-            name: "",
-            season: "",
-            start: null,
-            end: null,
-            productor_id: "",
-            referer_id: "",
-            minimum_shipment_value: null,
+            name: currentForm?.name ?? "",
+            season: currentForm?.season ?? "",
+            start: currentForm?.start ?? null,
+            end: currentForm?.end ?? null,
+            productor_id: currentForm?.productor?.id.toString() ?? "",
+            referer_id: currentForm?.referer?.id.toString() ?? "",
+            minimum_shipment_value: currentForm?.minimum_shipment_value ?? null,
        },
        validate: {
            name: (value) =>
@@ -47,25 +47,13 @@ export default function FormModal({
        }
    });

-    useEffect(() => {
-        if (currentForm) {
-            form.setValues({
-                ...currentForm,
-                start: currentForm.start || null,
-                end: currentForm.end || null,
-                productor_id: String(currentForm.productor.id),
-                referer_id: String(currentForm.referer.id)
-            });
-        }
-    }, [currentForm]);
-
    const usersSelect = useMemo(() => {
        return users?.map(user => ({value: String(user.id), label: `${user.name}`}))
-    }, [users])
+    }, [users]);

    const productorsSelect = useMemo(() => {
        return productors?.map(prod => ({value: String(prod.id), label: `${prod.name}`}))
-    }, [productors])
+    }, [productors]);

    return (
        <Modal
--- a/frontend/src/components/Forms/Row/index.tsx
+++ b/frontend/src/components/Forms/Row/index.tsx
@@ -1,6 +1,6 @@
 import { ActionIcon, Table, Tooltip } from "@mantine/core";
 import { useNavigate, useSearchParams } from "react-router";
-import { deleteForm} from "@/services/api";
+import { useDeleteForm} from "@/services/api";
 import { IconEdit, IconX } from "@tabler/icons-react";
 import { t } from "@/config/i18n";
 import type { Form } from "@/services/resources/forms";
@@ -12,8 +12,8 @@ export type FormRowProps = {
 export default function FormRow({
    form, 
 }: FormRowProps) {
-    const [searchParams, _] = useSearchParams();
-    const deleteMutation = deleteForm();
+    const [searchParams] = useSearchParams();
+    const deleteMutation = useDeleteForm();
    const navigate = useNavigate();

    return (
--- a/frontend/src/components/Productors/Modal/index.tsx
+++ b/frontend/src/components/Productors/Modal/index.tsx
@@ -3,7 +3,6 @@ import { t } from "@/config/i18n";
 import { useForm } from "@mantine/form";
 import { IconCancel } from "@tabler/icons-react";
 import { PaymentMethods, type Productor, type ProductorInputs } from "@/services/resources/productors";
-import { useEffect } from "react";

 export type ProductorModalProps = ModalBaseProps & {
    currentProductor?: Productor;
@@ -18,10 +17,10 @@ export function ProductorModal({
 }: ProductorModalProps) {
    const form = useForm<ProductorInputs>({
        initialValues: {
-            name: "",
-            address: "",
-            payment_methods: [],
-            type: "",
+            name: currentProductor?.name ?? "",
+            address: currentProductor?.address ?? "",
+            payment_methods: currentProductor?.payment_methods ?? [],
+            type: currentProductor?.type ?? "",
        },
        validate: {
            name: (value) =>
@@ -33,14 +32,6 @@ export function ProductorModal({
        }
    });
    
-    useEffect(() => {
-        if (currentProductor) {
-            form.setValues({
-                ...currentProductor,
-            });
-        }    
-    }, [currentProductor]);
-    
    return (
        <Modal
            opened={opened}
@@ -128,7 +119,6 @@ export function ProductorModal({
                    aria-label={currentProductor ? t("edit productor", {capfirst: true}) : t("create productor", {capfirst: true})}
                    onClick={() => {
                        form.validate();
-                        console.log(form.getValues())
                        if (form.isValid()) {
                            handleSubmit(form.getValues(), currentProductor?.id)
                        }
--- a/frontend/src/components/Productors/Row/index.tsx
+++ b/frontend/src/components/Productors/Row/index.tsx
@@ -2,7 +2,7 @@ import { ActionIcon, Badge, Table, Tooltip } from "@mantine/core";
 import { t } from "@/config/i18n";
 import { IconEdit, IconX } from "@tabler/icons-react";
 import type { Productor } from "@/services/resources/productors";
-import { deleteProductor } from "@/services/api";
+import { useDeleteProductor } from "@/services/api";
 import { useNavigate, useSearchParams } from "react-router";

 export type ProductorRowProps = {
@@ -12,8 +12,8 @@ export type ProductorRowProps = {
 export default function ProductorRow({
    productor,
 }: ProductorRowProps) {
-    const [searchParams, _] = useSearchParams();
-    const deleteMutation = deleteProductor();
+    const [searchParams] = useSearchParams();
+    const deleteMutation = useDeleteProductor();
    const navigate = useNavigate();

    return (
--- a/frontend/src/components/Products/Modal/index.tsx
+++ b/frontend/src/components/Products/Modal/index.tsx
@@ -2,9 +2,9 @@ import { Button, Group, Modal, NumberInput, Select, TextInput, Title, type Modal
 import { t } from "@/config/i18n";
 import { useForm } from "@mantine/form";
 import { IconCancel } from "@tabler/icons-react";
-import { ProductQuantityUnit, productToProductInputs, ProductUnit, type Product, type ProductInputs } from "@/services/resources/products";
-import { useEffect, useMemo } from "react";
-import { getProductors } from "@/services/api";
+import { ProductQuantityUnit, ProductUnit, type Product, type ProductInputs } from "@/services/resources/products";
+import { useMemo } from "react";
+import { useGetProductors } from "@/services/api";
 import { InputLabel } from "@/components/Label";

 export type ProductModalProps = ModalBaseProps & {
@@ -18,17 +18,17 @@ export function ProductModal({
    currentProduct, 
    handleSubmit
 }: ProductModalProps) {
-    const {data: productors} = getProductors();
+    const {data: productors} = useGetProductors();
    const form = useForm<ProductInputs>({
        initialValues: {
-            name: "",
-            unit: null,
-            price: null,
-            price_kg: null,
-            quantity: null,
-            quantity_unit: null,
-            type: null,
-            productor_id: null,
+            name: currentProduct?.name ?? "",
+            unit: currentProduct?.unit ?? null,
+            price: currentProduct?.price ?? null,
+            price_kg: currentProduct?.price_kg ?? null,
+            quantity: currentProduct?.quantity ?? null,
+            quantity_unit: currentProduct?.quantity_unit ?? null,
+            type: currentProduct?.type ?? null,
+            productor_id: currentProduct ? String(currentProduct.productor.id) : null,
        },
        validate: {
            name: (value) =>
@@ -45,16 +45,10 @@ export function ProductModal({
                !value ? `${t("productor", {capfirst: true})} ${t('is required')}` : null
        },
    });
-
-    useEffect(() => {
-        if (currentProduct) {
-            form.setValues(productToProductInputs(currentProduct));
-        }
-    }, [currentProduct]);
    
    const productorsSelect = useMemo(() => {
        return productors?.map(productor => ({value: String(productor.id), label: `${productor.name}`}))
-    }, [productors])
+    }, [productors]);

    return (
        <Modal
--- a/frontend/src/components/Products/Row/index.tsx
+++ b/frontend/src/components/Products/Row/index.tsx
@@ -2,7 +2,7 @@ import { ActionIcon, Table, Tooltip } from "@mantine/core";
 import { t } from "@/config/i18n";
 import { IconEdit, IconX } from "@tabler/icons-react";
 import { ProductType, ProductUnit, type Product } from "@/services/resources/products";
-import { deleteProduct } from "@/services/api";
+import { useDeleteProduct } from "@/services/api";
 import { useNavigate, useSearchParams } from "react-router";

 export type ProductRowProps = {
@@ -12,8 +12,8 @@ export type ProductRowProps = {
 export default function ProductRow({
    product,
 }: ProductRowProps) {
-    const [searchParams, _] = useSearchParams();
-    const deleteMutation = deleteProduct();
+    const [searchParams] = useSearchParams();
+    const deleteMutation = useDeleteProduct();
    const navigate = useNavigate();

    return (
--- a/frontend/src/components/Shipments/Form/index.tsx
+++ b/frontend/src/components/Shipments/Form/index.tsx
@@ -3,8 +3,8 @@ import type { Shipment } from "@/services/resources/shipments";
 import { ProductForm } from "@/components/Products/Form";
 import type { UseFormReturnType } from "@mantine/form";
 import { useMemo } from "react";
-import { computePrices } from "@/pages/Contract";
 import { t } from "@/config/i18n";
+import { computePrices } from "@/pages/Contract/price";

 export type ShipmentFormProps = {
    inputForm: UseFormReturnType<Record<string, string | number>>;
@@ -27,7 +27,7 @@ export default function ShipmentForm({
                key.split("-")[1] === String(shipment.id)
            );
        return computePrices(values, shipment.products);
-    }, [inputForm, shipment.products]);
+    }, [inputForm, shipment.products, shipment.id]);

    const priceRequirement = useMemo(() => {
        if (!minimumPrice)
--- a/frontend/src/components/Shipments/Modal/index.tsx
+++ b/frontend/src/components/Shipments/Modal/index.tsx
@@ -3,9 +3,9 @@ import { t } from "@/config/i18n";
 import { DatePickerInput } from "@mantine/dates";
 import { IconCancel } from "@tabler/icons-react";
 import { useForm } from "@mantine/form";
-import { useEffect, useMemo } from "react";
-import { shipmentToShipmentInputs, type Shipment, type ShipmentInputs } from "@/services/resources/shipments";
-import { getForms, getProductors, getProducts } from "@/services/api";
+import { useMemo } from "react";
+import { type Shipment, type ShipmentInputs } from "@/services/resources/shipments";
+import { useGetForms, useGetProductors, useGetProducts } from "@/services/api";

 export type ShipmentModalProps = ModalBaseProps & {
    currentShipment?: Shipment;
@@ -20,10 +20,10 @@ export default function ShipmentModal({
 }: ShipmentModalProps) {
    const form = useForm<ShipmentInputs>({
        initialValues: {
-            name: "",
-            date: null,
-            form_id: "",
-            product_ids: []
+            name: currentShipment?.name ?? "",
+            date: currentShipment?.date ?? null,
+            form_id: currentShipment ? String(currentShipment?.form_id) : "",
+            product_ids: currentShipment?.products.map((el) => (String(el.id))) ?? []
        },
        validate: {
            name: (value) =>
@@ -35,18 +35,12 @@ export default function ShipmentModal({
        }
    });

-    useEffect(() => {
-        if (currentShipment) {
-            form.setValues(shipmentToShipmentInputs(currentShipment));
-        }
-    }, [currentShipment]);
+    const { data: allForms } = useGetForms();
+    const { data: allProducts } = useGetProducts(new URLSearchParams("types=1"));
+    const { data: allProductors } = useGetProductors()

-    const { data: allForms } = getForms();
-    const { data: allProducts } = getProducts(new URLSearchParams("types=1"));
-    const { data: allProductors } = getProductors()
-    
    const formsSelect = useMemo(() => {
-        return allForms?.map(form => ({value: String(form.id), label: `${form.name} ${form.season}`}))
+        return allForms?.map(currentForm => ({value: String(currentForm.id), label: `${currentForm.name} ${currentForm.season}`}))
    }, [allForms]);

    const productsSelect = useMemo(() => {
@@ -60,7 +54,7 @@ export default function ShipmentModal({
                    .map((product) => ({value: String(product.id), label: `${product.name}`}))
            }
        });
-    }, [allProducts, form]);
+    }, [allProductors, allProducts]);

    return (
        <Modal
--- a/frontend/src/components/Shipments/Row/index.tsx
+++ b/frontend/src/components/Shipments/Row/index.tsx
@@ -1,6 +1,6 @@
 import { ActionIcon, Table, Tooltip } from "@mantine/core";
 import { useNavigate, useSearchParams } from "react-router";
-import { deleteShipment} from "@/services/api";
+import { useDeleteShipment} from "@/services/api";
 import { IconEdit, IconX } from "@tabler/icons-react";
 import { t } from "@/config/i18n";
 import type { Shipment } from "@/services/resources/shipments";
@@ -12,8 +12,8 @@ export type ShipmentRowProps = {
 export default function ShipmentRow({
    shipment, 
 }: ShipmentRowProps) {
-    const [searchParams, _] = useSearchParams();
-    const deleteMutation = deleteShipment();
+    const [searchParams] = useSearchParams();
+    const deleteMutation = useDeleteShipment();
    const navigate = useNavigate();

    return (
--- a/frontend/src/components/Users/Modal/index.tsx
+++ b/frontend/src/components/Users/Modal/index.tsx
@@ -3,7 +3,6 @@ import { t } from "@/config/i18n";
 import { useForm } from "@mantine/form";
 import { IconCancel } from "@tabler/icons-react";
 import { type User, type UserInputs } from "@/services/resources/users";
-import { useEffect } from "react";

 export type UserModalProps = ModalBaseProps & {
    currentUser?: User;
@@ -18,8 +17,8 @@ export function UserModal({
 }: UserModalProps) {
    const form = useForm<UserInputs>({
        initialValues: {
-            name: "",
-            email: ""
+            name: currentUser?.name ?? "",
+            email: currentUser?.email ?? ""
        },
        validate: {
            name: (value) =>
@@ -29,12 +28,6 @@ export function UserModal({
        }
    });

-    useEffect(() => {
-        if (currentUser) {
-            form.setValues(currentUser);
-        }
-    }, [currentUser]);
-
    return (
        <Modal
            opened={opened}
@@ -72,7 +65,6 @@ export function UserModal({
                    aria-label={currentUser ? t("edit user", {capfirst: true}) : t('create user', {capfirst: true})}
                    onClick={() => {
                        form.validate();
-                        console.log(form.isValid(), form.getValues())
                        if (form.isValid()) {
                            handleSubmit(form.getValues(), currentUser?.id)
                        }
--- a/frontend/src/components/Users/Row/index.tsx
+++ b/frontend/src/components/Users/Row/index.tsx
@@ -1,9 +1,8 @@
 import { ActionIcon, Table, Tooltip } from "@mantine/core";
 import { t } from "@/config/i18n";
 import { IconEdit, IconX } from "@tabler/icons-react";
-import { type User, type UserInputs } from "@/services/resources/users";
-import { UserModal } from "@/components/Users/Modal";
-import { deleteUser, getUser } from "@/services/api";
+import { type User } from "@/services/resources/users";
+import { useDeleteUser } from "@/services/api";
 import { useNavigate, useSearchParams } from "react-router";

 export type UserRowProps = {
@@ -13,8 +12,8 @@ export type UserRowProps = {
 export default function UserRow({
    user,
 }: UserRowProps) {
-    const [searchParams, _] = useSearchParams();
-    const deleteMutation = deleteUser();
+    const [searchParams] = useSearchParams();
+    const deleteMutation = useDeleteUser();
    const navigate = useNavigate();

    return (
--- a/frontend/src/config/i18n.tsx
+++ b/frontend/src/config/i18n.tsx
@@ -1,7 +1,5 @@
-/* eslint-disable @typescript-eslint/no-restricted-imports */
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import i18next from "i18next";
-import LanguageDetector from "i18next-browser-languagedetector";
+// import LanguageDetector from "i18next-browser-languagedetector";
 import { Settings } from "luxon";
 import { initReactI18next } from "react-i18next";

@@ -44,7 +42,7 @@ i18next
 	});


-export function t(message: string, params?: Record<string, any> & {capfirst?: boolean}) {
+export function t(message: string, params?: Record<string, unknown>) {
 	const result = i18next.t(message, params);
 	if (params?.capfirst && typeof result === "string" && result.length) {
 		return result.charAt(0).toUpperCase() + result.slice(1);
--- a/frontend/src/pages/Contract/index.tsx
+++ b/frontend/src/pages/Contract/index.tsx
@@ -1,33 +1,18 @@
 import { ProductForm } from "@/components/Products/Form";
 import ShipmentForm from "@/components/Shipments/Form";
 import { t } from "@/config/i18n";
-import { createContract, getForm } from "@/services/api";
+import { useCreateContract, useGetForm } from "@/services/api";
 import { type Product } from "@/services/resources/products";
 import { Accordion, Button, Group, List, Loader, Overlay, Stack, Text, TextInput, Title } from "@mantine/core";
 import { useForm } from "@mantine/form";
 import { IconMail, IconPhone, IconUser } from "@tabler/icons-react";
 import { useCallback, useMemo, useRef } from "react";
 import { useParams } from "react-router";
-
-export function computePrices(values: [string, any][], products: Product[], nbShipment?: number) {
-    return values.reduce((prev, [key, value]) => {
-        const keyArray = key.split("-");
-        const productId = Number(keyArray[keyArray.length - 1]);
-        const product = products.find((product) => product.id === productId);
-        if (!product) {
-            return prev + 0;
-        }
-        const isRecurent = key.includes("recurrent") && nbShipment;
-        const productPrice = Number(product.price || product.price_kg);
-        const productQuantityUnit = product.unit === "2" ? 1 : 1000;
-        const productQuantity = Number(product.price ? value : value / productQuantityUnit);
-        return(prev + productPrice * productQuantity * (isRecurent ? nbShipment : 1));
-    }, 0);
-}
+import { computePrices } from "./price";

 export function Contract() {
    const { id } = useParams();
-    const { data: form } = getForm(Number(id), {enabled: !!id});
+    const { data: form } = useGetForm(Number(id), {enabled: !!id});
    const inputForm = useForm<Record<string, number | string>>({
        initialValues: {
            firstname: "",
@@ -43,7 +28,7 @@ export function Contract() {
        }
    });

-    const createContractMutation = createContract();
+    const createContractMutation = useCreateContract();

    const productsRecurent = useMemo(() => {
        return form?.productor?.products.filter((el) => el.type === "2")
@@ -65,14 +50,16 @@ export function Contract() {
        return computePrices(values, allProducts, form?.shipments.length);
    }, [inputForm, allProducts, form?.shipments]);

-    const inputRefs: Record<string, React.RefObject<HTMLInputElement | null>> = {
-        firstname: useRef<HTMLInputElement>(null),
-        lastname: useRef<HTMLInputElement>(null),
-        email: useRef<HTMLInputElement>(null),
-        phone: useRef<HTMLInputElement>(null)
-    }
+    const inputRefs = useRef<Record<string, HTMLInputElement | null>>({
+        firstname: null,
+        lastname: null,
+        email: null,
+        phone: null
+    });

    const isShipmentsMinimumValue = useCallback(() => {
+        if (!form)
+            return false;
        const shipmentErrors = form.shipments
            .map((shipment) => {
                const total = computePrices(
@@ -86,9 +73,11 @@ export function Contract() {
            })
            .filter(Boolean);
            return shipmentErrors.length === 0;
-    }, [form]);
+    }, [form, inputForm]);

    const withDefaultValues = useCallback((values: Record<string, number | string>) => {
+        if (!productsRecurent || !form)
+            return {};
        const result = {...values};

        productsRecurent.forEach((product: Product) => {
@@ -111,7 +100,10 @@ export function Contract() {
    }, [productsRecurent, form]);

    const handleSubmit = useCallback(async () => {
-         const errors = inputForm.validate();
+        const errors = inputForm.validate();
+        if (!form) {
+            return;
+        }
        if (inputForm.isValid() && isShipmentsMinimumValue()) {
            const contract = {
                form_id: form.id,
@@ -120,13 +112,13 @@ export function Contract() {
            await createContractMutation.mutateAsync(contract);
        } else {
            const firstErrorField = Object.keys(errors.errors)[0];
-            const ref = inputRefs[firstErrorField];
-            ref?.current?.scrollIntoView({behavior: "smooth", block: "center"});
+            const ref = inputRefs.current[firstErrorField];
+            ref?.scrollIntoView({behavior: "smooth", block: "center"});
        }
-    }, [inputForm, inputRefs, isShipmentsMinimumValue, form]);
+    }, [inputForm, inputRefs, isShipmentsMinimumValue, form, createContractMutation, withDefaultValues]);


-    if (!form) 
+    if (!form || !shipments || !productsRecurent) 
        return (
            <Group 
                align="center"
@@ -155,7 +147,7 @@ export function Contract() {
                    required
                    leftSection={<IconUser/>}
                    {...inputForm.getInputProps('firstname')}
-                    ref={inputRefs.firstname}
+                    ref={(el) => {inputRefs.current.firstname = el}}
                />
                <TextInput
                    label={t("lastname", {capfirst: true})}
@@ -165,7 +157,7 @@ export function Contract() {
                    required
                    leftSection={<IconUser/>}
                    {...inputForm.getInputProps('lastname')}
-                    ref={inputRefs.lastname}
+                    ref={(el) => {inputRefs.current.lastname = el}}
                />
            </Group>
            <Group grow>
@@ -177,7 +169,7 @@ export function Contract() {
                    required
                    leftSection={<IconMail/>}
                    {...inputForm.getInputProps('email')}
-                    ref={inputRefs.email}
+                    ref={(el) => {inputRefs.current.email = el}}
                />
                <TextInput
                    label={t("phone", {capfirst: true})}
@@ -187,7 +179,7 @@ export function Contract() {
                    required
                    leftSection={<IconPhone/>}
                    {...inputForm.getInputProps('phone')}
-                    ref={inputRefs.phone}
+                    ref={(el) => {inputRefs.current.phone = el}}
                />
            </Group>
            <Title order={3}>{t('shipments', {capfirst: true})}</Title>
--- a/frontend/src/pages/Contract/price.ts
+++ b/frontend/src/pages/Contract/price.ts
@@ -0,0 +1,17 @@
+import type { Product } from "@/services/resources/products";
+
+export function computePrices(values: [string, string | number][], products: Product[], nbShipment?: number) {
+    return values.reduce((prev, [key, value]) => {
+        const keyArray = key.split("-");
+        const productId = Number(keyArray[keyArray.length - 1]);
+        const product = products.find((product) => product.id === productId);
+        if (!product) {
+            return prev + 0;
+        }
+        const isRecurent = key.includes("recurrent") && nbShipment;
+        const productPrice = Number(product.price || product.price_kg);
+        const productQuantityUnit = product.unit === "2" ? 1 : 1000;
+        const productQuantity = Number(product.price ? Number(value) : Number(value) / productQuantityUnit);
+        return(prev + productPrice * productQuantity * (isRecurent ? nbShipment : 1));
+    }, 0);
+}
--- a/frontend/src/pages/Forms/index.tsx
+++ b/frontend/src/pages/Forms/index.tsx
@@ -1,5 +1,5 @@
 import { Stack, Loader, Title, Group, ActionIcon, Tooltip, Table, ScrollArea } from "@mantine/core";
-import { createForm, editForm, getForm, getForms } from "@/services/api";
+import { useCreateForm, useEditForm, useGetForm, useGetForms } from "@/services/api";
 import { t } from "@/config/i18n";
 import { useLocation, useNavigate, useSearchParams } from "react-router";
 import { IconPlus } from "@tabler/icons-react";
@@ -24,14 +24,14 @@ export function Forms() {
        return null
    }, [location, isEdit])

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

-    const { isPending, data } = getForms(searchParams);
-    const { data: currentForm } = getForm(Number(editId), { enabled: !!editId });
+    const { isPending, data } = useGetForms(searchParams);
+    const { data: currentForm } = useGetForm(Number(editId), { enabled: !!editId });
    
-    const { data: allForms } = getForms();
+    const { data: allForms } = useGetForms();

    const seasons = useMemo(() => {
        return allForms?.map((form: Form) => (form.season))
@@ -43,8 +43,8 @@ export function Forms() {
            .filter((productor, index, array) => array.indexOf(productor) === index)
    }, [allForms])

-    const createFormMutation = createForm();
-    const editFormMutation = editForm();
+    const createFormMutation = useCreateForm();
+    const editFormMutation = useEditForm();
    
    const handleCreateForm = useCallback(async (form: FormInputs) => {
            if (!form.start || !form.end)
@@ -91,7 +91,7 @@ export function Forms() {

            return params;
        });
-    }, [searchParams, setSearchParams])
+    }, [setSearchParams])


    if (!data || isPending)
@@ -121,6 +121,7 @@ export function Forms() {
                    </ActionIcon>
                </Tooltip>
                <FormModal 
+                    key={`${currentForm?.id}_create`}
                    opened={isCreate} 
                    onClose={closeModal} 
                    handleSubmit={handleCreateForm}
@@ -133,6 +134,7 @@ export function Forms() {
                onFilterChange={onFilterChange}
            />
            <FormModal
+                key={`${currentForm?.id}_edit`}
                opened={isEdit} 
                onClose={closeModal} 
                currentForm={currentForm} 
--- a/frontend/src/pages/Home/index.tsx
+++ b/frontend/src/pages/Home/index.tsx
@@ -1,11 +1,11 @@
 import { Flex, Text } from "@mantine/core";
-import { getForms } from "@/services/api";
+import { useGetForms } from "@/services/api";
 import { FormCard } from "@/components/Forms/Card";
 import type { Form } from "@/services/resources/forms";
 import { t } from "@/config/i18n";

 export function Home() {
-    const { data: allForms } = getForms();
+    const { data: allForms } = useGetForms();

    return (
        <Flex gap="md" wrap="wrap" justify="center">
--- a/frontend/src/pages/Productors/index.tsx
+++ b/frontend/src/pages/Productors/index.tsx
@@ -1,6 +1,6 @@
 import { ActionIcon, Group, Loader, ScrollArea, Stack, Table, Title, Tooltip } from "@mantine/core";
 import { t } from "@/config/i18n";
-import { createProductor, editProductor, getProductor, getProductors } from "@/services/api";
+import { useCreateProductor, useEditProductor, useGetProductor, useGetProductors } from "@/services/api";
 import { IconPlus } from "@tabler/icons-react";
 import ProductorRow from "@/components/Productors/Row";
 import { useLocation, useNavigate, useSearchParams } from "react-router";
@@ -24,13 +24,13 @@ export default function Productors() {
        return null
    }, [location, isEdit])
    
-    const closeModal = () => {
+    const closeModal = useCallback(() => {
        navigate(`/dashboard/productors${searchParams ? `?${searchParams.toString()}` : ""}`);
-    };
+    }, [navigate, searchParams]);

-    const { data: productors, isPending } = getProductors(searchParams);
-    const { data: currentProductor } = getProductor(Number(editId), { enabled: !!editId });
-    const { data: allProductors } = getProductors();
+    const { data: productors, isPending } = useGetProductors(searchParams);
+    const { data: currentProductor } = useGetProductor(Number(editId), { enabled: !!editId });
+    const { data: allProductors } = useGetProductors();

    const names = useMemo(() => {
        return allProductors?.map((productor: Productor) => (productor.name))
@@ -42,8 +42,8 @@ export default function Productors() {
            .filter((productor, index, array) => array.indexOf(productor) === index)
    }, [allProductors])

-    const createProductorMutation = createProductor();
-    const editProductorMutation = editProductor();
+    const createProductorMutation = useCreateProductor();
+    const editProductorMutation = useEditProductor();

    const handleCreateProductor = useCallback(async (productor: ProductorInputs) => {
        await createProductorMutation.mutateAsync({
@@ -72,7 +72,7 @@ export default function Productors() {
            });
            return params;
        });
-    }, [searchParams, setSearchParams])
+    }, [setSearchParams])

    if (!productors || isPending)
        return (
@@ -101,11 +101,13 @@ export default function Productors() {
                    </ActionIcon>
                </Tooltip>
                <ProductorModal
+                    key={`${currentProductor?.id}_create`}
                    opened={isCreate} 
                    onClose={closeModal} 
                    handleSubmit={handleCreateProductor}
                />
                <ProductorModal
+                    key={`${currentProductor?.id}_edit`}
                    opened={isEdit}
                    onClose={closeModal}
                    currentProductor={currentProductor}
--- a/frontend/src/pages/Products/index.tsx
+++ b/frontend/src/pages/Products/index.tsx
@@ -1,6 +1,6 @@
 import { ActionIcon, Group, Loader, ScrollArea, Stack, Table, Title, Tooltip } from "@mantine/core";
 import { t } from "@/config/i18n";
-import { createProduct, editProduct, getProduct, getProducts } from "@/services/api";
+import { useCreateProduct, useEditProduct, useGetProduct, useGetProducts } from "@/services/api";
 import { IconPlus } from "@tabler/icons-react";
 import ProductRow from "@/components/Products/Row";
 import { useLocation, useNavigate, useSearchParams } from "react-router";
@@ -24,13 +24,13 @@ export default function Products() {
        return null
    }, [location, isEdit])

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

-    const { data: products, isPending } = getProducts(searchParams);
-    const { data: currentProduct } = getProduct(Number(editId), { enabled: !!editId });
-    const { data: allProducts } = getProducts();
+    const { data: products, isPending } = useGetProducts(searchParams);
+    const { data: currentProduct } = useGetProduct(Number(editId), { enabled: !!editId });
+    const { data: allProducts } = useGetProducts();

    const names = useMemo(() => {
        return allProducts?.map((product: Product) => (product.name))
@@ -42,8 +42,8 @@ export default function Products() {
            .filter((productor, index, array) => array.indexOf(productor) === index)
    }, [allProducts])

-    const createProductMutation = createProduct();
-    const editProductMutation = editProduct();
+    const createProductMutation = useCreateProduct();
+    const editProductMutation = useEditProduct();

    const handleCreateProduct = useCallback(async (product: ProductInputs) => {
        await createProductMutation.mutateAsync(productCreateFromProductInputs(product));
@@ -70,7 +70,7 @@ export default function Products() {
            });
            return params;
        });
-    }, [searchParams, setSearchParams])
+    }, [setSearchParams])

    if (!products || isPending)
        return (
@@ -99,6 +99,7 @@ export default function Products() {
                    </ActionIcon>
                </Tooltip>
                <ProductModal
+                    key={`${currentProduct?.id}_create`}
                    opened={isCreate} 
                    onClose={closeModal} 
                    handleSubmit={handleCreateProduct}
@@ -111,6 +112,7 @@ export default function Products() {
                onFilterChange={onFilterChange}
            />
            <ProductModal
+                key={`${currentProduct?.id}_edit`}
                opened={isEdit}
                onClose={closeModal}
                currentProduct={currentProduct}
--- a/frontend/src/pages/Shipments/index.tsx
+++ b/frontend/src/pages/Shipments/index.tsx
@@ -1,6 +1,6 @@
 import { ActionIcon, Group, Loader, ScrollArea, Stack, Table, Title, Tooltip } from "@mantine/core";
 import { t } from "@/config/i18n";
-import { createShipment, editShipment, getShipment, getShipments } from "@/services/api";
+import { useCreateShipment, useEditShipment, useGetShipment, useGetShipments } from "@/services/api";
 import { IconPlus } from "@tabler/icons-react";
 import ShipmentRow from "@/components/Shipments/Row";
 import { useLocation, useNavigate, useSearchParams } from "react-router";
@@ -24,13 +24,13 @@ export default function Shipments() {
        return null
    }, [location, isEdit])
    
-    const closeModal = () => {
+    const closeModal = useCallback(() => {
        navigate(`/dashboard/shipments${searchParams ? `?${searchParams.toString()}` : ""}`);
-    };
+    }, [navigate, searchParams]);

-    const { data: shipments, isPending } = getShipments(searchParams);
-    const { data: currentShipment } = getShipment(Number(editId), { enabled: !!editId });
-    const { data: allShipments } = getShipments();
+    const { data: shipments, isPending } = useGetShipments(searchParams);
+    const { data: currentShipment } = useGetShipment(Number(editId), { enabled: !!editId });
+    const { data: allShipments } = useGetShipments();

    const names = useMemo(() => {
        return allShipments?.map((shipment: Shipment) => (shipment.name))
@@ -42,8 +42,8 @@ export default function Shipments() {
            .filter((season, index, array) => array.indexOf(season) === index)
    }, [allShipments])

-    const createShipmentMutation = createShipment();
-    const editShipmentMutation = editShipment();
+    const createShipmentMutation = useCreateShipment();
+    const editShipmentMutation = useEditShipment();

    const handleCreateShipment = useCallback(async (shipment: ShipmentInputs) => {
        await createShipmentMutation.mutateAsync(shipmentCreateFromShipmentInputs(shipment));
@@ -70,7 +70,7 @@ export default function Shipments() {
            });
            return params;
        });
-    }, [searchParams, setSearchParams])
+    }, [setSearchParams])

    if (!shipments || isPending)
        return (
@@ -99,11 +99,13 @@ export default function Shipments() {
                    </ActionIcon>
                </Tooltip>
                <ShipmentModal
+                    key={`${currentShipment?.id}_create`}
                    opened={isCreate} 
                    onClose={closeModal} 
                    handleSubmit={handleCreateShipment}
                />
                <ShipmentModal
+                    key={`${currentShipment?.id}_edit`}
                    opened={isEdit}
                    onClose={closeModal}
                    currentShipment={currentShipment}
--- a/frontend/src/pages/Users/index.tsx
+++ b/frontend/src/pages/Users/index.tsx
@@ -1,6 +1,6 @@
 import { ActionIcon, Group, Loader, ScrollArea, Stack, Table, Title, Tooltip } from "@mantine/core";
 import { t } from "@/config/i18n";
-import { createUser, editUser, getUser, getUsers } from "@/services/api";
+import { useCreateUser, useEditUser, useGetUser, useGetUsers } from "@/services/api";
 import { IconPlus } from "@tabler/icons-react";
 import UserRow from "@/components/Users/Row";
 import { useLocation, useNavigate, useSearchParams } from "react-router";
@@ -24,22 +24,22 @@ export default function Users() {
        return null
    }, [location, isEdit])

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

-    const {data: users, isPending} = getUsers(searchParams);
-    const { data: currentUser } = getUser(Number(editId), { enabled: !!editId });
+    const {data: users, isPending} = useGetUsers(searchParams);
+    const { data: currentUser } = useGetUser(Number(editId), { enabled: !!editId });
    
-    const {data: allUsers } = getUsers();
+    const {data: allUsers } = useGetUsers();

    const names = useMemo(() => {
        return allUsers?.map((user: User) => (user.name))
            .filter((season, index, array) => array.indexOf(season) === index)
    }, [allUsers])

-    const createUserMutation = createUser();
-    const editUserMutation = editUser();
+    const createUserMutation = useCreateUser();
+    const editUserMutation = useEditUser();

    const handleCreateUser = useCallback(async (user: UserInputs) => {
            await createUserMutation.mutateAsync(user);
@@ -66,7 +66,7 @@ export default function Users() {
            });
            return params;
        });
-    }, [searchParams, setSearchParams])
+    }, [setSearchParams])

    if (!users || isPending)
        return (
@@ -95,11 +95,13 @@ export default function Users() {
                    </ActionIcon>
                </Tooltip>
                <UserModal
+                    key={`${currentUser?.id}_create`}
                    opened={isCreate} 
                    onClose={closeModal} 
                    handleSubmit={handleCreateUser}
                />
                <UserModal
+                    key={`${currentUser?.id}_edit`}
                    opened={isEdit}
                    onClose={closeModal}
                    currentUser={currentUser}
--- a/frontend/src/services/api.ts
+++ b/frontend/src/services/api.ts
@@ -1,4 +1,4 @@
-import { useMutation, useQuery, useQueryClient,type UseQueryResult } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient,type DefinedInitialDataOptions,type UseQueryResult } from "@tanstack/react-query";
 import { Config } from "@/config/config";
 import type { Form, FormCreate, FormEditPayload } from "@/services/resources/forms";
 import type { Shipment, ShipmentCreate, ShipmentEditPayload } from "@/services/resources/shipments";
@@ -9,7 +9,7 @@ import type { ContractCreate } from "./resources/contracts";
 import { notifications } from "@mantine/notifications";
 import { t } from "@/config/i18n";

-export function getShipments(filters?: URLSearchParams): UseQueryResult<Shipment[], Error> {
+export function useGetShipments(filters?: URLSearchParams): UseQueryResult<Shipment[], Error> {
    const queryString = filters?.toString()
    return useQuery<Shipment[]>({
        queryKey: ['shipments', queryString],
@@ -20,7 +20,7 @@ export function getShipments(filters?: URLSearchParams): UseQueryResult<Shipment
    });
 }

-export function getShipment(id?: number, options?: any): UseQueryResult<Shipment, Error> {
+export function useGetShipment(id?: number, options?: Partial<DefinedInitialDataOptions<Shipment, Error, Shipment, readonly unknown[]>>): UseQueryResult<Shipment, Error> {
    return useQuery<Shipment>({
        queryKey: ['shipment'],
        queryFn: () => (
@@ -32,7 +32,7 @@ export function getShipment(id?: number, options?: any): UseQueryResult<Shipment
    });
 }

-export function createShipment() {
+export function useCreateShipment() {
    const queryClient = useQueryClient()

    return useMutation({
@@ -52,7 +52,7 @@ export function createShipment() {
            });
            await queryClient.invalidateQueries({ queryKey: ['shipments'] })
        },
-        onError: (error: any) => {
+        onError: (error) => {
            notifications.show({
                title: t("error", {capfirst: true}),
                message: error?.message || t(`error editing shipment`, {capfirst: true}),
@@ -62,7 +62,7 @@ export function createShipment() {
    })
 }

-export function editShipment() {
+export function useEditShipment() {
    const queryClient = useQueryClient()

    return useMutation({
@@ -82,7 +82,7 @@ export function editShipment() {
            });
            await queryClient.invalidateQueries({ queryKey: ['shipments'] })
        },
-        onError: (error: any) => {
+        onError: (error) => {
            notifications.show({
                title: t("error", {capfirst: true}),
                message: error?.message || t(`error editing shipment`, {capfirst: true}),
@@ -92,7 +92,7 @@ export function editShipment() {
    })
 }

-export function deleteShipment() {
+export function useDeleteShipment() {
    const queryClient = useQueryClient()
    return useMutation({
        mutationFn: (id: number) => {
@@ -110,7 +110,7 @@ export function deleteShipment() {
            });
            await queryClient.invalidateQueries({ queryKey: ['shipments'] })
        },
-        onError: (error: any) => {
+        onError: (error) => {
            notifications.show({
                title: t("error", {capfirst: true}),
                message: error?.message || t(`error deleting shipment`, {capfirst: true}),
@@ -120,7 +120,7 @@ export function deleteShipment() {
    });
 }

-export function getProductors(filters?: URLSearchParams): UseQueryResult<Productor[], Error> {
+export function useGetProductors(filters?: URLSearchParams): UseQueryResult<Productor[], Error> {
    const queryString = filters?.toString()
    return useQuery<Productor[]>({
        queryKey: ['productors', queryString],
@@ -131,7 +131,7 @@ export function getProductors(filters?: URLSearchParams): UseQueryResult<Product
    });
 }

-export function getProductor(id?: number, options?: any) {
+export function useGetProductor(id?: number, options?: Partial<DefinedInitialDataOptions<Productor, Error, Productor, readonly unknown[]>>) {
    return useQuery<Productor>({
        queryKey: ['productor'],
        queryFn: () => (
@@ -143,7 +143,7 @@ export function getProductor(id?: number, options?: any) {
    });
 }

-export function createProductor() {
+export function useCreateProductor() {
    const queryClient = useQueryClient()

    return useMutation({
@@ -163,7 +163,7 @@ export function createProductor() {
            });
            await queryClient.invalidateQueries({ queryKey: ['productors'] })
        },
-        onError: (error: any) => {
+        onError: (error) => {
            notifications.show({
                title: t("error", {capfirst: true}),
                message: error?.message || t(`error editing productor`, {capfirst: true}),
@@ -173,7 +173,7 @@ export function createProductor() {
    })
 }

-export function editProductor() {
+export function useEditProductor() {
    const queryClient = useQueryClient()

    return useMutation({
@@ -193,7 +193,7 @@ export function editProductor() {
            });
            await queryClient.invalidateQueries({ queryKey: ['productors'] })
        },
-        onError: (error: any) => {
+        onError: (error) => {
            notifications.show({
                title: t("error", {capfirst: true}),
                message: error?.message || t(`error editing productor`, {capfirst: true}),
@@ -203,7 +203,7 @@ export function editProductor() {
    })
 }

-export function deleteProductor() {
+export function useDeleteProductor() {
    const queryClient = useQueryClient()
    return useMutation({
        mutationFn: (id: number) => {
@@ -221,7 +221,7 @@ export function deleteProductor() {
            });
            await queryClient.invalidateQueries({ queryKey: ['productors'] })
        },
-        onError: (error: any) => {
+        onError: (error) => {
            notifications.show({
                title: t("error", {capfirst: true}),
                message: error?.message || t(`error deleting productor`, {capfirst: true}),
@@ -231,7 +231,7 @@ export function deleteProductor() {
    });
 }

-export function getForm(id?: number, options?: any) {
+export function useGetForm(id?: number, options?: Partial<DefinedInitialDataOptions<Form, Error, Form, readonly unknown[]>>) {
    return useQuery<Form>({
        queryKey: ['form'],
        queryFn: () => (
@@ -243,7 +243,7 @@ export function getForm(id?: number, options?: any) {
    });
 }

-export function getForms(filters?: URLSearchParams): UseQueryResult<Form[], Error> {    
+export function useGetForms(filters?: URLSearchParams): UseQueryResult<Form[], Error> {    
    const queryString = filters?.toString()
    return useQuery<Form[]>({
        queryKey: ['forms', queryString],
@@ -254,7 +254,7 @@ export function getForms(filters?: URLSearchParams): UseQueryResult<Form[], Erro
    });
 }

-export function createForm() {
+export function useCreateForm() {
    const queryClient = useQueryClient()

    return useMutation({
@@ -273,7 +273,7 @@ export function createForm() {
    });
 }

-export function deleteForm() {
+export function useDeleteForm() {
    const queryClient = useQueryClient()
    return useMutation({
        mutationFn: (id: number) => {
@@ -291,7 +291,7 @@ export function deleteForm() {
            });
            await queryClient.invalidateQueries({ queryKey: ['forms'] })
        },
-        onError: (error: any) => {
+        onError: (error) => {
            notifications.show({
                title: t("error", {capfirst: true}),
                message: error?.message || t(`error deleting form`, {capfirst: true}),
@@ -301,7 +301,7 @@ export function deleteForm() {
    });
 }

-export function editForm() {
+export function useEditForm() {
    const queryClient = useQueryClient()

    return useMutation({
@@ -321,7 +321,7 @@ export function editForm() {
            });
            await queryClient.invalidateQueries({ queryKey: ['forms'] })
        },
-        onError: (error: any) => {
+        onError: (error) => {
            notifications.show({
                title: t("error", {capfirst: true}),
                message: error?.message || t(`error editing form`, {capfirst: true}),
@@ -331,7 +331,7 @@ export function editForm() {
    });
 }

-export function getProduct(id?: number, options?: any) {
+export function useGetProduct(id?: number, options?: Partial<DefinedInitialDataOptions<Product, Error, Product, readonly unknown[]>>) {
    return useQuery<Product>({
        queryKey: ['product'],
        queryFn: () => (
@@ -343,7 +343,7 @@ export function getProduct(id?: number, options?: any) {
    });
 }

-export function getProducts(filters?: URLSearchParams): UseQueryResult<Product[], Error> {    
+export function useGetProducts(filters?: URLSearchParams): UseQueryResult<Product[], Error> {    
    const queryString = filters?.toString()
    return useQuery<Product[]>({
        queryKey: ['products', queryString],
@@ -354,7 +354,7 @@ export function getProducts(filters?: URLSearchParams): UseQueryResult<Product[]
    });
 }

-export function createProduct() {
+export function useCreateProduct() {
    const queryClient = useQueryClient()

    return useMutation({
@@ -374,7 +374,7 @@ export function createProduct() {
            });
            await queryClient.invalidateQueries({ queryKey: ['products'] })
        },
-        onError: (error: any) => {
+        onError: (error) => {
            notifications.show({
                title: t("error", {capfirst: true}),
                message: error?.message || t(`error editing product`, {capfirst: true}),
@@ -384,7 +384,7 @@ export function createProduct() {
    });
 }

-export function deleteProduct() {
+export function useDeleteProduct() {
    const queryClient = useQueryClient()
    return useMutation({
        mutationFn: (id: number) => {
@@ -402,7 +402,7 @@ export function deleteProduct() {
            });
            await queryClient.invalidateQueries({ queryKey: ['products'] })
        },
-        onError: (error: any) => {
+        onError: (error) => {
            notifications.show({
                title: t("error", {capfirst: true}),
                message: error?.message || t(`error deleting product`, {capfirst: true}),
@@ -412,7 +412,7 @@ export function deleteProduct() {
    });
 }

-export function editProduct() {
+export function useEditProduct() {
    const queryClient = useQueryClient()

    return useMutation({
@@ -432,7 +432,7 @@ export function editProduct() {
            });
            await queryClient.invalidateQueries({ queryKey: ['products'] })
        },
-        onError: (error: any) => {
+        onError: (error) => {
            notifications.show({
                title: t("error", {capfirst: true}),
                message: error?.message || t(`error editing product`, {capfirst: true}),
@@ -442,7 +442,7 @@ export function editProduct() {
    });
 }

-export function getUser(id?: number, options?: any) {
+export function useGetUser(id?: number, options?: Partial<DefinedInitialDataOptions<User, Error, User, readonly unknown[]>>) {
    return useQuery<User>({
        queryKey: ['user'],
        queryFn: () => (
@@ -454,7 +454,7 @@ export function getUser(id?: number, options?: any) {
    });
 }

-export function getUsers(filters?: URLSearchParams): UseQueryResult<User[], Error> {    
+export function useGetUsers(filters?: URLSearchParams): UseQueryResult<User[], Error> {    
    const queryString = filters?.toString()
    return useQuery<User[]>({
        queryKey: ['users', queryString],
@@ -465,7 +465,7 @@ export function getUsers(filters?: URLSearchParams): UseQueryResult<User[], Erro
    });
 }

-export function createUser() {
+export function useCreateUser() {
    const queryClient = useQueryClient()

    return useMutation({
@@ -485,7 +485,7 @@ export function createUser() {
            });
            await queryClient.invalidateQueries({ queryKey: ['users'] })
        },
-        onError: (error: any) => {
+        onError: (error) => {
            notifications.show({
                title: t("error", {capfirst: true}),
                message: error?.message || t(`error editing user`, {capfirst: true}),
@@ -495,7 +495,7 @@ export function createUser() {
    });
 }

-export function deleteUser() {
+export function useDeleteUser() {
    const queryClient = useQueryClient()
    return useMutation({
        mutationFn: (id: number) => {
@@ -513,7 +513,7 @@ export function deleteUser() {
            });
            await queryClient.invalidateQueries({ queryKey: ['users'] })
        },
-        onError: (error: any) => {
+        onError: (error) => {
            notifications.show({
                title: t("error", {capfirst: true}),
                message: error?.message || t(`error deleting user`, {capfirst: true}),
@@ -523,7 +523,7 @@ export function deleteUser() {
    });
 }

-export function editUser() {
+export function useEditUser() {
    const queryClient = useQueryClient()

    return useMutation({
@@ -543,7 +543,7 @@ export function editUser() {
            });
            await queryClient.invalidateQueries({ queryKey: ['users'] })
        },
-        onError: (error: any) => {
+        onError: (error) => {
            notifications.show({
                title: t("error", {capfirst: true}),
                message: error?.message || t(`error editing user`, {capfirst: true}),
@@ -554,7 +554,7 @@ export function editUser() {
 }


-export function createContract() {
+export function useCreateContract() {
    const queryClient = useQueryClient()

    return useMutation({