From 7e42fbe106e71085e2ba983307caefe8ae002957 Mon Sep 17 00:00:00 2001
From: Julien Aldon <julien2.aldon@epitech.eu>
Date: Fri, 13 Feb 2026 17:46:24 +0100
Subject: [PATCH] add contract page with dynamic form elements

---
 backend/src/auth/auth.py                      |   1 -
 backend/src/forms/service.py                  |   2 +-
 backend/src/models.py                         |  35 ++-
 backend/src/productors/service.py             |   2 +-
 backend/src/products/products.py              |   3 +-
 backend/src/products/service.py               |  22 +-
 backend/src/shipments/service.py              |   2 +-
 backend/src/templates/service.py              |   2 +-
 backend/src/users/service.py                  |   2 +-
 frontend/locales/en.json                      |  28 ++-
 frontend/locales/fr.json                      |  31 ++-
 frontend/src/components/Forms/Modal/index.tsx |  35 +--
 frontend/src/components/Forms/Row/index.tsx   |   5 +-
 frontend/src/components/Navbar/index.tsx      |   2 +-
 .../components/Productors/Filter/index.tsx    |   2 +
 .../src/components/Productors/Modal/index.tsx |   4 +-
 .../src/components/Productors/Row/index.tsx   |   5 +-
 .../src/components/Products/Filter/index.tsx  |   2 +
 .../src/components/Products/Form/index.tsx    |  44 ++++
 .../src/components/Products/Modal/index.tsx   | 130 +++++++-----
 .../src/components/Products/Row/index.tsx     |  17 +-
 .../src/components/Shipments/Form/index.tsx   | 101 +++++----
 .../src/components/Shipments/Modal/index.tsx  |  24 ++-
 .../src/components/Shipments/Row/index.tsx    |   5 +-
 frontend/src/components/Users/Modal/index.tsx |   4 +-
 frontend/src/components/Users/Row/index.tsx   |   5 +-
 frontend/src/config/i18n.tsx                  |   3 +-
 frontend/src/pages/Contract/index.tsx         | 199 +++++++++++++++---
 frontend/src/pages/Forms/index.tsx            |   4 +-
 frontend/src/pages/Productors/index.tsx       |   6 +-
 frontend/src/pages/Products/index.tsx         |  11 +-
 frontend/src/pages/Shipments/index.tsx        |   4 +-
 frontend/src/pages/Users/index.tsx            |   4 +-
 frontend/src/services/resources/products.ts   |  57 +++--
 34 files changed, 540 insertions(+), 263 deletions(-)
 create mode 100644 frontend/src/components/Products/Form/index.tsx

diff --git a/backend/src/auth/auth.py b/backend/src/auth/auth.py
index f9732d8..801d496 100644
--- a/backend/src/auth/auth.py
+++ b/backend/src/auth/auth.py
@@ -58,7 +58,6 @@ def callback(code: str, session: Session = Depends(get_session)):
         email=decoded_token.get("email"),
         name=decoded_token.get("preferred_username")
     )
-    print(user_create)
     user = service.get_or_create_user(session, user_create)
     return {
         "access_token": token_data["access_token"],
diff --git a/backend/src/forms/service.py b/backend/src/forms/service.py
index 4371e7d..7465abd 100644
--- a/backend/src/forms/service.py
+++ b/backend/src/forms/service.py
@@ -11,7 +11,7 @@ def get_all(
         statement = statement.where(models.Form.season.in_(seasons))
     if len(productors) > 0:
         statement = statement.join(models.Productor).where(models.Productor.name.in_(productors))
-    return session.exec(statement).all()
+    return session.exec(statement.order_by(models.Form.name)).all()
 
 def get_one(session: Session, form_id: int) -> models.FormPublic:
     return session.get(models.Form, form_id)
diff --git a/backend/src/models.py b/backend/src/models.py
index d7e7155..66e8650 100644
--- a/backend/src/models.py
+++ b/backend/src/models.py
@@ -33,7 +33,12 @@ class ProductorPublic(ProductorBase):
 class Productor(ProductorBase, table=True):
     id: int | None = Field(default=None, primary_key=True)
 
-    products: list["Product"] = Relationship(back_populates='productor')
+    products: list["Product"] = Relationship(
+        back_populates='productor',
+        sa_relationship_kwargs={
+            "order_by": "Product.name"
+        },
+    )
 
 class ProductorUpdate(SQLModel):
     name: str | None
@@ -60,9 +65,10 @@ class ShipmentProductLink(SQLModel, table=True):
 class ProductBase(SQLModel):
     name: str
     unit: Unit
-    price: float
+    price: float | None
     price_kg: float | None
-    weight: float | None
+    quantity: float | None
+    quantity_unit: str | None
     type: ProductType
     productor_id: int | None = Field(default=None, foreign_key="productor.id")
 
@@ -81,12 +87,13 @@ class ProductUpdate(SQLModel):
     unit: Unit | None
     price: float | None
     price_kg: float | None
-    weight: float | None
+    quantity: float | None
+    quantity_unit: str | None
     productor_id: int | None
-    shipment_ids: list[int] | None = []
+    type: ProductType | None
 
 class ProductCreate(ProductBase):
-    shipment_ids: list[int] | None = []
+    pass
 
 class FormBase(SQLModel):
     name: str
@@ -106,7 +113,13 @@ class Form(FormBase, table=True):
     id: int | None = Field(default=None, primary_key=True)
     productor: Optional['Productor'] = Relationship()
     referer: Optional['User'] = Relationship()
-    shipments: list["Shipment"] = Relationship(back_populates="form", cascade_delete=True)
+    shipments: list["Shipment"] = Relationship(
+        back_populates="form", 
+        cascade_delete=True,
+        sa_relationship_kwargs={
+            "order_by": "Shipment.name"
+        },
+    )
 
 class FormUpdate(SQLModel):
     name: str | None
@@ -161,7 +174,13 @@ class ShipmentPublic(ShipmentBase):
 
 class Shipment(ShipmentBase, table=True):
     id: int | None = Field(default=None, primary_key=True)
-    products: list[Product] = Relationship(back_populates="shipments", link_model=ShipmentProductLink)
+    products: list[Product] = Relationship(
+        back_populates="shipments", 
+        link_model=ShipmentProductLink,
+        sa_relationship_kwargs={
+            "order_by": "Product.name"
+        },
+    )
     form: Optional[Form] = Relationship(back_populates="shipments")
 
 class ShipmentUpdate(SQLModel):
diff --git a/backend/src/productors/service.py b/backend/src/productors/service.py
index 0d3aa55..a6d9e80 100644
--- a/backend/src/productors/service.py
+++ b/backend/src/productors/service.py
@@ -7,7 +7,7 @@ def get_all(session: Session, names: list[str], types: list[str]) -> list[models
         statement = statement.where(models.Productor.name.in_(names))
     if len(types) > 0:
         statement = statement.where(models.Productor.type.in_(types))
-    return session.exec(statement).all()
+    return session.exec(statement.order_by(models.Productor.name)).all()
 
 def get_one(session: Session, productor_id: int) -> models.ProductorPublic:
     return session.get(models.Productor, productor_id)
diff --git a/backend/src/products/products.py b/backend/src/products/products.py
index 902af0f..0bdf100 100644
--- a/backend/src/products/products.py
+++ b/backend/src/products/products.py
@@ -11,9 +11,10 @@ router = APIRouter(prefix='/products')
 def get_products(
     session: Session = Depends(get_session), 
     names: list[str] = Query([]),
+    types: list[str] = Query([]),
     productors: list[str] = Query([]),
 ):
-    return service.get_all(session, names, productors)
+    return service.get_all(session, names, productors, types)
 
 @router.get('/{id}', response_model=models.ProductPublic)
 def get_product(id: int, session: Session = Depends(get_session)):
diff --git a/backend/src/products/service.py b/backend/src/products/service.py
index 4470c10..951a992 100644
--- a/backend/src/products/service.py
+++ b/backend/src/products/service.py
@@ -4,23 +4,25 @@ import src.models as models
 def get_all(
     session: Session, 
     names: list[str], 
-    productors: list[str]
+    productors: list[str],
+    types: list[str],
+
 ) -> list[models.ProductPublic]:
     statement = select(models.Product)
     if len(names) > 0:
         statement = statement.where(models.Product.name.in_(names))
     if len(productors) > 0:
         statement = statement.join(models.Productor).where(models.Productor.name.in_(productors))
-    return session.exec(statement).all()
+    if len(types) > 0:
+        statement = statement.where(models.Product.type.in_(types))
+    return session.exec(statement.order_by(models.Product.name)).all()
 
 def get_one(session: Session, product_id: int) -> models.ProductPublic:
     return session.get(models.Product, product_id)
 
 def create_one(session: Session, product: models.ProductCreate) -> models.ProductPublic:
-    shipments = session.exec(select(models.Shipment).where(models.Shipment.id.in_(product.shipment_ids))).all()
-
-    product_create = product.model_dump(exclude_unset=True, exclude={'shipment_ids'})
-    new_product = models.Product(**product_create, shipments=shipments)
+    product_create = product.model_dump(exclude_unset=True)
+    new_product = models.Product(**product_create)
     session.add(new_product)
     session.commit()
     session.refresh(new_product)
@@ -32,13 +34,7 @@ def update_one(session: Session, id: int, product: models.ProductUpdate) -> mode
     new_product = result.first()
     if not new_product:
         return None
-    
-    shipments_to_add = session.exec(select(models.Shipment).where(models.Shipment.id.in_(product.shipment_ids))).all()
-    new_product.shipments.clear()
-    for add in shipments_to_add:
-        new_product.shipments.append(add)
-
-    product_updates = product.model_dump(exclude_unset=True, exclude={"shipment_ids"})
+    product_updates = product.model_dump(exclude_unset=True)
     for key, value in product_updates.items():
         setattr(new_product, key, value)
 
diff --git a/backend/src/shipments/service.py b/backend/src/shipments/service.py
index 80b9e2c..c2c0071 100644
--- a/backend/src/shipments/service.py
+++ b/backend/src/shipments/service.py
@@ -3,7 +3,7 @@ import src.models as models
 
 def get_all(session: Session) -> list[models.ShipmentPublic]:
     statement = select(models.Shipment)
-    return session.exec(statement).all()
+    return session.exec(statement.order_by(models.Shipment.name)).all()
 
 def get_one(session: Session, shipment_id: int) -> models.ShipmentPublic:
     return session.get(models.Shipment, shipment_id)
diff --git a/backend/src/templates/service.py b/backend/src/templates/service.py
index 1d28256..ea0e37f 100644
--- a/backend/src/templates/service.py
+++ b/backend/src/templates/service.py
@@ -3,7 +3,7 @@ import src.models as models
 
 def get_all(session: Session) -> list[models.TemplatePublic]:
     statement = select(models.Template)
-    return session.exec(statement).all()
+    return session.exec(statement.order_by(models.Template.name)).all()
 
 def get_one(session: Session, template_id: int) -> models.TemplatePublic:
     return session.get(models.Template, template_id)
diff --git a/backend/src/users/service.py b/backend/src/users/service.py
index 3d9e7ac..825f48a 100644
--- a/backend/src/users/service.py
+++ b/backend/src/users/service.py
@@ -3,7 +3,7 @@ import src.models as models
 
 def get_all(session: Session) -> list[models.UserPublic]:
     statement = select(models.User)
-    return session.exec(statement).all()
+    return session.exec(statement.order_by(models.User.name)).all()
 
 def get_one(session: Session, user_id: int) -> models.UserPublic:
     return session.get(models.User, user_id)
diff --git a/frontend/locales/en.json b/frontend/locales/en.json
index f4a46a4..72eefe5 100644
--- a/frontend/locales/en.json
+++ b/frontend/locales/en.json
@@ -1,10 +1,15 @@
 {
     "product name": "product name",
     "product price": "product price",
-    "product weight": "product weight",
+    "product quantity": "product quantity",
+    "product quantity unit": "product quantity unit",
     "product type": "product type",
     "planned": "planned",
-    "reccurent": "reccurent",
+    "planned products": "planned products",
+    "select products per shipment": "select products per shipment.",
+    "recurrent products": "recurrent products",
+    "your selection in this category will apply for all shipments": "your selection in this category will apply for all shipments.",
+    "recurrent": "recurrent",
     "product price kg": "product price kg",
     "product unit": "product unit",
     "grams": "grams",
@@ -19,7 +24,8 @@
     "referer": "referer",
     "edit form": "edit form",
     "form name": "form name",
-    "contact season": "contact season",
+    "contract season": "contract season",
+    "contract season recommandation": "recommandation : <Season>-<year> (example: Winter-2025)",
     "start date": "start date",
     "end date": "end date",
     "nothing found": "nothing found",
@@ -41,13 +47,19 @@
     "productor address": "productor address",
     "productor payment": "productor payment",
     "priceKg": "priceKg",
-    "weight": "weight",
+    "quantity": "quantity",
+    "quantity unit": "quantity unit",
+    "unit": "sell unit",
     "price": "price",
     "create product": "create product",
     "informations": "informations",
     "remove product": "remove product",
     "edit product": "edit product",
     "shipment name": "shipment name",
+    "shipments": "shipments",
+    "shipment": "shipment",
+    "there is": "there is",
+    "for this contract": "for this contact.",
     "shipment date": "shipment date",
     "remove shipment": "remove shipment",
     "productors": "productors",
@@ -65,5 +77,11 @@
     "a start date": "a start date",
     "a end date": "a end date",
     "a productor": "a productor",
-    "a referer": "a referer"
+    "a referer": "a referer",
+    "a phone": "a phone",
+    "a fistname": "a fistname",
+    "a lastname": "a lastname",
+    "a email": "a email",
+    "submit contract": "submit contract",
+    "all theses informations are for contract generation, no informations is stored outside of contracts": "all theses informations are for contract generation, no informations is stored outside of contracts."
 }
\ No newline at end of file
diff --git a/frontend/locales/fr.json b/frontend/locales/fr.json
index ad4a481..089d81c 100644
--- a/frontend/locales/fr.json
+++ b/frontend/locales/fr.json
@@ -1,15 +1,21 @@
 {
     "product name": "nom du produit",
     "product price": "prix du produit",
-    "product weight": "poids du produit",
+    "product quantity": "quantité du produit",
     "product type": "type de produit",
     "planned": "planifié",
-    "reccurent": "récurrent",
+    "planned products": "Produits planifiés par livraison",
+    "select products per shipment": "Selectionnez les produits pour chaque livraison.",
+    "recurrent": "récurrent",
+    "recurrent products": "Produits récurents",
+    "your selection in this category will apply for all shipments": "votre selection sera appliquée pour chaque livraisons (Exemple: 6 livraisons, le produits sera comptés 6 fois : une fois par livraison).",
     "product price kg": "prix du produit au Kilo",
     "product unit": "unité de vente du produit",
     "grams": "grammes",
     "kilo": "kilo",
     "piece": "pièce",
+    "in": "en",
+    "enter quantity": "entrez la quantitée",
     "filter by season": "filtrer par saisons",
     "name": "nom",
     "season": "saison",
@@ -19,7 +25,8 @@
     "referer": "référent·e",
     "edit form": "modifier le formulaire de contrat",
     "form name": "nom du formulaire de contrat",
-    "contact season": "saison du contrat",
+    "contract season": "saison du contrat",
+    "contract season recommandation": "recommandation : <Saison>-<année> (Exemple: Hiver-2025)",
     "start date": "date de début",
     "end date": "date de fin",
     "nothing found": "rien à afficher",
@@ -35,13 +42,15 @@
     "address": "adresse",
     "payment": "ordre du chèque",
     "type": "type",
-    "create productor": "créer le producteur·troce",
+    "create productor": "créer le producteur·trice",
     "productor name": "nom du producteur·trice",
     "productor type": "type du producteur·trice",
     "productor address": "adresse du producteur·trice",
     "productor payment": "ordre du chèque du producteur·trice",
     "priceKg": "prix au kilo",
-    "weight": "poids",
+    "quantity": "quantité",
+    "quantity unit": "unité de quantité",
+    "unit": "Unité de vente",
     "price": "prix",
     "create product": "créer le produit",
     "informations": "informations",
@@ -49,6 +58,10 @@
     "edit product": "modifier le produit",
     "shipment name": "nom de la livraison",
     "shipment date": "date de la livraison",
+    "shipments": "livraisons",
+    "shipment": "livraison",
+    "there is": "il y a",
+    "for this contract": "pour ce contrat.",
     "remove shipment": "supprimer la livraison",
     "productors": "producteur·trices",
     "products": "produits",
@@ -66,5 +79,11 @@
     "a start date": "une date de début",
     "a end date": "une date de fin",
     "a productor": "un(e) producteur·trice",
-    "a referer": "un référent·e"
+    "a referer": "un référent·e",
+    "a phone": "un numéro de téléphone",
+    "a fistname": "un prénom",
+    "a lastname": "un nom",
+    "a email": "une adresse email",
+    "submit contract": "Envoyer le contrat",
+    "all theses informations are for contract generation, no informations is stored outside of contracts": "ces informations sont nécéssaires pour la génération de contrat, aucune information personnelle n'est gardée ailleurs que dans les contrats générés."
 }
\ No newline at end of file
diff --git a/frontend/src/components/Forms/Modal/index.tsx b/frontend/src/components/Forms/Modal/index.tsx
index 76f228a..527342e 100644
--- a/frontend/src/components/Forms/Modal/index.tsx
+++ b/frontend/src/components/Forms/Modal/index.tsx
@@ -67,7 +67,7 @@ export default function FormModal({
 
     return (
         <Modal
-            size="50%" 
+            w={{base: "100%", md: "80%", lg: "50%"}} 
             opened={opened}
             onClose={onClose}
             title={currentForm ? t("edit form") : t('create form')}
@@ -80,24 +80,27 @@ export default function FormModal({
                 {...form.getInputProps('name')}
             />
             <TextInput
-                label={t("contact season", {capfirst: true})}
-                placeholder={t("contact season", {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')}
             />
-            <DatePickerInput
-                label={t("start date", {capfirst: true})}
-                placeholder={t("start date", {capfirst: true})}
-                withAsterisk
-                {...form.getInputProps('start')}
-            />
-            <DatePickerInput
-                label={t("end date", {capfirst: true})}
-                placeholder={t("end date", {capfirst: true})}
-                withAsterisk
-                {...form.getInputProps('end')}
-            />
+            <Group grow>
+                <DatePickerInput
+                    label={t("start date", {capfirst: true})}
+                    placeholder={t("start date", {capfirst: true})}
+                    withAsterisk
+                    {...form.getInputProps('start')}
+                />
+                <DatePickerInput
+                    label={t("end date", {capfirst: true})}
+                    placeholder={t("end date", {capfirst: true})}
+                    withAsterisk
+                    {...form.getInputProps('end')}
+                />
+            </Group>
             <Select
                 label={t("referer", {capfirst: true})}
                 placeholder={t("referer", {capfirst: true})}
@@ -127,7 +130,6 @@ export default function FormModal({
                     aria-label={t("cancel", {capfirst: true})}
                     leftSection={<IconCancel/>}
                     onClick={() => {
-                        form.reset();
                         form.clearErrors();
                         onClose();
                     }}
@@ -139,7 +141,6 @@ export default function FormModal({
                         form.validate();
                         if (form.isValid()) {
                             handleSubmit(form.getValues(), currentForm?.id)
-                            form.reset();
                         }
                     }}
                 >{currentForm ? t("edit form", {capfirst: true}) : t('create form', {capfirst: true})}</Button>
diff --git a/frontend/src/components/Forms/Row/index.tsx b/frontend/src/components/Forms/Row/index.tsx
index 8c58bba..dcadb17 100644
--- a/frontend/src/components/Forms/Row/index.tsx
+++ b/frontend/src/components/Forms/Row/index.tsx
@@ -1,5 +1,5 @@
 import { ActionIcon, Table, Tooltip } from "@mantine/core";
-import { useNavigate } from "react-router";
+import { useNavigate, useSearchParams } from "react-router";
 import { deleteForm} from "@/services/api";
 import { IconEdit, IconX } from "@tabler/icons-react";
 import { t } from "@/config/i18n";
@@ -12,6 +12,7 @@ export type FormRowProps = {
 export default function FormRow({
     form, 
 }: FormRowProps) {
+    const [searchParams, _] = useSearchParams();
     const deleteMutation = deleteForm();
     const navigate = useNavigate();
 
@@ -30,7 +31,7 @@ export default function FormRow({
                         mr="5"
                         onClick={(e) => {
                             e.stopPropagation();
-                            navigate(`/dashboard/forms/${form.id}/edit`);
+                            navigate(`/dashboard/forms/${form.id}/edit${searchParams ? `?${searchParams.toString()}` : ""}`);
                         }}
                     >
                         <IconEdit/>
diff --git a/frontend/src/components/Navbar/index.tsx b/frontend/src/components/Navbar/index.tsx
index 825c1c6..fe405b1 100644
--- a/frontend/src/components/Navbar/index.tsx
+++ b/frontend/src/components/Navbar/index.tsx
@@ -6,7 +6,7 @@ export function Navbar() {
     return (
         <nav>
             <NavLink to="/">{t("home", {capfirst: true})}</NavLink>
-            <NavLink to="/dashboard">{t("dashboard", {capfirst: true})}</NavLink>
+            <NavLink to="/dashboard/productors">{t("dashboard", {capfirst: true})}</NavLink>
         </nav>
     );
 }
\ No newline at end of file
diff --git a/frontend/src/components/Productors/Filter/index.tsx b/frontend/src/components/Productors/Filter/index.tsx
index 15df3f6..94902c5 100644
--- a/frontend/src/components/Productors/Filter/index.tsx
+++ b/frontend/src/components/Productors/Filter/index.tsx
@@ -33,6 +33,7 @@ export default function ProductorsFilter({
                     onFilterChange(values, 'names')
                 }}
                 clearable
+                searchable
             />
             <MultiSelect
                 aria-label={t("filter by type", {capfirst: true})}
@@ -43,6 +44,7 @@ export default function ProductorsFilter({
                     onFilterChange(values, 'types')
                 }}
                 clearable
+                searchable
             />
         </Group>
     );
diff --git a/frontend/src/components/Productors/Modal/index.tsx b/frontend/src/components/Productors/Modal/index.tsx
index 414078f..837c99b 100644
--- a/frontend/src/components/Productors/Modal/index.tsx
+++ b/frontend/src/components/Productors/Modal/index.tsx
@@ -45,7 +45,7 @@ export function ProductorModal({
     
     return (
         <Modal
-            size="50%" 
+            w={{base: "100%", md: "80%", lg: "50%"}} 
             opened={opened}
             onClose={onClose}
             title={t("create productor", {capfirst: true})}
@@ -87,7 +87,6 @@ export function ProductorModal({
                     aria-label={t("cancel", {capfirst: true})}
                     leftSection={<IconCancel/>}
                     onClick={() => {
-                        form.reset();
                         form.clearErrors();
                         onClose();
                     }}
@@ -99,7 +98,6 @@ export function ProductorModal({
                         form.validate();
                         if (form.isValid()) {
                             handleSubmit(form.getValues(), currentProductor?.id)
-                            form.reset();
                         }
                     }}
                 >{currentProductor ? t("edit productor", {capfirst: true}) : t('create productor', {capfirst: true})}</Button>
diff --git a/frontend/src/components/Productors/Row/index.tsx b/frontend/src/components/Productors/Row/index.tsx
index 00eb470..695c580 100644
--- a/frontend/src/components/Productors/Row/index.tsx
+++ b/frontend/src/components/Productors/Row/index.tsx
@@ -3,7 +3,7 @@ import { t } from "@/config/i18n";
 import { IconEdit, IconX } from "@tabler/icons-react";
 import type { Productor } from "@/services/resources/productors";
 import { deleteProductor } from "@/services/api";
-import { useNavigate } from "react-router";
+import { useNavigate, useSearchParams } from "react-router";
 
 export type ProductorRowProps = {
     productor: Productor;
@@ -12,6 +12,7 @@ export type ProductorRowProps = {
 export default function ProductorRow({
     productor,
 }: ProductorRowProps) {
+    const [searchParams, _] = useSearchParams();
     const deleteMutation = deleteProductor();
     const navigate = useNavigate();
 
@@ -28,7 +29,7 @@ export default function ProductorRow({
                         mr="5"
                         onClick={(e) => {
                             e.stopPropagation();
-                            navigate(`/dashboard/productors/${productor.id}/edit`);
+                            navigate(`/dashboard/productors/${productor.id}/edit${searchParams ? `?${searchParams.toString()}` : ""}`);
                         }}
                     >
                         <IconEdit/>
diff --git a/frontend/src/components/Products/Filter/index.tsx b/frontend/src/components/Products/Filter/index.tsx
index 91aeb7f..cf58d86 100644
--- a/frontend/src/components/Products/Filter/index.tsx
+++ b/frontend/src/components/Products/Filter/index.tsx
@@ -33,6 +33,7 @@ export default function ProductsFilters({
                     onFilterChange(values, 'names')
                 }}
                 clearable
+                searchable
             />
             <MultiSelect
                 aria-label={t("filter by productor", {capfirst: true})}
@@ -43,6 +44,7 @@ export default function ProductsFilters({
                     onFilterChange(values, 'productors')
                 }}
                 clearable
+                searchable
             />
         </Group>
     );
diff --git a/frontend/src/components/Products/Form/index.tsx b/frontend/src/components/Products/Form/index.tsx
new file mode 100644
index 0000000..fc15dee
--- /dev/null
+++ b/frontend/src/components/Products/Form/index.tsx
@@ -0,0 +1,44 @@
+import { t } from "@/config/i18n";
+import { ProductUnit, type Product } from "@/services/resources/products";
+import type { Shipment } from "@/services/resources/shipments";
+import { Group, NumberInput } from "@mantine/core";
+import type { UseFormReturnType } from "@mantine/form";
+
+export type ProductFormProps = {
+    inputForm: UseFormReturnType<Record<string, string | number>>;
+    product: Product;
+    shipment?: Shipment;
+}
+
+export function ProductForm({
+    inputForm,
+    product,
+    shipment,
+}: ProductFormProps) {
+    return (
+        <Group mb="sm" grow>
+            <NumberInput
+                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 ? `/ ${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}`)}
+            />
+        </Group>
+    );
+}
\ No newline at end of file
diff --git a/frontend/src/components/Products/Modal/index.tsx b/frontend/src/components/Products/Modal/index.tsx
index bbea463..ac93c98 100644
--- a/frontend/src/components/Products/Modal/index.tsx
+++ b/frontend/src/components/Products/Modal/index.tsx
@@ -1,8 +1,8 @@
-import { Button, Group, Modal, NumberInput, Select, TextInput, Title, type ModalBaseProps } from "@mantine/core";
+import { Button, Group, Modal, NumberInput, Pill, Select, TextInput, Title, Tooltip, type ModalBaseProps } from "@mantine/core";
 import { t } from "@/config/i18n";
 import { useForm } from "@mantine/form";
-import { IconCancel } from "@tabler/icons-react";
-import { productToProductInputs, type Product, type ProductInputs } from "@/services/resources/products";
+import { IconCancel, IconInfoCircle } from "@tabler/icons-react";
+import { ProductQuantityUnit, productToProductInputs, ProductUnit, type Product, type ProductInputs } from "@/services/resources/products";
 import { useEffect, useMemo } from "react";
 import { getProductors } from "@/services/api";
 
@@ -24,7 +24,8 @@ export function ProductModal({
             unit: null,
             price: null,
             price_kg: null,
-            weight: null,
+            quantity: null,
+            quantity_unit: null,
             type: null,
             productor_id: null,
         },
@@ -33,8 +34,10 @@ export function ProductModal({
                 !value ? `${t("name", {capfirst: true})} ${t('is required')}` : null,
             unit: (value) =>
                 !value ? `${t("unit", {capfirst: true})} ${t('is required')}` : null,
-            price: (value) =>
-                !value ? `${t("price", {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) =>
@@ -54,70 +57,85 @@ export function ProductModal({
 
     return (
         <Modal
-            size="50%" 
+            w={{base: "100%", md: "80%", lg: "50%"}} 
             opened={opened}
             onClose={onClose}
             title={t("create product", {capfirst: true})}
         >
             <Title order={4}>{t("informations", {capfirst: true})}</Title>
-            <TextInput
-                label={t("product name", {capfirst: true})}
-                placeholder={t("product name", {capfirst: true})}
-                radius="sm"
-                withAsterisk
-                {...form.getInputProps('name')}
-            />
             <Select
-                label={t("product type", {capfirst: true})}
-                placeholder={t("product type", {capfirst: true})}
-                radius="sm"
-                data={[
-                    {value: "1", label: t("planned")},
-                    {value: "2", label: t("reccurent")}
-                ]}
-                {...form.getInputProps('type')}
-            />
-            <Select
-                label={t("product unit", {capfirst: true})}
-                placeholder={t("product unit", {capfirst: true})}
-                radius="sm"
-                data={[
-                    {value: "1", label: t("grams")},
-                    {value: "2", label: t("kilo")},
-                    {value: "3", label: t("piece")}
-                ]}
-                {...form.getInputProps('unit')}
-            />
-            <NumberInput
-                label={t("product price", {capfirst: true})}
-                placeholder={t("product price", {capfirst: true})}
-                radius="sm"
-                withAsterisk
-                {...form.getInputProps('price')}
-            />
-            <NumberInput
-                label={t("product priceKg", {capfirst: true})}
-                placeholder={t("product priceKg", {capfirst: true})}
-                radius="sm"
-                {...form.getInputProps('price_kg')}
-            />
-            <NumberInput
-                label={t("product weight", {capfirst: true})}
-                placeholder={t("product weight", {capfirst: true})}
-                radius="sm"
-                {...form.getInputProps('weight', {capfirst: true})}
-            />
-           <Select
                 label={t("productor", {capfirst: true})}
                 placeholder={t("productor")}
                 nothingFoundMessage={t("nothing found", {capfirst: true})}
                 withAsterisk
                 clearable
-                allowDeselect
                 searchable
                 data={productorsSelect || []}
                 {...form.getInputProps('productor_id')}
             />
+            <Group grow>
+                <TextInput
+                    label={t("product name", {capfirst: true})}
+                    placeholder={t("product name", {capfirst: true})}
+                    radius="sm"
+                    withAsterisk
+                    {...form.getInputProps('name')}
+                />
+                <Select
+                    label={t("product type", {capfirst: true})}
+                    placeholder={t("product type", {capfirst: true})}
+                    radius="sm"
+                    withAsterisk
+                    searchable
+                    clearable
+                    data={[
+                        {value: "1", label: t("planned")},
+                        {value: "2", label: t("recurrent")}
+                    ]}
+                    {...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)}))}
+                {...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"
+                    data={Object.entries(ProductQuantityUnit).map(([key, value]) => ({value: key, label: t(value)}))}
+                    {...form.getInputProps('quantity_unit', {capfirst: true})}
+                />
+                
+            </Group>
             <Group mt="sm" justify="space-between">
                 <Button
                     variant="filled"
@@ -125,7 +143,6 @@ export function ProductModal({
                     aria-label={t("cancel", {capfirst: true})}
                     leftSection={<IconCancel/>}
                     onClick={() => {
-                        form.reset();
                         form.clearErrors();
                         onClose();
                     }}
@@ -138,7 +155,6 @@ export function ProductModal({
                         console.log(form.isValid(), form.getValues())
                         if (form.isValid()) {
                             handleSubmit(form.getValues(), currentProduct?.id)
-                            form.reset();
                         }
                     }}
                 >{currentProduct ? t("edit product", {capfirst: true}) : t('create product', {capfirst: true})}</Button>
diff --git a/frontend/src/components/Products/Row/index.tsx b/frontend/src/components/Products/Row/index.tsx
index 9c94b1b..53f9d64 100644
--- a/frontend/src/components/Products/Row/index.tsx
+++ b/frontend/src/components/Products/Row/index.tsx
@@ -1,10 +1,9 @@
 import { ActionIcon, Table, Tooltip } from "@mantine/core";
 import { t } from "@/config/i18n";
 import { IconEdit, IconX } from "@tabler/icons-react";
-import { ProductType, ProductUnit, type Product, type ProductInputs } from "@/services/resources/products";
-import { ProductModal } from "@/components/Products/Modal";
-import { deleteProduct, getProduct } from "@/services/api";
-import { useNavigate } from "react-router";
+import { ProductType, ProductUnit, type Product } from "@/services/resources/products";
+import { deleteProduct } from "@/services/api";
+import { useNavigate, useSearchParams } from "react-router";
 
 export type ProductRowProps = {
     product: Product;
@@ -13,17 +12,19 @@ export type ProductRowProps = {
 export default function ProductRow({
     product,
 }: ProductRowProps) {
+    const [searchParams, _] = useSearchParams();
     const deleteMutation = deleteProduct();
     const navigate = useNavigate();
 
     return (
         <Table.Tr key={product.id}>
             <Table.Td>{product.name}</Table.Td>
-            <Table.Td>{ProductType[product.type]}</Table.Td>
+            <Table.Td>{t(ProductType[product.type])}</Table.Td>
             <Table.Td>{product.price}</Table.Td>
             <Table.Td>{product.price_kg}</Table.Td>
-            <Table.Td>{product.weight}</Table.Td>
-            <Table.Td>{ProductUnit[product.unit]}</Table.Td>
+            <Table.Td>{product.quantity}</Table.Td>
+            <Table.Td>{product.quantity_unit}</Table.Td>
+            <Table.Td>{t(ProductUnit[product.unit])}</Table.Td>
             <Table.Td>
                 <Tooltip label={t("edit product", {capfirst: true})}>
                     <ActionIcon
@@ -31,7 +32,7 @@ export default function ProductRow({
                         mr="5"
                         onClick={(e) => {
                             e.stopPropagation();
-                            navigate(`/dashboard/products/${product.id}/edit`);
+                            navigate(`/dashboard/products/${product.id}/edit${searchParams ? `?${searchParams.toString()}` : ""}`);
                         }}
                     >
                         <IconEdit/>
diff --git a/frontend/src/components/Shipments/Form/index.tsx b/frontend/src/components/Shipments/Form/index.tsx
index ce564b4..c6bbf7b 100644
--- a/frontend/src/components/Shipments/Form/index.tsx
+++ b/frontend/src/components/Shipments/Form/index.tsx
@@ -1,62 +1,57 @@
-import { ActionIcon, Group, TextInput, Tooltip } from "@mantine/core";
-import { DatePickerInput } from "@mantine/dates";
-import { IconX } from "@tabler/icons-react";
-import { t } from "@/config/i18n";
-import type { ShipmentInputs } from "@/services/resources/shipments";
+import { Accordion, Group, Text } from "@mantine/core";
+import type { Shipment } from "@/services/resources/shipments";
+import { ProductForm } from "@/components/Products/Form";
+import type { UseFormReturnType } from "@mantine/form";
+import { useMemo } from "react";
+import { computePrices } from "@/pages/Contract";
 
 export type ShipmentFormProps = {
+    inputForm: UseFormReturnType<Record<string, string | number>>;
+    shipment: Shipment;
     index: number;
-    setShipmentElement: (index: number, shipment: ShipmentInputs) => void;
-    deleteShipmentElement: (index: number) => void;
-    shipment: ShipmentInputs;
 }
 
 export default function ShipmentForm({
-    index, 
-    setShipmentElement, 
-    deleteShipmentElement, 
-    shipment
+    shipment,
+    index,
+    inputForm,
 }: ShipmentFormProps) {
-    return (
-        <Group justify="space-between" key={`shipment_${index}`}>
-            <Group grow maw="80%">
-                <TextInput
-                    label={t("shipment name", {capfirst: true})}
-                    placeholder={t("shipment name", {capfirst: true})}
-                    radius="sm"
-                    withAsterisk
-                    value={shipment.name || ""}
-                    onChange={(event) => {
-                        const value = event.target.value;
-                        setShipmentElement(index, {...shipment, name: value})
-                    }}
-                />
-                <DatePickerInput
-                    label={t("shipment date", {capfirst: true})}
-                    placeholder={t("shipment date", {capfirst: true})}
-                    radius="sm"
-                    withAsterisk
-                    value={shipment.date || null}
-                    onChange={(event) => {
-                        const value = event || "";
-                        setShipmentElement(index, {...shipment, date: value})
-                    }}
-                />
-            </Group>
-            <Tooltip label={t("remove shipment", {capfirst: true})}>
-                <ActionIcon 
-                    flex={{base: "1", md: "0"}} 
-                    style={{alignSelf: "flex-end"}} 
-                    color="red"
-                    aria-label={t("remove shipment", {capfirst: true})}
-                    onClick={() => {
-                        deleteShipmentElement(index)
-                    }}
-                >
-                    <IconX/>
-                </ActionIcon>
-            </Tooltip>
-        </Group>
+    const shipmentPrice = useMemo(() => {
+        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]);
 
-    )
+    return (
+        <Accordion.Item value={String(index)}>
+            <Accordion.Control>
+                <Group justify="space-between">
+                    <Text>{shipment.name}</Text> 
+                    <Text>{
+                        Intl.NumberFormat(
+                            "fr-FR", 
+                            {style: "currency",  currency: "EUR"}
+                        ).format(shipmentPrice)
+                    }</Text>
+                    <Text mr="lg">{shipment.date}</Text>
+                </Group>
+                </Accordion.Control>
+            <Accordion.Panel>
+            {
+                shipment?.products.map((product) => (
+                    <ProductForm
+                        key={product.id}
+                        product={product}
+                        shipment={shipment}
+                        inputForm={inputForm}
+                    />
+                ))
+            }
+            </Accordion.Panel>
+        </Accordion.Item>
+    );
 }
\ No newline at end of file
diff --git a/frontend/src/components/Shipments/Modal/index.tsx b/frontend/src/components/Shipments/Modal/index.tsx
index 438ba1c..b63aa22 100644
--- a/frontend/src/components/Shipments/Modal/index.tsx
+++ b/frontend/src/components/Shipments/Modal/index.tsx
@@ -5,7 +5,7 @@ import { IconCancel } from "@tabler/icons-react";
 import { useForm } from "@mantine/form";
 import { useEffect, useMemo } from "react";
 import { shipmentToShipmentInputs, type Shipment, type ShipmentInputs } from "@/services/resources/shipments";
-import { getForms, getProducts } from "@/services/api";
+import { getForms, getProductors, getProducts } from "@/services/api";
 
 export type ShipmentModalProps = ModalBaseProps & {
     currentShipment?: Shipment;
@@ -42,18 +42,28 @@ export default function ShipmentModal({
     }, [currentShipment]);
 
     const { data: allForms } = getForms();
-    const { data: allProducts } = getProducts();
+    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]);
 
     const productsSelect = useMemo(() => {
-        return allProducts?.map(product => ({value: String(product.id), label: `${product.name}`}))
-    }, [allProducts]);
+        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}`}))
+            }
+        });
+    }, [allProducts, form]);
 
     return (
         <Modal
-            size="50%" 
+            w={{base: "100%", md: "80%", lg: "50%"}} 
             opened={opened}
             onClose={onClose}
             title={currentShipment ? t("edit shipment") : t('create shipment')}
@@ -83,8 +93,9 @@ export default function ShipmentModal({
             <MultiSelect
                 label={t("shipment products", {capfirst: true})}
                 placeholder={t("shipment products", {capfirst: true})}
-                data={productsSelect}
+                data={productsSelect || []}
                 clearable
+                searchable
                 {...form.getInputProps('product_ids')}
             />
             <Group mt="sm" justify="space-between">
@@ -105,7 +116,6 @@ export default function ShipmentModal({
                         form.validate();
                         if (form.isValid()) {
                             handleSubmit(form.getValues(), currentShipment?.id)
-                            // form.reset();
                         }
                     }}
                 >{currentShipment ? t("edit shipment", {capfirst: true}) : t('create shipment', {capfirst: true})}</Button>
diff --git a/frontend/src/components/Shipments/Row/index.tsx b/frontend/src/components/Shipments/Row/index.tsx
index d79d556..04bd0f1 100644
--- a/frontend/src/components/Shipments/Row/index.tsx
+++ b/frontend/src/components/Shipments/Row/index.tsx
@@ -1,5 +1,5 @@
 import { ActionIcon, Table, Tooltip } from "@mantine/core";
-import { useNavigate } from "react-router";
+import { useNavigate, useSearchParams } from "react-router";
 import { deleteShipment} from "@/services/api";
 import { IconEdit, IconX } from "@tabler/icons-react";
 import { t } from "@/config/i18n";
@@ -12,6 +12,7 @@ export type ShipmentRowProps = {
 export default function ShipmentRow({
     shipment, 
 }: ShipmentRowProps) {
+    const [searchParams, _] = useSearchParams();
     const deleteMutation = deleteShipment();
     const navigate = useNavigate();
 
@@ -27,7 +28,7 @@ export default function ShipmentRow({
                         mr="5"
                         onClick={(e) => {
                             e.stopPropagation();
-                            navigate(`/dashboard/shipments/${shipment.id}/edit`);
+                            navigate(`/dashboard/shipments/${shipment.id}/edit${searchParams ? `?${searchParams.toString()}` : ""}`);
                         }}
                     >
                         <IconEdit/>
diff --git a/frontend/src/components/Users/Modal/index.tsx b/frontend/src/components/Users/Modal/index.tsx
index b78ff70..32a9f66 100644
--- a/frontend/src/components/Users/Modal/index.tsx
+++ b/frontend/src/components/Users/Modal/index.tsx
@@ -37,7 +37,7 @@ export function UserModal({
 
     return (
         <Modal
-            size="50%" 
+            w={{base: "100%", md: "80%", lg: "50%"}} 
             opened={opened}
             onClose={onClose}
             title={t("create user", {capfirst: true})}
@@ -64,7 +64,6 @@ export function UserModal({
                     aria-label={t("cancel", {capfirst: true})}
                     leftSection={<IconCancel/>}
                     onClick={() => {
-                        form.reset();
                         form.clearErrors();
                         onClose();
                     }}
@@ -77,7 +76,6 @@ export function UserModal({
                         console.log(form.isValid(), form.getValues())
                         if (form.isValid()) {
                             handleSubmit(form.getValues(), currentUser?.id)
-                            form.reset();
                         }
                     }}
                 >{currentUser ? t("edit user", {capfirst: true}) : t('create user', {capfirst: true})}</Button>
diff --git a/frontend/src/components/Users/Row/index.tsx b/frontend/src/components/Users/Row/index.tsx
index c21d9e4..83a97a7 100644
--- a/frontend/src/components/Users/Row/index.tsx
+++ b/frontend/src/components/Users/Row/index.tsx
@@ -4,7 +4,7 @@ import { IconEdit, IconX } from "@tabler/icons-react";
 import { type User, type UserInputs } from "@/services/resources/users";
 import { UserModal } from "@/components/Users/Modal";
 import { deleteUser, getUser } from "@/services/api";
-import { useNavigate } from "react-router";
+import { useNavigate, useSearchParams } from "react-router";
 
 export type UserRowProps = {
     user: User;
@@ -13,6 +13,7 @@ export type UserRowProps = {
 export default function UserRow({
     user,
 }: UserRowProps) {
+    const [searchParams, _] = useSearchParams();
     const deleteMutation = deleteUser();
     const navigate = useNavigate();
 
@@ -27,7 +28,7 @@ export default function UserRow({
                         mr="5"
                         onClick={(e) => {
                             e.stopPropagation();
-                            navigate(`/dashboard/users/${user.id}/edit`);
+                            navigate(`/dashboard/users/${user.id}/edit${searchParams ? `?${searchParams.toString()}` : ""}`);
                         }}
                     >
                         <IconEdit/>
diff --git a/frontend/src/config/i18n.tsx b/frontend/src/config/i18n.tsx
index aa37711..256327c 100644
--- a/frontend/src/config/i18n.tsx
+++ b/frontend/src/config/i18n.tsx
@@ -15,11 +15,10 @@ const resources = {
 };
 
 i18next
-	.use(LanguageDetector)
 	.use(initReactI18next)
 	.init({
 		resources: resources,
-		fallbackLng: "en",
+		fallbackLng: "fr",
 		debug: Config.debug,
 		detection: {
 			caches: [],
diff --git a/frontend/src/pages/Contract/index.tsx b/frontend/src/pages/Contract/index.tsx
index 5dd264e..1f8179f 100644
--- a/frontend/src/pages/Contract/index.tsx
+++ b/frontend/src/pages/Contract/index.tsx
@@ -1,52 +1,193 @@
+import { ProductForm } from "@/components/Products/Form";
+import ShipmentForm from "@/components/Shipments/Form";
+import { t } from "@/config/i18n";
 import { getForm } from "@/services/api";
-import { Group, Loader, NumberInput, Stack, Text, Title } from "@mantine/core";
+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 { useMemo } from "react";
 import { useParams } from "react-router";
 
+export function computePrices(values: [string, any][], products: Product[], nbShipment?: number) {
+    return values.reduce((prev, [key, value]) => {
+        const keyArray = key.split("-");
+        const productId = Number(keyArray[keyArray.length - 1]);
+        const product = products.find((product) => product.id === productId);
+        if (!product) {
+            return 0;
+        }
+        const isRecurent = key.includes("recurrent") && nbShipment;
+        const productPrice = Number(product.price || product.price_kg);
+        const productQuantityUnit = product.unit === "2" ? 1 : 1000;
+        const productQuantity = Number(product.price ? value : value / productQuantityUnit);
+        return(prev + productPrice * productQuantity * (isRecurent ? nbShipment : 1));
+    }, 0);
+}
+
 export function Contract() {
     const { id } = useParams();
-    const { data: form } = getForm(Number(id), {enabled: !!id})
+    const { data: form } = getForm(Number(id), {enabled: !!id});
+    const inputForm = useForm<Record<string, number | string>>({
+        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 productsRecurent = useMemo(() => {
-        console.log(form)
         return form?.productor?.products.filter((el) => el.type === "2")
-    }, [form])
+    }, [form]);
 
     const shipments = useMemo(() => {
-        return form?.shipments
+        return form?.shipments;
+    }, [form]);
+
+    const allProducts = useMemo(() => {
+        return form?.productor?.products;
     }, [form])
 
+    const price = useMemo(() => {
+        const values = Object.entries(inputForm.getValues());
+        return computePrices(values, allProducts, form?.shipments.length);
+    }, [inputForm, allProducts, form?.shipments]);
+
     if (!form) 
-        return <Loader/>
+        return <Loader/>;
+
 
     return (
-        <Stack>
-            <Title>{form.name}</Title>
+        <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, no informations is stored outside of contracts", {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')}
+                />
+                <TextInput
+                    label={t("lastname", {capfirst: true})}
+                    placeholder={t("lastname", {capfirst: true})}
+                    radius="sm"
+                    withAsterisk
+                    required
+                    leftSection={<IconUser/>}
+                    {...inputForm.getInputProps('lastname')}
+                />
+            </Group>
+            <Group grow>
+                <TextInput
+                    label={t("email", {capfirst: true})}
+                    placeholder={t("email", {capfirst: true})}
+                    radius="sm"
+                    withAsterisk
+                    required
+                    leftSection={<IconMail/>}
+                    {...inputForm.getInputProps('email')}
+                />
+                <TextInput
+                    label={t("phone", {capfirst: true})}
+                    placeholder={t("phone", {capfirst: true})}
+                    radius="sm"
+                    withAsterisk
+                    required
+                    leftSection={<IconPhone/>}
+                    {...inputForm.getInputProps('phone')}
+                />
+            </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.map((el) => (
-                    <Group>
-                        <Text>{el.name}</Text>
-                        <NumberInput/>
-                    </Group>
-                ))
+                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.map((shipment) => (
-                    <>
-                        <Text>{shipment.name}</Text>
-                        {
-                            shipment?.products.map((product) => (
-                                <Group>
-                                    <Text>{product.name}</Text>
-                                    <NumberInput/>
-                                </Group>
-
-                            ))
-                        }
-                    </>
-                    
-                ))
+                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
+                                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={() => {
+                        inputForm.validate();
+                        console.log(inputForm.getValues())
+                    }}
+                >
+                    {t('submit contract')}
+                </Button>
+            </Overlay>
         </Stack>
     )
 }
\ No newline at end of file
diff --git a/frontend/src/pages/Forms/index.tsx b/frontend/src/pages/Forms/index.tsx
index 291e538..05c554b 100644
--- a/frontend/src/pages/Forms/index.tsx
+++ b/frontend/src/pages/Forms/index.tsx
@@ -25,7 +25,7 @@ export function Forms() {
     }, [location, isEdit])
 
     const closeModal = () => {
-        navigate("/dashboard/forms");
+        navigate(`/dashboard/forms${searchParams ? `?${searchParams.toString()}` : ""}`);
     };
 
     const { isPending, data } = getForms(searchParams);
@@ -102,7 +102,7 @@ export function Forms() {
                     <ActionIcon
                         onClick={(e) => {
                             e.stopPropagation();
-                            navigate(`/dashboard/forms/create`);
+                            navigate(`/dashboard/forms/create${searchParams ? `?${searchParams.toString()}` : ""}`);
                         }}
                     >
                         <IconPlus/>
diff --git a/frontend/src/pages/Productors/index.tsx b/frontend/src/pages/Productors/index.tsx
index 05cc069..3449480 100644
--- a/frontend/src/pages/Productors/index.tsx
+++ b/frontend/src/pages/Productors/index.tsx
@@ -5,7 +5,7 @@ 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, useState } from "react";
+import { useCallback, useMemo } from "react";
 import type { Productor, ProductorInputs } from "@/services/resources/productors";
 import ProductorsFilters from "@/components/Productors/Filter";
 
@@ -25,7 +25,7 @@ export default function Productors() {
     }, [location, isEdit])
     
     const closeModal = () => {
-        navigate("/dashboard/productors");
+        navigate(`/dashboard/productors${searchParams ? `?${searchParams.toString()}` : ""}`);
     };
 
     const { data: productors, isPending } = getProductors(searchParams);
@@ -85,7 +85,7 @@ export default function Productors() {
                     <ActionIcon
                         onClick={(e) => {
                             e.stopPropagation();
-                            navigate(`/dashboard/productors/create`);
+                            navigate(`/dashboard/productors/create${searchParams ? `?${searchParams.toString()}` : ""}`);
                         }}
                     >
                         <IconPlus/>
diff --git a/frontend/src/pages/Products/index.tsx b/frontend/src/pages/Products/index.tsx
index 4dfb54c..42f4bbd 100644
--- a/frontend/src/pages/Products/index.tsx
+++ b/frontend/src/pages/Products/index.tsx
@@ -25,7 +25,7 @@ export default function Products() {
     }, [location, isEdit])
 
     const closeModal = () => {
-        navigate("/dashboard/products");
+        navigate(`/dashboard/products${searchParams ? `?${searchParams.toString()}` : ""}`);
     };
 
     const { data: products, isPending } = getProducts(searchParams);
@@ -38,7 +38,7 @@ export default function Products() {
     }, [allProducts])
 
     const productors = useMemo(() => {
-        return allProducts?.map((form: Product) => (form.productor.name))
+        return allProducts?.map((product: Product) => (product.productor.name))
             .filter((productor, index, array) => array.indexOf(productor) === index)
     }, [allProducts])
 
@@ -55,7 +55,7 @@ export default function Products() {
             return;
         await editProductMutation.mutateAsync({
             id: id,
-            product: product
+            product: productCreateFromProductInputs(product)
         });
         closeModal();
     }, []);
@@ -83,7 +83,7 @@ export default function Products() {
                     <ActionIcon
                         onClick={(e) => {
                             e.stopPropagation();
-                            navigate(`/dashboard/products/create`);
+                            navigate(`/dashboard/products/create${searchParams ? `?${searchParams.toString()}` : ""}`);
                         }}
                     >
                         <IconPlus/>
@@ -115,7 +115,8 @@ export default function Products() {
                             <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("weight", {capfirst: true})}</Table.Th>
+                            <Table.Th>{t("quantity", {capfirst: true})}</Table.Th>
+                            <Table.Th>{t("quantity unit", {capfirst: true})}</Table.Th>
                             <Table.Th>{t("unit", {capfirst: true})}</Table.Th>
                             <Table.Th>{t("actions", {capfirst: true})}</Table.Th>
                         </Table.Tr>
diff --git a/frontend/src/pages/Shipments/index.tsx b/frontend/src/pages/Shipments/index.tsx
index 12947da..5dbb1f4 100644
--- a/frontend/src/pages/Shipments/index.tsx
+++ b/frontend/src/pages/Shipments/index.tsx
@@ -25,7 +25,7 @@ export default function Shipments() {
     }, [location, isEdit])
     
     const closeModal = () => {
-        navigate("/dashboard/shipments");
+        navigate(`/dashboard/shipments${searchParams ? `?${searchParams.toString()}` : ""}`);
     };
 
     const { data: shipments, isPending } = getShipments(searchParams);
@@ -78,7 +78,7 @@ export default function Shipments() {
                     <ActionIcon
                         onClick={(e) => {
                             e.stopPropagation();
-                            navigate(`/dashboard/shipments/create`);
+                            navigate(`/dashboard/shipments/create${searchParams ? `?${searchParams.toString()}` : ""}`);
                         }}
                     >
                         <IconPlus/>
diff --git a/frontend/src/pages/Users/index.tsx b/frontend/src/pages/Users/index.tsx
index 6a91623..2d3cf92 100644
--- a/frontend/src/pages/Users/index.tsx
+++ b/frontend/src/pages/Users/index.tsx
@@ -25,7 +25,7 @@ export default function Users() {
     }, [location, isEdit])
 
     const closeModal = () => {
-        navigate("/dashboard/users");
+        navigate(`/dashboard/users${searchParams ? `?${searchParams.toString()}` : ""}`);
     };
 
     const {data: users, isPending} = getUsers(searchParams);
@@ -79,7 +79,7 @@ export default function Users() {
                     <ActionIcon
                         onClick={(e) => {
                             e.stopPropagation();
-                            navigate(`/dashboard/users/create`);
+                            navigate(`/dashboard/users/create${searchParams ? `?${searchParams.toString()}` : ""}`);
                         }}
                     >
                         <IconPlus/>
diff --git a/frontend/src/services/resources/products.ts b/frontend/src/services/resources/products.ts
index 3806643..7fed503 100644
--- a/frontend/src/services/resources/products.ts
+++ b/frontend/src/services/resources/products.ts
@@ -1,29 +1,37 @@
-import { t } from "@/config/i18n";
 import type { Productor } from "@/services/resources/productors";
 import type { Shipment } from "@/services/resources/shipments";
 
-export const ProductType = [
-    "none",
-    t("planned"),
-    t("reccurent"),
-];
+type ProductTypeKey = "1" | "2";
+type ProductUnitKey = "1" | "2" | "3";
 
-export const ProductUnit = [
-    "none",
-    t("grams"),
-    t("kilo"),
-    t("piece"),
-];
+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: string;
-    price: number;
+    unit: ProductUnitKey;
+    price: number | null;
     price_kg: number | null;
-    weight: number;
-    type: string;
+    quantity: number | null;
+    quantity_unit: string | null;
+    type: ProductTypeKey;
     shipments: Shipment[];
 }
 
@@ -31,9 +39,10 @@ export type ProductCreate = {
     productor_id: number;
     name: string;
     unit: string;
-    price: number;
+    price: number | null;
     price_kg: number | null;
-    weight: number | null;
+    quantity: number | null;
+    quantity_unit: string | null;
     type: string;
 }
 
@@ -43,7 +52,8 @@ export type ProductEdit = {
     unit: string | null;
     price: number | null;
     price_kg: number | null;
-    weight: number | null;
+    quantity: number | null;
+    quantity_unit: string | null;
     type: string | null;
 }
 
@@ -53,7 +63,8 @@ export type ProductInputs = {
     unit: string | null;
     price: number | null;
     price_kg: number | null;
-    weight: number | null;
+    quantity: number | null;
+    quantity_unit: string | null;
     type: string | null;
 }
 
@@ -69,7 +80,8 @@ export function productToProductInputs(product: Product): ProductInputs {
         unit: product.unit,
         price: product.price,
         price_kg: product.price_kg,
-        weight: product.weight,
+        quantity: product.quantity,
+        quantity_unit: product.quantity_unit,
         type: product.type,
     };
 }
@@ -81,7 +93,8 @@ export function productCreateFromProductInputs(productInput: ProductInputs): Pro
         unit: productInput.unit!,
         price: productInput.price!,
         price_kg: productInput.price_kg,
-        weight: productInput.weight,
+        quantity: productInput.quantity,
+        quantity_unit: productInput.quantity_unit,
         type: productInput.type!,
     }
 }
\ No newline at end of file