add filters for all routes

frontend/src/components/Navbar/index.css

@@ -3,11 +3,11 @@ nav {
     justify-self: left;
     padding: 1rem;
     background-color: var(--mantine-color-blue-4);
+    justify-content: space-between;
 }
 
 .navLink { 
     color: #fff;
     font-weight: bold;
-    margin-right: 1rem;
     text-decoration: none;
 }

frontend/src/components/Navbar/index.tsx

@@ -1,21 +1,34 @@
 import { NavLink } from "react-router";
 import { t } from "@/config/i18n";
 import "./index.css";
+import { Group } from "@mantine/core";
+import { Config } from "@/config/config";
 
 export function Navbar() {
     return (
         <nav>
+            <Group>
+                <NavLink 
+                    className={"navLink"} 
+                    aria-label={t('home')}
+                    to="/"
+                >
+                    {t("home", {capfirst: true})}
+                </NavLink>
+                <NavLink 
+                    className={"navLink"} 
+                    aria-label={t('dashboard')}
+                    to="/dashboard/productors"
+                >
+                    {t("dashboard", {capfirst: true})}
+                </NavLink>
+            </Group>
             <NavLink 
-                className={"navLink"} 
-                to="/"
+                className={"navLink"}
+                aria-label={t("login with keycloak")}
+                to={`${Config.backend_uri}/auth/login`}
             >
-                {t("home", {capfirst: true})}
-            </NavLink>
-            <NavLink 
-                className={"navLink"} 
-                to="/dashboard/productors"
-            >
-                {t("dashboard", {capfirst: true})}
+                {t("login with keycloak", {capfirst: true})}
             </NavLink>
         </nav>
     );

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

@@ -24,7 +24,7 @@ export default function ProductorRow({
             <Table.Td>
                 {
                 productor.payment_methods.map((value) =>(
-                    <Badge ml="xs">
+                    <Badge key={value.name} ml="xs">
                         {t(value.name, {capfirst: true})}
                     </Badge>
                 ))

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

@@ -4,18 +4,23 @@ 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>
@@ -28,6 +33,18 @@ export default function ShipmentsFilters({
                     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/Modal/index.tsx

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

frontend/src/pages/Contract/index.tsx

@@ -80,7 +80,7 @@ export function Contract() {
                     shipment.products
                 );
                 if (total < (form?.minimum_shipment_value || 0)) {
-                    return shipment.id; // mark shipment as invalid
+                    return shipment.id;
                 }
                 return null;
             })
@@ -125,8 +125,18 @@ export function Contract() {
         }
     }, [inputForm, inputRefs, isShipmentsMinimumValue, form]);
 
+
     if (!form) 
-        return <Loader/>;
+        return (
+            <Group 
+                align="center"
+                justify="center"
+                h="80vh"
+                w="100%"
+            >
+                <Loader color="pink"/>
+            </Group>
+        );
 
 
     return (
@@ -134,7 +144,7 @@ export function Contract() {
             <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, no informations is stored outside of contracts", {capfirst: true})}
+                {t("all theses informations are for contract generation", {capfirst: true})}
             </Text>
             <Group grow>
                 <TextInput

frontend/src/pages/Forms/index.tsx

@@ -8,7 +8,6 @@ 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";
-import { notifications } from "@mantine/notifications";
 
 export function Forms() {
     const [ searchParams, setSearchParams ] = useSearchParams();
@@ -59,11 +58,7 @@ export function Forms() {
                 minimum_shipment_value: Number(form.minimum_shipment_value),
             });
             closeModal();
-            notifications.show({
-                title: t("success", {capfirst: true}),
-                message: t("successfully created form", {capfirst: true}),
-            });
-    }, [createFormMutation]);
+    }, [createFormMutation, closeModal]);
 
     const handleEditForm = useCallback(async (form: FormInputs, id?: number) => {
         if (!id)
@@ -80,11 +75,7 @@ export function Forms() {
             }
         });
         closeModal();
-        notifications.show({
-            title: t("success", {capfirst: true}),
-            message: t("successfully edited form", {capfirst: true}),
-        });
-    }, [editFormMutation]);
+    }, [editFormMutation, closeModal]);
 
     const onFilterChange = useCallback((
         values: string[], 
@@ -102,9 +93,19 @@ export function Forms() {
         });
     }, [searchParams, setSearchParams])
 
-    if (!data || isPending)
-        return (<Loader color="blue"/>);
 
+    if (!data || isPending)
+        return (
+            <Group 
+                align="center"
+                justify="center"
+                h="80vh"
+                w="100%"
+            >
+                <Loader color="pink"/>
+            </Group>
+        );
+    
     return (
         <Stack>
             <Group justify="space-between">

frontend/src/pages/Productors/index.tsx

@@ -8,7 +8,6 @@ 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";
-import { notifications } from "@mantine/notifications";
 
 export default function Productors() {
     const [ searchParams, setSearchParams ] = useSearchParams();
@@ -51,11 +50,7 @@ export default function Productors() {
             ...productor
         });
         closeModal();
-        notifications.show({
-            title: t("success", {capfirst: true}),
-            message: t("successfully created productor", {capfirst: true}),
-        });
-    }, [createProductorMutation]);
+    }, [createProductorMutation, closeModal]);
 
     const handleEditProductor = useCallback(async (productor: ProductorInputs, id?: number) => {
         if (!id)
@@ -65,11 +60,7 @@ export default function Productors() {
             productor: productor
         });
         closeModal();
-        notifications.show({
-            title: t("success", {capfirst: true}),
-            message: t("successfully edited productor", {capfirst: true}),
-        });
-    }, []);
+    }, [editProductorMutation, closeModal]);
     
     const onFilterChange = useCallback((values: string[], filter: string) => {
         setSearchParams(prev => {
@@ -84,7 +75,16 @@ export default function Productors() {
     }, [searchParams, setSearchParams])
 
     if (!productors || isPending)
-        return <Loader/>
+        return (
+            <Group 
+                align="center"
+                justify="center"
+                h="80vh"
+                w="100%"
+            >
+                <Loader color="pink"/>
+            </Group>
+        );
 
     return (
         <Stack>

frontend/src/pages/Products/index.tsx

@@ -8,7 +8,6 @@ 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";
-import { notifications } from "@mantine/notifications";
 
 export default function Products() {
     const [ searchParams, setSearchParams ] = useSearchParams();
@@ -49,11 +48,7 @@ export default function Products() {
     const handleCreateProduct = useCallback(async (product: ProductInputs) => {
         await createProductMutation.mutateAsync(productCreateFromProductInputs(product));
         closeModal();
-        notifications.show({
-            title: t("success", {capfirst: true}),
-            message: t("successfully created product", {capfirst: true}),
-        });
-    }, [createProductMutation]);
+    }, [createProductMutation, closeModal]);
 
     const handleEditProduct = useCallback(async (product: ProductInputs, id?: number) => {
         if (!id)
@@ -63,11 +58,7 @@ export default function Products() {
             product: productCreateFromProductInputs(product)
         });
         closeModal();
-        notifications.show({
-            title: t("success", {capfirst: true}),
-            message: t("successfully edited product", {capfirst: true}),
-        });
-    }, []);
+    }, [editProductMutation, closeModal]);
     
     const onFilterChange = useCallback((values: string[], filter: string) => {
         setSearchParams(prev => {
@@ -82,8 +73,17 @@ export default function Products() {
     }, [searchParams, setSearchParams])
 
     if (!products || isPending)
-        return <Loader/>
-
+        return (
+            <Group 
+                align="center"
+                justify="center"
+                h="80vh"
+                w="100%"
+            >
+                <Loader color="pink"/>
+            </Group>
+        );
+    
     return (
         <Stack>
             <Group justify="space-between">

frontend/src/pages/Shipments/index.tsx

@@ -8,7 +8,6 @@ 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";
-import { notifications } from "@mantine/notifications";
 
 export default function Shipments() {
     const [ searchParams, setSearchParams ] = useSearchParams();
@@ -38,17 +37,18 @@ export default function Shipments() {
             .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 = createShipment();
     const editShipmentMutation = editShipment();
 
     const handleCreateShipment = useCallback(async (shipment: ShipmentInputs) => {
         await createShipmentMutation.mutateAsync(shipmentCreateFromShipmentInputs(shipment));
         closeModal();
-        notifications.show({
-            title: t("success", {capfirst: true}),
-            message: t("successfully created shipment", {capfirst: true}),
-        });
-    }, [createShipmentMutation]);
+    }, [createShipmentMutation, closeModal]);
 
     const handleEditShipment = useCallback(async (shipment: ShipmentInputs, id?: number) => {
         if (!id)
@@ -58,11 +58,7 @@ export default function Shipments() {
             shipment: shipmentCreateFromShipmentInputs(shipment)
         });
         closeModal();
-        notifications.show({
-            title: t("success", {capfirst: true}),
-            message: t("successfully edited shipment", {capfirst: true}),
-        });
-    }, []);
+    }, [editShipmentMutation, closeModal]);
     
     const onFilterChange = useCallback((values: string[], filter: string) => {
         setSearchParams(prev => {
@@ -77,7 +73,16 @@ export default function Shipments() {
     }, [searchParams, setSearchParams])
 
     if (!shipments || isPending)
-        return <Loader/>
+        return (
+            <Group 
+                align="center"
+                justify="center"
+                h="80vh"
+                w="100%"
+            >
+                <Loader color="pink"/>
+            </Group>
+        );
 
     return (
         <Stack>
@@ -106,6 +111,7 @@ export default function Shipments() {
                 />
             </Group>
             <ShipmentsFilters
+                forms={forms || []}
                 names={names || []}
                 filters={searchParams}
                 onFilterChange={onFilterChange}

frontend/src/pages/Users/index.tsx

@@ -44,7 +44,7 @@ export default function Users() {
     const handleCreateUser = useCallback(async (user: UserInputs) => {
             await createUserMutation.mutateAsync(user);
             closeModal();
-    }, [createUserMutation]);
+    }, [createUserMutation, closeModal]);
 
     const handleEditUser = useCallback(async (user: UserInputs, id?: number) => {
         if (!id)
@@ -54,7 +54,7 @@ export default function Users() {
                 user: user
             });
             closeModal();            
-    }, []);
+    }, [editUserMutation, closeModal]);
     
     const onFilterChange = useCallback((values: string[], filter: string) => {
         setSearchParams(prev => {
@@ -69,7 +69,16 @@ export default function Users() {
     }, [searchParams, setSearchParams])
 
     if (!users || isPending)
-        return <Loader/>
+        return (
+            <Group 
+                align="center"
+                justify="center"
+                h="80vh"
+                w="100%"
+            >
+                <Loader color="pink"/>
+            </Group>
+        );
 
     return (
         <Stack>

frontend/src/router.tsx

@@ -12,7 +12,6 @@ import Users from "@/pages/Users";
 import Shipments from "./pages/Shipments";
 import { Contract } from "./pages/Contract";
 import { NotFound } from "./pages/NotFound";
-// import { CreateForms } from "@/pages/Forms/CreateForm";
 
 export const router = createBrowserRouter([
   {