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