fix all eslint errors

frontend/.eslint.cjs

@@ -0,0 +1,104 @@
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+    project: './tsconfig.json', // Required for type-aware rules
+  },
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  plugins: [
+    'react',
+    'react-hooks',
+    '@typescript-eslint',
+    'jsx-a11y',
+    'import',
+    'unused-imports',
+  ],
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:@typescript-eslint/recommended-requiring-type-checking',
+    'plugin:jsx-a11y/recommended',
+    'plugin:import/errors',
+    'plugin:import/warnings',
+    'plugin:import/typescript',
+    'prettier',
+  ],
+  rules: {
+    '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }],
+    '@typescript-eslint/no-explicit-any': 'error',
+    '@typescript-eslint/explicit-function-return-type': ['error', { allowExpressions: false }],
+    '@typescript-eslint/strict-boolean-expressions': 'error',
+    '@typescript-eslint/no-floating-promises': 'error',
+    '@typescript-eslint/consistent-type-imports': ['error', { prefer: 'type-imports' }],
+    '@typescript-eslint/no-misused-promises': 'error',
+    '@typescript-eslint/prefer-readonly': 'error',
+    '@typescript-eslint/explicit-module-boundary-types': 'error',
+    '@typescript-eslint/typedef': [
+      'error',
+      {
+        arrayDestructuring: true,
+        arrowParameter: true,
+        memberVariableDeclaration: true,
+        objectDestructuring: true,
+        parameter: true,
+        propertyDeclaration: true,
+        variableDeclaration: true,
+        variableDeclarationIgnoreFunction: false,
+      },
+    ],
+
+    'react/react-in-jsx-scope': 'off', 
+    'react/prop-types': 'off', 
+    'react/jsx-uses-react': 'off',
+    'react/jsx-uses-vars': 'error',
+    'react/jsx-no-useless-fragment': 'error',
+    'react/self-closing-comp': 'error',
+
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'error',
+
+    'jsx-a11y/no-noninteractive-element-interactions': 'error',
+    'jsx-a11y/anchor-is-valid': 'error',
+    'jsx-a11y/click-events-have-key-events': 'error',
+
+    'import/order': [
+      'error',
+      {
+        groups: [['builtin', 'external'], ['internal', 'parent', 'sibling', 'index']],
+        'newlines-between': 'always',
+        alphabetize: { order: 'asc', caseInsensitive: true },
+      },
+    ],
+    'import/no-unresolved': 'error',
+    'import/no-duplicates': 'error',
+
+    'unused-imports/no-unused-imports-ts': 'error',
+    'no-console': ['warn', { allow: ['warn', 'error'] }],
+    'no-debugger': 'error',
+    'eqeqeq': ['error', 'always'],
+    'curly': 'error',
+    'semi': ['error', 'always'],
+    'quotes': ['error', 'single', { avoidEscape: true }],
+    'prefer-const': 'error',
+    'no-var': 'error',
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+    'import/resolver': {
+      typescript: {},
+    },
+  },
+};

frontend/locales/en.json

@@ -16,6 +16,8 @@
     "kilo": "kilo",
     "piece": "piece",
     "filter by season": "filter by season",
+    "filter by form": "filter by form",
+    "filter by productor": "filter by productor",
     "name": "name",
     "season": "season",
     "start": "start",

frontend/locales/fr.json

@@ -16,6 +16,8 @@
     "in": "en",
     "enter quantity": "entrez la quantitée",
     "filter by season": "filtrer par saisons",
+    "filter by form": "filtrer par formulaire",
+    "filter by productor": "filtrer par producteur·trice",
     "name": "nom",
     "season": "saison",
     "start": "début",
@@ -132,7 +134,6 @@
     "error deleting productor": "erreur pendant la suppression du producteur·trice",
     "error deleting shipment": "erreur pendant la suppression de la livraison",
     "there is no contract for now": "Il n'y a pas de contrats pour le moment.",
-
     "the product unit will be assigned to the quantity requested in the form": "L'unité de vente du produit définit l'unité associée a la quantité demandée dans le formulaire des amapiens.",
     "all theses informations are for contract generation": "ces informations sont nécéssaires pour la génération de contrat."
 }

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: productors} = useGetProductors();
-    const {data: users} = getUsers();
+    const {data: users} = useGetUsers();
 
     const form = useForm<FormInputs>({
         initialValues: {
-            name: "",
+            name: currentForm?.name ?? "",
-            season: "",
+            season: currentForm?.season ?? "",
-            start: null,
+            start: currentForm?.start ?? null,
-            end: null,
+            end: currentForm?.end ?? null,
-            productor_id: "",
+            productor_id: currentForm?.productor?.id.toString() ?? "",
-            referer_id: "",
+            referer_id: currentForm?.referer?.id.toString() ?? "",
-            minimum_shipment_value: null,
+            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

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 [searchParams] = useSearchParams();
-    const deleteMutation = deleteForm();
+    const deleteMutation = useDeleteForm();
     const navigate = useNavigate();
 
     return (

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: "",
+            name: currentProductor?.name ?? "",
-            address: "",
+            address: currentProductor?.address ?? "",
-            payment_methods: [],
+            payment_methods: currentProductor?.payment_methods ?? [],
-            type: "",
+            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)
                         }

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 [searchParams] = useSearchParams();
-    const deleteMutation = deleteProductor();
+    const deleteMutation = useDeleteProductor();
     const navigate = useNavigate();
 
     return (

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 { ProductQuantityUnit, ProductUnit, type Product, type ProductInputs } from "@/services/resources/products";
-import { useEffect, useMemo } from "react";
+import { useMemo } from "react";
-import { getProductors } from "@/services/api";
+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: "",
+            name: currentProduct?.name ?? "",
-            unit: null,
+            unit: currentProduct?.unit ?? null,
-            price: null,
+            price: currentProduct?.price ?? null,
-            price_kg: null,
+            price_kg: currentProduct?.price_kg ?? null,
-            quantity: null,
+            quantity: currentProduct?.quantity ?? null,
-            quantity_unit: null,
+            quantity_unit: currentProduct?.quantity_unit ?? null,
-            type: null,
+            type: currentProduct?.type ?? null,
-            productor_id: null,
+            productor_id: currentProduct ? String(currentProduct.productor.id) : null,
         },
         validate: {
             name: (value) =>
@@ -46,15 +46,9 @@ export function ProductModal({
         },
     });
     
-    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

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 [searchParams] = useSearchParams();
-    const deleteMutation = deleteProduct();
+    const deleteMutation = useDeleteProduct();
     const navigate = useNavigate();
 
     return (

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)

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 { useMemo } from "react";
-import { shipmentToShipmentInputs, type Shipment, type ShipmentInputs } from "@/services/resources/shipments";
+import { type Shipment, type ShipmentInputs } from "@/services/resources/shipments";
-import { getForms, getProductors, getProducts } from "@/services/api";
+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: "",
+            name: currentShipment?.name ?? "",
-            date: null,
+            date: currentShipment?.date ?? null,
-            form_id: "",
+            form_id: currentShipment ? String(currentShipment?.form_id) : "",
-            product_ids: []
+            product_ids: currentShipment?.products.map((el) => (String(el.id))) ?? []
         },
         validate: {
             name: (value) =>
@@ -35,18 +35,12 @@ export default function ShipmentModal({
         }
     });
 
-    useEffect(() => {
+    const { data: allForms } = useGetForms();
-        if (currentShipment) {
+    const { data: allProducts } = useGetProducts(new URLSearchParams("types=1"));
-            form.setValues(shipmentToShipmentInputs(currentShipment));
+    const { data: allProductors } = useGetProductors()
-        }
-    }, [currentShipment]);
-
-    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

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 [searchParams] = useSearchParams();
-    const deleteMutation = deleteShipment();
+    const deleteMutation = useDeleteShipment();
     const navigate = useNavigate();
 
     return (

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: "",
+            name: currentUser?.name ?? "",
-            email: ""
+            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)
                         }

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 { type User } from "@/services/resources/users";
-import { UserModal } from "@/components/Users/Modal";
+import { useDeleteUser } from "@/services/api";
-import { deleteUser, getUser } 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 [searchParams] = useSearchParams();
-    const deleteMutation = deleteUser();
+    const deleteMutation = useDeleteUser();
     const navigate = useNavigate();
 
     return (

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);

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";
-
+import { computePrices } from "./price";
-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);
-}
 
 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>> = {
+    const inputRefs = useRef<Record<string, HTMLInputElement | null>>({
-        firstname: useRef<HTMLInputElement>(null),
+        firstname: null,
-        lastname: useRef<HTMLInputElement>(null),
+        lastname: null,
-        email: useRef<HTMLInputElement>(null),
+        email: null,
-        phone: useRef<HTMLInputElement>(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];
+            const ref = inputRefs.current[firstErrorField];
-            ref?.current?.scrollIntoView({behavior: "smooth", block: "center"});
+            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>

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);
+}

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 { isPending, data } = useGetForms(searchParams);
-    const { data: currentForm } = getForm(Number(editId), { enabled: !!editId });
+    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 createFormMutation = useCreateForm();
-    const editFormMutation = editForm();
+    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} 

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">

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: productors, isPending } = useGetProductors(searchParams);
-    const { data: currentProductor } = getProductor(Number(editId), { enabled: !!editId });
+    const { data: currentProductor } = useGetProductor(Number(editId), { enabled: !!editId });
-    const { data: allProductors } = getProductors();
+    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 createProductorMutation = useCreateProductor();
-    const editProductorMutation = editProductor();
+    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}

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: products, isPending } = useGetProducts(searchParams);
-    const { data: currentProduct } = getProduct(Number(editId), { enabled: !!editId });
+    const { data: currentProduct } = useGetProduct(Number(editId), { enabled: !!editId });
-    const { data: allProducts } = getProducts();
+    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 createProductMutation = useCreateProduct();
-    const editProductMutation = editProduct();
+    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}

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: shipments, isPending } = useGetShipments(searchParams);
-    const { data: currentShipment } = getShipment(Number(editId), { enabled: !!editId });
+    const { data: currentShipment } = useGetShipment(Number(editId), { enabled: !!editId });
-    const { data: allShipments } = getShipments();
+    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 createShipmentMutation = useCreateShipment();
-    const editShipmentMutation = editShipment();
+    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}

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: users, isPending} = useGetUsers(searchParams);
-    const { data: currentUser } = getUser(Number(editId), { enabled: !!editId });
+    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 createUserMutation = useCreateUser();
-    const editUserMutation = editUser();
+    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}

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({