add prettier code formater

frontend/.eslint.cjs

@@ -1,104 +1,103 @@
-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: {},
-    },
-  },
-};
+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/.prettierignore

@@ -0,0 +1,8 @@
+node_modules
+dist
+build
+coverage
+.next
+out
+public
+*.lock

frontend/.prettierrc

@@ -0,0 +1,13 @@
+{
+    "semi": true,
+    "singleQuote": false,
+    "jsxSingleQuote": false,
+    "trailingComma": "all",
+    "printWidth": 100,
+    "tabWidth": 4,
+    "useTabs": false,
+    "bracketSpacing": true,
+    "bracketSameLine": false,
+    "arrowParens": "always",
+    "endOfLine": "lf"
+}

frontend/README.md

@@ -17,57 +17,57 @@ If you are developing a production application, we recommend updating the config
 
 ```js
 export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
+    globalIgnores(["dist"]),
+    {
+        files: ["**/*.{ts,tsx}"],
+        extends: [
+            // Other configs...
 
-      // Remove tseslint.configs.recommended and replace with this
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
+            // Remove tseslint.configs.recommended and replace with this
+            tseslint.configs.recommendedTypeChecked,
+            // Alternatively, use this for stricter rules
+            tseslint.configs.strictTypeChecked,
+            // Optionally, add this for stylistic rules
+            tseslint.configs.stylisticTypeChecked,
 
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
+            // Other configs...
+        ],
+        languageOptions: {
+            parserOptions: {
+                project: ["./tsconfig.node.json", "./tsconfig.app.json"],
+                tsconfigRootDir: import.meta.dirname,
+            },
+            // other options...
+        },
     },
-  },
-])
+]);
 ```
 
 You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
 
 ```js
 // eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
+import reactX from "eslint-plugin-react-x";
+import reactDom from "eslint-plugin-react-dom";
 
 export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
+    globalIgnores(["dist"]),
+    {
+        files: ["**/*.{ts,tsx}"],
+        extends: [
+            // Other configs...
+            // Enable lint rules for React
+            reactX.configs["recommended-typescript"],
+            // Enable lint rules for React DOM
+            reactDom.configs.recommended,
+        ],
+        languageOptions: {
+            parserOptions: {
+                project: ["./tsconfig.node.json", "./tsconfig.app.json"],
+                tsconfigRootDir: import.meta.dirname,
+            },
+            // other options...
+        },
     },
-  },
-])
+]);
 ```

frontend/eslint.config.js

@@ -1,23 +1,23 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
-import { defineConfig, globalIgnores } from 'eslint/config'
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+import { defineConfig, globalIgnores } from "eslint/config";
 
 export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      js.configs.recommended,
-      tseslint.configs.recommended,
-      reactHooks.configs.flat.recommended,
-      reactRefresh.configs.vite,
-    ],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
+    globalIgnores(["dist"]),
+    {
+        files: ["**/*.{ts,tsx}"],
+        extends: [
+            js.configs.recommended,
+            tseslint.configs.recommended,
+            reactHooks.configs.flat.recommended,
+            reactRefresh.configs.vite,
+        ],
+        languageOptions: {
+            ecmaVersion: 2020,
+            globals: globals.browser,
+        },
     },
-  },
-])
+]);

frontend/index.html

@@ -1,13 +1,13 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Amap Croix-luizet</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Amap Croix-luizet</title>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="/src/main.tsx"></script>
+    </body>
 </html>

frontend/locales/en.json

@@ -124,4 +124,4 @@
     "there is no contract for now": "there is no contract for now.",
     "the product unit will be assigned to the quantity requested in the form": "the product unit will be assigned to the quantity requested in the form",
     "all theses informations are for contract generation": "all theses informations are for contract generation."
-}
+}

frontend/locales/fr.json

@@ -136,4 +136,4 @@
     "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/package.json

@@ -1,50 +1,52 @@
 {
-  "name": "frontend",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "lint": "eslint .",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "@mantine/core": "^8.3.14",
-    "@mantine/dates": "^8.3.14",
-    "@mantine/form": "^8.3.14",
-    "@mantine/hooks": "^8.3.14",
-    "@mantine/notifications": "^8.3.14",
-    "@tabler/icons": "^3.36.1",
-    "@tabler/icons-react": "^3.36.1",
-    "@tanstack/react-query": "^5.90.20",
-    "capitalize": "^2.0.4",
-    "dayjs": "^1.11.19",
-    "i18next": "^25.8.4",
-    "i18next-browser-languagedetector": "^8.2.0",
-    "luxon": "^3.7.2",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "react-i18next": "^16.5.4",
-    "react-router": "^7.13.0"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.39.1",
-    "@types/capitalize": "^2.0.2",
-    "@types/luxon": "^3.7.1",
-    "@types/node": "^24.10.1",
-    "@types/react": "^19.2.7",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.1",
-    "eslint": "^9.39.1",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.24",
-    "globals": "^16.5.0",
-    "postcss": "^8.5.6",
-    "postcss-preset-mantine": "^1.18.0",
-    "postcss-simple-vars": "^7.0.1",
-    "typescript": "~5.9.3",
-    "typescript-eslint": "^8.48.0",
-    "vite": "^7.3.1"
-  }
+    "name": "frontend",
+    "private": true,
+    "version": "0.0.0",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "tsc -b && vite build",
+        "lint": "eslint .",
+        "format": "prettier . --write",
+        "preview": "vite preview"
+    },
+    "dependencies": {
+        "@mantine/core": "^8.3.14",
+        "@mantine/dates": "^8.3.14",
+        "@mantine/form": "^8.3.14",
+        "@mantine/hooks": "^8.3.14",
+        "@mantine/notifications": "^8.3.14",
+        "@tabler/icons": "^3.36.1",
+        "@tabler/icons-react": "^3.36.1",
+        "@tanstack/react-query": "^5.90.20",
+        "capitalize": "^2.0.4",
+        "dayjs": "^1.11.19",
+        "i18next": "^25.8.4",
+        "i18next-browser-languagedetector": "^8.2.0",
+        "luxon": "^3.7.2",
+        "react": "^19.2.0",
+        "react-dom": "^19.2.0",
+        "react-i18next": "^16.5.4",
+        "react-router": "^7.13.0"
+    },
+    "devDependencies": {
+        "@eslint/js": "^9.39.1",
+        "@types/capitalize": "^2.0.2",
+        "@types/luxon": "^3.7.1",
+        "@types/node": "^24.10.1",
+        "@types/react": "^19.2.7",
+        "@types/react-dom": "^19.2.3",
+        "@vitejs/plugin-react": "^5.1.1",
+        "eslint": "^9.39.1",
+        "eslint-plugin-react-hooks": "^7.0.1",
+        "eslint-plugin-react-refresh": "^0.4.24",
+        "globals": "^16.5.0",
+        "postcss": "^8.5.6",
+        "postcss-preset-mantine": "^1.18.0",
+        "postcss-simple-vars": "^7.0.1",
+        "prettier": "3.8.1",
+        "typescript": "~5.9.3",
+        "typescript-eslint": "^8.48.0",
+        "vite": "^7.3.1"
+    }
 }

frontend/postcss.config.cjs

@@ -1,14 +1,14 @@
 module.exports = {
-  plugins: {
-    'postcss-preset-mantine': {},
-    'postcss-simple-vars': {
-      variables: {
-        'mantine-breakpoint-xs': '36em',
-        'mantine-breakpoint-sm': '48em',
-        'mantine-breakpoint-md': '62em',
-        'mantine-breakpoint-lg': '75em',
-        'mantine-breakpoint-xl': '88em',
-      },
+    plugins: {
+        "postcss-preset-mantine": {},
+        "postcss-simple-vars": {
+            variables: {
+                "mantine-breakpoint-xs": "36em",
+                "mantine-breakpoint-sm": "48em",
+                "mantine-breakpoint-md": "62em",
+                "mantine-breakpoint-lg": "75em",
+                "mantine-breakpoint-xl": "88em",
+            },
+        },
     },
-  },
-};
+};

frontend/src/components/Footer/index.tsx

@@ -1,7 +1,3 @@
 export function Footer() {
-    return (
-        <footer>
-            
-        </footer>
-    );
-}
+    return <footer></footer>;
+}

frontend/src/components/Forms/Card/index.tsx

@@ -1,39 +1,30 @@
-import { Badge, Box, Group, Paper, Text, Title } from "@mantine/core";
-import { Link } from "react-router";
-import type { Form } from "@/services/resources/forms";
-
-export type FormCardProps = {
-    form: Form;
-}
-
-export function FormCard({form}: FormCardProps) {
-    return (
-        <Paper
-            shadow="xl" 
-            p="xl"
-            miw={{base: "100vw", md: "25vw", lg:"20vw"}}
-        >
-            <Box
-                component={Link}
-                to={`/form/${form.id}`}
-                style={{textDecoration: "none", color: "black"}}
-            >
-                <Group justify="space-between" wrap="nowrap">
-                    <Title
-                        order={3}
-                        textWrap="wrap"
-                        lineClamp={1}
-                        >
-                        {form.name}
-                    </Title>
-                    <Badge>{form.season}</Badge>
-                </Group>
-                <Group justify="space-between">
-                    <Text>{form.productor.name}</Text>
-                    <Text>{form.referer.name}</Text>
-                </Group>
-            </Box>
-        </Paper>
-
-    );
-}
+import { Badge, Box, Group, Paper, Text, Title } from "@mantine/core";
+import { Link } from "react-router";
+import type { Form } from "@/services/resources/forms";
+
+export type FormCardProps = {
+    form: Form;
+};
+
+export function FormCard({ form }: FormCardProps) {
+    return (
+        <Paper shadow="xl" p="xl" miw={{ base: "100vw", md: "25vw", lg: "20vw" }}>
+            <Box
+                component={Link}
+                to={`/form/${form.id}`}
+                style={{ textDecoration: "none", color: "black" }}
+            >
+                <Group justify="space-between" wrap="nowrap">
+                    <Title order={3} textWrap="wrap" lineClamp={1}>
+                        {form.name}
+                    </Title>
+                    <Badge>{form.season}</Badge>
+                </Group>
+                <Group justify="space-between">
+                    <Text>{form.productor.name}</Text>
+                    <Text>{form.referer.name}</Text>
+                </Group>
+            </Box>
+        </Paper>
+    );
+}

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

@@ -1,49 +1,49 @@
-import { Group, MultiSelect } from "@mantine/core";
-import { t } from "@/config/i18n";
-import { useMemo } from "react";
-
-export type FilterFormsProps = {
-    seasons: string[];
-    productors: string[];
-    filters: URLSearchParams;
-    onFilterChange: (values: string[], filter: string) => void;
-}
-
-export default function FilterForms({
-    seasons, 
-    productors, 
-    filters, 
-    onFilterChange
-}: FilterFormsProps) {
-    const defaultProductors = useMemo(() => {
-        return filters.getAll("productors")
-    }, [filters]);
-    const defaultSeasons = useMemo(() => {
-        return filters.getAll("seasons")
-    }, [filters]);
-    
-    return (
-        <Group>
-            <MultiSelect
-                aria-label={t("filter by season", {capfirst: true})}
-                placeholder={t("filter by season", {capfirst: true})}
-                data={seasons}
-                defaultValue={defaultSeasons}
-                onChange={(values: string[]) => {
-                    onFilterChange(values, 'seasons')
-                }}
-                clearable
-            />
-            <MultiSelect
-                aria-label={t("filter by productor", {capfirst: true})}
-                placeholder={t("filter by productor", {capfirst: true})}
-                data={productors}
-                defaultValue={defaultProductors}
-                onChange={(values: string[]) => {
-                    onFilterChange(values, 'productors')
-                }}
-                clearable
-            />
-        </Group>
-    );
-}
+import { Group, MultiSelect } from "@mantine/core";
+import { t } from "@/config/i18n";
+import { useMemo } from "react";
+
+export type FilterFormsProps = {
+    seasons: string[];
+    productors: string[];
+    filters: URLSearchParams;
+    onFilterChange: (values: string[], filter: string) => void;
+};
+
+export default function FilterForms({
+    seasons,
+    productors,
+    filters,
+    onFilterChange,
+}: FilterFormsProps) {
+    const defaultProductors = useMemo(() => {
+        return filters.getAll("productors");
+    }, [filters]);
+    const defaultSeasons = useMemo(() => {
+        return filters.getAll("seasons");
+    }, [filters]);
+
+    return (
+        <Group>
+            <MultiSelect
+                aria-label={t("filter by season", { capfirst: true })}
+                placeholder={t("filter by season", { capfirst: true })}
+                data={seasons}
+                defaultValue={defaultSeasons}
+                onChange={(values: string[]) => {
+                    onFilterChange(values, "seasons");
+                }}
+                clearable
+            />
+            <MultiSelect
+                aria-label={t("filter by productor", { capfirst: true })}
+                placeholder={t("filter by productor", { capfirst: true })}
+                data={productors}
+                defaultValue={defaultProductors}
+                onChange={(values: string[]) => {
+                    onFilterChange(values, "productors");
+                }}
+                clearable
+            />
+        </Group>
+    );
+}

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

@@ -1,4 +1,12 @@
-import { Button, Group, Modal, NumberInput, Select, TextInput, type ModalBaseProps } from "@mantine/core";
+import {
+    Button,
+    Group,
+    Modal,
+    NumberInput,
+    Select,
+    TextInput,
+    type ModalBaseProps,
+} from "@mantine/core";
 import { t } from "@/config/i18n";
 import { DatePickerInput } from "@mantine/dates";
 import { IconCancel, IconEdit, IconPlus } from "@tabler/icons-react";
@@ -10,16 +18,11 @@ import type { Form, FormInputs } from "@/services/resources/forms";
 export type FormModalProps = ModalBaseProps & {
     currentForm?: Form;
     handleSubmit: (form: FormInputs, id?: number) => void;
-}
+};
 
-export default function FormModal({
-    opened, 
-    onClose, 
-    currentForm, 
-    handleSubmit
-}: FormModalProps) {
-    const {data: productors} = useGetProductors();
-    const {data: users} = useGetUsers();
+export default function FormModal({ opened, onClose, currentForm, handleSubmit }: FormModalProps) {
+    const { data: productors } = useGetProductors();
+    const { data: users } = useGetUsers();
 
     const form = useForm<FormInputs>({
         initialValues: {
@@ -33,115 +36,138 @@ export default function FormModal({
         },
         validate: {
             name: (value) =>
-                !value ? `${t("a name", {capfirst: true})} ${t('is required')}` : null,
+                !value ? `${t("a name", { capfirst: true })} ${t("is required")}` : null,
             season: (value) =>
-                !value ? `${t("a season", {capfirst: true})} ${t('is required')}` : null,
+                !value ? `${t("a season", { capfirst: true })} ${t("is required")}` : null,
             start: (value) =>
-                !value ? `${t("a start date", {capfirst: true})} ${t('is required')}` : null,
+                !value ? `${t("a start date", { capfirst: true })} ${t("is required")}` : null,
             end: (value) =>
-                !value ? `${t("a end date", {capfirst: true})} ${t('is required')}` : null,
+                !value ? `${t("a end date", { capfirst: true })} ${t("is required")}` : null,
             productor_id: (value) =>
-                !value ? `${t("a productor", {capfirst: true})} ${t('is required')}` : null,
+                !value ? `${t("a productor", { capfirst: true })} ${t("is required")}` : null,
             referer_id: (value) =>
-                !value ? `${t("a referer", {capfirst: true})} ${t('is required')}` : null
-        }
+                !value ? `${t("a referer", { capfirst: true })} ${t("is required")}` : null,
+        },
     });
 
     const usersSelect = useMemo(() => {
-        return users?.map(user => ({value: String(user.id), label: `${user.name}`}))
+        return users?.map((user) => ({
+            value: String(user.id),
+            label: `${user.name}`,
+        }));
     }, [users]);
 
     const productorsSelect = useMemo(() => {
-        return productors?.map(prod => ({value: String(prod.id), label: `${prod.name}`}))
+        return productors?.map((prod) => ({
+            value: String(prod.id),
+            label: `${prod.name}`,
+        }));
     }, [productors]);
 
     return (
         <Modal
             opened={opened}
             onClose={onClose}
-            title={currentForm ? t("edit form",  {capfirst: true}) : t('create form', {capfirst: true})}
+            title={
+                currentForm
+                    ? t("edit form", { capfirst: true })
+                    : t("create form", { capfirst: true })
+            }
         >
             <TextInput
-                label={t("form name", {capfirst: true})}
-                placeholder={t("form name", {capfirst: true})}
+                label={t("form name", { capfirst: true })}
+                placeholder={t("form name", { capfirst: true })}
                 radius="sm"
                 withAsterisk
-                {...form.getInputProps('name')}
+                {...form.getInputProps("name")}
             />
             <TextInput
-                label={t("contract season", {capfirst: true})}
-                placeholder={t("contract season", {capfirst: true})}
-                description={t("contract season recommandation", {capfirst: true})}
+                label={t("contract season", { capfirst: true })}
+                placeholder={t("contract season", { capfirst: true })}
+                description={t("contract season recommandation", { capfirst: true })}
                 radius="sm"
                 withAsterisk
-                {...form.getInputProps('season')}
+                {...form.getInputProps("season")}
             />
             <Group grow>
                 <DatePickerInput
-                    label={t("start date", {capfirst: true})}
-                    placeholder={t("start date", {capfirst: true})}
+                    label={t("start date", { capfirst: true })}
+                    placeholder={t("start date", { capfirst: true })}
                     withAsterisk
-                    {...form.getInputProps('start')}
+                    {...form.getInputProps("start")}
                 />
                 <DatePickerInput
-                    label={t("end date", {capfirst: true})}
-                    placeholder={t("end date", {capfirst: true})}
+                    label={t("end date", { capfirst: true })}
+                    placeholder={t("end date", { capfirst: true })}
                     withAsterisk
-                    {...form.getInputProps('end')}
+                    {...form.getInputProps("end")}
                 />
             </Group>
             <Select
-                label={t("referer", {capfirst: true})}
-                placeholder={t("referer", {capfirst: true})}
-                nothingFoundMessage={t("nothing found", {capfirst: true})}
+                label={t("referer", { capfirst: true })}
+                placeholder={t("referer", { capfirst: true })}
+                nothingFoundMessage={t("nothing found", { capfirst: true })}
                 withAsterisk
                 clearable
                 allowDeselect
                 searchable
                 data={usersSelect || []}
-                {...form.getInputProps('referer_id')}
+                {...form.getInputProps("referer_id")}
             />
             <Select
-                label={t("productor", {capfirst: true})}
-                placeholder={t("productor", {capfirst: true})}
-                nothingFoundMessage={t("nothing found", {capfirst: true})}
+                label={t("productor", { capfirst: true })}
+                placeholder={t("productor", { capfirst: true })}
+                nothingFoundMessage={t("nothing found", { capfirst: true })}
                 withAsterisk
                 clearable
                 allowDeselect
                 searchable
                 data={productorsSelect || []}
-                {...form.getInputProps('productor_id')}
+                {...form.getInputProps("productor_id")}
             />
             <NumberInput
-                label={t("minimum shipment value", {capfirst: true})}
-                placeholder={t("minimum shipment value", {capfirst: true})}
-                description={t("some contracts require a minimum value per shipment, ignore this field if it's not the case", {capfirst: true})}
+                label={t("minimum shipment value", { capfirst: true })}
+                placeholder={t("minimum shipment value", { capfirst: true })}
+                description={t(
+                    "some contracts require a minimum value per shipment, ignore this field if it's not the case",
+                    { capfirst: true },
+                )}
                 radius="sm"
-                {...form.getInputProps('minimum_shipment_value')}
+                {...form.getInputProps("minimum_shipment_value")}
             />
             <Group mt="sm" justify="space-between">
                 <Button
                     variant="filled"
                     color="red"
-                    aria-label={t("cancel", {capfirst: true})}
-                    leftSection={<IconCancel/>}
+                    aria-label={t("cancel", { capfirst: true })}
+                    leftSection={<IconCancel />}
                     onClick={() => {
                         form.clearErrors();
                         onClose();
                     }}
-                >{t("cancel", {capfirst: true})}</Button>
+                >
+                    {t("cancel", { capfirst: true })}
+                </Button>
                 <Button
                     variant="filled"
-                    aria-label={currentForm ? t("edit form", {capfirst: true}) : t('create form', {capfirst: true})}
-                    leftSection={currentForm ? <IconEdit/> : <IconPlus/>}
+                    aria-label={
+                        currentForm
+                            ? t("edit form", { capfirst: true })
+                            : t("create form", { capfirst: true })
+                    }
+                    leftSection={currentForm ? <IconEdit /> : <IconPlus />}
                     onClick={() => {
                         form.validate();
                         if (form.isValid()) {
-                            handleSubmit(form.getValues(), currentForm?.id)
+                            handleSubmit(form.getValues(), currentForm?.id);
                         }
                     }}
-                >{currentForm ? t("edit form", {capfirst: true}) : t('create form', {capfirst: true})}</Button>
+                >
+                    {currentForm
+                        ? t("edit form", { capfirst: true })
+                        : t("create form", { capfirst: true })}
+                </Button>
             </Group>
         </Modal>
     );
-}
+}

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

@@ -1,17 +1,15 @@
 import { ActionIcon, Table, Tooltip } from "@mantine/core";
 import { useNavigate, useSearchParams } from "react-router";
-import { useDeleteForm} 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";
 
 export type FormRowProps = {
     form: Form;
-}
+};
 
-export default function FormRow({
-    form, 
-}: FormRowProps) {
+export default function FormRow({ form }: FormRowProps) {
     const [searchParams] = useSearchParams();
     const deleteMutation = useDeleteForm();
     const navigate = useNavigate();
@@ -25,31 +23,33 @@ export default function FormRow({
             <Table.Td>{form.productor.name}</Table.Td>
             <Table.Td>{form.referer.name}</Table.Td>
             <Table.Td>
-                <Tooltip label={t("edit productor", {capfirst: true})}>
-                    <ActionIcon 
-                        size="sm" 
+                <Tooltip label={t("edit productor", { capfirst: true })}>
+                    <ActionIcon
+                        size="sm"
                         mr="5"
                         onClick={(e) => {
                             e.stopPropagation();
-                            navigate(`/dashboard/forms/${form.id}/edit${searchParams ? `?${searchParams.toString()}` : ""}`);
+                            navigate(
+                                `/dashboard/forms/${form.id}/edit${searchParams ? `?${searchParams.toString()}` : ""}`,
+                            );
                         }}
                     >
-                        <IconEdit/>
+                        <IconEdit />
                     </ActionIcon>
                 </Tooltip>
-                <Tooltip label={t("remove productor", {capfirst: true})}>
-                    <ActionIcon 
-                        color="red" 
-                        size="sm" 
+                <Tooltip label={t("remove productor", { capfirst: true })}>
+                    <ActionIcon
+                        color="red"
+                        size="sm"
                         mr="5"
                         onClick={() => {
                             deleteMutation.mutate(form.id);
                         }}
                     >
-                        <IconX/>
+                        <IconX />
                     </ActionIcon>
                 </Tooltip>
             </Table.Td>
         </Table.Tr>
     );
-}
+}

frontend/src/components/Label/index.tsx

@@ -1,28 +1,24 @@
-import { ActionIcon, Tooltip } from "@mantine/core";
-import { IconInfoCircle } from "@tabler/icons-react";
-
-export type InputLabelProps = {
-    label: string;
-    info: string;
-    isRequired?: boolean;
-}
-
-export function InputLabel({label, info, isRequired}: InputLabelProps) {
-    return (
-        <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
-            <Tooltip label={info}>
-                <ActionIcon variant="transparent" size="xs" color="gray">
-                    <IconInfoCircle size={16}/>
-                </ActionIcon>
-            </Tooltip>
-            <span>
-                {label}
-                {   
-                    isRequired ? 
-                    <span style={{ color: 'red' }}> *</span> : null
-                }
-            </span>
-
-        </div>
-    );
-}
+import { ActionIcon, Tooltip } from "@mantine/core";
+import { IconInfoCircle } from "@tabler/icons-react";
+
+export type InputLabelProps = {
+    label: string;
+    info: string;
+    isRequired?: boolean;
+};
+
+export function InputLabel({ label, info, isRequired }: InputLabelProps) {
+    return (
+        <div style={{ display: "flex", alignItems: "center", gap: 4 }}>
+            <Tooltip label={info}>
+                <ActionIcon variant="transparent" size="xs" color="gray">
+                    <IconInfoCircle size={16} />
+                </ActionIcon>
+            </Tooltip>
+            <span>
+                {label}
+                {isRequired ? <span style={{ color: "red" }}> *</span> : null}
+            </span>
+        </div>
+    );
+}

frontend/src/components/Navbar/index.css

@@ -6,8 +6,8 @@ nav {
     justify-content: space-between;
 }
 
-.navLink { 
+.navLink {
     color: #fff;
     font-weight: bold;
     text-decoration: none;
-}
+}

frontend/src/components/Navbar/index.tsx

@@ -8,28 +8,24 @@ export function Navbar() {
     return (
         <nav>
             <Group>
-                <NavLink 
-                    className={"navLink"} 
-                    aria-label={t('home')}
-                    to="/"
-                >
-                    {t("home", {capfirst: true})}
+                <NavLink className={"navLink"} aria-label={t("home")} to="/">
+                    {t("home", { capfirst: true })}
                 </NavLink>
-                <NavLink 
-                    className={"navLink"} 
-                    aria-label={t('dashboard')}
+                <NavLink
+                    className={"navLink"}
+                    aria-label={t("dashboard")}
                     to="/dashboard/productors"
                 >
-                    {t("dashboard", {capfirst: true})}
+                    {t("dashboard", { capfirst: true })}
                 </NavLink>
             </Group>
-            <NavLink 
+            <NavLink
                 className={"navLink"}
                 aria-label={t("login with keycloak")}
                 to={`${Config.backend_uri}/auth/login`}
             >
-                {t("login with keycloak", {capfirst: true})}
+                {t("login with keycloak", { capfirst: true })}
             </NavLink>
         </nav>
     );
-}
+}

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

@@ -1,51 +1,51 @@
-import { Group, MultiSelect } from "@mantine/core";
-import { useMemo } from "react";
-import { t } from "@/config/i18n";
-
-export type ProductorsFiltersProps = {
-    names: string[];
-    types: string[];
-    filters: URLSearchParams;
-    onFilterChange: (values: string[], filter: string) => void;
-}
-
-export default function ProductorsFilter({
-    names,
-    types,
-    filters, 
-    onFilterChange
-}: ProductorsFiltersProps) {
-    const defaultNames = useMemo(() => {
-        return filters.getAll("names")
-    }, [filters]);
-    const defaultTypes = useMemo(() => {
-        return filters.getAll("types")
-    }, [filters]);
-    
-    return (
-        <Group>
-            <MultiSelect
-                aria-label={t("filter by name", {capfirst: true})}
-                placeholder={t("filter by name", {capfirst: true})}
-                data={names}
-                defaultValue={defaultNames}
-                onChange={(values: string[]) => {
-                    onFilterChange(values, 'names')
-                }}
-                clearable
-                searchable
-            />
-            <MultiSelect
-                aria-label={t("filter by type", {capfirst: true})}
-                placeholder={t("filter by type", {capfirst: true})}
-                data={types}
-                defaultValue={defaultTypes}
-                onChange={(values: string[]) => {
-                    onFilterChange(values, 'types')
-                }}
-                clearable
-                searchable
-            />
-        </Group>
-    );
-}
+import { Group, MultiSelect } from "@mantine/core";
+import { useMemo } from "react";
+import { t } from "@/config/i18n";
+
+export type ProductorsFiltersProps = {
+    names: string[];
+    types: string[];
+    filters: URLSearchParams;
+    onFilterChange: (values: string[], filter: string) => void;
+};
+
+export default function ProductorsFilter({
+    names,
+    types,
+    filters,
+    onFilterChange,
+}: ProductorsFiltersProps) {
+    const defaultNames = useMemo(() => {
+        return filters.getAll("names");
+    }, [filters]);
+    const defaultTypes = useMemo(() => {
+        return filters.getAll("types");
+    }, [filters]);
+
+    return (
+        <Group>
+            <MultiSelect
+                aria-label={t("filter by name", { capfirst: true })}
+                placeholder={t("filter by name", { capfirst: true })}
+                data={names}
+                defaultValue={defaultNames}
+                onChange={(values: string[]) => {
+                    onFilterChange(values, "names");
+                }}
+                clearable
+                searchable
+            />
+            <MultiSelect
+                aria-label={t("filter by type", { capfirst: true })}
+                placeholder={t("filter by type", { capfirst: true })}
+                data={types}
+                defaultValue={defaultTypes}
+                onChange={(values: string[]) => {
+                    onFilterChange(values, "types");
+                }}
+                clearable
+                searchable
+            />
+        </Group>
+    );
+}

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

@@ -1,130 +1,151 @@
-import { Button, Group, Modal, MultiSelect, TextInput, Title, type ModalBaseProps } from "@mantine/core";
-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";
-
-export type ProductorModalProps = ModalBaseProps & {
-    currentProductor?: Productor;
-    handleSubmit: (productor: ProductorInputs, id?: number) => void;
-}
-
-export function ProductorModal({
-    opened, 
-    onClose, 
-    currentProductor, 
-    handleSubmit
-}: ProductorModalProps) {
-    const form = useForm<ProductorInputs>({
-        initialValues: {
-            name: currentProductor?.name ?? "",
-            address: currentProductor?.address ?? "",
-            payment_methods: currentProductor?.payment_methods ?? [],
-            type: currentProductor?.type ?? "",
-        },
-        validate: {
-            name: (value) =>
-                !value ? `${t("name", {capfirst: true})} ${t("is required")}` : null,
-            address: (value) =>
-                !value ? `${t("address", {capfirst: true})} ${t("is required")}` : null,
-            type: (value) =>
-                !value ? `${t("type", {capfirst: true})} ${t("is required")}` : null
-        }
-    });
-    
-    return (
-        <Modal
-            opened={opened}
-            onClose={onClose}
-            title={t("create productor", {capfirst: true})}
-        >
-            <Title order={4}>{t("Informations", {capfirst: true})}</Title>
-            <TextInput
-                label={t("productor name", {capfirst: true})}
-                placeholder={t("productor name", {capfirst: true})}
-                radius="sm"
-                withAsterisk
-                {...form.getInputProps("name")}
-            />
-             <TextInput
-                label={t("productor type", {capfirst: true})}
-                placeholder={t("productor type", {capfirst: true})}
-                radius="sm"
-                withAsterisk
-                {...form.getInputProps("type")}
-            />
-            <TextInput
-                label={t("productor address", {capfirst: true})}
-                placeholder={t("productor address", {capfirst: true})}
-                radius="sm"
-                withAsterisk
-                {...form.getInputProps("address")}
-            />
-            <MultiSelect
-                label={t("payment methods", {capfirst: true})}
-                placeholder={t("payment methods", {capfirst: true})}
-                radius="sm"
-                withAsterisk
-                data={PaymentMethods}
-                clearable
-                searchable
-                value={form.values.payment_methods.map(p => p.name)}
-                onChange={(names) => {
-                    form.setFieldValue("payment_methods", names.map(name => {
-                        const existing = form.values.payment_methods.find(p => p.name === name);
-                        return existing ?? {
-                            name,
-                            details: ""
-                        };
-                    }));
-                }}
-            />
-            {
-                form.values.payment_methods.map((method, index) => (
-                    <TextInput
-                        key={index}
-                        label={
-                            method.name === "cheque" ? 
-                                t("order name", {capfirst: true}) :
-                            method.name === "transfer" ?
-                                t("IBAN") : 
-                                t("details", {capfirst: true})
-                        }
-                        placeholder={
-                            method.name === "cheque" ? 
-                                t("order name", {capfirst: true}) :
-                            method.name === "transfer" ?
-                                t("IBAN") : 
-                                t("details", {capfirst: true})
-                        }
-                        {...form.getInputProps(
-                            `payment_methods.${index}.details`
-                        )}
-                    />
-                ))
-            }
-            <Group mt="sm" justify="space-between">
-                <Button
-                    variant="filled"
-                    color="red"
-                    aria-label={t("cancel", {capfirst: true})}
-                    leftSection={<IconCancel/>}
-                    onClick={() => {
-                        form.clearErrors();
-                        onClose();
-                    }}
-                >{t("cancel", {capfirst: true})}</Button>
-                <Button
-                    variant="filled"
-                    aria-label={currentProductor ? t("edit productor", {capfirst: true}) : t("create productor", {capfirst: true})}
-                    onClick={() => {
-                        form.validate();
-                        if (form.isValid()) {
-                            handleSubmit(form.getValues(), currentProductor?.id)
-                        }
-                    }}
-                >{currentProductor ? t("edit productor", {capfirst: true}) : t("create productor", {capfirst: true})}</Button>
-            </Group>
-        </Modal>
-    );
-}
+import {
+    Button,
+    Group,
+    Modal,
+    MultiSelect,
+    TextInput,
+    Title,
+    type ModalBaseProps,
+} from "@mantine/core";
+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";
+
+export type ProductorModalProps = ModalBaseProps & {
+    currentProductor?: Productor;
+    handleSubmit: (productor: ProductorInputs, id?: number) => void;
+};
+
+export function ProductorModal({
+    opened,
+    onClose,
+    currentProductor,
+    handleSubmit,
+}: ProductorModalProps) {
+    const form = useForm<ProductorInputs>({
+        initialValues: {
+            name: currentProductor?.name ?? "",
+            address: currentProductor?.address ?? "",
+            payment_methods: currentProductor?.payment_methods ?? [],
+            type: currentProductor?.type ?? "",
+        },
+        validate: {
+            name: (value) =>
+                !value ? `${t("name", { capfirst: true })} ${t("is required")}` : null,
+            address: (value) =>
+                !value ? `${t("address", { capfirst: true })} ${t("is required")}` : null,
+            type: (value) =>
+                !value ? `${t("type", { capfirst: true })} ${t("is required")}` : null,
+        },
+    });
+
+    return (
+        <Modal opened={opened} onClose={onClose} title={t("create productor", { capfirst: true })}>
+            <Title order={4}>{t("Informations", { capfirst: true })}</Title>
+            <TextInput
+                label={t("productor name", { capfirst: true })}
+                placeholder={t("productor name", { capfirst: true })}
+                radius="sm"
+                withAsterisk
+                {...form.getInputProps("name")}
+            />
+            <TextInput
+                label={t("productor type", { capfirst: true })}
+                placeholder={t("productor type", { capfirst: true })}
+                radius="sm"
+                withAsterisk
+                {...form.getInputProps("type")}
+            />
+            <TextInput
+                label={t("productor address", { capfirst: true })}
+                placeholder={t("productor address", { capfirst: true })}
+                radius="sm"
+                withAsterisk
+                {...form.getInputProps("address")}
+            />
+            <MultiSelect
+                label={t("payment methods", { capfirst: true })}
+                placeholder={t("payment methods", { capfirst: true })}
+                radius="sm"
+                withAsterisk
+                data={PaymentMethods}
+                clearable
+                searchable
+                value={form.values.payment_methods.map((p) => p.name)}
+                onChange={(names) => {
+                    form.setFieldValue(
+                        "payment_methods",
+                        names.map((name) => {
+                            const existing = form.values.payment_methods.find(
+                                (p) => p.name === name,
+                            );
+                            return (
+                                existing ?? {
+                                    name,
+                                    details: "",
+                                }
+                            );
+                        }),
+                    );
+                }}
+            />
+            {form.values.payment_methods.map((method, index) => (
+                <TextInput
+                    key={index}
+                    label={
+                        method.name === "cheque"
+                            ? t("order name", { capfirst: true })
+                            : method.name === "transfer"
+                              ? t("IBAN")
+                              : t("details", { capfirst: true })
+                    }
+                    placeholder={
+                        method.name === "cheque"
+                            ? t("order name", { capfirst: true })
+                            : method.name === "transfer"
+                              ? t("IBAN")
+                              : t("details", { capfirst: true })
+                    }
+                    {...form.getInputProps(`payment_methods.${index}.details`)}
+                />
+            ))}
+            <Group mt="sm" justify="space-between">
+                <Button
+                    variant="filled"
+                    color="red"
+                    aria-label={t("cancel", { capfirst: true })}
+                    leftSection={<IconCancel />}
+                    onClick={() => {
+                        form.clearErrors();
+                        onClose();
+                    }}
+                >
+                    {t("cancel", { capfirst: true })}
+                </Button>
+                <Button
+                    variant="filled"
+                    aria-label={
+                        currentProductor
+                            ? t("edit productor", { capfirst: true })
+                            : t("create productor", { capfirst: true })
+                    }
+                    onClick={() => {
+                        form.validate();
+                        if (form.isValid()) {
+                            handleSubmit(form.getValues(), currentProductor?.id);
+                        }
+                    }}
+                >
+                    {currentProductor
+                        ? t("edit productor", { capfirst: true })
+                        : t("create productor", { capfirst: true })}
+                </Button>
+            </Group>
+        </Modal>
+    );
+}

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

@@ -1,62 +1,59 @@
-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 { useDeleteProductor } from "@/services/api";
-import { useNavigate, useSearchParams } from "react-router";
-
-export type ProductorRowProps = {
-    productor: Productor;
-}
-
-export default function ProductorRow({
-    productor,
-}: ProductorRowProps) {
-    const [searchParams] = useSearchParams();
-    const deleteMutation = useDeleteProductor();
-    const navigate = useNavigate();
-
-    return (
-        <Table.Tr key={productor.id}>
-            <Table.Td>{productor.name}</Table.Td>
-            <Table.Td>{productor.type}</Table.Td>
-            <Table.Td>{productor.address}</Table.Td>
-            <Table.Td>
-                {
-                productor.payment_methods.map((value) =>(
-                    <Badge key={value.name} ml="xs">
-                        {t(value.name, {capfirst: true})}
-                    </Badge>
-                ))
-                }
-            </Table.Td>
-            <Table.Td>
-                <Tooltip label={t("edit productor", {capfirst: true})}>
-                    <ActionIcon
-                        size="sm" 
-                        mr="5"
-                        onClick={(e) => {
-                            e.stopPropagation();
-                            navigate(`/dashboard/productors/${productor.id}/edit${searchParams ? `?${searchParams.toString()}` : ""}`);
-                        }}
-                    >
-                        <IconEdit/>
-                    </ActionIcon>
-                </Tooltip>
-                <Tooltip label={t("remove productor", {capfirst: true})}>
-                    <ActionIcon 
-                        color="red" 
-                        size="sm" 
-                        mr="5"
-                        onClick={() => {
-                            deleteMutation.mutate(productor.id);
-                        }}
-                    >
-                        <IconX/>
-                    </ActionIcon>
-                </Tooltip>
-            </Table.Td>
-        </Table.Tr>
-
-    );
-}
+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 { useDeleteProductor } from "@/services/api";
+import { useNavigate, useSearchParams } from "react-router";
+
+export type ProductorRowProps = {
+    productor: Productor;
+};
+
+export default function ProductorRow({ productor }: ProductorRowProps) {
+    const [searchParams] = useSearchParams();
+    const deleteMutation = useDeleteProductor();
+    const navigate = useNavigate();
+
+    return (
+        <Table.Tr key={productor.id}>
+            <Table.Td>{productor.name}</Table.Td>
+            <Table.Td>{productor.type}</Table.Td>
+            <Table.Td>{productor.address}</Table.Td>
+            <Table.Td>
+                {productor.payment_methods.map((value) => (
+                    <Badge key={value.name} ml="xs">
+                        {t(value.name, { capfirst: true })}
+                    </Badge>
+                ))}
+            </Table.Td>
+            <Table.Td>
+                <Tooltip label={t("edit productor", { capfirst: true })}>
+                    <ActionIcon
+                        size="sm"
+                        mr="5"
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            navigate(
+                                `/dashboard/productors/${productor.id}/edit${searchParams ? `?${searchParams.toString()}` : ""}`,
+                            );
+                        }}
+                    >
+                        <IconEdit />
+                    </ActionIcon>
+                </Tooltip>
+                <Tooltip label={t("remove productor", { capfirst: true })}>
+                    <ActionIcon
+                        color="red"
+                        size="sm"
+                        mr="5"
+                        onClick={() => {
+                            deleteMutation.mutate(productor.id);
+                        }}
+                    >
+                        <IconX />
+                    </ActionIcon>
+                </Tooltip>
+            </Table.Td>
+        </Table.Tr>
+    );
+}

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

@@ -1,51 +1,51 @@
-import { Group, MultiSelect } from "@mantine/core";
-import { useMemo } from "react";
-import { t } from "@/config/i18n";
-
-export type ProductsFiltersProps = {
-    names: string[];
-    productors: string[];
-    filters: URLSearchParams;
-    onFilterChange: (values: string[], filter: string) => void;
-}
-
-export default function ProductsFilters({
-    names,
-    productors,
-    filters, 
-    onFilterChange
-}: ProductsFiltersProps) {
-    const defaultNames = useMemo(() => {
-        return filters.getAll("names")
-    }, [filters]);
-    const defaultProductors = useMemo(() => {
-        return filters.getAll("productors")
-    }, [filters]);
-    
-    return (
-        <Group>
-            <MultiSelect
-                aria-label={t("filter by name", {capfirst: true})}
-                placeholder={t("filter by name", {capfirst: true})}
-                data={names}
-                defaultValue={defaultNames}
-                onChange={(values: string[]) => {
-                    onFilterChange(values, 'names')
-                }}
-                clearable
-                searchable
-            />
-            <MultiSelect
-                aria-label={t("filter by productor", {capfirst: true})}
-                placeholder={t("filter by productor", {capfirst: true})}
-                data={productors}
-                defaultValue={defaultProductors}
-                onChange={(values: string[]) => {
-                    onFilterChange(values, 'productors')
-                }}
-                clearable
-                searchable
-            />
-        </Group>
-    );
-}
+import { Group, MultiSelect } from "@mantine/core";
+import { useMemo } from "react";
+import { t } from "@/config/i18n";
+
+export type ProductsFiltersProps = {
+    names: string[];
+    productors: string[];
+    filters: URLSearchParams;
+    onFilterChange: (values: string[], filter: string) => void;
+};
+
+export default function ProductsFilters({
+    names,
+    productors,
+    filters,
+    onFilterChange,
+}: ProductsFiltersProps) {
+    const defaultNames = useMemo(() => {
+        return filters.getAll("names");
+    }, [filters]);
+    const defaultProductors = useMemo(() => {
+        return filters.getAll("productors");
+    }, [filters]);
+
+    return (
+        <Group>
+            <MultiSelect
+                aria-label={t("filter by name", { capfirst: true })}
+                placeholder={t("filter by name", { capfirst: true })}
+                data={names}
+                defaultValue={defaultNames}
+                onChange={(values: string[]) => {
+                    onFilterChange(values, "names");
+                }}
+                clearable
+                searchable
+            />
+            <MultiSelect
+                aria-label={t("filter by productor", { capfirst: true })}
+                placeholder={t("filter by productor", { capfirst: true })}
+                data={productors}
+                defaultValue={defaultProductors}
+                onChange={(values: string[]) => {
+                    onFilterChange(values, "productors");
+                }}
+                clearable
+                searchable
+            />
+        </Group>
+    );
+}

frontend/src/components/Products/Form/index.tsx

@@ -8,37 +8,34 @@ export type ProductFormProps = {
     inputForm: UseFormReturnType<Record<string, string | number>>;
     product: Product;
     shipment?: Shipment;
-}
+};
 
-export function ProductForm({
-    inputForm,
-    product,
-    shipment,
-}: ProductFormProps) {
+export function ProductForm({ inputForm, product, shipment }: ProductFormProps) {
     return (
         <Group mb="sm" grow>
             <NumberInput
-                label={
-                    `${product.name} 
+                label={`${product.name} 
                     ${product.quantity || ""}${product.quantity ? product.quantity_unit : ""}
                     ${
-                        product.price ?
-                        Intl.NumberFormat(
-                            "fr-FR", 
-                            {style: "currency",  currency: "EUR"}
-                        ).format(product.price) : 
-                        product.price_kg && Intl.NumberFormat(
-                            "fr-FR",
-                            {style: "currency",  currency: "EUR"}
-                        ).format(product.price_kg)
+                        product.price
+                            ? Intl.NumberFormat("fr-FR", {
+                                  style: "currency",
+                                  currency: "EUR",
+                              }).format(product.price)
+                            : product.price_kg &&
+                              Intl.NumberFormat("fr-FR", {
+                                  style: "currency",
+                                  currency: "EUR",
+                              }).format(product.price_kg)
                     }
-                    ${product.price ? `/ ${t(ProductUnit[product.unit])}` : "/ kg"}`
-                }
-                description={`${t("enter quantity", {capfirst: true})} ${t('in')} ${t(ProductUnit[product.unit])}`}
+                    ${product.price ? `/ ${t(ProductUnit[product.unit])}` : "/ kg"}`}
+                description={`${t("enter quantity", { capfirst: true })} ${t("in")} ${t(ProductUnit[product.unit])}`}
                 aria-label={t("enter quantity")}
-                placeholder={`${t("enter quantity", {capfirst: true})} ${t('in')} ${t(ProductUnit[product.unit])}`}
-                {...inputForm.getInputProps(shipment ? `planned-${shipment.id}-${product.id}` : `recurrent-${product.id}`)}
+                placeholder={`${t("enter quantity", { capfirst: true })} ${t("in")} ${t(ProductUnit[product.unit])}`}
+                {...inputForm.getInputProps(
+                    shipment ? `planned-${shipment.id}-${product.id}` : `recurrent-${product.id}`,
+                )}
             />
         </Group>
     );
-}
+}

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

@@ -1,163 +1,196 @@
-import { Button, Group, Modal, NumberInput, Select, TextInput, Title, type ModalBaseProps } from "@mantine/core";
-import { t } from "@/config/i18n";
-import { useForm } from "@mantine/form";
-import { IconCancel } from "@tabler/icons-react";
-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 & {
-    currentProduct?: Product;
-    handleSubmit: (product: ProductInputs, id?: number) => void;
-}
-
-export function ProductModal({
-    opened, 
-    onClose, 
-    currentProduct, 
-    handleSubmit
-}: ProductModalProps) {
-    const {data: productors} = useGetProductors();
-    const form = useForm<ProductInputs>({
-        initialValues: {
-            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) =>
-                !value ? `${t("name", {capfirst: true})} ${t('is required')}` : null,
-            unit: (value) =>
-                !value ? `${t("unit", {capfirst: true})} ${t('is required')}` : null,
-            price: (value, values) =>
-                !value && !values.price_kg ? `${t("price or price_kg", {capfirst: true})} ${t('is required')}` : null,
-            price_kg: (value, values) =>
-                !value && !values.price ? `${t("price or price_kg", {capfirst: true})} ${t('is required')}` : null,
-            type: (value) =>
-                !value ? `${t("type", {capfirst: true})} ${t('is required')}` : null,
-            productor_id: (value) =>
-                !value ? `${t("productor", {capfirst: true})} ${t('is required')}` : null
-        },
-    });
-    
-    const productorsSelect = useMemo(() => {
-        return productors?.map(productor => ({value: String(productor.id), label: `${productor.name}`}))
-    }, [productors]);
-
-    return (
-        <Modal
-            opened={opened}
-            onClose={onClose}
-            title={t("create product", {capfirst: true})}
-        >
-            <Title order={4}>{t("informations", {capfirst: true})}</Title>
-            <Select
-                label={t("productor", {capfirst: true})}
-                placeholder={t("productor")}
-                nothingFoundMessage={t("nothing found", {capfirst: true})}
-                withAsterisk
-                clearable
-                searchable
-                data={productorsSelect || []}
-                {...form.getInputProps('productor_id')}
-            />
-            <Group grow>
-                <TextInput
-                    label={t("product name", {capfirst: true})}
-                    placeholder={t("product name", {capfirst: true})}
-                    radius="sm"
-                    {...form.getInputProps('name')}
-                />
-                <Select
-                    label={
-                        <InputLabel 
-                            label={t("product type", {capfirst: true})} 
-                            info={t("recurrent product is for all shipments, planned product is for a specific shipment (see shipment form)", {capfirst: true})}
-                            isRequired 
-                        />
-                    }
-                    placeholder={t("product type", {capfirst: true})}
-                    radius="sm"
-                    searchable
-                    clearable
-                    data={[
-                        {value: "1", label: t("planned", {capfirst: true})},
-                        {value: "2", label: t("recurrent", {capfirst: true})}
-                    ]}
-                    {...form.getInputProps('type')}
-                />
-            </Group>
-            <Select
-                label={t("product unit", {capfirst: true})}
-                placeholder={t("product unit", {capfirst: true})}
-                description={t("the product unit will be assigned to the quantity requested in the form", { capfirst: true})}
-                radius="sm"
-                withAsterisk
-                searchable
-                clearable
-                data={Object.entries(ProductUnit).map(([key, value]) => ({value: key, label: t(value, {capfirst: true})}))}
-                {...form.getInputProps('unit')}
-            />
-            <Group grow>
-                <NumberInput
-                    label={t("product price", {capfirst: true})}
-                    placeholder={t("product price", {capfirst: true})}
-                    radius="sm"
-                    {...form.getInputProps('price')}
-                />
-                <NumberInput
-                    label={t("product price kg", {capfirst: true})}
-                    placeholder={t("product price kg", {capfirst: true})}
-                    radius="sm"
-                    {...form.getInputProps('price_kg')}
-                />
-            </Group>
-            <Group grow>
-                <NumberInput
-                    label={t("product quantity", {capfirst: true})}
-                    placeholder={t("product quantity", {capfirst: true})}
-                    radius="sm"
-                    {...form.getInputProps('quantity', {capfirst: true})}
-                />
-                <Select
-                    label={t("product quantity unit", {capfirst: true})}
-                    placeholder={t("product quantity unit", {capfirst: true})}
-                    radius="sm"
-                    clearable
-                    searchable
-                    data={Object.entries(ProductQuantityUnit).map(([key, value]) => ({value: key, label: t(value, {capfirst: true})}))}
-                    {...form.getInputProps('quantity_unit', {capfirst: true})}
-                />
-                
-            </Group>
-            <Group mt="sm" justify="space-between">
-                <Button
-                    variant="filled"
-                    color="red"
-                    aria-label={t("cancel", {capfirst: true})}
-                    leftSection={<IconCancel/>}
-                    onClick={() => {
-                        form.clearErrors();
-                        onClose();
-                    }}
-                >{t("cancel", {capfirst: true})}</Button>
-                <Button
-                    variant="filled"
-                    aria-label={currentProduct ? t("edit product", {capfirst: true}) : t('create product', {capfirst: true})}
-                    onClick={() => {
-                        form.validate();
-                        if (form.isValid()) {
-                            handleSubmit(form.getValues(), currentProduct?.id)
-                        }
-                    }}
-                >{currentProduct ? t("edit product", {capfirst: true}) : t('create product', {capfirst: true})}</Button>
-            </Group>
-        </Modal>
-    );
-}
+import {
+    Button,
+    Group,
+    Modal,
+    NumberInput,
+    Select,
+    TextInput,
+    Title,
+    type ModalBaseProps,
+} from "@mantine/core";
+import { t } from "@/config/i18n";
+import { useForm } from "@mantine/form";
+import { IconCancel } from "@tabler/icons-react";
+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 & {
+    currentProduct?: Product;
+    handleSubmit: (product: ProductInputs, id?: number) => void;
+};
+
+export function ProductModal({ opened, onClose, currentProduct, handleSubmit }: ProductModalProps) {
+    const { data: productors } = useGetProductors();
+    const form = useForm<ProductInputs>({
+        initialValues: {
+            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) =>
+                !value ? `${t("name", { capfirst: true })} ${t("is required")}` : null,
+            unit: (value) =>
+                !value ? `${t("unit", { capfirst: true })} ${t("is required")}` : null,
+            price: (value, values) =>
+                !value && !values.price_kg
+                    ? `${t("price or price_kg", { capfirst: true })} ${t("is required")}`
+                    : null,
+            price_kg: (value, values) =>
+                !value && !values.price
+                    ? `${t("price or price_kg", { capfirst: true })} ${t("is required")}`
+                    : null,
+            type: (value) =>
+                !value ? `${t("type", { capfirst: true })} ${t("is required")}` : null,
+            productor_id: (value) =>
+                !value ? `${t("productor", { capfirst: true })} ${t("is required")}` : null,
+        },
+    });
+
+    const productorsSelect = useMemo(() => {
+        return productors?.map((productor) => ({
+            value: String(productor.id),
+            label: `${productor.name}`,
+        }));
+    }, [productors]);
+
+    return (
+        <Modal opened={opened} onClose={onClose} title={t("create product", { capfirst: true })}>
+            <Title order={4}>{t("informations", { capfirst: true })}</Title>
+            <Select
+                label={t("productor", { capfirst: true })}
+                placeholder={t("productor")}
+                nothingFoundMessage={t("nothing found", { capfirst: true })}
+                withAsterisk
+                clearable
+                searchable
+                data={productorsSelect || []}
+                {...form.getInputProps("productor_id")}
+            />
+            <Group grow>
+                <TextInput
+                    label={t("product name", { capfirst: true })}
+                    placeholder={t("product name", { capfirst: true })}
+                    radius="sm"
+                    {...form.getInputProps("name")}
+                />
+                <Select
+                    label={
+                        <InputLabel
+                            label={t("product type", { capfirst: true })}
+                            info={t(
+                                "recurrent product is for all shipments, planned product is for a specific shipment (see shipment form)",
+                                { capfirst: true },
+                            )}
+                            isRequired
+                        />
+                    }
+                    placeholder={t("product type", { capfirst: true })}
+                    radius="sm"
+                    searchable
+                    clearable
+                    data={[
+                        { value: "1", label: t("planned", { capfirst: true }) },
+                        { value: "2", label: t("recurrent", { capfirst: true }) },
+                    ]}
+                    {...form.getInputProps("type")}
+                />
+            </Group>
+            <Select
+                label={t("product unit", { capfirst: true })}
+                placeholder={t("product unit", { capfirst: true })}
+                description={t(
+                    "the product unit will be assigned to the quantity requested in the form",
+                    { capfirst: true },
+                )}
+                radius="sm"
+                withAsterisk
+                searchable
+                clearable
+                data={Object.entries(ProductUnit).map(([key, value]) => ({
+                    value: key,
+                    label: t(value, { capfirst: true }),
+                }))}
+                {...form.getInputProps("unit")}
+            />
+            <Group grow>
+                <NumberInput
+                    label={t("product price", { capfirst: true })}
+                    placeholder={t("product price", { capfirst: true })}
+                    radius="sm"
+                    {...form.getInputProps("price")}
+                />
+                <NumberInput
+                    label={t("product price kg", { capfirst: true })}
+                    placeholder={t("product price kg", { capfirst: true })}
+                    radius="sm"
+                    {...form.getInputProps("price_kg")}
+                />
+            </Group>
+            <Group grow>
+                <NumberInput
+                    label={t("product quantity", { capfirst: true })}
+                    placeholder={t("product quantity", { capfirst: true })}
+                    radius="sm"
+                    {...form.getInputProps("quantity", { capfirst: true })}
+                />
+                <Select
+                    label={t("product quantity unit", { capfirst: true })}
+                    placeholder={t("product quantity unit", { capfirst: true })}
+                    radius="sm"
+                    clearable
+                    searchable
+                    data={Object.entries(ProductQuantityUnit).map(([key, value]) => ({
+                        value: key,
+                        label: t(value, { capfirst: true }),
+                    }))}
+                    {...form.getInputProps("quantity_unit", { capfirst: true })}
+                />
+            </Group>
+            <Group mt="sm" justify="space-between">
+                <Button
+                    variant="filled"
+                    color="red"
+                    aria-label={t("cancel", { capfirst: true })}
+                    leftSection={<IconCancel />}
+                    onClick={() => {
+                        form.clearErrors();
+                        onClose();
+                    }}
+                >
+                    {t("cancel", { capfirst: true })}
+                </Button>
+                <Button
+                    variant="filled"
+                    aria-label={
+                        currentProduct
+                            ? t("edit product", { capfirst: true })
+                            : t("create product", { capfirst: true })
+                    }
+                    onClick={() => {
+                        form.validate();
+                        if (form.isValid()) {
+                            handleSubmit(form.getValues(), currentProduct?.id);
+                        }
+                    }}
+                >
+                    {currentProduct
+                        ? t("edit product", { capfirst: true })
+                        : t("create product", { capfirst: true })}
+                </Button>
+            </Group>
+        </Modal>
+    );
+}

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

@@ -1,73 +1,72 @@
-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 { useDeleteProduct } from "@/services/api";
-import { useNavigate, useSearchParams } from "react-router";
-
-export type ProductRowProps = {
-    product: Product;
-}
-
-export default function ProductRow({
-    product,
-}: ProductRowProps) {
-    const [searchParams] = useSearchParams();
-    const deleteMutation = useDeleteProduct();
-    const navigate = useNavigate();
-
-    return (
-        <Table.Tr key={product.id}>
-            <Table.Td>{product.name}</Table.Td>
-            <Table.Td>{t(ProductType[product.type])}</Table.Td>
-            <Table.Td>
-            {
-                product.price ?
-                Intl.NumberFormat(
-                    "fr-FR", 
-                    {style: "currency",  currency: "EUR"}
-                ).format(product.price) : null
-            }
-            </Table.Td>
-            <Table.Td>
-            {
-                product.price_kg ?
-                `${Intl.NumberFormat(
-                    "fr-FR", 
-                    {style: "currency",  currency: "EUR"}
-                ).format(product.price_kg)}/kg` : null
-
-            }
-            </Table.Td>
-            <Table.Td>{product.quantity}{product.quantity_unit}</Table.Td>
-            <Table.Td>{t(ProductUnit[product.unit], {capfirst: true})}</Table.Td>
-            <Table.Td>
-                <Tooltip label={t("edit product", {capfirst: true})}>
-                    <ActionIcon
-                        size="sm" 
-                        mr="5"
-                        onClick={(e) => {
-                            e.stopPropagation();
-                            navigate(`/dashboard/products/${product.id}/edit${searchParams ? `?${searchParams.toString()}` : ""}`);
-                        }}
-                    >
-                        <IconEdit/>
-                    </ActionIcon>
-                </Tooltip>
-                <Tooltip label={t("remove product", {capfirst: true})}>
-                    <ActionIcon 
-                        color="red" 
-                        size="sm" 
-                        mr="5"
-                        onClick={() => {
-                            deleteMutation.mutate(product.id);
-                        }}
-                    >
-                        <IconX/>
-                    </ActionIcon>
-                </Tooltip>
-            </Table.Td>
-        </Table.Tr>
-
-    );
-}
+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 { useDeleteProduct } from "@/services/api";
+import { useNavigate, useSearchParams } from "react-router";
+
+export type ProductRowProps = {
+    product: Product;
+};
+
+export default function ProductRow({ product }: ProductRowProps) {
+    const [searchParams] = useSearchParams();
+    const deleteMutation = useDeleteProduct();
+    const navigate = useNavigate();
+
+    return (
+        <Table.Tr key={product.id}>
+            <Table.Td>{product.name}</Table.Td>
+            <Table.Td>{t(ProductType[product.type])}</Table.Td>
+            <Table.Td>
+                {product.price
+                    ? Intl.NumberFormat("fr-FR", {
+                          style: "currency",
+                          currency: "EUR",
+                      }).format(product.price)
+                    : null}
+            </Table.Td>
+            <Table.Td>
+                {product.price_kg
+                    ? `${Intl.NumberFormat("fr-FR", {
+                          style: "currency",
+                          currency: "EUR",
+                      }).format(product.price_kg)}/kg`
+                    : null}
+            </Table.Td>
+            <Table.Td>
+                {product.quantity}
+                {product.quantity_unit}
+            </Table.Td>
+            <Table.Td>{t(ProductUnit[product.unit], { capfirst: true })}</Table.Td>
+            <Table.Td>
+                <Tooltip label={t("edit product", { capfirst: true })}>
+                    <ActionIcon
+                        size="sm"
+                        mr="5"
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            navigate(
+                                `/dashboard/products/${product.id}/edit${searchParams ? `?${searchParams.toString()}` : ""}`,
+                            );
+                        }}
+                    >
+                        <IconEdit />
+                    </ActionIcon>
+                </Tooltip>
+                <Tooltip label={t("remove product", { capfirst: true })}>
+                    <ActionIcon
+                        color="red"
+                        size="sm"
+                        mr="5"
+                        onClick={() => {
+                            deleteMutation.mutate(product.id);
+                        }}
+                    >
+                        <IconX />
+                    </ActionIcon>
+                </Tooltip>
+            </Table.Td>
+        </Table.Tr>
+    );
+}

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

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

frontend/src/components/Shipments/Form/index.tsx

@@ -11,7 +11,7 @@ export type ShipmentFormProps = {
     shipment: Shipment;
     minimumPrice?: number | null;
     index: number;
-}
+};
 
 export default function ShipmentForm({
     shipment,
@@ -20,20 +20,16 @@ export default function ShipmentForm({
     minimumPrice,
 }: ShipmentFormProps) {
     const shipmentPrice = useMemo(() => {
-        const values = Object
-            .entries(inputForm.getValues())
-            .filter(([key]) => 
-                key.includes("planned") && 
-                key.split("-")[1] === String(shipment.id)
-            );
+        const values = Object.entries(inputForm.getValues()).filter(
+            ([key]) => key.includes("planned") && key.split("-")[1] === String(shipment.id),
+        );
         return computePrices(values, shipment.products);
     }, [inputForm, shipment.products, shipment.id]);
 
     const priceRequirement = useMemo(() => {
-        if (!minimumPrice)
-            return false;
-        return minimumPrice ? shipmentPrice < minimumPrice : true
-    }, [shipmentPrice, minimumPrice])
+        if (!minimumPrice) return false;
+        return minimumPrice ? shipmentPrice < minimumPrice : true;
+    }, [shipmentPrice, minimumPrice]);
 
     return (
         <Accordion.Item value={String(index)}>
@@ -41,44 +37,38 @@ export default function ShipmentForm({
                 <Group justify="space-between">
                     <Text>{shipment.name}</Text>
                     <Stack gap={0}>
-                    <Text c={priceRequirement ? "red" : "green"}>{
-                        Intl.NumberFormat(
-                            "fr-FR", 
-                            {style: "currency",  currency: "EUR"}
-                        ).format(shipmentPrice)
-                    }</Text>
-                    {
-                        priceRequirement ? 
-                        <Text c="red"size="sm">
-                            {`${t("minimum price for this shipment should be at least", {capfirst: true})} ${minimumPrice}€`}
-                        </Text> : 
-                        null
-                    }
+                        <Text c={priceRequirement ? "red" : "green"}>
+                            {Intl.NumberFormat("fr-FR", {
+                                style: "currency",
+                                currency: "EUR",
+                            }).format(shipmentPrice)}
+                        </Text>
+                        {priceRequirement ? (
+                            <Text c="red" size="sm">
+                                {`${t("minimum price for this shipment should be at least", { capfirst: true })} ${minimumPrice}€`}
+                            </Text>
+                        ) : null}
                     </Stack>
                     <Text mr="lg">
-                        {`${
-                            new Date(shipment.date).toLocaleDateString("fr-FR", {
-                                weekday: "long",
-                                year: "numeric",
-                                month: "long",
-                                day: "numeric",
-                            })
-                        }`}
+                        {`${new Date(shipment.date).toLocaleDateString("fr-FR", {
+                            weekday: "long",
+                            year: "numeric",
+                            month: "long",
+                            day: "numeric",
+                        })}`}
                     </Text>
                 </Group>
-                </Accordion.Control>
+            </Accordion.Control>
             <Accordion.Panel>
-            {
-                shipment?.products.map((product) => (
+                {shipment?.products.map((product) => (
                     <ProductForm
                         key={product.id}
                         product={product}
                         shipment={shipment}
                         inputForm={inputForm}
                     />
-                ))
-            }
+                ))}
             </Accordion.Panel>
         </Accordion.Item>
     );
-}
+}

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

@@ -1,120 +1,146 @@
-import { Button, Group, Modal, MultiSelect, Select, TextInput, type ModalBaseProps } from "@mantine/core";
-import { t } from "@/config/i18n";
-import { DatePickerInput } from "@mantine/dates";
-import { IconCancel } from "@tabler/icons-react";
-import { useForm } from "@mantine/form";
-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;
-    handleSubmit: (shipment: ShipmentInputs, id?: number) => void;
-}
-
-export default function ShipmentModal({
-    opened, 
-    onClose, 
-    currentShipment, 
-    handleSubmit
-}: ShipmentModalProps) {
-    const form = useForm<ShipmentInputs>({
-        initialValues: {
-            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) =>
-                !value ? `${t("a name", {capfirst: true})} ${t('is required')}` : null,
-            date: (value) =>
-                !value ? `${t("a shipment date", {capfirst: true})} ${t('is required')}` : null,
-            form_id: (value) =>
-                !value ? `${t("a form", {capfirst: true})} ${t('is required')}` : null,
-        }
-    });
-
-    const { data: allForms } = useGetForms();
-    const { data: allProducts } = useGetProducts(new URLSearchParams("types=1"));
-    const { data: allProductors } = useGetProductors()
-
-    const formsSelect = useMemo(() => {
-        return allForms?.map(currentForm => ({value: String(currentForm.id), label: `${currentForm.name} ${currentForm.season}`}))
-    }, [allForms]);
-
-    const productsSelect = useMemo(() => {
-        if (!allProducts)
-            return;
-        return allProductors?.map(productor => {
-            return {
-                group: productor.name, 
-                items: allProducts
-                    .filter((product) => product.productor.id === productor.id)
-                    .map((product) => ({value: String(product.id), label: `${product.name}`}))
-            }
-        });
-    }, [allProductors, allProducts]);
-
-    return (
-        <Modal
-            opened={opened}
-            onClose={onClose}
-            title={currentShipment ? t("edit shipment") : t('create shipment')}
-        >
-            <TextInput
-                label={t("shipment name", {capfirst: true})}
-                placeholder={t("shipment name", {capfirst: true})}
-                radius="sm"
-                withAsterisk
-                {...form.getInputProps('name')}
-            />
-            <DatePickerInput
-                label={t("shipment date", {capfirst: true})}
-                placeholder={t("shipment date", {capfirst: true})}
-                withAsterisk
-                {...form.getInputProps('date')}
-            />
-            <Select
-                label={t("shipment form", {capfirst: true})}
-                placeholder={t("shipment form", {capfirst: true})}
-                radius="sm"
-                data={formsSelect || []}
-                clearable
-                withAsterisk
-                {...form.getInputProps('form_id')}
-            />
-            <MultiSelect
-                label={t("shipment products", {capfirst: true})}
-                placeholder={t("shipment products", {capfirst: true})}
-                description={t("shipment products is necessary only for planned products (if all products are recurrent leave empty)", {capfirst: true})}
-                data={productsSelect || []}
-                clearable
-                searchable
-                {...form.getInputProps('product_ids')}
-            />
-            <Group mt="sm" justify="space-between">
-                <Button
-                    variant="filled"
-                    color="red"
-                    aria-label={t("cancel", {capfirst: true})}
-                    leftSection={<IconCancel/>}
-                    onClick={() => {
-                        form.clearErrors();
-                        onClose();
-                    }}
-                >{t("cancel", {capfirst: true})}</Button>
-                <Button
-                    variant="filled"
-                    aria-label={currentShipment ? t("edit shipment", {capfirst: true}) : t('create shipment', {capfirst: true})}
-                    onClick={() => {
-                        form.validate();
-                        if (form.isValid()) {
-                            handleSubmit(form.getValues(), currentShipment?.id)
-                        }
-                    }}
-                >{currentShipment ? t("edit shipment", {capfirst: true}) : t('create shipment', {capfirst: true})}</Button>
-            </Group>
-        </Modal>
-    );
-}
+import {
+    Button,
+    Group,
+    Modal,
+    MultiSelect,
+    Select,
+    TextInput,
+    type ModalBaseProps,
+} from "@mantine/core";
+import { t } from "@/config/i18n";
+import { DatePickerInput } from "@mantine/dates";
+import { IconCancel } from "@tabler/icons-react";
+import { useForm } from "@mantine/form";
+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;
+    handleSubmit: (shipment: ShipmentInputs, id?: number) => void;
+};
+
+export default function ShipmentModal({
+    opened,
+    onClose,
+    currentShipment,
+    handleSubmit,
+}: ShipmentModalProps) {
+    const form = useForm<ShipmentInputs>({
+        initialValues: {
+            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) =>
+                !value ? `${t("a name", { capfirst: true })} ${t("is required")}` : null,
+            date: (value) =>
+                !value ? `${t("a shipment date", { capfirst: true })} ${t("is required")}` : null,
+            form_id: (value) =>
+                !value ? `${t("a form", { capfirst: true })} ${t("is required")}` : null,
+        },
+    });
+
+    const { data: allForms } = useGetForms();
+    const { data: allProducts } = useGetProducts(new URLSearchParams("types=1"));
+    const { data: allProductors } = useGetProductors();
+
+    const formsSelect = useMemo(() => {
+        return allForms?.map((currentForm) => ({
+            value: String(currentForm.id),
+            label: `${currentForm.name} ${currentForm.season}`,
+        }));
+    }, [allForms]);
+
+    const productsSelect = useMemo(() => {
+        if (!allProducts) return;
+        return allProductors?.map((productor) => {
+            return {
+                group: productor.name,
+                items: allProducts
+                    .filter((product) => product.productor.id === productor.id)
+                    .map((product) => ({
+                        value: String(product.id),
+                        label: `${product.name}`,
+                    })),
+            };
+        });
+    }, [allProductors, allProducts]);
+
+    return (
+        <Modal
+            opened={opened}
+            onClose={onClose}
+            title={currentShipment ? t("edit shipment") : t("create shipment")}
+        >
+            <TextInput
+                label={t("shipment name", { capfirst: true })}
+                placeholder={t("shipment name", { capfirst: true })}
+                radius="sm"
+                withAsterisk
+                {...form.getInputProps("name")}
+            />
+            <DatePickerInput
+                label={t("shipment date", { capfirst: true })}
+                placeholder={t("shipment date", { capfirst: true })}
+                withAsterisk
+                {...form.getInputProps("date")}
+            />
+            <Select
+                label={t("shipment form", { capfirst: true })}
+                placeholder={t("shipment form", { capfirst: true })}
+                radius="sm"
+                data={formsSelect || []}
+                clearable
+                withAsterisk
+                {...form.getInputProps("form_id")}
+            />
+            <MultiSelect
+                label={t("shipment products", { capfirst: true })}
+                placeholder={t("shipment products", { capfirst: true })}
+                description={t(
+                    "shipment products is necessary only for planned products (if all products are recurrent leave empty)",
+                    { capfirst: true },
+                )}
+                data={productsSelect || []}
+                clearable
+                searchable
+                {...form.getInputProps("product_ids")}
+            />
+            <Group mt="sm" justify="space-between">
+                <Button
+                    variant="filled"
+                    color="red"
+                    aria-label={t("cancel", { capfirst: true })}
+                    leftSection={<IconCancel />}
+                    onClick={() => {
+                        form.clearErrors();
+                        onClose();
+                    }}
+                >
+                    {t("cancel", { capfirst: true })}
+                </Button>
+                <Button
+                    variant="filled"
+                    aria-label={
+                        currentShipment
+                            ? t("edit shipment", { capfirst: true })
+                            : t("create shipment", { capfirst: true })
+                    }
+                    onClick={() => {
+                        form.validate();
+                        if (form.isValid()) {
+                            handleSubmit(form.getValues(), currentShipment?.id);
+                        }
+                    }}
+                >
+                    {currentShipment
+                        ? t("edit shipment", { capfirst: true })
+                        : t("create shipment", { capfirst: true })}
+                </Button>
+            </Group>
+        </Modal>
+    );
+}

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

@@ -1,52 +1,52 @@
-import { ActionIcon, Table, Tooltip } from "@mantine/core";
-import { useNavigate, useSearchParams } from "react-router";
-import { useDeleteShipment} from "@/services/api";
-import { IconEdit, IconX } from "@tabler/icons-react";
-import { t } from "@/config/i18n";
-import type { Shipment } from "@/services/resources/shipments";
-
-export type ShipmentRowProps = {
-    shipment: Shipment;
-}
-
-export default function ShipmentRow({
-    shipment, 
-}: ShipmentRowProps) {
-    const [searchParams] = useSearchParams();
-    const deleteMutation = useDeleteShipment();
-    const navigate = useNavigate();
-
-    return (
-        <Table.Tr key={shipment.id}>
-            <Table.Td>{shipment.name}</Table.Td>
-            <Table.Td>{shipment.date}</Table.Td>
-            <Table.Td>{`${shipment.form.name} ${shipment.form.season}`}</Table.Td>
-            <Table.Td>
-                <Tooltip label={t("edit productor", {capfirst: true})}>
-                    <ActionIcon 
-                        size="sm" 
-                        mr="5"
-                        onClick={(e) => {
-                            e.stopPropagation();
-                            navigate(`/dashboard/shipments/${shipment.id}/edit${searchParams ? `?${searchParams.toString()}` : ""}`);
-                        }}
-                    >
-                        <IconEdit/>
-                    </ActionIcon>
-                </Tooltip>
-                <Tooltip label={t("remove productor", {capfirst: true})}>
-                    <ActionIcon 
-                        color="red" 
-                        size="sm" 
-                        mr="5"
-                        onClick={() => {
-                            deleteMutation.mutate(shipment.id);
-                        }}
-                    >
-                        <IconX/>
-                    </ActionIcon>
-                </Tooltip>
-            </Table.Td>
-        </Table.Tr>
-    );
-}
+import { ActionIcon, Table, Tooltip } from "@mantine/core";
+import { useNavigate, useSearchParams } from "react-router";
+import { useDeleteShipment } from "@/services/api";
+import { IconEdit, IconX } from "@tabler/icons-react";
+import { t } from "@/config/i18n";
+import type { Shipment } from "@/services/resources/shipments";
+
+export type ShipmentRowProps = {
+    shipment: Shipment;
+};
+
+export default function ShipmentRow({ shipment }: ShipmentRowProps) {
+    const [searchParams] = useSearchParams();
+    const deleteMutation = useDeleteShipment();
+    const navigate = useNavigate();
+
+    return (
+        <Table.Tr key={shipment.id}>
+            <Table.Td>{shipment.name}</Table.Td>
+            <Table.Td>{shipment.date}</Table.Td>
+            <Table.Td>{`${shipment.form.name} ${shipment.form.season}`}</Table.Td>
+            <Table.Td>
+                <Tooltip label={t("edit productor", { capfirst: true })}>
+                    <ActionIcon
+                        size="sm"
+                        mr="5"
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            navigate(
+                                `/dashboard/shipments/${shipment.id}/edit${searchParams ? `?${searchParams.toString()}` : ""}`,
+                            );
+                        }}
+                    >
+                        <IconEdit />
+                    </ActionIcon>
+                </Tooltip>
+                <Tooltip label={t("remove productor", { capfirst: true })}>
+                    <ActionIcon
+                        color="red"
+                        size="sm"
+                        mr="5"
+                        onClick={() => {
+                            deleteMutation.mutate(shipment.id);
+                        }}
+                    >
+                        <IconX />
+                    </ActionIcon>
+                </Tooltip>
+            </Table.Td>
+        </Table.Tr>
+    );
+}

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

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

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

@@ -1,76 +1,77 @@
-import { Button, Group, Modal, TextInput, Title, type ModalBaseProps } from "@mantine/core";
-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";
-
-export type UserModalProps = ModalBaseProps & {
-    currentUser?: User;
-    handleSubmit: (user: UserInputs, id?: number) => void;
-}
-
-export function UserModal({
-    opened, 
-    onClose, 
-    currentUser, 
-    handleSubmit
-}: UserModalProps) {
-    const form = useForm<UserInputs>({
-        initialValues: {
-            name: currentUser?.name ?? "",
-            email: currentUser?.email ?? ""
-        },
-        validate: {
-            name: (value) =>
-                !value ? `${t("name", {capfirst: true})} ${t('is required')}` : null,
-            email: (value) =>
-                !value ? `${t("email", {capfirst: true})} ${t('is required')}` : null,
-        }
-    });
-
-    return (
-        <Modal
-            opened={opened}
-            onClose={onClose}
-            title={t("create user", {capfirst: true})}
-        >
-            <Title order={4}>{t("informations", {capfirst: true})}</Title>
-            <TextInput
-                label={t("user name", {capfirst: true})}
-                placeholder={t("user name", {capfirst: true})}
-                radius="sm"
-                withAsterisk
-                {...form.getInputProps('name')}
-            />
-             <TextInput
-                label={t("user email", {capfirst: true})}
-                placeholder={t("user email", {capfirst: true})}
-                radius="sm"
-                withAsterisk
-                {...form.getInputProps('email')}
-            />
-            <Group mt="sm" justify="space-between">
-                <Button
-                    variant="filled"
-                    color="red"
-                    aria-label={t("cancel", {capfirst: true})}
-                    leftSection={<IconCancel/>}
-                    onClick={() => {
-                        form.clearErrors();
-                        onClose();
-                    }}
-                >{t("cancel", {capfirst: true})}</Button>
-                <Button
-                    variant="filled"
-                    aria-label={currentUser ? t("edit user", {capfirst: true}) : t('create user', {capfirst: true})}
-                    onClick={() => {
-                        form.validate();
-                        if (form.isValid()) {
-                            handleSubmit(form.getValues(), currentUser?.id)
-                        }
-                    }}
-                >{currentUser ? t("edit user", {capfirst: true}) : t('create user', {capfirst: true})}</Button>
-            </Group>
-        </Modal>
-    );
-}
+import { Button, Group, Modal, TextInput, Title, type ModalBaseProps } from "@mantine/core";
+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";
+
+export type UserModalProps = ModalBaseProps & {
+    currentUser?: User;
+    handleSubmit: (user: UserInputs, id?: number) => void;
+};
+
+export function UserModal({ opened, onClose, currentUser, handleSubmit }: UserModalProps) {
+    const form = useForm<UserInputs>({
+        initialValues: {
+            name: currentUser?.name ?? "",
+            email: currentUser?.email ?? "",
+        },
+        validate: {
+            name: (value) =>
+                !value ? `${t("name", { capfirst: true })} ${t("is required")}` : null,
+            email: (value) =>
+                !value ? `${t("email", { capfirst: true })} ${t("is required")}` : null,
+        },
+    });
+
+    return (
+        <Modal opened={opened} onClose={onClose} title={t("create user", { capfirst: true })}>
+            <Title order={4}>{t("informations", { capfirst: true })}</Title>
+            <TextInput
+                label={t("user name", { capfirst: true })}
+                placeholder={t("user name", { capfirst: true })}
+                radius="sm"
+                withAsterisk
+                {...form.getInputProps("name")}
+            />
+            <TextInput
+                label={t("user email", { capfirst: true })}
+                placeholder={t("user email", { capfirst: true })}
+                radius="sm"
+                withAsterisk
+                {...form.getInputProps("email")}
+            />
+            <Group mt="sm" justify="space-between">
+                <Button
+                    variant="filled"
+                    color="red"
+                    aria-label={t("cancel", { capfirst: true })}
+                    leftSection={<IconCancel />}
+                    onClick={() => {
+                        form.clearErrors();
+                        onClose();
+                    }}
+                >
+                    {t("cancel", { capfirst: true })}
+                </Button>
+                <Button
+                    variant="filled"
+                    aria-label={
+                        currentUser
+                            ? t("edit user", { capfirst: true })
+                            : t("create user", { capfirst: true })
+                    }
+                    onClick={() => {
+                        form.validate();
+                        if (form.isValid()) {
+                            handleSubmit(form.getValues(), currentUser?.id);
+                        }
+                    }}
+                >
+                    {currentUser
+                        ? t("edit user", { capfirst: true })
+                        : t("create user", { capfirst: true })}
+                </Button>
+            </Group>
+        </Modal>
+    );
+}

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

@@ -1,52 +1,51 @@
-import { ActionIcon, Table, Tooltip } from "@mantine/core";
-import { t } from "@/config/i18n";
-import { IconEdit, IconX } from "@tabler/icons-react";
-import { type User } from "@/services/resources/users";
-import { useDeleteUser } from "@/services/api";
-import { useNavigate, useSearchParams } from "react-router";
-
-export type UserRowProps = {
-    user: User;
-}
-
-export default function UserRow({
-    user,
-}: UserRowProps) {
-    const [searchParams] = useSearchParams();
-    const deleteMutation = useDeleteUser();
-    const navigate = useNavigate();
-
-    return (
-        <Table.Tr key={user.id}>
-            <Table.Td>{user.name}</Table.Td>
-            <Table.Td>{user.email}</Table.Td>
-            <Table.Td>
-                <Tooltip label={t("edit user", {capfirst: true})}>
-                    <ActionIcon
-                        size="sm" 
-                        mr="5"
-                        onClick={(e) => {
-                            e.stopPropagation();
-                            navigate(`/dashboard/users/${user.id}/edit${searchParams ? `?${searchParams.toString()}` : ""}`);
-                        }}
-                    >
-                        <IconEdit/>
-                    </ActionIcon>
-                </Tooltip>
-                <Tooltip label={t("remove user", {capfirst: true})}>
-                    <ActionIcon 
-                        color="red" 
-                        size="sm" 
-                        mr="5"
-                        onClick={() => {
-                            deleteMutation.mutate(user.id);
-                        }}
-                    >
-                        <IconX/>
-                    </ActionIcon>
-                </Tooltip>
-            </Table.Td>
-        </Table.Tr>
-
-    );
-}
+import { ActionIcon, Table, Tooltip } from "@mantine/core";
+import { t } from "@/config/i18n";
+import { IconEdit, IconX } from "@tabler/icons-react";
+import { type User } from "@/services/resources/users";
+import { useDeleteUser } from "@/services/api";
+import { useNavigate, useSearchParams } from "react-router";
+
+export type UserRowProps = {
+    user: User;
+};
+
+export default function UserRow({ user }: UserRowProps) {
+    const [searchParams] = useSearchParams();
+    const deleteMutation = useDeleteUser();
+    const navigate = useNavigate();
+
+    return (
+        <Table.Tr key={user.id}>
+            <Table.Td>{user.name}</Table.Td>
+            <Table.Td>{user.email}</Table.Td>
+            <Table.Td>
+                <Tooltip label={t("edit user", { capfirst: true })}>
+                    <ActionIcon
+                        size="sm"
+                        mr="5"
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            navigate(
+                                `/dashboard/users/${user.id}/edit${searchParams ? `?${searchParams.toString()}` : ""}`,
+                            );
+                        }}
+                    >
+                        <IconEdit />
+                    </ActionIcon>
+                </Tooltip>
+                <Tooltip label={t("remove user", { capfirst: true })}>
+                    <ActionIcon
+                        color="red"
+                        size="sm"
+                        mr="5"
+                        onClick={() => {
+                            deleteMutation.mutate(user.id);
+                        }}
+                    >
+                        <IconX />
+                    </ActionIcon>
+                </Tooltip>
+            </Table.Td>
+        </Table.Tr>
+    );
+}

frontend/src/config/config.tsx

@@ -1,4 +1,4 @@
 export const Config = {
     backend_uri: import.meta.env.VITE_API_URL,
-    debug: import.meta.env.NODE_ENV === "development"
-}
+    debug: import.meta.env.NODE_ENV === "development",
+};

frontend/src/config/i18n.tsx

@@ -8,46 +8,42 @@ import fr from "@/../locales/fr.json";
 import { Config } from "@/config/config";
 
 const resources = {
-	en: { translation: en },
-	fr: { translation: fr },
+    en: { translation: en },
+    fr: { translation: fr },
 };
 
 i18next
-	.use(initReactI18next)
-	.init({
-		resources: resources,
-		fallbackLng: "fr",
-		debug: Config.debug,
-		detection: {
-			caches: [],
-		},
-		interpolation: {
-			escapeValue: false,
-		},
-		ns: ["translation"],
-		defaultNS: "translation",
-	})
-	.then(() => {
-		[Settings.defaultLocale] = i18next.language.split("-");
-
-		i18next.services.formatter?.add(
-			"capfirst",
-			(value) => {
-				if (typeof value !== "string" || !value.length) {
-					return value;
-				}
-				return value.charAt(0).toUpperCase() + value.slice(1);
-			}
-		);
-	});
+    .use(initReactI18next)
+    .init({
+        resources: resources,
+        fallbackLng: "fr",
+        debug: Config.debug,
+        detection: {
+            caches: [],
+        },
+        interpolation: {
+            escapeValue: false,
+        },
+        ns: ["translation"],
+        defaultNS: "translation",
+    })
+    .then(() => {
+        [Settings.defaultLocale] = i18next.language.split("-");
 
+        i18next.services.formatter?.add("capfirst", (value) => {
+            if (typeof value !== "string" || !value.length) {
+                return value;
+            }
+            return value.charAt(0).toUpperCase() + value.slice(1);
+        });
+    });
 
 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);
-	}
-	return result;
+    const result = i18next.t(message, params);
+    if (params?.capfirst && typeof result === "string" && result.length) {
+        return result.charAt(0).toUpperCase() + result.slice(1);
+    }
+    return result;
 }
 
 export default i18next;

frontend/src/main.tsx

@@ -4,20 +4,20 @@ import { RouterProvider } from "react-router";
 import { router } from "@/router.tsx";
 import { MantineProvider } from "@mantine/core";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import '@mantine/core/styles.css';
-import '@mantine/dates/styles.css';
-import '@mantine/notifications/styles.css';
+import "@mantine/core/styles.css";
+import "@mantine/dates/styles.css";
+import "@mantine/notifications/styles.css";
 import { Notifications } from "@mantine/notifications";
 
-const queryClient = new QueryClient()
+const queryClient = new QueryClient();
 
 createRoot(document.getElementById("root")!).render(
-  <StrictMode>
-    <QueryClientProvider client={queryClient}>
-      <MantineProvider>
-        <Notifications />
-        <RouterProvider router={router} />
-      </MantineProvider>
-    </QueryClientProvider>
-  </StrictMode>
+    <StrictMode>
+        <QueryClientProvider client={queryClient}>
+            <MantineProvider>
+                <Notifications />
+                <RouterProvider router={router} />
+            </MantineProvider>
+        </QueryClientProvider>
+    </StrictMode>,
 );

frontend/src/pages/Contract/index.tsx

@@ -1,268 +1,281 @@
-import { ProductForm } from "@/components/Products/Form";
-import ShipmentForm from "@/components/Shipments/Form";
-import { t } from "@/config/i18n";
-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 Contract() {
-    const { id } = useParams();
-    const { data: form } = useGetForm(Number(id), {enabled: !!id});
-    const inputForm = useForm<Record<string, number | string>>({
-        initialValues: {
-            firstname: "",
-            lastname: "",
-            email: "",
-            phone: "",
-        },
-        validate: {
-            firstname: (value) => !value ? `${t("a firstname", {capfirst: true})} ${t("is required")}` : null,
-            lastname: (value) => !value ? `${t("a lastname", {capfirst: true})} ${t("is required")}` : null,
-            email: (value) => !value ? `${t("a email", {capfirst: true})} ${t("is required")}` : null,
-            phone: (value) => !value ? `${t("a phone", {capfirst: true})} ${t("is required")}` : null,
-        }
-    });
-
-    const createContractMutation = useCreateContract();
-
-    const productsRecurent = useMemo(() => {
-        return form?.productor?.products.filter((el) => el.type === "2")
-    }, [form]);
-
-    const shipments = useMemo(() => {
-        return form?.shipments;
-    }, [form]);
-
-    const allProducts = useMemo(() => {
-        return form?.productor?.products;
-    }, [form])
-
-    const price = useMemo(() => {
-        if (!allProducts) {
-            return 0;
-        }
-        const values = Object.entries(inputForm.getValues());
-        return computePrices(values, allProducts, form?.shipments.length);
-    }, [inputForm, allProducts, form?.shipments]);
-
-    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(
-                    Object.entries(inputForm.getValues()), 
-                    shipment.products
-                );
-                if (total < (form?.minimum_shipment_value || 0)) {
-                    return shipment.id;
-                }
-                return null;
-            })
-            .filter(Boolean);
-            return shipmentErrors.length === 0;
-    }, [form, inputForm]);
-
-    const withDefaultValues = useCallback((values: Record<string, number | string>) => {
-        if (!productsRecurent || !form)
-            return {};
-        const result = {...values};
-
-        productsRecurent.forEach((product: Product) => {
-            const key = `recurrent-${product.id}`;
-            if (result[key] === undefined || result[key] === "") {
-                result[key] = 0;
-            }
-        });
-
-        form.shipments.forEach((shipment) => {
-            shipment.products.forEach((product) => {
-                const key = `planned-${shipment.id}-${product.id}`;
-                if (result[key] === undefined || result[key] === "") {
-                    result[key] = 0;
-                }
-            })
-        });
-
-        return result;
-    }, [productsRecurent, form]);
-
-    const handleSubmit = useCallback(async () => {
-        const errors = inputForm.validate();
-        if (!form) {
-            return;
-        }
-        if (inputForm.isValid() && isShipmentsMinimumValue()) {
-            const contract = {
-                form_id: form.id,
-                contract: withDefaultValues(inputForm.getValues()),
-            }
-            await createContractMutation.mutateAsync(contract);
-        } else {
-            const firstErrorField = Object.keys(errors.errors)[0];
-            const ref = inputRefs.current[firstErrorField];
-            ref?.scrollIntoView({behavior: "smooth", block: "center"});
-        }
-    }, [inputForm, inputRefs, isShipmentsMinimumValue, form, createContractMutation, withDefaultValues]);
-
-
-    if (!form || !shipments || !productsRecurent) 
-        return (
-            <Group 
-                align="center"
-                justify="center"
-                h="80vh"
-                w="100%"
-            >
-                <Loader color="pink"/>
-            </Group>
-        );
-
-
-    return (
-        <Stack w={{base: "100%", md: "80%", lg: "50%"}}>
-            <Title order={2}>{form.name}</Title>
-            <Title order={3}>{t("informations", {capfirst: true})}</Title>
-            <Text size="sm">
-                {t("all theses informations are for contract generation", {capfirst: true})}
-            </Text>
-            <Group grow>
-                <TextInput
-                    label={t("firstname", {capfirst: true})}
-                    placeholder={t("firstname", {capfirst: true})}
-                    radius="sm"
-                    withAsterisk
-                    required
-                    leftSection={<IconUser/>}
-                    {...inputForm.getInputProps('firstname')}
-                    ref={(el) => {inputRefs.current.firstname = el}}
-                />
-                <TextInput
-                    label={t("lastname", {capfirst: true})}
-                    placeholder={t("lastname", {capfirst: true})}
-                    radius="sm"
-                    withAsterisk
-                    required
-                    leftSection={<IconUser/>}
-                    {...inputForm.getInputProps('lastname')}
-                    ref={(el) => {inputRefs.current.lastname = el}}
-                />
-            </Group>
-            <Group grow>
-                <TextInput
-                    label={t("email", {capfirst: true})}
-                    placeholder={t("email", {capfirst: true})}
-                    radius="sm"
-                    withAsterisk
-                    required
-                    leftSection={<IconMail/>}
-                    {...inputForm.getInputProps('email')}
-                    ref={(el) => {inputRefs.current.email = el}}
-                />
-                <TextInput
-                    label={t("phone", {capfirst: true})}
-                    placeholder={t("phone", {capfirst: true})}
-                    radius="sm"
-                    withAsterisk
-                    required
-                    leftSection={<IconPhone/>}
-                    {...inputForm.getInputProps('phone')}
-                    ref={(el) => {inputRefs.current.phone = el}}
-                />
-            </Group>
-            <Title order={3}>{t('shipments', {capfirst: true})}</Title>
-            <Text>{`${t("there is", {capfirst: true})} ${shipments.length} ${shipments.length > 1 ? t("shipments") : t("shipment")} ${t("for this contract")}`}</Text>
-            <List>
-                {
-                    shipments.map(shipment => (
-                        <List.Item key={shipment.id}>{`${shipment.name} :
-                        ${
-                            new Date(shipment.date).toLocaleDateString("fr-FR", {
-                                weekday: "long",
-                                year: "numeric",
-                                month: "long",
-                                day: "numeric",
-                            })
-                        }`}
-                        </List.Item>
-                    ))
-                }
-            </List>
-            {
-                productsRecurent.length > 0 ? 
-                <>
-                    <Title order={3}>{t('recurrent products', {capfirst: true})}</Title>
-                    <Text size="sm">{t('your selection in this category will apply for all shipments', {capfirst: true})}</Text>
-                    {
-                        productsRecurent.map((product) => (
-                            <ProductForm
-                                key={product.id}
-                                product={product}
-                                inputForm={inputForm}
-                            />
-                        ))
-                    }
-                </> :
-                null
-            }
-            {
-                shipments.some(shipment => shipment.products.length > 0) ?
-                <>
-                    <Title order={3}>{t("planned products")}</Title>
-                    <Text>{t("select products per shipment")}</Text>
-                    <Accordion defaultValue={"0"}>
-                    {
-                        shipments.map((shipment, index) => (
-                            <ShipmentForm
-                                minimumPrice={form.minimum_shipment_value}
-                                shipment={shipment}
-                                index={index}
-                                inputForm={inputForm}
-                                key={shipment.id}
-                            />
-                        ))
-                    }
-                    </Accordion>
-                </> :
-                null
-            }
-             <Overlay 
-                bg={"lightGray"}
-                h="10vh"
-                p="sm"
-                style={{
-                    display: "flex",
-                    justifyContent: "space-between",
-                    alignItems: "center",
-                    position: "sticky", 
-                    bottom: "0px", 
-                }}
-            >
-                <Text>{
-                    t("total", {capfirst: true})} : {Intl.NumberFormat(
-                        "fr-FR", 
-                        {style: "currency",  currency: "EUR"}
-                    ).format(price)}
-                </Text>
-                <Button
-                    aria-label={t('submit contract')}
-                    onClick={handleSubmit}
-                >
-                    {t('submit contract')}
-                </Button>
-            </Overlay>
-        </Stack>
-    )
-}
+import { ProductForm } from "@/components/Products/Form";
+import ShipmentForm from "@/components/Shipments/Form";
+import { t } from "@/config/i18n";
+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 Contract() {
+    const { id } = useParams();
+    const { data: form } = useGetForm(Number(id), { enabled: !!id });
+    const inputForm = useForm<Record<string, number | string>>({
+        initialValues: {
+            firstname: "",
+            lastname: "",
+            email: "",
+            phone: "",
+        },
+        validate: {
+            firstname: (value) =>
+                !value ? `${t("a firstname", { capfirst: true })} ${t("is required")}` : null,
+            lastname: (value) =>
+                !value ? `${t("a lastname", { capfirst: true })} ${t("is required")}` : null,
+            email: (value) =>
+                !value ? `${t("a email", { capfirst: true })} ${t("is required")}` : null,
+            phone: (value) =>
+                !value ? `${t("a phone", { capfirst: true })} ${t("is required")}` : null,
+        },
+    });
+
+    const createContractMutation = useCreateContract();
+
+    const productsRecurent = useMemo(() => {
+        return form?.productor?.products.filter((el) => el.type === "2");
+    }, [form]);
+
+    const shipments = useMemo(() => {
+        return form?.shipments;
+    }, [form]);
+
+    const allProducts = useMemo(() => {
+        return form?.productor?.products;
+    }, [form]);
+
+    const price = useMemo(() => {
+        if (!allProducts) {
+            return 0;
+        }
+        const values = Object.entries(inputForm.getValues());
+        return computePrices(values, allProducts, form?.shipments.length);
+    }, [inputForm, allProducts, form?.shipments]);
+
+    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(
+                    Object.entries(inputForm.getValues()),
+                    shipment.products,
+                );
+                if (total < (form?.minimum_shipment_value || 0)) {
+                    return shipment.id;
+                }
+                return null;
+            })
+            .filter(Boolean);
+        return shipmentErrors.length === 0;
+    }, [form, inputForm]);
+
+    const withDefaultValues = useCallback(
+        (values: Record<string, number | string>) => {
+            if (!productsRecurent || !form) return {};
+            const result = { ...values };
+
+            productsRecurent.forEach((product: Product) => {
+                const key = `recurrent-${product.id}`;
+                if (result[key] === undefined || result[key] === "") {
+                    result[key] = 0;
+                }
+            });
+
+            form.shipments.forEach((shipment) => {
+                shipment.products.forEach((product) => {
+                    const key = `planned-${shipment.id}-${product.id}`;
+                    if (result[key] === undefined || result[key] === "") {
+                        result[key] = 0;
+                    }
+                });
+            });
+
+            return result;
+        },
+        [productsRecurent, form],
+    );
+
+    const handleSubmit = useCallback(async () => {
+        const errors = inputForm.validate();
+        if (!form) {
+            return;
+        }
+        if (inputForm.isValid() && isShipmentsMinimumValue()) {
+            const contract = {
+                form_id: form.id,
+                contract: withDefaultValues(inputForm.getValues()),
+            };
+            await createContractMutation.mutateAsync(contract);
+        } else {
+            const firstErrorField = Object.keys(errors.errors)[0];
+            const ref = inputRefs.current[firstErrorField];
+            ref?.scrollIntoView({ behavior: "smooth", block: "center" });
+        }
+    }, [
+        inputForm,
+        inputRefs,
+        isShipmentsMinimumValue,
+        form,
+        createContractMutation,
+        withDefaultValues,
+    ]);
+
+    if (!form || !shipments || !productsRecurent)
+        return (
+            <Group align="center" justify="center" h="80vh" w="100%">
+                <Loader color="pink" />
+            </Group>
+        );
+
+    return (
+        <Stack w={{ base: "100%", md: "80%", lg: "50%" }}>
+            <Title order={2}>{form.name}</Title>
+            <Title order={3}>{t("informations", { capfirst: true })}</Title>
+            <Text size="sm">
+                {t("all theses informations are for contract generation", {
+                    capfirst: true,
+                })}
+            </Text>
+            <Group grow>
+                <TextInput
+                    label={t("firstname", { capfirst: true })}
+                    placeholder={t("firstname", { capfirst: true })}
+                    radius="sm"
+                    withAsterisk
+                    required
+                    leftSection={<IconUser />}
+                    {...inputForm.getInputProps("firstname")}
+                    ref={(el) => {
+                        inputRefs.current.firstname = el;
+                    }}
+                />
+                <TextInput
+                    label={t("lastname", { capfirst: true })}
+                    placeholder={t("lastname", { capfirst: true })}
+                    radius="sm"
+                    withAsterisk
+                    required
+                    leftSection={<IconUser />}
+                    {...inputForm.getInputProps("lastname")}
+                    ref={(el) => {
+                        inputRefs.current.lastname = el;
+                    }}
+                />
+            </Group>
+            <Group grow>
+                <TextInput
+                    label={t("email", { capfirst: true })}
+                    placeholder={t("email", { capfirst: true })}
+                    radius="sm"
+                    withAsterisk
+                    required
+                    leftSection={<IconMail />}
+                    {...inputForm.getInputProps("email")}
+                    ref={(el) => {
+                        inputRefs.current.email = el;
+                    }}
+                />
+                <TextInput
+                    label={t("phone", { capfirst: true })}
+                    placeholder={t("phone", { capfirst: true })}
+                    radius="sm"
+                    withAsterisk
+                    required
+                    leftSection={<IconPhone />}
+                    {...inputForm.getInputProps("phone")}
+                    ref={(el) => {
+                        inputRefs.current.phone = el;
+                    }}
+                />
+            </Group>
+            <Title order={3}>{t("shipments", { capfirst: true })}</Title>
+            <Text>{`${t("there is", { capfirst: true })} ${shipments.length} ${shipments.length > 1 ? t("shipments") : t("shipment")} ${t("for this contract")}`}</Text>
+            <List>
+                {shipments.map((shipment) => (
+                    <List.Item key={shipment.id}>
+                        {`${shipment.name} :
+                        ${new Date(shipment.date).toLocaleDateString("fr-FR", {
+                            weekday: "long",
+                            year: "numeric",
+                            month: "long",
+                            day: "numeric",
+                        })}`}
+                    </List.Item>
+                ))}
+            </List>
+            {productsRecurent.length > 0 ? (
+                <>
+                    <Title order={3}>{t("recurrent products", { capfirst: true })}</Title>
+                    <Text size="sm">
+                        {t("your selection in this category will apply for all shipments", {
+                            capfirst: true,
+                        })}
+                    </Text>
+                    {productsRecurent.map((product) => (
+                        <ProductForm key={product.id} product={product} inputForm={inputForm} />
+                    ))}
+                </>
+            ) : null}
+            {shipments.some((shipment) => shipment.products.length > 0) ? (
+                <>
+                    <Title order={3}>{t("planned products")}</Title>
+                    <Text>{t("select products per shipment")}</Text>
+                    <Accordion defaultValue={"0"}>
+                        {shipments.map((shipment, index) => (
+                            <ShipmentForm
+                                minimumPrice={form.minimum_shipment_value}
+                                shipment={shipment}
+                                index={index}
+                                inputForm={inputForm}
+                                key={shipment.id}
+                            />
+                        ))}
+                    </Accordion>
+                </>
+            ) : null}
+            <Overlay
+                bg={"lightGray"}
+                h="10vh"
+                p="sm"
+                style={{
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    position: "sticky",
+                    bottom: "0px",
+                }}
+            >
+                <Text>
+                    {t("total", { capfirst: true })} :{" "}
+                    {Intl.NumberFormat("fr-FR", {
+                        style: "currency",
+                        currency: "EUR",
+                    }).format(price)}
+                </Text>
+                <Button aria-label={t("submit contract")} onClick={handleSubmit}>
+                    {t("submit contract")}
+                </Button>
+            </Overlay>
+        </Stack>
+    );
+}

frontend/src/pages/Contract/price.ts

@@ -1,17 +1,23 @@
-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);
-}
+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/Dashboard/index.tsx

@@ -1,28 +1,28 @@
-import { Tabs } from "@mantine/core";
-import { t } from "@/config/i18n";
-import { Outlet, useLocation, useNavigate } from "react-router";
-
-export default function Dashboard() {
-    const navigate = useNavigate();
-    const location = useLocation();
-    
-    return (
-        <Tabs 
-            w={{base: "100%", md: "80%", lg: "60%"}}
-            orientation={"horizontal"}
-            value={location.pathname.split('/')[2]}
-            defaultValue={"productors"}
-            onChange={(value) => navigate(`/dashboard/${value}`)}
-        >
-            <Tabs.List>
-                <Tabs.Tab value="productors">{t("productors", {capfirst: true})}</Tabs.Tab>
-                <Tabs.Tab value="products">{t("products", {capfirst: true})}</Tabs.Tab>
-                <Tabs.Tab value="forms">{t("forms", {capfirst: true})}</Tabs.Tab>
-                <Tabs.Tab value="shipments">{t("shipments", {capfirst: true})}</Tabs.Tab>
-                {/* <Tabs.Tab value="templates">{t("templates", {capfirst: true})}</Tabs.Tab> */}
-                <Tabs.Tab value="users">{t("users", {capfirst: true})}</Tabs.Tab>
-            </Tabs.List>
-            <Outlet/>
-        </Tabs>
-    );
-}
+import { Tabs } from "@mantine/core";
+import { t } from "@/config/i18n";
+import { Outlet, useLocation, useNavigate } from "react-router";
+
+export default function Dashboard() {
+    const navigate = useNavigate();
+    const location = useLocation();
+
+    return (
+        <Tabs
+            w={{ base: "100%", md: "80%", lg: "60%" }}
+            orientation={"horizontal"}
+            value={location.pathname.split("/")[2]}
+            defaultValue={"productors"}
+            onChange={(value) => navigate(`/dashboard/${value}`)}
+        >
+            <Tabs.List>
+                <Tabs.Tab value="productors">{t("productors", { capfirst: true })}</Tabs.Tab>
+                <Tabs.Tab value="products">{t("products", { capfirst: true })}</Tabs.Tab>
+                <Tabs.Tab value="forms">{t("forms", { capfirst: true })}</Tabs.Tab>
+                <Tabs.Tab value="shipments">{t("shipments", { capfirst: true })}</Tabs.Tab>
+                {/* <Tabs.Tab value="templates">{t("templates", {capfirst: true})}</Tabs.Tab> */}
+                <Tabs.Tab value="users">{t("users", { capfirst: true })}</Tabs.Tab>
+            </Tabs.List>
+            <Outlet />
+        </Tabs>
+    );
+}

frontend/src/pages/Forms/index.tsx

@@ -1,170 +1,169 @@
-import { Stack, Loader, Title, Group, ActionIcon, Tooltip, Table, ScrollArea } from "@mantine/core";
-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";
-import { useCallback, useMemo } from "react";
-import FormModal from "@/components/Forms/Modal";
-import FormRow from "@/components/Forms/Row";
-import type { Form, FormInputs } from "@/services/resources/forms";
-import FilterForms from "@/components/Forms/Filter";
-
-export function Forms() {
-    const [ searchParams, setSearchParams ] = useSearchParams();
-    const location = useLocation();
-    const navigate = useNavigate();
-
-    const isCreate = location.pathname === "/dashboard/forms/create";
-    const isEdit = location.pathname.includes("/edit");
-
-     const editId = useMemo(() => {
-        if (isEdit) {
-            return location.pathname.split("/")[3]
-        }
-        return null
-    }, [location, isEdit])
-
-    const closeModal = useCallback(() => {
-        navigate(`/dashboard/forms${searchParams ? `?${searchParams.toString()}` : ""}`);
-    }, [navigate, searchParams]);
-
-    const { isPending, data } = useGetForms(searchParams);
-    const { data: currentForm } = useGetForm(Number(editId), { enabled: !!editId });
-    
-    const { data: allForms } = useGetForms();
-
-    const seasons = useMemo(() => {
-        return allForms?.map((form: Form) => (form.season))
-            .filter((season, index, array) => array.indexOf(season) === index)
-    }, [allForms])
- 
-    const productors = useMemo(() => {
-        return allForms?.map((form: Form) => (form.productor.name))
-            .filter((productor, index, array) => array.indexOf(productor) === index)
-    }, [allForms])
-
-    const createFormMutation = useCreateForm();
-    const editFormMutation = useEditForm();
-    
-    const handleCreateForm = useCallback(async (form: FormInputs) => {
-            if (!form.start || !form.end)
-                return;
-            await createFormMutation.mutateAsync({
-                ...form,
-                start: form?.start,
-                end: form?.end,
-                productor_id: Number(form.productor_id),
-                referer_id: Number(form.referer_id),
-                minimum_shipment_value: Number(form.minimum_shipment_value),
-            });
-            closeModal();
-    }, [createFormMutation, closeModal]);
-
-    const handleEditForm = useCallback(async (form: FormInputs, id?: number) => {
-        if (!id)
-            return;
-        await editFormMutation.mutateAsync({
-            id: id,
-            form: {
-                ...form,
-                start: form.start,
-                end: form.end,
-                productor_id: Number(form.productor_id),
-                referer_id: Number(form.referer_id),
-                minimum_shipment_value: Number(form.minimum_shipment_value),
-            }
-        });
-        closeModal();
-    }, [editFormMutation, closeModal]);
-
-    const onFilterChange = useCallback((
-        values: string[], 
-        filter: string
-    ) => {
-        setSearchParams(prev => {
-            const params = new URLSearchParams(prev);
-            params.delete(filter)
-            
-            values.forEach(value => {
-                params.append(filter, value);
-            });
-
-            return params;
-        });
-    }, [setSearchParams])
-
-
-    if (!data || isPending)
-        return (
-            <Group 
-                align="center"
-                justify="center"
-                h="80vh"
-                w="100%"
-            >
-                <Loader color="pink"/>
-            </Group>
-        );
-    
-    return (
-        <Stack>
-            <Group justify="space-between">
-                <Title order={2}>{t("all forms", {capfirst: true})}</Title>
-                <Tooltip label={t("create new form", {capfirst: true})}>
-                    <ActionIcon
-                        onClick={(e) => {
-                            e.stopPropagation();
-                            navigate(`/dashboard/forms/create${searchParams ? `?${searchParams.toString()}` : ""}`);
-                        }}
-                    >
-                        <IconPlus/>
-                    </ActionIcon>
-                </Tooltip>
-                <FormModal 
-                    key={`${currentForm?.id}_create`}
-                    opened={isCreate} 
-                    onClose={closeModal} 
-                    handleSubmit={handleCreateForm}
-                />
-            </Group>
-            <FilterForms
-                productors={productors || []}
-                seasons={seasons || []}
-                filters={searchParams}
-                onFilterChange={onFilterChange}
-            />
-            <FormModal
-                key={`${currentForm?.id}_edit`}
-                opened={isEdit} 
-                onClose={closeModal} 
-                currentForm={currentForm} 
-                handleSubmit={handleEditForm}
-            />
-            <ScrollArea type="auto">            
-                <Table striped>
-                    <Table.Thead>
-                        <Table.Tr>
-                            <Table.Th>{t("name", {capfirst: true})}</Table.Th>
-                            <Table.Th>{t("type", {capfirst: true})}</Table.Th>
-                            <Table.Th>{t("start", {capfirst: true})}</Table.Th>
-                            <Table.Th>{t("end", {capfirst: true})}</Table.Th>
-                            <Table.Th>{t("productor", {capfirst: true})}</Table.Th>
-                            <Table.Th>{t("referer", {capfirst: true})}</Table.Th>
-                            <Table.Th>{t("actions", {capfirst: true})}</Table.Th>
-                        </Table.Tr>
-                    </Table.Thead>
-                    <Table.Tbody>
-                        {
-                            data.map((form) => (
-                                <FormRow
-                                    form={form} 
-                                    key={form.id}
-                                />
-                            ))
-                        }
-                    </Table.Tbody>
-                </Table>
-            </ScrollArea>
-        </Stack>
-    );
-}
+import { Stack, Loader, Title, Group, ActionIcon, Tooltip, Table, ScrollArea } from "@mantine/core";
+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";
+import { useCallback, useMemo } from "react";
+import FormModal from "@/components/Forms/Modal";
+import FormRow from "@/components/Forms/Row";
+import type { Form, FormInputs } from "@/services/resources/forms";
+import FilterForms from "@/components/Forms/Filter";
+
+export function Forms() {
+    const [searchParams, setSearchParams] = useSearchParams();
+    const location = useLocation();
+    const navigate = useNavigate();
+
+    const isCreate = location.pathname === "/dashboard/forms/create";
+    const isEdit = location.pathname.includes("/edit");
+
+    const editId = useMemo(() => {
+        if (isEdit) {
+            return location.pathname.split("/")[3];
+        }
+        return null;
+    }, [location, isEdit]);
+
+    const closeModal = useCallback(() => {
+        navigate(`/dashboard/forms${searchParams ? `?${searchParams.toString()}` : ""}`);
+    }, [navigate, searchParams]);
+
+    const { isPending, data } = useGetForms(searchParams);
+    const { data: currentForm } = useGetForm(Number(editId), {
+        enabled: !!editId,
+    });
+
+    const { data: allForms } = useGetForms();
+
+    const seasons = useMemo(() => {
+        return allForms
+            ?.map((form: Form) => form.season)
+            .filter((season, index, array) => array.indexOf(season) === index);
+    }, [allForms]);
+
+    const productors = useMemo(() => {
+        return allForms
+            ?.map((form: Form) => form.productor.name)
+            .filter((productor, index, array) => array.indexOf(productor) === index);
+    }, [allForms]);
+
+    const createFormMutation = useCreateForm();
+    const editFormMutation = useEditForm();
+
+    const handleCreateForm = useCallback(
+        async (form: FormInputs) => {
+            if (!form.start || !form.end) return;
+            await createFormMutation.mutateAsync({
+                ...form,
+                start: form?.start,
+                end: form?.end,
+                productor_id: Number(form.productor_id),
+                referer_id: Number(form.referer_id),
+                minimum_shipment_value: Number(form.minimum_shipment_value),
+            });
+            closeModal();
+        },
+        [createFormMutation, closeModal],
+    );
+
+    const handleEditForm = useCallback(
+        async (form: FormInputs, id?: number) => {
+            if (!id) return;
+            await editFormMutation.mutateAsync({
+                id: id,
+                form: {
+                    ...form,
+                    start: form.start,
+                    end: form.end,
+                    productor_id: Number(form.productor_id),
+                    referer_id: Number(form.referer_id),
+                    minimum_shipment_value: Number(form.minimum_shipment_value),
+                },
+            });
+            closeModal();
+        },
+        [editFormMutation, closeModal],
+    );
+
+    const onFilterChange = useCallback(
+        (values: string[], filter: string) => {
+            setSearchParams((prev) => {
+                const params = new URLSearchParams(prev);
+                params.delete(filter);
+
+                values.forEach((value) => {
+                    params.append(filter, value);
+                });
+
+                return params;
+            });
+        },
+        [setSearchParams],
+    );
+
+    if (!data || isPending)
+        return (
+            <Group align="center" justify="center" h="80vh" w="100%">
+                <Loader color="pink" />
+            </Group>
+        );
+
+    return (
+        <Stack>
+            <Group justify="space-between">
+                <Title order={2}>{t("all forms", { capfirst: true })}</Title>
+                <Tooltip label={t("create new form", { capfirst: true })}>
+                    <ActionIcon
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            navigate(
+                                `/dashboard/forms/create${searchParams ? `?${searchParams.toString()}` : ""}`,
+                            );
+                        }}
+                    >
+                        <IconPlus />
+                    </ActionIcon>
+                </Tooltip>
+                <FormModal
+                    key={`${currentForm?.id}_create`}
+                    opened={isCreate}
+                    onClose={closeModal}
+                    handleSubmit={handleCreateForm}
+                />
+            </Group>
+            <FilterForms
+                productors={productors || []}
+                seasons={seasons || []}
+                filters={searchParams}
+                onFilterChange={onFilterChange}
+            />
+            <FormModal
+                key={`${currentForm?.id}_edit`}
+                opened={isEdit}
+                onClose={closeModal}
+                currentForm={currentForm}
+                handleSubmit={handleEditForm}
+            />
+            <ScrollArea type="auto">
+                <Table striped>
+                    <Table.Thead>
+                        <Table.Tr>
+                            <Table.Th>{t("name", { capfirst: true })}</Table.Th>
+                            <Table.Th>{t("type", { capfirst: true })}</Table.Th>
+                            <Table.Th>{t("start", { capfirst: true })}</Table.Th>
+                            <Table.Th>{t("end", { capfirst: true })}</Table.Th>
+                            <Table.Th>{t("productor", { capfirst: true })}</Table.Th>
+                            <Table.Th>{t("referer", { capfirst: true })}</Table.Th>
+                            <Table.Th>{t("actions", { capfirst: true })}</Table.Th>
+                        </Table.Tr>
+                    </Table.Thead>
+                    <Table.Tbody>
+                        {data.map((form) => (
+                            <FormRow form={form} key={form.id} />
+                        ))}
+                    </Table.Tbody>
+                </Table>
+            </ScrollArea>
+        </Stack>
+    );
+}

frontend/src/pages/Home/index.tsx

@@ -9,13 +9,13 @@ export function Home() {
 
     return (
         <Flex gap="md" wrap="wrap" justify="center">
-        {
-            allForms && allForms?.length > 0 ? 
-            allForms.map((form: Form) => (
-                <FormCard form={form} key={form.id}/>
-            )) : 
-            <Text mt="lg" size="lg">{t("there is no contract for now",{capfirst: true})}</Text>
-        }
-        </Flex>  
+            {allForms && allForms?.length > 0 ? (
+                allForms.map((form: Form) => <FormCard form={form} key={form.id} />)
+            ) : (
+                <Text mt="lg" size="lg">
+                    {t("there is no contract for now", { capfirst: true })}
+                </Text>
+            )}
+        </Flex>
     );
-}
+}

frontend/src/pages/NotFound/index.tsx

@@ -1,24 +1,24 @@
-import { t } from "@/config/i18n";
-import { ActionIcon, Stack, Text, Title, Tooltip } from "@mantine/core";
-import { IconHome } from "@tabler/icons-react";
-import { useNavigate } from "react-router";
-
-export function NotFound() {
-    const navigate = useNavigate()
-    return (
-        <Stack justify="center" align="center">
-            <Title order={2}>{t("oops", {capfirst: true})}</Title>
-            <Text>{t('this page does not exists', {capfirst: true})}</Text>
-            <Tooltip label={t('back to home', {capfirst: true})}>
-                <ActionIcon
-                    aria-label={t("back to home", {capfirst: true})}
-                    onClick={() => {
-                        navigate('/')
-                    }}
-                >
-                    <IconHome/>
-                </ActionIcon>
-            </Tooltip>
-        </Stack>
-    );
-}
+import { t } from "@/config/i18n";
+import { ActionIcon, Stack, Text, Title, Tooltip } from "@mantine/core";
+import { IconHome } from "@tabler/icons-react";
+import { useNavigate } from "react-router";
+
+export function NotFound() {
+    const navigate = useNavigate();
+    return (
+        <Stack justify="center" align="center">
+            <Title order={2}>{t("oops", { capfirst: true })}</Title>
+            <Text>{t("this page does not exists", { capfirst: true })}</Text>
+            <Tooltip label={t("back to home", { capfirst: true })}>
+                <ActionIcon
+                    aria-label={t("back to home", { capfirst: true })}
+                    onClick={() => {
+                        navigate("/");
+                    }}
+                >
+                    <IconHome />
+                </ActionIcon>
+            </Tooltip>
+        </Stack>
+    );
+}

frontend/src/pages/Productors/index.tsx

@@ -1,148 +1,157 @@
-import { ActionIcon, Group, Loader, ScrollArea, Stack, Table, Title, Tooltip } from "@mantine/core";
-import { t } from "@/config/i18n";
-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";
-import { ProductorModal } from "@/components/Productors/Modal";
-import { useCallback, useMemo } from "react";
-import type { Productor, ProductorInputs } from "@/services/resources/productors";
-import ProductorsFilters from "@/components/Productors/Filter";
-
-export default function Productors() {
-    const [ searchParams, setSearchParams ] = useSearchParams();
-    const location = useLocation();
-    const navigate = useNavigate();
-
-    const isCreate = location.pathname === "/dashboard/productors/create";
-    const isEdit = location.pathname.includes("/edit");
-
-    const editId = useMemo(() => {
-        if (isEdit) {
-            return location.pathname.split("/")[3]
-        }
-        return null
-    }, [location, isEdit])
-    
-    const closeModal = useCallback(() => {
-        navigate(`/dashboard/productors${searchParams ? `?${searchParams.toString()}` : ""}`);
-    }, [navigate, searchParams]);
-
-    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))
-            .filter((season, index, array) => array.indexOf(season) === index)
-    }, [allProductors])
-    
-    const types = useMemo(() => {
-        return allProductors?.map((productor: Productor) => (productor.type))
-            .filter((productor, index, array) => array.indexOf(productor) === index)
-    }, [allProductors])
-
-    const createProductorMutation = useCreateProductor();
-    const editProductorMutation = useEditProductor();
-
-    const handleCreateProductor = useCallback(async (productor: ProductorInputs) => {
-        await createProductorMutation.mutateAsync({
-            ...productor
-        });
-        closeModal();
-    }, [createProductorMutation, closeModal]);
-
-    const handleEditProductor = useCallback(async (productor: ProductorInputs, id?: number) => {
-        if (!id)
-            return;
-        await editProductorMutation.mutateAsync({
-            id: id,
-            productor: productor
-        });
-        closeModal();
-    }, [editProductorMutation, closeModal]);
-    
-    const onFilterChange = useCallback((values: string[], filter: string) => {
-        setSearchParams(prev => {
-            const params = new URLSearchParams(prev);
-            params.delete(filter)
-            
-            values.forEach(value => {
-                params.append(filter, value);
-            });
-            return params;
-        });
-    }, [setSearchParams])
-
-    if (!productors || isPending)
-        return (
-            <Group 
-                align="center"
-                justify="center"
-                h="80vh"
-                w="100%"
-            >
-                <Loader color="pink"/>
-            </Group>
-        );
-
-    return (
-        <Stack>
-            <Group justify="space-between">
-                <Title order={2}>{t("all productors", {capfirst: true})}</Title>
-                <Tooltip label={t("create productor", {capfirst: true})}>
-                    <ActionIcon
-                        onClick={(e) => {
-                            e.stopPropagation();
-                            navigate(`/dashboard/productors/create${searchParams ? `?${searchParams.toString()}` : ""}`);
-                        }}
-                    >
-                        <IconPlus/>
-                    </ActionIcon>
-                </Tooltip>
-                <ProductorModal
-                    key={`${currentProductor?.id}_create`}
-                    opened={isCreate} 
-                    onClose={closeModal} 
-                    handleSubmit={handleCreateProductor}
-                />
-                <ProductorModal
-                    key={`${currentProductor?.id}_edit`}
-                    opened={isEdit}
-                    onClose={closeModal}
-                    currentProductor={currentProductor}
-                    handleSubmit={handleEditProductor}
-                />
-            </Group>
-            <ProductorsFilters
-                names={names || []}
-                types={types || []}
-                filters={searchParams}
-                onFilterChange={onFilterChange}
-            />
-            <ScrollArea type="auto">
-                <Table striped>
-                    <Table.Thead>
-                        <Table.Tr>
-                            <Table.Th>{t("name", {capfirst: true})}</Table.Th>
-                            <Table.Th>{t("type", {capfirst: true})}</Table.Th>
-                            <Table.Th>{t("address", {capfirst: true})}</Table.Th>
-                            <Table.Th>{t("payment methods", {capfirst: true})}</Table.Th>
-                            <Table.Th>{t("actions", {capfirst: true})}</Table.Th>
-                        </Table.Tr>
-                    </Table.Thead>
-                    <Table.Tbody>
-                        {
-                            productors.map((productor) => (
-                                <ProductorRow 
-                                    productor={productor}
-                                    key={productor.id}
-                                />
-                            ))
-                        }
-                    </Table.Tbody>
-                </Table>
-            </ScrollArea>
-        </Stack>
-    );
-}
+import { ActionIcon, Group, Loader, ScrollArea, Stack, Table, Title, Tooltip } from "@mantine/core";
+import { t } from "@/config/i18n";
+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";
+import { ProductorModal } from "@/components/Productors/Modal";
+import { useCallback, useMemo } from "react";
+import type { Productor, ProductorInputs } from "@/services/resources/productors";
+import ProductorsFilters from "@/components/Productors/Filter";
+
+export default function Productors() {
+    const [searchParams, setSearchParams] = useSearchParams();
+    const location = useLocation();
+    const navigate = useNavigate();
+
+    const isCreate = location.pathname === "/dashboard/productors/create";
+    const isEdit = location.pathname.includes("/edit");
+
+    const editId = useMemo(() => {
+        if (isEdit) {
+            return location.pathname.split("/")[3];
+        }
+        return null;
+    }, [location, isEdit]);
+
+    const closeModal = useCallback(() => {
+        navigate(`/dashboard/productors${searchParams ? `?${searchParams.toString()}` : ""}`);
+    }, [navigate, searchParams]);
+
+    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)
+            .filter((season, index, array) => array.indexOf(season) === index);
+    }, [allProductors]);
+
+    const types = useMemo(() => {
+        return allProductors
+            ?.map((productor: Productor) => productor.type)
+            .filter((productor, index, array) => array.indexOf(productor) === index);
+    }, [allProductors]);
+
+    const createProductorMutation = useCreateProductor();
+    const editProductorMutation = useEditProductor();
+
+    const handleCreateProductor = useCallback(
+        async (productor: ProductorInputs) => {
+            await createProductorMutation.mutateAsync({
+                ...productor,
+            });
+            closeModal();
+        },
+        [createProductorMutation, closeModal],
+    );
+
+    const handleEditProductor = useCallback(
+        async (productor: ProductorInputs, id?: number) => {
+            if (!id) return;
+            await editProductorMutation.mutateAsync({
+                id: id,
+                productor: productor,
+            });
+            closeModal();
+        },
+        [editProductorMutation, closeModal],
+    );
+
+    const onFilterChange = useCallback(
+        (values: string[], filter: string) => {
+            setSearchParams((prev) => {
+                const params = new URLSearchParams(prev);
+                params.delete(filter);
+
+                values.forEach((value) => {
+                    params.append(filter, value);
+                });
+                return params;
+            });
+        },
+        [setSearchParams],
+    );
+
+    if (!productors || isPending)
+        return (
+            <Group align="center" justify="center" h="80vh" w="100%">
+                <Loader color="pink" />
+            </Group>
+        );
+
+    return (
+        <Stack>
+            <Group justify="space-between">
+                <Title order={2}>{t("all productors", { capfirst: true })}</Title>
+                <Tooltip label={t("create productor", { capfirst: true })}>
+                    <ActionIcon
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            navigate(
+                                `/dashboard/productors/create${searchParams ? `?${searchParams.toString()}` : ""}`,
+                            );
+                        }}
+                    >
+                        <IconPlus />
+                    </ActionIcon>
+                </Tooltip>
+                <ProductorModal
+                    key={`${currentProductor?.id}_create`}
+                    opened={isCreate}
+                    onClose={closeModal}
+                    handleSubmit={handleCreateProductor}
+                />
+                <ProductorModal
+                    key={`${currentProductor?.id}_edit`}
+                    opened={isEdit}
+                    onClose={closeModal}
+                    currentProductor={currentProductor}
+                    handleSubmit={handleEditProductor}
+                />
+            </Group>
+            <ProductorsFilters
+                names={names || []}
+                types={types || []}
+                filters={searchParams}
+                onFilterChange={onFilterChange}
+            />
+            <ScrollArea type="auto">
+                <Table striped>
+                    <Table.Thead>
+                        <Table.Tr>
+                            <Table.Th>{t("name", { capfirst: true })}</Table.Th>
+                            <Table.Th>{t("type", { capfirst: true })}</Table.Th>
+                            <Table.Th>{t("address", { capfirst: true })}</Table.Th>
+                            <Table.Th>{t("payment methods", { capfirst: true })}</Table.Th>
+                            <Table.Th>{t("actions", { capfirst: true })}</Table.Th>
+                        </Table.Tr>
+                    </Table.Thead>
+                    <Table.Tbody>
+                        {productors.map((productor) => (
+                            <ProductorRow productor={productor} key={productor.id} />
+                        ))}
+                    </Table.Tbody>
+                </Table>
+            </ScrollArea>
+        </Stack>
+    );
+}

frontend/src/pages/Products/index.tsx

@@ -1,148 +1,156 @@
-import { ActionIcon, Group, Loader, ScrollArea, Stack, Table, Title, Tooltip } from "@mantine/core";
-import { t } from "@/config/i18n";
-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";
-import { ProductModal } from "@/components/Products/Modal";
-import { useCallback, useMemo } from "react";
-import { productCreateFromProductInputs, type Product, type ProductInputs } from "@/services/resources/products";
-import ProductsFilters from "@/components/Products/Filter";
-
-export default function Products() {
-    const [ searchParams, setSearchParams ] = useSearchParams();
-    const location = useLocation();
-    const navigate = useNavigate();
-
-    const isCreate = location.pathname === "/dashboard/products/create";
-    const isEdit = location.pathname.includes("/edit");
-
-    const editId = useMemo(() => {
-        if (isEdit) {
-            return location.pathname.split("/")[3]
-        }
-        return null
-    }, [location, isEdit])
-
-    const closeModal = useCallback(() => {
-        navigate(`/dashboard/products${searchParams ? `?${searchParams.toString()}` : ""}`);
-    }, [navigate, searchParams]);
-
-    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))
-            .filter((season, index, array) => array.indexOf(season) === index)
-    }, [allProducts])
-
-    const productors = useMemo(() => {
-        return allProducts?.map((product: Product) => (product.productor.name))
-            .filter((productor, index, array) => array.indexOf(productor) === index)
-    }, [allProducts])
-
-    const createProductMutation = useCreateProduct();
-    const editProductMutation = useEditProduct();
-
-    const handleCreateProduct = useCallback(async (product: ProductInputs) => {
-        await createProductMutation.mutateAsync(productCreateFromProductInputs(product));
-        closeModal();
-    }, [createProductMutation, closeModal]);
-
-    const handleEditProduct = useCallback(async (product: ProductInputs, id?: number) => {
-        if (!id)
-            return;
-        await editProductMutation.mutateAsync({
-            id: id,
-            product: productCreateFromProductInputs(product)
-        });
-        closeModal();
-    }, [editProductMutation, closeModal]);
-    
-    const onFilterChange = useCallback((values: string[], filter: string) => {
-        setSearchParams(prev => {
-            const params = new URLSearchParams(prev);
-            params.delete(filter);
-            
-            values.forEach(value => {
-                params.append(filter, value);
-            });
-            return params;
-        });
-    }, [setSearchParams])
-
-    if (!products || isPending)
-        return (
-            <Group 
-                align="center"
-                justify="center"
-                h="80vh"
-                w="100%"
-            >
-                <Loader color="pink"/>
-            </Group>
-        );
-    
-    return (
-        <Stack>
-            <Group justify="space-between">
-                <Title order={2}>{t("all products", {capfirst: true})}</Title>
-                <Tooltip label={t("create product", {capfirst: true})}>
-                    <ActionIcon
-                        onClick={(e) => {
-                            e.stopPropagation();
-                            navigate(`/dashboard/products/create${searchParams ? `?${searchParams.toString()}` : ""}`);
-                        }}
-                    >
-                        <IconPlus/>
-                    </ActionIcon>
-                </Tooltip>
-                <ProductModal
-                    key={`${currentProduct?.id}_create`}
-                    opened={isCreate} 
-                    onClose={closeModal} 
-                    handleSubmit={handleCreateProduct}
-                />
-            </Group>
-            <ProductsFilters
-                productors = {productors || []}
-                names={names || []}
-                filters={searchParams}
-                onFilterChange={onFilterChange}
-            />
-            <ProductModal
-                key={`${currentProduct?.id}_edit`}
-                opened={isEdit}
-                onClose={closeModal}
-                currentProduct={currentProduct}
-                handleSubmit={handleEditProduct}
-            />
-            <ScrollArea type="auto">
-                <Table striped>
-                    <Table.Thead>
-                        <Table.Tr>
-                            <Table.Th>{t("name", {capfirst: true})}</Table.Th>
-                            <Table.Th>{t("type", {capfirst: true})}</Table.Th>
-                            <Table.Th>{t("price", {capfirst: true})}</Table.Th>
-                            <Table.Th>{t("priceKg", {capfirst: true})}</Table.Th>
-                            <Table.Th>{t("quantity", {capfirst: true})}</Table.Th>
-                            <Table.Th>{t("unit", {capfirst: true})}</Table.Th>
-                            <Table.Th>{t("actions", {capfirst: true})}</Table.Th>
-                        </Table.Tr>
-                    </Table.Thead>
-                    <Table.Tbody>
-                        {
-                            products.map((product) => (
-                                <ProductRow 
-                                    product={product}
-                                    key={product.id}
-                                />
-                            ))
-                        }
-                    </Table.Tbody>
-                </Table>
-            </ScrollArea>
-        </Stack>
-    );
-}
+import { ActionIcon, Group, Loader, ScrollArea, Stack, Table, Title, Tooltip } from "@mantine/core";
+import { t } from "@/config/i18n";
+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";
+import { ProductModal } from "@/components/Products/Modal";
+import { useCallback, useMemo } from "react";
+import {
+    productCreateFromProductInputs,
+    type Product,
+    type ProductInputs,
+} from "@/services/resources/products";
+import ProductsFilters from "@/components/Products/Filter";
+
+export default function Products() {
+    const [searchParams, setSearchParams] = useSearchParams();
+    const location = useLocation();
+    const navigate = useNavigate();
+
+    const isCreate = location.pathname === "/dashboard/products/create";
+    const isEdit = location.pathname.includes("/edit");
+
+    const editId = useMemo(() => {
+        if (isEdit) {
+            return location.pathname.split("/")[3];
+        }
+        return null;
+    }, [location, isEdit]);
+
+    const closeModal = useCallback(() => {
+        navigate(`/dashboard/products${searchParams ? `?${searchParams.toString()}` : ""}`);
+    }, [navigate, searchParams]);
+
+    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)
+            .filter((season, index, array) => array.indexOf(season) === index);
+    }, [allProducts]);
+
+    const productors = useMemo(() => {
+        return allProducts
+            ?.map((product: Product) => product.productor.name)
+            .filter((productor, index, array) => array.indexOf(productor) === index);
+    }, [allProducts]);
+
+    const createProductMutation = useCreateProduct();
+    const editProductMutation = useEditProduct();
+
+    const handleCreateProduct = useCallback(
+        async (product: ProductInputs) => {
+            await createProductMutation.mutateAsync(productCreateFromProductInputs(product));
+            closeModal();
+        },
+        [createProductMutation, closeModal],
+    );
+
+    const handleEditProduct = useCallback(
+        async (product: ProductInputs, id?: number) => {
+            if (!id) return;
+            await editProductMutation.mutateAsync({
+                id: id,
+                product: productCreateFromProductInputs(product),
+            });
+            closeModal();
+        },
+        [editProductMutation, closeModal],
+    );
+
+    const onFilterChange = useCallback(
+        (values: string[], filter: string) => {
+            setSearchParams((prev) => {
+                const params = new URLSearchParams(prev);
+                params.delete(filter);
+
+                values.forEach((value) => {
+                    params.append(filter, value);
+                });
+                return params;
+            });
+        },
+        [setSearchParams],
+    );
+
+    if (!products || isPending)
+        return (
+            <Group align="center" justify="center" h="80vh" w="100%">
+                <Loader color="pink" />
+            </Group>
+        );
+
+    return (
+        <Stack>
+            <Group justify="space-between">
+                <Title order={2}>{t("all products", { capfirst: true })}</Title>
+                <Tooltip label={t("create product", { capfirst: true })}>
+                    <ActionIcon
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            navigate(
+                                `/dashboard/products/create${searchParams ? `?${searchParams.toString()}` : ""}`,
+                            );
+                        }}
+                    >
+                        <IconPlus />
+                    </ActionIcon>
+                </Tooltip>
+                <ProductModal
+                    key={`${currentProduct?.id}_create`}
+                    opened={isCreate}
+                    onClose={closeModal}
+                    handleSubmit={handleCreateProduct}
+                />
+            </Group>
+            <ProductsFilters
+                productors={productors || []}
+                names={names || []}
+                filters={searchParams}
+                onFilterChange={onFilterChange}
+            />
+            <ProductModal
+                key={`${currentProduct?.id}_edit`}
+                opened={isEdit}
+                onClose={closeModal}
+                currentProduct={currentProduct}
+                handleSubmit={handleEditProduct}
+            />
+            <ScrollArea type="auto">
+                <Table striped>
+                    <Table.Thead>
+                        <Table.Tr>
+                            <Table.Th>{t("name", { capfirst: true })}</Table.Th>
+                            <Table.Th>{t("type", { capfirst: true })}</Table.Th>
+                            <Table.Th>{t("price", { capfirst: true })}</Table.Th>
+                            <Table.Th>{t("priceKg", { capfirst: true })}</Table.Th>
+                            <Table.Th>{t("quantity", { capfirst: true })}</Table.Th>
+                            <Table.Th>{t("unit", { capfirst: true })}</Table.Th>
+                            <Table.Th>{t("actions", { capfirst: true })}</Table.Th>
+                        </Table.Tr>
+                    </Table.Thead>
+                    <Table.Tbody>
+                        {products.map((product) => (
+                            <ProductRow product={product} key={product.id} />
+                        ))}
+                    </Table.Tbody>
+                </Table>
+            </ScrollArea>
+        </Stack>
+    );
+}

frontend/src/pages/Shipments/index.tsx

@@ -1,145 +1,158 @@
-import { ActionIcon, Group, Loader, ScrollArea, Stack, Table, Title, Tooltip } from "@mantine/core";
-import { t } from "@/config/i18n";
-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";
-import { useCallback, useMemo } from "react";
-import { shipmentCreateFromShipmentInputs, type Shipment, type ShipmentInputs } from "@/services/resources/shipments";
-import ShipmentModal from "@/components/Shipments/Modal";
-import ShipmentsFilters from "@/components/Shipments/Filter";
-
-export default function Shipments() {
-    const [ searchParams, setSearchParams ] = useSearchParams();
-    const location = useLocation();
-    const navigate = useNavigate();
-
-    const isCreate = location.pathname === "/dashboard/shipments/create";
-    const isEdit = location.pathname.includes("/edit");
-
-    const editId = useMemo(() => {
-        if (isEdit) {
-            return location.pathname.split("/")[3]
-        }
-        return null
-    }, [location, isEdit])
-    
-    const closeModal = useCallback(() => {
-        navigate(`/dashboard/shipments${searchParams ? `?${searchParams.toString()}` : ""}`);
-    }, [navigate, searchParams]);
-
-    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))
-            .filter((season, index, array) => array.indexOf(season) === index)
-    }, [allShipments])
-
-    const forms = useMemo(() => {
-        return allShipments?.map((shipment: Shipment) => (shipment.form.name))
-            .filter((season, index, array) => array.indexOf(season) === index)
-    }, [allShipments])
-
-    const createShipmentMutation = useCreateShipment();
-    const editShipmentMutation = useEditShipment();
-
-    const handleCreateShipment = useCallback(async (shipment: ShipmentInputs) => {
-        await createShipmentMutation.mutateAsync(shipmentCreateFromShipmentInputs(shipment));
-        closeModal();
-    }, [createShipmentMutation, closeModal]);
-
-    const handleEditShipment = useCallback(async (shipment: ShipmentInputs, id?: number) => {
-        if (!id)
-            return;
-        await editShipmentMutation.mutateAsync({
-            id: id,
-            shipment: shipmentCreateFromShipmentInputs(shipment)
-        });
-        closeModal();
-    }, [editShipmentMutation, closeModal]);
-    
-    const onFilterChange = useCallback((values: string[], filter: string) => {
-        setSearchParams(prev => {
-            const params = new URLSearchParams(prev);
-            params.delete(filter)
-            
-            values.forEach(value => {
-                params.append(filter, value);
-            });
-            return params;
-        });
-    }, [setSearchParams])
-
-    if (!shipments || isPending)
-        return (
-            <Group 
-                align="center"
-                justify="center"
-                h="80vh"
-                w="100%"
-            >
-                <Loader color="pink"/>
-            </Group>
-        );
-
-    return (
-        <Stack>
-            <Group justify="space-between">
-                <Title order={2}>{t("all shipments", {capfirst: true})}</Title>
-                <Tooltip label={t("create shipment", {capfirst: true})}>
-                    <ActionIcon
-                        onClick={(e) => {
-                            e.stopPropagation();
-                            navigate(`/dashboard/shipments/create${searchParams ? `?${searchParams.toString()}` : ""}`);
-                        }}
-                    >
-                        <IconPlus/>
-                    </ActionIcon>
-                </Tooltip>
-                <ShipmentModal
-                    key={`${currentShipment?.id}_create`}
-                    opened={isCreate} 
-                    onClose={closeModal} 
-                    handleSubmit={handleCreateShipment}
-                />
-                <ShipmentModal
-                    key={`${currentShipment?.id}_edit`}
-                    opened={isEdit}
-                    onClose={closeModal}
-                    currentShipment={currentShipment}
-                    handleSubmit={handleEditShipment}
-                />
-            </Group>
-            <ShipmentsFilters
-                forms={forms || []}
-                names={names || []}
-                filters={searchParams}
-                onFilterChange={onFilterChange}
-            />
-            <ScrollArea type="auto">
-                <Table striped>
-                    <Table.Thead>
-                        <Table.Tr>
-                            <Table.Th>{t("name", {capfirst: true})}</Table.Th>
-                            <Table.Th>{t("date", {capfirst: true})}</Table.Th>
-                            <Table.Th>{t("formulare", {capfirst: true})}</Table.Th>
-                            <Table.Th>{t("actions", {capfirst: true})}</Table.Th>
-                        </Table.Tr>
-                    </Table.Thead>
-                    <Table.Tbody>
-                        {
-                            shipments.map((shipment) => (
-                                <ShipmentRow 
-                                    shipment={shipment}
-                                    key={shipment.id}
-                                />
-                            ))
-                        }
-                    </Table.Tbody>
-                </Table>
-            </ScrollArea>
-        </Stack>
-    );
-}
+import { ActionIcon, Group, Loader, ScrollArea, Stack, Table, Title, Tooltip } from "@mantine/core";
+import { t } from "@/config/i18n";
+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";
+import { useCallback, useMemo } from "react";
+import {
+    shipmentCreateFromShipmentInputs,
+    type Shipment,
+    type ShipmentInputs,
+} from "@/services/resources/shipments";
+import ShipmentModal from "@/components/Shipments/Modal";
+import ShipmentsFilters from "@/components/Shipments/Filter";
+
+export default function Shipments() {
+    const [searchParams, setSearchParams] = useSearchParams();
+    const location = useLocation();
+    const navigate = useNavigate();
+
+    const isCreate = location.pathname === "/dashboard/shipments/create";
+    const isEdit = location.pathname.includes("/edit");
+
+    const editId = useMemo(() => {
+        if (isEdit) {
+            return location.pathname.split("/")[3];
+        }
+        return null;
+    }, [location, isEdit]);
+
+    const closeModal = useCallback(() => {
+        navigate(`/dashboard/shipments${searchParams ? `?${searchParams.toString()}` : ""}`);
+    }, [navigate, searchParams]);
+
+    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)
+            .filter((season, index, array) => array.indexOf(season) === index);
+    }, [allShipments]);
+
+    const forms = useMemo(() => {
+        return allShipments
+            ?.map((shipment: Shipment) => shipment.form.name)
+            .filter((season, index, array) => array.indexOf(season) === index);
+    }, [allShipments]);
+
+    const createShipmentMutation = useCreateShipment();
+    const editShipmentMutation = useEditShipment();
+
+    const handleCreateShipment = useCallback(
+        async (shipment: ShipmentInputs) => {
+            await createShipmentMutation.mutateAsync(shipmentCreateFromShipmentInputs(shipment));
+            closeModal();
+        },
+        [createShipmentMutation, closeModal],
+    );
+
+    const handleEditShipment = useCallback(
+        async (shipment: ShipmentInputs, id?: number) => {
+            if (!id) return;
+            await editShipmentMutation.mutateAsync({
+                id: id,
+                shipment: shipmentCreateFromShipmentInputs(shipment),
+            });
+            closeModal();
+        },
+        [editShipmentMutation, closeModal],
+    );
+
+    const onFilterChange = useCallback(
+        (values: string[], filter: string) => {
+            setSearchParams((prev) => {
+                const params = new URLSearchParams(prev);
+                params.delete(filter);
+
+                values.forEach((value) => {
+                    params.append(filter, value);
+                });
+                return params;
+            });
+        },
+        [setSearchParams],
+    );
+
+    if (!shipments || isPending)
+        return (
+            <Group align="center" justify="center" h="80vh" w="100%">
+                <Loader color="pink" />
+            </Group>
+        );
+
+    return (
+        <Stack>
+            <Group justify="space-between">
+                <Title order={2}>{t("all shipments", { capfirst: true })}</Title>
+                <Tooltip label={t("create shipment", { capfirst: true })}>
+                    <ActionIcon
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            navigate(
+                                `/dashboard/shipments/create${searchParams ? `?${searchParams.toString()}` : ""}`,
+                            );
+                        }}
+                    >
+                        <IconPlus />
+                    </ActionIcon>
+                </Tooltip>
+                <ShipmentModal
+                    key={`${currentShipment?.id}_create`}
+                    opened={isCreate}
+                    onClose={closeModal}
+                    handleSubmit={handleCreateShipment}
+                />
+                <ShipmentModal
+                    key={`${currentShipment?.id}_edit`}
+                    opened={isEdit}
+                    onClose={closeModal}
+                    currentShipment={currentShipment}
+                    handleSubmit={handleEditShipment}
+                />
+            </Group>
+            <ShipmentsFilters
+                forms={forms || []}
+                names={names || []}
+                filters={searchParams}
+                onFilterChange={onFilterChange}
+            />
+            <ScrollArea type="auto">
+                <Table striped>
+                    <Table.Thead>
+                        <Table.Tr>
+                            <Table.Th>{t("name", { capfirst: true })}</Table.Th>
+                            <Table.Th>{t("date", { capfirst: true })}</Table.Th>
+                            <Table.Th>{t("formulare", { capfirst: true })}</Table.Th>
+                            <Table.Th>{t("actions", { capfirst: true })}</Table.Th>
+                        </Table.Tr>
+                    </Table.Thead>
+                    <Table.Tbody>
+                        {shipments.map((shipment) => (
+                            <ShipmentRow shipment={shipment} key={shipment.id} />
+                        ))}
+                    </Table.Tbody>
+                </Table>
+            </ScrollArea>
+        </Stack>
+    );
+}

frontend/src/pages/Templates/index.tsx

@@ -1,5 +1,3 @@
-export default function Templates() {
-    return (
-        <></>
-    );
-}
+export default function Templates() {
+    return <></>;
+}

frontend/src/pages/Users/index.tsx

@@ -1,139 +1,142 @@
-import { ActionIcon, Group, Loader, ScrollArea, Stack, Table, Title, Tooltip } from "@mantine/core";
-import { t } from "@/config/i18n";
-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";
-import { UserModal } from "@/components/Users/Modal";
-import { useCallback, useMemo } from "react";
-import { type User, type UserInputs } from "@/services/resources/users";
-import UsersFilters from "@/components/Users/Filter";
-
-export default function Users() {
-    const [ searchParams, setSearchParams ] = useSearchParams();
-    const location = useLocation();
-    const navigate = useNavigate();
-
-    const isCreate = location.pathname === "/dashboard/users/create";
-    const isEdit = location.pathname.includes("/edit");
-
-    const editId = useMemo(() => {
-        if (isEdit) {
-            return location.pathname.split("/")[3]
-        }
-        return null
-    }, [location, isEdit])
-
-    const closeModal = useCallback(() => {
-        navigate(`/dashboard/users${searchParams ? `?${searchParams.toString()}` : ""}`);
-    }, [navigate, searchParams]);
-
-    const {data: users, isPending} = useGetUsers(searchParams);
-    const { data: currentUser } = useGetUser(Number(editId), { enabled: !!editId });
-    
-    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 = useCreateUser();
-    const editUserMutation = useEditUser();
-
-    const handleCreateUser = useCallback(async (user: UserInputs) => {
-            await createUserMutation.mutateAsync(user);
-            closeModal();
-    }, [createUserMutation, closeModal]);
-
-    const handleEditUser = useCallback(async (user: UserInputs, id?: number) => {
-        if (!id)
-            return;
-            await editUserMutation.mutateAsync({
-                id: id,
-                user: user
-            });
-            closeModal();            
-    }, [editUserMutation, closeModal]);
-    
-    const onFilterChange = useCallback((values: string[], filter: string) => {
-        setSearchParams(prev => {
-            const params = new URLSearchParams(prev);
-            params.delete(filter);
-            
-            values.forEach(value => {
-                params.append(filter, value);
-            });
-            return params;
-        });
-    }, [setSearchParams])
-
-    if (!users || isPending)
-        return (
-            <Group 
-                align="center"
-                justify="center"
-                h="80vh"
-                w="100%"
-            >
-                <Loader color="pink"/>
-            </Group>
-        );
-
-    return (
-        <Stack>
-            <Group justify="space-between">
-                <Title order={2}>{t("all users", {capfirst: true})}</Title>
-                <Tooltip label={t("create user", {capfirst: true})}>
-                    <ActionIcon
-                        onClick={(e) => {
-                            e.stopPropagation();
-                            navigate(`/dashboard/users/create${searchParams ? `?${searchParams.toString()}` : ""}`);
-                        }}
-                    >
-                        <IconPlus/>
-                    </ActionIcon>
-                </Tooltip>
-                <UserModal
-                    key={`${currentUser?.id}_create`}
-                    opened={isCreate} 
-                    onClose={closeModal} 
-                    handleSubmit={handleCreateUser}
-                />
-                <UserModal
-                    key={`${currentUser?.id}_edit`}
-                    opened={isEdit}
-                    onClose={closeModal}
-                    currentUser={currentUser}
-                    handleSubmit={handleEditUser}
-                />
-            </Group>
-            <UsersFilters
-                names={names || []}
-                filters={searchParams}
-                onFilterChange={onFilterChange}
-            />
-            <ScrollArea type="auto">
-                <Table striped>
-                    <Table.Thead>
-                        <Table.Tr>
-                            <Table.Th>{t("name", {capfirst: true})}</Table.Th>
-                            <Table.Th>{t("email", {capfirst: true})}</Table.Th>
-                            <Table.Th>{t("actions", {capfirst: true})}</Table.Th>
-                        </Table.Tr>
-                    </Table.Thead>
-                    <Table.Tbody>
-                        {
-                            users.map((user) => (
-                                <UserRow 
-                                    user={user}
-                                    key={user.id}
-                                />
-                            ))
-                        }
-                    </Table.Tbody>
-                </Table>
-            </ScrollArea>
-        </Stack>
-    );
-}
+import { ActionIcon, Group, Loader, ScrollArea, Stack, Table, Title, Tooltip } from "@mantine/core";
+import { t } from "@/config/i18n";
+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";
+import { UserModal } from "@/components/Users/Modal";
+import { useCallback, useMemo } from "react";
+import { type User, type UserInputs } from "@/services/resources/users";
+import UsersFilters from "@/components/Users/Filter";
+
+export default function Users() {
+    const [searchParams, setSearchParams] = useSearchParams();
+    const location = useLocation();
+    const navigate = useNavigate();
+
+    const isCreate = location.pathname === "/dashboard/users/create";
+    const isEdit = location.pathname.includes("/edit");
+
+    const editId = useMemo(() => {
+        if (isEdit) {
+            return location.pathname.split("/")[3];
+        }
+        return null;
+    }, [location, isEdit]);
+
+    const closeModal = useCallback(() => {
+        navigate(`/dashboard/users${searchParams ? `?${searchParams.toString()}` : ""}`);
+    }, [navigate, searchParams]);
+
+    const { data: users, isPending } = useGetUsers(searchParams);
+    const { data: currentUser } = useGetUser(Number(editId), {
+        enabled: !!editId,
+    });
+
+    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 = useCreateUser();
+    const editUserMutation = useEditUser();
+
+    const handleCreateUser = useCallback(
+        async (user: UserInputs) => {
+            await createUserMutation.mutateAsync(user);
+            closeModal();
+        },
+        [createUserMutation, closeModal],
+    );
+
+    const handleEditUser = useCallback(
+        async (user: UserInputs, id?: number) => {
+            if (!id) return;
+            await editUserMutation.mutateAsync({
+                id: id,
+                user: user,
+            });
+            closeModal();
+        },
+        [editUserMutation, closeModal],
+    );
+
+    const onFilterChange = useCallback(
+        (values: string[], filter: string) => {
+            setSearchParams((prev) => {
+                const params = new URLSearchParams(prev);
+                params.delete(filter);
+
+                values.forEach((value) => {
+                    params.append(filter, value);
+                });
+                return params;
+            });
+        },
+        [setSearchParams],
+    );
+
+    if (!users || isPending)
+        return (
+            <Group align="center" justify="center" h="80vh" w="100%">
+                <Loader color="pink" />
+            </Group>
+        );
+
+    return (
+        <Stack>
+            <Group justify="space-between">
+                <Title order={2}>{t("all users", { capfirst: true })}</Title>
+                <Tooltip label={t("create user", { capfirst: true })}>
+                    <ActionIcon
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            navigate(
+                                `/dashboard/users/create${searchParams ? `?${searchParams.toString()}` : ""}`,
+                            );
+                        }}
+                    >
+                        <IconPlus />
+                    </ActionIcon>
+                </Tooltip>
+                <UserModal
+                    key={`${currentUser?.id}_create`}
+                    opened={isCreate}
+                    onClose={closeModal}
+                    handleSubmit={handleCreateUser}
+                />
+                <UserModal
+                    key={`${currentUser?.id}_edit`}
+                    opened={isEdit}
+                    onClose={closeModal}
+                    currentUser={currentUser}
+                    handleSubmit={handleEditUser}
+                />
+            </Group>
+            <UsersFilters
+                names={names || []}
+                filters={searchParams}
+                onFilterChange={onFilterChange}
+            />
+            <ScrollArea type="auto">
+                <Table striped>
+                    <Table.Thead>
+                        <Table.Tr>
+                            <Table.Th>{t("name", { capfirst: true })}</Table.Th>
+                            <Table.Th>{t("email", { capfirst: true })}</Table.Th>
+                            <Table.Th>{t("actions", { capfirst: true })}</Table.Th>
+                        </Table.Tr>
+                    </Table.Thead>
+                    <Table.Tbody>
+                        {users.map((user) => (
+                            <UserRow user={user} key={user.id} />
+                        ))}
+                    </Table.Tbody>
+                </Table>
+            </ScrollArea>
+        </Stack>
+    );
+}

frontend/src/root.tsx

@@ -3,13 +3,13 @@ import { Navbar } from "@/components/Navbar";
 import { Footer } from "@/components/Footer";
 
 export default function Root() {
-  return (
-    <>
-      <Navbar />
-      <main style={{display: "flex", justifyContent: "center"}}>
-        <Outlet />
-      </main>
-      <Footer />
-    </>
-  );
+    return (
+        <>
+            <Navbar />
+            <main style={{ display: "flex", justifyContent: "center" }}>
+                <Outlet />
+            </main>
+            <Footer />
+        </>
+    );
 }

frontend/src/router.tsx

@@ -1,6 +1,4 @@
-import {
-  createBrowserRouter,
-} from "react-router";
+import { createBrowserRouter } from "react-router";
 
 import Root from "@/root";
 import { Home } from "@/pages/Home";
@@ -14,35 +12,36 @@ import { Contract } from "./pages/Contract";
 import { NotFound } from "./pages/NotFound";
 
 export const router = createBrowserRouter([
-  {
-    path: "/",
-    Component: Root,
-    errorElement: <NotFound />,
-    children: [
-      { index: true, Component: Home },
-      { path: "/forms",  Component: Forms },
-      { 
-        path: "/dashboard", Component: Dashboard, 
+    {
+        path: "/",
+        Component: Root,
+        errorElement: <NotFound />,
         children: [
-          { path: "productors", Component: Productors },
-          { path: "productors/create", Component: Productors },
-          { path: "productors/:id/edit", Component: Productors },
-          { path: "products",  Component: Products  },
-          { path: "products/create", Component: Products },
-          { path: "products/:id/edit", Component: Products },
-          // { path: "templates",  Component: Templates  },
-          { path: "users",  Component: Users },
-          { path: "users/create", Component: Users },
-          { path: "users/:id/edit", Component: Users },
-          { path: "forms",  Component: Forms },
-          { path: "forms/:id/edit",  Component: Forms },
-          { path: "forms/create",  Component: Forms },
-          { path: "shipments",  Component: Shipments },
-          { path: "shipments/:id/edit",  Component: Shipments },
-          { path: "shipments/create",  Component: Shipments },
-        ] 
-      },
-      { path: "/form/:id",  Component: Contract},
-    ],
-  },
+            { index: true, Component: Home },
+            { path: "/forms", Component: Forms },
+            {
+                path: "/dashboard",
+                Component: Dashboard,
+                children: [
+                    { path: "productors", Component: Productors },
+                    { path: "productors/create", Component: Productors },
+                    { path: "productors/:id/edit", Component: Productors },
+                    { path: "products", Component: Products },
+                    { path: "products/create", Component: Products },
+                    { path: "products/:id/edit", Component: Products },
+                    // { path: "templates",  Component: Templates  },
+                    { path: "users", Component: Users },
+                    { path: "users/create", Component: Users },
+                    { path: "users/:id/edit", Component: Users },
+                    { path: "forms", Component: Forms },
+                    { path: "forms/:id/edit", Component: Forms },
+                    { path: "forms/create", Component: Forms },
+                    { path: "shipments", Component: Shipments },
+                    { path: "shipments/:id/edit", Component: Shipments },
+                    { path: "shipments/create", Component: Shipments },
+                ],
+            },
+            { path: "/form/:id", Component: Contract },
+        ],
+    },
 ]);

frontend/src/services/api.ts

@@ -1,8 +1,18 @@
-import { useMutation, useQuery, useQueryClient,type DefinedInitialDataOptions,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";
-import type { Productor, ProductorCreate, ProductorEditPayload } from "@/services/resources/productors";
+import type {
+    Productor,
+    ProductorCreate,
+    ProductorEditPayload,
+} from "@/services/resources/productors";
 import type { User, UserCreate, UserEditPayload } from "@/services/resources/users";
 import type { Product, ProductCreate, ProductEditPayload } from "./resources/products";
 import type { ContractCreate } from "./resources/contracts";
@@ -10,559 +20,558 @@ import { notifications } from "@mantine/notifications";
 import { t } from "@/config/i18n";
 
 export function useGetShipments(filters?: URLSearchParams): UseQueryResult<Shipment[], Error> {
-    const queryString = filters?.toString()
+    const queryString = filters?.toString();
     return useQuery<Shipment[]>({
-        queryKey: ['shipments', queryString],
-        queryFn: () => (
-            fetch(`${Config.backend_uri}/shipments${filters ? `?${queryString}` : ""}`)
-            .then((res) => res.json())
-        ),
+        queryKey: ["shipments", queryString],
+        queryFn: () =>
+            fetch(`${Config.backend_uri}/shipments${filters ? `?${queryString}` : ""}`).then(
+                (res) => res.json(),
+            ),
     });
 }
 
-export function useGetShipment(id?: number, options?: Partial<DefinedInitialDataOptions<Shipment, Error, Shipment, readonly unknown[]>>): 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: () => (
-            fetch(`${Config.backend_uri}/shipments/${id}`)
-            .then((res) => res.json())
-        ),
-        enabled: !!id, 
+        queryKey: ["shipment"],
+        queryFn: () => fetch(`${Config.backend_uri}/shipments/${id}`).then((res) => res.json()),
+        enabled: !!id,
         ...options,
     });
 }
 
 export function useCreateShipment() {
-    const queryClient = useQueryClient()
+    const queryClient = useQueryClient();
 
     return useMutation({
         mutationFn: (newShipment: ShipmentCreate) => {
             return fetch(`${Config.backend_uri}/shipments`, {
-                method: 'POST',
+                method: "POST",
                 headers: {
-                    "Content-Type": "application/json"
+                    "Content-Type": "application/json",
                 },
                 body: JSON.stringify(newShipment),
             }).then((res) => res.json());
         },
         onSuccess: async () => {
             notifications.show({
-                title: t("success", {capfirst: true}),
-                message: t("successfully created shipment", {capfirst: true}),
+                title: t("success", { capfirst: true }),
+                message: t("successfully created shipment", { capfirst: true }),
             });
-            await queryClient.invalidateQueries({ queryKey: ['shipments'] })
+            await queryClient.invalidateQueries({ queryKey: ["shipments"] });
         },
         onError: (error) => {
             notifications.show({
-                title: t("error", {capfirst: true}),
-                message: error?.message || t(`error editing shipment`, {capfirst: true}),
-                color: "red"
+                title: t("error", { capfirst: true }),
+                message: error?.message || t(`error editing shipment`, { capfirst: true }),
+                color: "red",
             });
-        }
-    })
+        },
+    });
 }
 
 export function useEditShipment() {
-    const queryClient = useQueryClient()
+    const queryClient = useQueryClient();
 
     return useMutation({
-        mutationFn: ({shipment, id}: ShipmentEditPayload) => {
+        mutationFn: ({ shipment, id }: ShipmentEditPayload) => {
             return fetch(`${Config.backend_uri}/shipments/${id}`, {
-                method: 'PUT',
+                method: "PUT",
                 headers: {
-                    "Content-Type": "application/json"
+                    "Content-Type": "application/json",
                 },
                 body: JSON.stringify(shipment),
             }).then((res) => res.json());
         },
         onSuccess: async () => {
             notifications.show({
-                title: t("success", {capfirst: true}),
-                message: t("successfully edited shipment", {capfirst: true}),
+                title: t("success", { capfirst: true }),
+                message: t("successfully edited shipment", { capfirst: true }),
             });
-            await queryClient.invalidateQueries({ queryKey: ['shipments'] })
+            await queryClient.invalidateQueries({ queryKey: ["shipments"] });
         },
         onError: (error) => {
             notifications.show({
-                title: t("error", {capfirst: true}),
-                message: error?.message || t(`error editing shipment`, {capfirst: true}),
-                color: "red"
+                title: t("error", { capfirst: true }),
+                message: error?.message || t(`error editing shipment`, { capfirst: true }),
+                color: "red",
             });
-        }
-    })
+        },
+    });
 }
 
 export function useDeleteShipment() {
-    const queryClient = useQueryClient()
+    const queryClient = useQueryClient();
     return useMutation({
         mutationFn: (id: number) => {
             return fetch(`${Config.backend_uri}/shipments/${id}`, {
-                method: 'DELETE',
+                method: "DELETE",
                 headers: {
-                    "Content-Type": "application/json"
+                    "Content-Type": "application/json",
                 },
             }).then((res) => res.json());
         },
         onSuccess: async () => {
             notifications.show({
-                title: t("success", {capfirst: true}),
-                message: t("successfully deleted shipment", {capfirst: true}),
+                title: t("success", { capfirst: true }),
+                message: t("successfully deleted shipment", { capfirst: true }),
             });
-            await queryClient.invalidateQueries({ queryKey: ['shipments'] })
+            await queryClient.invalidateQueries({ queryKey: ["shipments"] });
         },
         onError: (error) => {
             notifications.show({
-                title: t("error", {capfirst: true}),
-                message: error?.message || t(`error deleting shipment`, {capfirst: true}),
-                color: "red"
+                title: t("error", { capfirst: true }),
+                message: error?.message || t(`error deleting shipment`, { capfirst: true }),
+                color: "red",
             });
-        }
+        },
     });
 }
 
 export function useGetProductors(filters?: URLSearchParams): UseQueryResult<Productor[], Error> {
-    const queryString = filters?.toString()
+    const queryString = filters?.toString();
     return useQuery<Productor[]>({
-        queryKey: ['productors', queryString],
-        queryFn: () => (
-            fetch(`${Config.backend_uri}/productors${filters ? `?${queryString}` : ""}`)
-            .then((res) => res.json())
-        ),
+        queryKey: ["productors", queryString],
+        queryFn: () =>
+            fetch(`${Config.backend_uri}/productors${filters ? `?${queryString}` : ""}`).then(
+                (res) => res.json(),
+            ),
     });
 }
 
-export function useGetProductor(id?: number, options?: Partial<DefinedInitialDataOptions<Productor, Error, Productor, readonly unknown[]>>) {
+export function useGetProductor(
+    id?: number,
+    options?: Partial<DefinedInitialDataOptions<Productor, Error, Productor, readonly unknown[]>>,
+) {
     return useQuery<Productor>({
-        queryKey: ['productor'],
-        queryFn: () => (
-            fetch(`${Config.backend_uri}/productors/${id}`)
-            .then((res) => res.json())
-        ),
-        enabled: !!id, 
+        queryKey: ["productor"],
+        queryFn: () => fetch(`${Config.backend_uri}/productors/${id}`).then((res) => res.json()),
+        enabled: !!id,
         ...options,
     });
 }
 
 export function useCreateProductor() {
-    const queryClient = useQueryClient()
+    const queryClient = useQueryClient();
 
     return useMutation({
         mutationFn: (newProductor: ProductorCreate) => {
             return fetch(`${Config.backend_uri}/productors`, {
-                method: 'POST',
+                method: "POST",
                 headers: {
-                    "Content-Type": "application/json"
+                    "Content-Type": "application/json",
                 },
                 body: JSON.stringify(newProductor),
             }).then((res) => res.json());
         },
         onSuccess: async () => {
             notifications.show({
-                title: t("success", {capfirst: true}),
-                message: t("successfully created productor", {capfirst: true}),
+                title: t("success", { capfirst: true }),
+                message: t("successfully created productor", { capfirst: true }),
             });
-            await queryClient.invalidateQueries({ queryKey: ['productors'] })
+            await queryClient.invalidateQueries({ queryKey: ["productors"] });
         },
         onError: (error) => {
             notifications.show({
-                title: t("error", {capfirst: true}),
-                message: error?.message || t(`error editing productor`, {capfirst: true}),
-                color: "red"
+                title: t("error", { capfirst: true }),
+                message: error?.message || t(`error editing productor`, { capfirst: true }),
+                color: "red",
             });
-        }
-    })
+        },
+    });
 }
 
 export function useEditProductor() {
-    const queryClient = useQueryClient()
+    const queryClient = useQueryClient();
 
     return useMutation({
-        mutationFn: ({productor, id}: ProductorEditPayload) => {
+        mutationFn: ({ productor, id }: ProductorEditPayload) => {
             return fetch(`${Config.backend_uri}/productors/${id}`, {
-                method: 'PUT',
+                method: "PUT",
                 headers: {
-                    "Content-Type": "application/json"
+                    "Content-Type": "application/json",
                 },
                 body: JSON.stringify(productor),
             }).then((res) => res.json());
         },
         onSuccess: async () => {
             notifications.show({
-                title: t("success", {capfirst: true}),
-                message: t("successfully edited productor", {capfirst: true}),
+                title: t("success", { capfirst: true }),
+                message: t("successfully edited productor", { capfirst: true }),
             });
-            await queryClient.invalidateQueries({ queryKey: ['productors'] })
+            await queryClient.invalidateQueries({ queryKey: ["productors"] });
         },
         onError: (error) => {
             notifications.show({
-                title: t("error", {capfirst: true}),
-                message: error?.message || t(`error editing productor`, {capfirst: true}),
-                color: "red"
+                title: t("error", { capfirst: true }),
+                message: error?.message || t(`error editing productor`, { capfirst: true }),
+                color: "red",
             });
-        }
-    })
+        },
+    });
 }
 
 export function useDeleteProductor() {
-    const queryClient = useQueryClient()
+    const queryClient = useQueryClient();
     return useMutation({
         mutationFn: (id: number) => {
             return fetch(`${Config.backend_uri}/productors/${id}`, {
-                method: 'DELETE',
+                method: "DELETE",
                 headers: {
-                    "Content-Type": "application/json"
+                    "Content-Type": "application/json",
                 },
             }).then((res) => res.json());
         },
         onSuccess: async () => {
             notifications.show({
-                title: t("success", {capfirst: true}),
-                message: t("successfully deleted productor", {capfirst: true}),
+                title: t("success", { capfirst: true }),
+                message: t("successfully deleted productor", { capfirst: true }),
             });
-            await queryClient.invalidateQueries({ queryKey: ['productors'] })
+            await queryClient.invalidateQueries({ queryKey: ["productors"] });
         },
         onError: (error) => {
             notifications.show({
-                title: t("error", {capfirst: true}),
-                message: error?.message || t(`error deleting productor`, {capfirst: true}),
-                color: "red"
+                title: t("error", { capfirst: true }),
+                message: error?.message || t(`error deleting productor`, { capfirst: true }),
+                color: "red",
             });
-        }
+        },
     });
 }
 
-export function useGetForm(id?: number, options?: Partial<DefinedInitialDataOptions<Form, Error, Form, readonly unknown[]>>) {
+export function useGetForm(
+    id?: number,
+    options?: Partial<DefinedInitialDataOptions<Form, Error, Form, readonly unknown[]>>,
+) {
     return useQuery<Form>({
-        queryKey: ['form'],
-        queryFn: () => (
-            fetch(`${Config.backend_uri}/forms/${id}`)
-            .then((res) => res.json())
-        ),
-        enabled: !!id, 
+        queryKey: ["form"],
+        queryFn: () => fetch(`${Config.backend_uri}/forms/${id}`).then((res) => res.json()),
+        enabled: !!id,
         ...options,
     });
 }
 
-export function useGetForms(filters?: URLSearchParams): UseQueryResult<Form[], Error> {    
-    const queryString = filters?.toString()
+export function useGetForms(filters?: URLSearchParams): UseQueryResult<Form[], Error> {
+    const queryString = filters?.toString();
     return useQuery<Form[]>({
-        queryKey: ['forms', queryString],
-        queryFn: () => (
-            fetch(`${Config.backend_uri}/forms${filters ? `?${queryString}` : ""}`)
-            .then((res) => res.json())
-        ),
+        queryKey: ["forms", queryString],
+        queryFn: () =>
+            fetch(`${Config.backend_uri}/forms${filters ? `?${queryString}` : ""}`).then((res) =>
+                res.json(),
+            ),
     });
 }
 
 export function useCreateForm() {
-    const queryClient = useQueryClient()
+    const queryClient = useQueryClient();
 
     return useMutation({
         mutationFn: (newForm: FormCreate) => {
             return fetch(`${Config.backend_uri}/forms`, {
-                method: 'POST',
+                method: "POST",
                 headers: {
-                    "Content-Type": "application/json"
+                    "Content-Type": "application/json",
                 },
                 body: JSON.stringify(newForm),
             }).then((res) => res.json());
         },
         onSuccess: async () => {
-            await queryClient.invalidateQueries({ queryKey: ['forms'] })
-        }
+            await queryClient.invalidateQueries({ queryKey: ["forms"] });
+        },
     });
 }
 
 export function useDeleteForm() {
-    const queryClient = useQueryClient()
+    const queryClient = useQueryClient();
     return useMutation({
         mutationFn: (id: number) => {
             return fetch(`${Config.backend_uri}/forms/${id}`, {
-                method: 'DELETE',
+                method: "DELETE",
                 headers: {
-                    "Content-Type": "application/json"
+                    "Content-Type": "application/json",
                 },
             }).then((res) => res.json());
         },
         onSuccess: async () => {
             notifications.show({
-                title: t("success", {capfirst: true}),
-                message: t("successfully deleted form", {capfirst: true}),
+                title: t("success", { capfirst: true }),
+                message: t("successfully deleted form", { capfirst: true }),
             });
-            await queryClient.invalidateQueries({ queryKey: ['forms'] })
+            await queryClient.invalidateQueries({ queryKey: ["forms"] });
         },
         onError: (error) => {
             notifications.show({
-                title: t("error", {capfirst: true}),
-                message: error?.message || t(`error deleting form`, {capfirst: true}),
-                color: "red"
+                title: t("error", { capfirst: true }),
+                message: error?.message || t(`error deleting form`, { capfirst: true }),
+                color: "red",
             });
-        }
+        },
     });
 }
 
 export function useEditForm() {
-    const queryClient = useQueryClient()
+    const queryClient = useQueryClient();
 
     return useMutation({
-        mutationFn: ({id, form}: FormEditPayload) => {
+        mutationFn: ({ id, form }: FormEditPayload) => {
             return fetch(`${Config.backend_uri}/forms/${id}`, {
-                method: 'PUT',
+                method: "PUT",
                 headers: {
-                    "Content-Type": "application/json"
+                    "Content-Type": "application/json",
                 },
                 body: JSON.stringify(form),
             }).then((res) => res.json());
         },
         onSuccess: async () => {
             notifications.show({
-                title: t("success", {capfirst: true}),
-                message: t("successfully edited form", {capfirst: true}),
+                title: t("success", { capfirst: true }),
+                message: t("successfully edited form", { capfirst: true }),
             });
-            await queryClient.invalidateQueries({ queryKey: ['forms'] })
+            await queryClient.invalidateQueries({ queryKey: ["forms"] });
         },
         onError: (error) => {
             notifications.show({
-                title: t("error", {capfirst: true}),
-                message: error?.message || t(`error editing form`, {capfirst: true}),
-                color: "red"
+                title: t("error", { capfirst: true }),
+                message: error?.message || t(`error editing form`, { capfirst: true }),
+                color: "red",
             });
-        }
+        },
     });
 }
 
-export function useGetProduct(id?: number, options?: Partial<DefinedInitialDataOptions<Product, Error, Product, readonly unknown[]>>) {
+export function useGetProduct(
+    id?: number,
+    options?: Partial<DefinedInitialDataOptions<Product, Error, Product, readonly unknown[]>>,
+) {
     return useQuery<Product>({
-        queryKey: ['product'],
-        queryFn: () => (
-            fetch(`${Config.backend_uri}/products/${id}`)
-            .then((res) => res.json())
-        ),
-        enabled: !!id, 
+        queryKey: ["product"],
+        queryFn: () => fetch(`${Config.backend_uri}/products/${id}`).then((res) => res.json()),
+        enabled: !!id,
         ...options,
     });
 }
 
-export function useGetProducts(filters?: URLSearchParams): UseQueryResult<Product[], Error> {    
-    const queryString = filters?.toString()
+export function useGetProducts(filters?: URLSearchParams): UseQueryResult<Product[], Error> {
+    const queryString = filters?.toString();
     return useQuery<Product[]>({
-        queryKey: ['products', queryString],
-        queryFn: () => (
-            fetch(`${Config.backend_uri}/products${filters ? `?${queryString}` : ""}`)
-            .then((res) => res.json())
-        ),
+        queryKey: ["products", queryString],
+        queryFn: () =>
+            fetch(`${Config.backend_uri}/products${filters ? `?${queryString}` : ""}`).then((res) =>
+                res.json(),
+            ),
     });
 }
 
 export function useCreateProduct() {
-    const queryClient = useQueryClient()
+    const queryClient = useQueryClient();
 
     return useMutation({
         mutationFn: (newProduct: ProductCreate) => {
             return fetch(`${Config.backend_uri}/products`, {
-                method: 'POST',
+                method: "POST",
                 headers: {
-                    "Content-Type": "application/json"
+                    "Content-Type": "application/json",
                 },
                 body: JSON.stringify(newProduct),
             }).then((res) => res.json());
         },
         onSuccess: async () => {
             notifications.show({
-                title: t("success", {capfirst: true}),
-                message: t("successfully created product", {capfirst: true}),
+                title: t("success", { capfirst: true }),
+                message: t("successfully created product", { capfirst: true }),
             });
-            await queryClient.invalidateQueries({ queryKey: ['products'] })
+            await queryClient.invalidateQueries({ queryKey: ["products"] });
         },
         onError: (error) => {
             notifications.show({
-                title: t("error", {capfirst: true}),
-                message: error?.message || t(`error editing product`, {capfirst: true}),
-                color: "red"
+                title: t("error", { capfirst: true }),
+                message: error?.message || t(`error editing product`, { capfirst: true }),
+                color: "red",
             });
-        }
+        },
     });
 }
 
 export function useDeleteProduct() {
-    const queryClient = useQueryClient()
+    const queryClient = useQueryClient();
     return useMutation({
         mutationFn: (id: number) => {
             return fetch(`${Config.backend_uri}/products/${id}`, {
-                method: 'DELETE',
+                method: "DELETE",
                 headers: {
-                    "Content-Type": "application/json"
+                    "Content-Type": "application/json",
                 },
             }).then((res) => res.json());
         },
         onSuccess: async () => {
             notifications.show({
-                title: t("success", {capfirst: true}),
-                message: t("successfully deleted product", {capfirst: true}),
+                title: t("success", { capfirst: true }),
+                message: t("successfully deleted product", { capfirst: true }),
             });
-            await queryClient.invalidateQueries({ queryKey: ['products'] })
+            await queryClient.invalidateQueries({ queryKey: ["products"] });
         },
         onError: (error) => {
             notifications.show({
-                title: t("error", {capfirst: true}),
-                message: error?.message || t(`error deleting product`, {capfirst: true}),
-                color: "red"
+                title: t("error", { capfirst: true }),
+                message: error?.message || t(`error deleting product`, { capfirst: true }),
+                color: "red",
             });
-        }
+        },
     });
 }
 
 export function useEditProduct() {
-    const queryClient = useQueryClient()
+    const queryClient = useQueryClient();
 
     return useMutation({
-        mutationFn: ({id, product}: ProductEditPayload) => {
+        mutationFn: ({ id, product }: ProductEditPayload) => {
             return fetch(`${Config.backend_uri}/products/${id}`, {
-                method: 'PUT',
+                method: "PUT",
                 headers: {
-                    "Content-Type": "application/json"
+                    "Content-Type": "application/json",
                 },
                 body: JSON.stringify(product),
             }).then((res) => res.json());
         },
         onSuccess: async () => {
             notifications.show({
-                title: t("success", {capfirst: true}),
-                message: t("successfully edited product", {capfirst: true}),
+                title: t("success", { capfirst: true }),
+                message: t("successfully edited product", { capfirst: true }),
             });
-            await queryClient.invalidateQueries({ queryKey: ['products'] })
+            await queryClient.invalidateQueries({ queryKey: ["products"] });
         },
         onError: (error) => {
             notifications.show({
-                title: t("error", {capfirst: true}),
-                message: error?.message || t(`error editing product`, {capfirst: true}),
-                color: "red"
+                title: t("error", { capfirst: true }),
+                message: error?.message || t(`error editing product`, { capfirst: true }),
+                color: "red",
             });
-        }
+        },
     });
 }
 
-export function useGetUser(id?: number, options?: Partial<DefinedInitialDataOptions<User, Error, User, readonly unknown[]>>) {
+export function useGetUser(
+    id?: number,
+    options?: Partial<DefinedInitialDataOptions<User, Error, User, readonly unknown[]>>,
+) {
     return useQuery<User>({
-        queryKey: ['user'],
-        queryFn: () => (
-            fetch(`${Config.backend_uri}/users/${id}`)
-            .then((res) => res.json())
-        ),
-        enabled: !!id, 
+        queryKey: ["user"],
+        queryFn: () => fetch(`${Config.backend_uri}/users/${id}`).then((res) => res.json()),
+        enabled: !!id,
         ...options,
     });
 }
 
-export function useGetUsers(filters?: URLSearchParams): UseQueryResult<User[], Error> {    
-    const queryString = filters?.toString()
+export function useGetUsers(filters?: URLSearchParams): UseQueryResult<User[], Error> {
+    const queryString = filters?.toString();
     return useQuery<User[]>({
-        queryKey: ['users', queryString],
-        queryFn: () => (
-            fetch(`${Config.backend_uri}/users${filters ? `?${queryString}` : ""}`)
-            .then((res) => res.json())
-        ),
+        queryKey: ["users", queryString],
+        queryFn: () =>
+            fetch(`${Config.backend_uri}/users${filters ? `?${queryString}` : ""}`).then((res) =>
+                res.json(),
+            ),
     });
 }
 
 export function useCreateUser() {
-    const queryClient = useQueryClient()
+    const queryClient = useQueryClient();
 
     return useMutation({
         mutationFn: (newUser: UserCreate) => {
             return fetch(`${Config.backend_uri}/users`, {
-                method: 'POST',
+                method: "POST",
                 headers: {
-                    "Content-Type": "application/json"
+                    "Content-Type": "application/json",
                 },
                 body: JSON.stringify(newUser),
             }).then((res) => res.json());
         },
         onSuccess: async () => {
             notifications.show({
-                title: t("success", {capfirst: true}),
-                message: t("successfully created user", {capfirst: true}),
+                title: t("success", { capfirst: true }),
+                message: t("successfully created user", { capfirst: true }),
             });
-            await queryClient.invalidateQueries({ queryKey: ['users'] })
+            await queryClient.invalidateQueries({ queryKey: ["users"] });
         },
         onError: (error) => {
             notifications.show({
-                title: t("error", {capfirst: true}),
-                message: error?.message || t(`error editing user`, {capfirst: true}),
-                color: "red"
+                title: t("error", { capfirst: true }),
+                message: error?.message || t(`error editing user`, { capfirst: true }),
+                color: "red",
             });
-        }
+        },
     });
 }
 
 export function useDeleteUser() {
-    const queryClient = useQueryClient()
+    const queryClient = useQueryClient();
     return useMutation({
         mutationFn: (id: number) => {
             return fetch(`${Config.backend_uri}/users/${id}`, {
-                method: 'DELETE',
+                method: "DELETE",
                 headers: {
-                    "Content-Type": "application/json"
+                    "Content-Type": "application/json",
                 },
             }).then((res) => res.json());
         },
         onSuccess: async () => {
             notifications.show({
-                title: t("success", {capfirst: true}),
-                message: t("successfully deleted user", {capfirst: true}),
+                title: t("success", { capfirst: true }),
+                message: t("successfully deleted user", { capfirst: true }),
             });
-            await queryClient.invalidateQueries({ queryKey: ['users'] })
+            await queryClient.invalidateQueries({ queryKey: ["users"] });
         },
         onError: (error) => {
             notifications.show({
-                title: t("error", {capfirst: true}),
-                message: error?.message || t(`error deleting user`, {capfirst: true}),
-                color: "red"
+                title: t("error", { capfirst: true }),
+                message: error?.message || t(`error deleting user`, { capfirst: true }),
+                color: "red",
             });
-        }
+        },
     });
 }
 
 export function useEditUser() {
-    const queryClient = useQueryClient()
+    const queryClient = useQueryClient();
 
     return useMutation({
-        mutationFn: ({id, user}: UserEditPayload) => {
+        mutationFn: ({ id, user }: UserEditPayload) => {
             return fetch(`${Config.backend_uri}/users/${id}`, {
-                method: 'PUT',
+                method: "PUT",
                 headers: {
-                    "Content-Type": "application/json"
+                    "Content-Type": "application/json",
                 },
                 body: JSON.stringify(user),
             }).then((res) => res.json());
         },
         onSuccess: async () => {
             notifications.show({
-                title: t("success", {capfirst: true}),
-                message: t("successfully edited user", {capfirst: true}),
+                title: t("success", { capfirst: true }),
+                message: t("successfully edited user", { capfirst: true }),
             });
-            await queryClient.invalidateQueries({ queryKey: ['users'] })
+            await queryClient.invalidateQueries({ queryKey: ["users"] });
         },
         onError: (error) => {
             notifications.show({
-                title: t("error", {capfirst: true}),
-                message: error?.message || t(`error editing user`, {capfirst: true}),
-                color: "red"
+                title: t("error", { capfirst: true }),
+                message: error?.message || t(`error editing user`, { capfirst: true }),
+                color: "red",
             });
-        }
+        },
     });
 }
 
-
 export function useCreateContract() {
-    const queryClient = useQueryClient()
+    const queryClient = useQueryClient();
 
     return useMutation({
         mutationFn: (newContract: ContractCreate) => {
             return fetch(`${Config.backend_uri}/contracts`, {
-                method: 'POST',
+                method: "POST",
                 headers: {
-                    "Content-Type": "application/json"
+                    "Content-Type": "application/json",
                 },
                 body: JSON.stringify(newContract),
             }).then(async (res) => await res.blob());
@@ -575,6 +584,6 @@ export function useCreateContract() {
             link.click();
             URL.revokeObjectURL(url);
             await queryClient.invalidateQueries({ queryKey: ["contracts"] });
-        }
+        },
     });
-}
+}

frontend/src/services/resources/contracts.ts

@@ -1,4 +1,4 @@
-export type ContractCreate = {
-    form_id: number;
-    contract: Record<string, string | number | null>;
-}
+export type ContractCreate = {
+    form_id: number;
+    contract: Record<string, string | number | null>;
+};

frontend/src/services/resources/forms.ts

@@ -1,50 +1,50 @@
-import type { Productor } from "@/services/resources/productors";
-import type { Shipment } from "@/services/resources/shipments";
-import type { User } from "@/services/resources/users";
-
-export type Form = {
-    id: number;
-    name: string;
-    season: string;
-    start: string;
-    end: string;
-    productor: Productor;
-    referer: User;
-    shipments: Shipment[];
-    minimum_shipment_value: number | null;
-}
-
-export type FormCreate = {
-    name: string;
-    season: string;
-    start: string;
-    end: string;
-    productor_id: number;
-    referer_id: number;
-    minimum_shipment_value: number | null;
-}
-
-export type FormEdit = {
-    name?: string | null;
-    season?: string | null;
-    start?: string | null;
-    end?: string | null;
-    productor_id?: number | null;
-    referer_id?: number | null;
-    minimum_shipment_value: number | null;
-}
-
-export type FormEditPayload = {
-    id: number;
-    form: FormEdit;
-}
-
-export type FormInputs = {
-    name: string;
-    season: string;
-    start: string | null;
-    end: string | null;
-    productor_id: string;
-    referer_id: string;
-    minimum_shipment_value: number | string | null;
-}
+import type { Productor } from "@/services/resources/productors";
+import type { Shipment } from "@/services/resources/shipments";
+import type { User } from "@/services/resources/users";
+
+export type Form = {
+    id: number;
+    name: string;
+    season: string;
+    start: string;
+    end: string;
+    productor: Productor;
+    referer: User;
+    shipments: Shipment[];
+    minimum_shipment_value: number | null;
+};
+
+export type FormCreate = {
+    name: string;
+    season: string;
+    start: string;
+    end: string;
+    productor_id: number;
+    referer_id: number;
+    minimum_shipment_value: number | null;
+};
+
+export type FormEdit = {
+    name?: string | null;
+    season?: string | null;
+    start?: string | null;
+    end?: string | null;
+    productor_id?: number | null;
+    referer_id?: number | null;
+    minimum_shipment_value: number | null;
+};
+
+export type FormEditPayload = {
+    id: number;
+    form: FormEdit;
+};
+
+export type FormInputs = {
+    name: string;
+    season: string;
+    start: string | null;
+    end: string | null;
+    productor_id: string;
+    referer_id: string;
+    minimum_shipment_value: number | string | null;
+};

frontend/src/services/resources/productors.ts

@@ -1,47 +1,47 @@
-import { t } from "@/config/i18n";
-import type { Product } from "./products";
-
-export const PaymentMethods = [
-    {value: "cheque", label: t("cheque", {capfirst: true})},
-    {value: "transfer", label: t("transfer", {capfirst: true})},
-]
-
-export type PaymentMethod = {
-    name: string;
-    details: string;
-}
-
-export type Productor = {
-    id: number;
-    name: string;
-    address: string;
-    payment_methods: PaymentMethod[];
-    type: string;
-    products: Product[]
-}
-
-export type ProductorCreate = {
-    name: string;
-    address: string;
-    payment_methods: PaymentMethod[];
-    type: string;
-}
-
-export type ProductorEdit = {
-    name: string | null;
-    address: string | null;
-    payment_methods: PaymentMethod[];
-    type: string | null;
-}
-
-export type ProductorInputs = {
-    name: string;
-    address: string;
-    type: string;
-    payment_methods: PaymentMethod[];
-}
-
-export type ProductorEditPayload = {
-    productor: ProductorEdit;
-    id: number;
-}
+import { t } from "@/config/i18n";
+import type { Product } from "./products";
+
+export const PaymentMethods = [
+    { value: "cheque", label: t("cheque", { capfirst: true }) },
+    { value: "transfer", label: t("transfer", { capfirst: true }) },
+];
+
+export type PaymentMethod = {
+    name: string;
+    details: string;
+};
+
+export type Productor = {
+    id: number;
+    name: string;
+    address: string;
+    payment_methods: PaymentMethod[];
+    type: string;
+    products: Product[];
+};
+
+export type ProductorCreate = {
+    name: string;
+    address: string;
+    payment_methods: PaymentMethod[];
+    type: string;
+};
+
+export type ProductorEdit = {
+    name: string | null;
+    address: string | null;
+    payment_methods: PaymentMethod[];
+    type: string | null;
+};
+
+export type ProductorInputs = {
+    name: string;
+    address: string;
+    type: string;
+    payment_methods: PaymentMethod[];
+};
+
+export type ProductorEditPayload = {
+    productor: ProductorEdit;
+    id: number;
+};

frontend/src/services/resources/products.ts

@@ -1,100 +1,106 @@
-import type { Productor } from "@/services/resources/productors";
-import type { Shipment } from "@/services/resources/shipments";
-
-type ProductTypeKey = "1" | "2";
-type ProductUnitKey = "1" | "2" | "3";
-
-export const ProductType = {
-    "1": "planned",
-    "2": "recurrent",
-};
-
-export const ProductUnit = {
-    "1": "grams",
-    "2": "kilo",
-    "3": "piece",
-};
-
-export const ProductQuantityUnit = {
-    "ml": "mililiter",
-    "L": "liter",
-    "g": "grams",
-    "kg": "kilo" 
-}
-
-export type Product = {
-    id: number;
-    productor: Productor;
-    name: string;
-    unit: ProductUnitKey;
-    price: number | null;
-    price_kg: number | null;
-    quantity: number | null;
-    quantity_unit: string | null;
-    type: ProductTypeKey;
-    shipments: Shipment[];
-}
-
-export type ProductCreate = {
-    productor_id: number;
-    name: string;
-    unit: string;
-    price: number | null;
-    price_kg: number | null;
-    quantity: number | null;
-    quantity_unit: string | null;
-    type: string;
-}
-
-export type ProductEdit = {
-    productor_id: number | null;
-    name: string | null;
-    unit: string | null;
-    price: number | null;
-    price_kg: number | null;
-    quantity: number | null;
-    quantity_unit: string | null;
-    type: string | null;
-}
-
-export type ProductInputs = {
-    productor_id: string | null;
-    name: string;
-    unit: string | null;
-    price: number | string | null;
-    price_kg: number | string | null;
-    quantity: number | string | null;
-    quantity_unit: string | null;
-    type: string | null;
-}
-
-export type ProductEditPayload = {
-    product: ProductEdit;
-    id: number;
-}
-
-export function productToProductInputs(product: Product): ProductInputs {
-    return {
-        productor_id: String(product.productor.id),
-        name: product.name,
-        unit: product.unit,
-        price: product.price,
-        price_kg: product.price_kg,
-        quantity: product.quantity,
-        quantity_unit: product.quantity_unit,
-        type: product.type,
-    };
-}
-
-export function productCreateFromProductInputs(productInput: ProductInputs): ProductCreate {
-    return {
-        productor_id: Number(productInput.productor_id)!,
-        name: productInput.name,
-        unit: productInput.unit!,
-        price: productInput.price === "" || !productInput.price ? null : Number(productInput.price),
-        price_kg: productInput.price_kg === ""  || !productInput.price_kg ? null : Number(productInput.price_kg),
-        quantity: productInput.quantity === ""  || !productInput.quantity ? null : Number(productInput.quantity),
-        quantity_unit: productInput.quantity_unit,
-        type: productInput.type!,
-    }
-}
+import type { Productor } from "@/services/resources/productors";
+import type { Shipment } from "@/services/resources/shipments";
+
+type ProductTypeKey = "1" | "2";
+type ProductUnitKey = "1" | "2" | "3";
+
+export const ProductType = {
+    "1": "planned",
+    "2": "recurrent",
+};
+
+export const ProductUnit = {
+    "1": "grams",
+    "2": "kilo",
+    "3": "piece",
+};
+
+export const ProductQuantityUnit = {
+    ml: "mililiter",
+    L: "liter",
+    g: "grams",
+    kg: "kilo",
+};
+
+export type Product = {
+    id: number;
+    productor: Productor;
+    name: string;
+    unit: ProductUnitKey;
+    price: number | null;
+    price_kg: number | null;
+    quantity: number | null;
+    quantity_unit: string | null;
+    type: ProductTypeKey;
+    shipments: Shipment[];
+};
+
+export type ProductCreate = {
+    productor_id: number;
+    name: string;
+    unit: string;
+    price: number | null;
+    price_kg: number | null;
+    quantity: number | null;
+    quantity_unit: string | null;
+    type: string;
+};
+
+export type ProductEdit = {
+    productor_id: number | null;
+    name: string | null;
+    unit: string | null;
+    price: number | null;
+    price_kg: number | null;
+    quantity: number | null;
+    quantity_unit: string | null;
+    type: string | null;
+};
+
+export type ProductInputs = {
+    productor_id: string | null;
+    name: string;
+    unit: string | null;
+    price: number | string | null;
+    price_kg: number | string | null;
+    quantity: number | string | null;
+    quantity_unit: string | null;
+    type: string | null;
+};
+
+export type ProductEditPayload = {
+    product: ProductEdit;
+    id: number;
+};
+
+export function productToProductInputs(product: Product): ProductInputs {
+    return {
+        productor_id: String(product.productor.id),
+        name: product.name,
+        unit: product.unit,
+        price: product.price,
+        price_kg: product.price_kg,
+        quantity: product.quantity,
+        quantity_unit: product.quantity_unit,
+        type: product.type,
+    };
+}
+
+export function productCreateFromProductInputs(productInput: ProductInputs): ProductCreate {
+    return {
+        productor_id: Number(productInput.productor_id)!,
+        name: productInput.name,
+        unit: productInput.unit!,
+        price: productInput.price === "" || !productInput.price ? null : Number(productInput.price),
+        price_kg:
+            productInput.price_kg === "" || !productInput.price_kg
+                ? null
+                : Number(productInput.price_kg),
+        quantity:
+            productInput.quantity === "" || !productInput.quantity
+                ? null
+                : Number(productInput.quantity),
+        quantity_unit: productInput.quantity_unit,
+        type: productInput.type!,
+    };
+}

frontend/src/services/resources/shipments.ts

@@ -1,54 +1,54 @@
-import type { Form } from "./forms";
-import type { Product } from "./products";
-
-export type Shipment = {
-    name: string;
-    date: string;
-    id: number;
-    form: Form;
-    form_id: number;
-    products: Product[];
-}
-
-export type ShipmentCreate = {
-    name: string;
-    date: string;
-    form_id: number;
-    product_ids: number[];
-}
-
-export type ShipmentEdit = {
-    name: string | null;
-    date: string | null;
-    form_id: number | null;
-    product_ids: number[];
-}
-
-export type ShipmentEditPayload = {
-    id: number;
-    shipment: ShipmentEdit;
-}
-
-export type ShipmentInputs = {
-    name: string | null;
-    date: string | null;
-    form_id: string | null;
-    product_ids: string[];
-}
-
-export function shipmentToShipmentInputs(shipment: Shipment): ShipmentInputs {
-    return {
-        ...shipment,
-        form_id: String(shipment.form_id),
-        product_ids: shipment.products.map((el) => (String(el.id)))
-    };
-}
-
-export function shipmentCreateFromShipmentInputs(shipmentInput: ShipmentInputs): ShipmentCreate {
-    return {
-        name: shipmentInput.name!,
-        date: shipmentInput.date!,
-        form_id: Number(shipmentInput.form_id),
-        product_ids: shipmentInput.product_ids.map(el => (Number(el))),
-    }
-}
+import type { Form } from "./forms";
+import type { Product } from "./products";
+
+export type Shipment = {
+    name: string;
+    date: string;
+    id: number;
+    form: Form;
+    form_id: number;
+    products: Product[];
+};
+
+export type ShipmentCreate = {
+    name: string;
+    date: string;
+    form_id: number;
+    product_ids: number[];
+};
+
+export type ShipmentEdit = {
+    name: string | null;
+    date: string | null;
+    form_id: number | null;
+    product_ids: number[];
+};
+
+export type ShipmentEditPayload = {
+    id: number;
+    shipment: ShipmentEdit;
+};
+
+export type ShipmentInputs = {
+    name: string | null;
+    date: string | null;
+    form_id: string | null;
+    product_ids: string[];
+};
+
+export function shipmentToShipmentInputs(shipment: Shipment): ShipmentInputs {
+    return {
+        ...shipment,
+        form_id: String(shipment.form_id),
+        product_ids: shipment.products.map((el) => String(el.id)),
+    };
+}
+
+export function shipmentCreateFromShipmentInputs(shipmentInput: ShipmentInputs): ShipmentCreate {
+    return {
+        name: shipmentInput.name!,
+        date: shipmentInput.date!,
+        form_id: Number(shipmentInput.form_id),
+        product_ids: shipmentInput.product_ids.map((el) => Number(el)),
+    };
+}

frontend/src/services/resources/users.ts

@@ -1,28 +1,28 @@
-import type { Product } from "@/services/resources/products";
-
-export type User = {
-    id: number;
-    name: string;
-    email: string;
-    products: Product[];
-}
-
-export type UserInputs = {
-    email: string;
-    name: string;
-}
-
-export type UserCreate ={
-    email: string | null;
-    name: string | null;
-}
-
-export type UserEdit ={
-    email: string | null;
-    name: string | null;
-}
-
-export type UserEditPayload = {
-    user: UserEdit;
-    id: number;
-}
+import type { Product } from "@/services/resources/products";
+
+export type User = {
+    id: number;
+    name: string;
+    email: string;
+    products: Product[];
+};
+
+export type UserInputs = {
+    email: string;
+    name: string;
+};
+
+export type UserCreate = {
+    email: string | null;
+    name: string | null;
+};
+
+export type UserEdit = {
+    email: string | null;
+    name: string | null;
+};
+
+export type UserEditPayload = {
+    user: UserEdit;
+    id: number;
+};

frontend/src/theme.ts

@@ -1,5 +1,5 @@
-import { createTheme } from '@mantine/core';
+import { createTheme } from "@mantine/core";
 
 export const theme = createTheme({
-  /** Put your mantine theme override here */
-});
+    /** Put your mantine theme override here */
+});

frontend/tsconfig.app.json

@@ -1,32 +1,32 @@
 {
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2022",
-    "useDefineForClassFields": true,
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "types": ["vite/client"],
-    "skipLibCheck": true,
+    "compilerOptions": {
+        "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+        "target": "ES2022",
+        "useDefineForClassFields": true,
+        "lib": ["ES2022", "DOM", "DOM.Iterable"],
+        "module": "ESNext",
+        "types": ["vite/client"],
+        "skipLibCheck": true,
 
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "jsx": "react-jsx",
+        /* Bundler mode */
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "verbatimModuleSyntax": true,
+        "moduleDetection": "force",
+        "noEmit": true,
+        "jsx": "react-jsx",
 
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true,
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["src/*"]
-    }
-  },
-  "include": ["src"]
+        /* Linting */
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "erasableSyntaxOnly": true,
+        "noFallthroughCasesInSwitch": true,
+        "noUncheckedSideEffectImports": true,
+        "baseUrl": ".",
+        "paths": {
+            "@/*": ["src/*"]
+        }
+    },
+    "include": ["src"]
 }

frontend/tsconfig.json

@@ -1,7 +1,4 @@
 {
-  "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ],
+    "files": [],
+    "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
 }

frontend/tsconfig.node.json

@@ -1,26 +1,26 @@
 {
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "target": "ES2023",
-    "lib": ["ES2023"],
-    "module": "ESNext",
-    "types": ["node"],
-    "skipLibCheck": true,
+    "compilerOptions": {
+        "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+        "target": "ES2023",
+        "lib": ["ES2023"],
+        "module": "ESNext",
+        "types": ["node"],
+        "skipLibCheck": true,
 
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
+        /* Bundler mode */
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "verbatimModuleSyntax": true,
+        "moduleDetection": "force",
+        "noEmit": true,
 
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["vite.config.ts"]
+        /* Linting */
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "erasableSyntaxOnly": true,
+        "noFallthroughCasesInSwitch": true,
+        "noUncheckedSideEffectImports": true
+    },
+    "include": ["vite.config.ts"]
 }

frontend/vite.config.ts

@@ -1,18 +1,18 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import path from 'path';
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import path from "path";
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
-  resolve: {
-    alias: {
-      '@': path.resolve(__dirname, 'src'),
+    plugins: [react()],
+    resolve: {
+        alias: {
+            "@": path.resolve(__dirname, "src"),
+        },
     },
-  },
-  server: {
-    watch: {
-      usePolling: true,
+    server: {
+        watch: {
+            usePolling: true,
+        },
     },
-  }
-})
+});