chore: bump version to v0.0.66

[#353 ] front de la page admin client (!38 )
| Numéro du ticket | Titre du ticket | |------------------|-----------------| | [#353] | front de la page admin client | ## Description de la PR ## Modification du .env ## Check list - [x] Pas de régression - [ ] TU/TI/TF rédigée - [x] TU/TI/TF OK - [x] CHANGELOG modifié Reviewed-on: #38 Reviewed-by: Autin <tristan@yuno.malio.fr> Co-authored-by: sroy <sebastien@yuno.malio.fr> Co-committed-by: sroy <sebastien@yuno.malio.fr>
2026-02-27 13:09:26 +00:00 · 2026-02-27 13:09:19 +00:00 · 2026-02-27 13:05:53 +00:00 · 2026-02-27 13:05:47 +00:00 · 2026-02-27 10:06:55 +00:00 · 2026-02-27 10:06:49 +00:00
217 changed files with 18807 additions and 1934 deletions
--- a/.gitea/workflows/auto-tag-develop.yml
+++ b/.gitea/workflows/auto-tag-develop.yml
@@ -16,30 +16,50 @@ jobs:
          token: ${{ secrets.RELEASE_TOKEN }}
          persist-credentials: true

-      - name: Create next tag v0.0.X
+      - name: Create next tag from config/version.yaml
        shell: bash
        run: |
          set -euo pipefail

-          # Skip if current commit already has a v0.0.* tag
-          if git tag --points-at HEAD | grep -qE '^v0\.0\.'; then
+          # Skip if current commit already has a vX.Y.Z tag
+          if git tag --points-at HEAD | grep -qE '^v[0-9]+\.[0-9]+\.[0-9]+$'; then
            echo "Tag already exists on this commit. Skipping."
            exit 0
          fi

-          last_tag="$(git tag -l 'v0.0.*' --sort=-v:refname | head -n1 || true)"
-          if [ -z "$last_tag" ]; then
-            next_tag="v0.0.1"
-          else
-            patch="${last_tag##v0.0.}"
-            if ! [[ "$patch" =~ ^[0-9]+$ ]]; then
-              echo "Unexpected tag format: $last_tag" >&2
-              exit 1
-            fi
-            next_tag="v0.0.$((patch + 1))"
+          changed_version=false
+          if git diff --name-only "${{ gitea.event.before }}" "${{ gitea.event.after }}" | grep -q '^config/version\.yaml$'; then
+            changed_version=true
          fi

-          git config user.name "gitea-actions"
-          git config user.email "gitea-actions@local"
-          git tag "$next_tag"
-          git push origin "$next_tag"
+          read_version() {
+            awk -F': *' '/app\.version:/{print $2}' config/version.yaml | tr -d '[:space:]' | tr -d "'\""
+          }
+
+          if $changed_version; then
+            version="$(read_version)"
+            if ! [[ "$version" =~ ^[0-9]+\.[0-9]+\.[0-9]+$ ]]; then
+              echo "Invalid version in version.yaml: $version" >&2
+              exit 1
+            fi
+          else
+            last_tag="$(git tag -l 'v*' --sort=-v:refname | head -n1 || true)"
+            if [ -z "$last_tag" ]; then
+              version="0.1.0"
+            else
+              base="${last_tag#v}"
+              IFS='.' read -r major minor patch <<< "$base"
+              version="${major}.${minor}.$((patch + 1))"
+            fi
+
+            printf "parameters:\\n    app.version: '%s'\\n" "$version" > config/version.yaml
+            git config user.name "gitea-actions"
+            git config user.email "gitea-actions@local"
+            git add config/version.yaml
+            git commit -m "chore: bump version to v$version" || true
+            git push origin develop || true
+          fi
+
+          tag="v$version"
+          git tag "$tag"
+          git push origin "$tag"
--- a/.gitea/workflows/release-artefact.yml
+++ b/.gitea/workflows/release-artefact.yml
@@ -36,7 +36,8 @@ jobs:
        run: |
          cd frontend
          npm ci
-          NUXT_PUBLIC_API_BASE=/api NUXT_PUBLIC_APP_BASE=/ npm run generate
+          CI=1 NUXT_TELEMETRY_DISABLED=1 NUXT_PUBLIC_API_BASE=/api NUXT_PUBLIC_APP_BASE=/ npm run generate
+          test -f .output/public/index.html

      - name: Build artefact
        shell: bash
@@ -54,7 +55,7 @@ jobs:
            composer.json \
            composer.lock \
            symfony.lock \
-            frontend/.output/public
+            frontend/.output

      - name: Create Release
        uses: softprops/action-gh-release@v2
--- a/.idea/copilot.data.migration.agent.xml
+++ b/.idea/copilot.data.migration.agent.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="AgentMigrationStateService">
+    <option name="migrationStatus" value="COMPLETED" />
+  </component>
+</project>
--- a/.idea/copilot.data.migration.ask.xml
+++ b/.idea/copilot.data.migration.ask.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="AskMigrationStateService">
+    <option name="migrationStatus" value="COMPLETED" />
+  </component>
+</project>
--- a/.idea/copilot.data.migration.ask2agent.xml
+++ b/.idea/copilot.data.migration.ask2agent.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="Ask2AgentMigrationStateService">
+    <option name="migrationStatus" value="COMPLETED" />
+  </component>
+</project>
--- a/.idea/copilot.data.migration.edit.xml
+++ b/.idea/copilot.data.migration.edit.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="EditMigrationStateService">
+    <option name="migrationStatus" value="COMPLETED" />
+  </component>
+</project>
--- a/.idea/dataSources.xml
+++ b/.idea/dataSources.xml
@@ -16,4 +16,4 @@
      <working-dir>$ProjectFileDir$</working-dir>
    </data-source>
  </component>
-</project>
+</project>
--- a/.idea/data_source_mapping.xml
+++ b/.idea/data_source_mapping.xml
@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="DataSourcePerFileMappings">
-    <file url="file://$APPLICATION_CONFIG_DIR$/consoles/db/ae622167-c834-4e7b-87a5-c1721036f5dc/console.sql" value="ae622167-c834-4e7b-87a5-c1721036f5dc" />
-    <file url="file://$APPLICATION_CONFIG_DIR$/consoles/db/f407a514-c6b4-4b26-9555-445a85892502/console.sql" value="f407a514-c6b4-4b26-9555-445a85892502" />
-  </component>
-</project>
--- a/.idea/ferme.iml
+++ b/.idea/ferme.iml
@@ -147,6 +147,14 @@
      <excludeFolder url="file://$MODULE_DIR$/vendor/thecodingmachine/safe" />
      <excludeFolder url="file://$MODULE_DIR$/vendor/lcobucci/jwt" />
      <excludeFolder url="file://$MODULE_DIR$/vendor/lexik/jwt-authentication-bundle" />
+      <excludeFolder url="file://$MODULE_DIR$/vendor/malio/ednotif-bundle" />
+      <excludeFolder url="file://$MODULE_DIR$/vendor/monolog/monolog" />
+      <excludeFolder url="file://$MODULE_DIR$/vendor/symfony/monolog-bridge" />
+      <excludeFolder url="file://$MODULE_DIR$/vendor/symfony/monolog-bundle" />
+      <excludeFolder url="file://$MODULE_DIR$/vendor/symfony/web-profiler-bundle" />
+      <excludeFolder url="file://$MODULE_DIR$/vendor/doctrine/data-fixtures" />
+      <excludeFolder url="file://$MODULE_DIR$/vendor/doctrine/doctrine-fixtures-bundle" />
+      <excludeFolder url="file://$MODULE_DIR$/vendor/symfony/maker-bundle" />
      <excludePattern pattern="reference.php" />
    </content>
    <orderEntry type="inheritedJdk" />
--- a/.idea/php.xml
+++ b/.idea/php.xml
@@ -4,158 +4,184 @@
    <option name="transferred" value="true" />
  </component>
  <component name="PHPCSFixerOptionsConfiguration">
+    <option name="codingStandard" value="Custom" />
+    <option name="rulesetPath" value="$PROJECT_DIR$/.php-cs-fixer.dist.php" />
    <option name="transferred" value="true" />
  </component>
  <component name="PHPCodeSnifferOptionsConfiguration">
    <option name="highlightLevel" value="WARNING" />
    <option name="transferred" value="true" />
  </component>
+  <component name="PhpCSFixer">
+    <phpcsfixer_settings>
+      <PhpCSFixerConfiguration tool_path="$PROJECT_DIR$/vendor/bin/php-cs-fixer" />
+      <phpcs_fixer_by_interpreter asDefaultInterpreter="true" interpreter_id="990ff521-e6e9-4080-9cc9-228367d597f9" tool_path="\\wsl.localhost\Ubuntu-24.04\home\matte\Ferme\vendor\bin\php-cs-fixer" timeout="30000" />
+    </phpcsfixer_settings>
+  </component>
+  <component name="PhpCodeSniffer">
+    <phpcs_settings>
+      <phpcs_by_interpreter asDefaultInterpreter="true" interpreter_id="8475dcce-5d1d-4a2c-9e2f-7454868f1931" timeout="30000" />
+    </phpcs_settings>
+  </component>
  <component name="PhpIncludePathManager">
    <include_path>
-      <path value="$PROJECT_DIR$/vendor/symfony/framework-bundle" />
-      <path value="$PROJECT_DIR$/vendor/symfony/uid" />
+      <path value="$PROJECT_DIR$/vendor/psr/log" />
+      <path value="$PROJECT_DIR$/vendor/psr/event-dispatcher" />
+      <path value="$PROJECT_DIR$/vendor/psr/clock" />
+      <path value="$PROJECT_DIR$/vendor/psr/container" />
+      <path value="$PROJECT_DIR$/vendor/psr/cache" />
+      <path value="$PROJECT_DIR$/vendor/clue/ndjson-react" />
+      <path value="$PROJECT_DIR$/vendor/psr/link" />
+      <path value="$PROJECT_DIR$/vendor/fidry/cpu-core-counter" />
+      <path value="$PROJECT_DIR$/vendor/twig/twig" />
+      <path value="$PROJECT_DIR$/vendor/lexik/jwt-authentication-bundle" />
+      <path value="$PROJECT_DIR$/vendor/react/dns" />
+      <path value="$PROJECT_DIR$/vendor/nikic/php-parser" />
+      <path value="$PROJECT_DIR$/vendor/react/socket" />
+      <path value="$PROJECT_DIR$/vendor/react/child-process" />
+      <path value="$PROJECT_DIR$/vendor/react/event-loop" />
+      <path value="$PROJECT_DIR$/vendor/react/promise" />
+      <path value="$PROJECT_DIR$/vendor/react/cache" />
+      <path value="$PROJECT_DIR$/vendor/react/stream" />
+      <path value="$PROJECT_DIR$/vendor/dompdf/dompdf" />
+      <path value="$PROJECT_DIR$/vendor/dompdf/php-font-lib" />
+      <path value="$PROJECT_DIR$/vendor/nelmio/cors-bundle" />
+      <path value="$PROJECT_DIR$/vendor/dompdf/php-svg-lib" />
+      <path value="$PROJECT_DIR$/vendor/monolog/monolog" />
+      <path value="$PROJECT_DIR$/vendor/staabm/side-effects-detector" />
+      <path value="$PROJECT_DIR$/vendor/phar-io/manifest" />
+      <path value="$PROJECT_DIR$/vendor/myclabs/deep-copy" />
+      <path value="$PROJECT_DIR$/vendor/phpstan/phpdoc-parser" />
+      <path value="$PROJECT_DIR$/vendor/phar-io/version" />
+      <path value="$PROJECT_DIR$/vendor/phpunit/php-file-iterator" />
+      <path value="$PROJECT_DIR$/vendor/phpunit/php-code-coverage" />
+      <path value="$PROJECT_DIR$/vendor/phpunit/php-timer" />
+      <path value="$PROJECT_DIR$/vendor/phpunit/phpunit" />
+      <path value="$PROJECT_DIR$/vendor/phpunit/php-invoker" />
+      <path value="$PROJECT_DIR$/vendor/phpunit/php-text-template" />
+      <path value="$PROJECT_DIR$/vendor/symfony/var-dumper" />
+      <path value="$PROJECT_DIR$/vendor/symfony/runtime" />
+      <path value="$PROJECT_DIR$/vendor/symfony/string" />
+      <path value="$PROJECT_DIR$/vendor/symfony/css-selector" />
      <path value="$PROJECT_DIR$/vendor/symfony/polyfill-intl-normalizer" />
      <path value="$PROJECT_DIR$/vendor/symfony/cache-contracts" />
-      <path value="$PROJECT_DIR$/vendor/symfony/finder" />
-      <path value="$PROJECT_DIR$/vendor/symfony/asset" />
-      <path value="$PROJECT_DIR$/vendor/symfony/var-exporter" />
-      <path value="$PROJECT_DIR$/vendor/symfony/runtime" />
-      <path value="$PROJECT_DIR$/vendor/symfony/error-handler" />
-      <path value="$PROJECT_DIR$/vendor/symfony/translation-contracts" />
-      <path value="$PROJECT_DIR$/vendor/symfony/clock" />
-      <path value="$PROJECT_DIR$/vendor/symfony/twig-bridge" />
-      <path value="$PROJECT_DIR$/vendor/symfony/event-dispatcher-contracts" />
-      <path value="$PROJECT_DIR$/vendor/theseer/tokenizer" />
-      <path value="$PROJECT_DIR$/vendor/symfony/doctrine-bridge" />
-      <path value="$PROJECT_DIR$/vendor/symfony/type-info" />
-      <path value="$PROJECT_DIR$/vendor/doctrine/doctrine-migrations-bundle" />
-      <path value="$PROJECT_DIR$/vendor/doctrine/deprecations" />
-      <path value="$PROJECT_DIR$/vendor/doctrine/migrations" />
-      <path value="$PROJECT_DIR$/vendor/doctrine/event-manager" />
-      <path value="$PROJECT_DIR$/vendor/doctrine/doctrine-bundle" />
-      <path value="$PROJECT_DIR$/vendor/doctrine/lexer" />
-      <path value="$PROJECT_DIR$/vendor/doctrine/orm" />
-      <path value="$PROJECT_DIR$/vendor/doctrine/inflector" />
-      <path value="$PROJECT_DIR$/vendor/doctrine/sql-formatter" />
-      <path value="$PROJECT_DIR$/vendor/doctrine/common" />
-      <path value="$PROJECT_DIR$/vendor/doctrine/collections" />
-      <path value="$PROJECT_DIR$/vendor/doctrine/instantiator" />
-      <path value="$PROJECT_DIR$/vendor/doctrine/persistence" />
-      <path value="$PROJECT_DIR$/vendor/sebastian/lines-of-code" />
-      <path value="$PROJECT_DIR$/vendor/sebastian/type" />
-      <path value="$PROJECT_DIR$/vendor/doctrine/dbal" />
-      <path value="$PROJECT_DIR$/vendor/evenement/evenement" />
-      <path value="$PROJECT_DIR$/vendor/sebastian/diff" />
-      <path value="$PROJECT_DIR$/vendor/sebastian/cli-parser" />
-      <path value="$PROJECT_DIR$/vendor/sebastian/object-reflector" />
-      <path value="$PROJECT_DIR$/vendor/sebastian/environment" />
-      <path value="$PROJECT_DIR$/vendor/sebastian/complexity" />
-      <path value="$PROJECT_DIR$/vendor/sebastian/comparator" />
-      <path value="$PROJECT_DIR$/vendor/sebastian/recursion-context" />
-      <path value="$PROJECT_DIR$/vendor/sebastian/exporter" />
-      <path value="$PROJECT_DIR$/vendor/sebastian/global-state" />
-      <path value="$PROJECT_DIR$/vendor/webmozart/assert" />
-      <path value="$PROJECT_DIR$/vendor/sebastian/object-enumerator" />
-      <path value="$PROJECT_DIR$/vendor/sebastian/version" />
-      <path value="$PROJECT_DIR$/vendor/api-platform/jsonld" />
-      <path value="$PROJECT_DIR$/vendor/api-platform/hydra" />
-      <path value="$PROJECT_DIR$/vendor/willdurand/negotiation" />
-      <path value="$PROJECT_DIR$/vendor/api-platform/http-cache" />
-      <path value="$PROJECT_DIR$/vendor/api-platform/serializer" />
-      <path value="$PROJECT_DIR$/vendor/api-platform/doctrine-orm" />
-      <path value="$PROJECT_DIR$/vendor/api-platform/validator" />
-      <path value="$PROJECT_DIR$/vendor/api-platform/state" />
-      <path value="$PROJECT_DIR$/vendor/api-platform/metadata" />
-      <path value="$PROJECT_DIR$/vendor/api-platform/symfony" />
-      <path value="$PROJECT_DIR$/vendor/api-platform/openapi" />
-      <path value="$PROJECT_DIR$/vendor/api-platform/documentation" />
-      <path value="$PROJECT_DIR$/vendor/friendsofphp/php-cs-fixer" />
-      <path value="$PROJECT_DIR$/vendor/phpdocumentor/type-resolver" />
-      <path value="$PROJECT_DIR$/vendor/api-platform/json-schema" />
-      <path value="$PROJECT_DIR$/vendor/api-platform/doctrine-common" />
-      <path value="$PROJECT_DIR$/vendor/phpdocumentor/reflection-common" />
-      <path value="$PROJECT_DIR$/vendor/phpdocumentor/reflection-docblock" />
-      <path value="$PROJECT_DIR$/vendor/composer" />
-      <path value="$PROJECT_DIR$/vendor/psr/log" />
-      <path value="$PROJECT_DIR$/vendor/psr/link" />
-      <path value="$PROJECT_DIR$/vendor/psr/cache" />
-      <path value="$PROJECT_DIR$/vendor/psr/clock" />
-      <path value="$PROJECT_DIR$/vendor/clue/ndjson-react" />
-      <path value="$PROJECT_DIR$/vendor/psr/event-dispatcher" />
-      <path value="$PROJECT_DIR$/vendor/psr/container" />
-      <path value="$PROJECT_DIR$/vendor/nikic/php-parser" />
-      <path value="$PROJECT_DIR$/vendor/react/promise" />
-      <path value="$PROJECT_DIR$/vendor/twig/twig" />
-      <path value="$PROJECT_DIR$/vendor/fidry/cpu-core-counter" />
-      <path value="$PROJECT_DIR$/vendor/react/stream" />
-      <path value="$PROJECT_DIR$/vendor/react/child-process" />
-      <path value="$PROJECT_DIR$/vendor/react/cache" />
-      <path value="$PROJECT_DIR$/vendor/react/event-loop" />
-      <path value="$PROJECT_DIR$/vendor/nelmio/cors-bundle" />
-      <path value="$PROJECT_DIR$/vendor/staabm/side-effects-detector" />
-      <path value="$PROJECT_DIR$/vendor/react/socket" />
-      <path value="$PROJECT_DIR$/vendor/react/dns" />
-      <path value="$PROJECT_DIR$/vendor/phar-io/version" />
-      <path value="$PROJECT_DIR$/vendor/phpstan/phpdoc-parser" />
-      <path value="$PROJECT_DIR$/vendor/myclabs/deep-copy" />
-      <path value="$PROJECT_DIR$/vendor/phar-io/manifest" />
-      <path value="$PROJECT_DIR$/vendor/phpunit/php-code-coverage" />
-      <path value="$PROJECT_DIR$/vendor/phpunit/php-text-template" />
-      <path value="$PROJECT_DIR$/vendor/phpunit/php-invoker" />
-      <path value="$PROJECT_DIR$/vendor/phpunit/php-timer" />
+      <path value="$PROJECT_DIR$/vendor/symfony/polyfill-mbstring" />
+      <path value="$PROJECT_DIR$/vendor/symfony/http-client" />
      <path value="$PROJECT_DIR$/vendor/symfony/flex" />
-      <path value="$PROJECT_DIR$/vendor/symfony/validator" />
-      <path value="$PROJECT_DIR$/vendor/phpunit/phpunit" />
-      <path value="$PROJECT_DIR$/vendor/phpunit/php-file-iterator" />
-      <path value="$PROJECT_DIR$/vendor/symfony/security-csrf" />
-      <path value="$PROJECT_DIR$/vendor/symfony/dependency-injection" />
-      <path value="$PROJECT_DIR$/vendor/symfony/security-bundle" />
-      <path value="$PROJECT_DIR$/vendor/symfony/deprecation-contracts" />
-      <path value="$PROJECT_DIR$/vendor/symfony/password-hasher" />
-      <path value="$PROJECT_DIR$/vendor/symfony/http-kernel" />
-      <path value="$PROJECT_DIR$/vendor/symfony/console" />
-      <path value="$PROJECT_DIR$/vendor/symfony/filesystem" />
-      <path value="$PROJECT_DIR$/vendor/symfony/cache" />
-      <path value="$PROJECT_DIR$/vendor/symfony/web-link" />
-      <path value="$PROJECT_DIR$/vendor/symfony/serializer" />
-      <path value="$PROJECT_DIR$/vendor/symfony/css-selector" />
-      <path value="$PROJECT_DIR$/vendor/symfony/twig-bundle" />
-      <path value="$PROJECT_DIR$/vendor/symfony/process" />
-      <path value="$PROJECT_DIR$/vendor/symfony/security-http" />
-      <path value="$PROJECT_DIR$/vendor/symfony/config" />
-      <path value="$PROJECT_DIR$/vendor/symfony/event-dispatcher" />
+      <path value="$PROJECT_DIR$/vendor/symfony/clock" />
+      <path value="$PROJECT_DIR$/vendor/symfony/web-profiler-bundle" />
+      <path value="$PROJECT_DIR$/vendor/symfony/finder" />
      <path value="$PROJECT_DIR$/vendor/symfony/browser-kit" />
-      <path value="$PROJECT_DIR$/vendor/symfony/options-resolver" />
+      <path value="$PROJECT_DIR$/vendor/symfony/password-hasher" />
+      <path value="$PROJECT_DIR$/vendor/symfony/security-core" />
+      <path value="$PROJECT_DIR$/vendor/symfony/dependency-injection" />
+      <path value="$PROJECT_DIR$/vendor/symfony/security-http" />
      <path value="$PROJECT_DIR$/vendor/symfony/service-contracts" />
      <path value="$PROJECT_DIR$/vendor/symfony/yaml" />
-      <path value="$PROJECT_DIR$/vendor/symfony/polyfill-mbstring" />
-      <path value="$PROJECT_DIR$/vendor/symfony/string" />
-      <path value="$PROJECT_DIR$/vendor/symfony/property-access" />
-      <path value="$PROJECT_DIR$/vendor/symfony/polyfill-uuid" />
-      <path value="$PROJECT_DIR$/vendor/symfony/property-info" />
-      <path value="$PROJECT_DIR$/vendor/symfony/dom-crawler" />
-      <path value="$PROJECT_DIR$/vendor/symfony/var-dumper" />
-      <path value="$PROJECT_DIR$/vendor/symfony/expression-language" />
+      <path value="$PROJECT_DIR$/vendor/symfony/deprecation-contracts" />
+      <path value="$PROJECT_DIR$/vendor/symfony/process" />
      <path value="$PROJECT_DIR$/vendor/symfony/http-foundation" />
-      <path value="$PROJECT_DIR$/vendor/symfony/polyfill-php85" />
-      <path value="$PROJECT_DIR$/vendor/symfony/routing" />
-      <path value="$PROJECT_DIR$/vendor/symfony/security-core" />
+      <path value="$PROJECT_DIR$/vendor/symfony/dom-crawler" />
      <path value="$PROJECT_DIR$/vendor/symfony/dotenv" />
-      <path value="$PROJECT_DIR$/vendor/symfony/polyfill-intl-grapheme" />
+      <path value="$PROJECT_DIR$/vendor/symfony/serializer" />
+      <path value="$PROJECT_DIR$/vendor/symfony/config" />
+      <path value="$PROJECT_DIR$/vendor/symfony/property-info" />
+      <path value="$PROJECT_DIR$/vendor/symfony/twig-bundle" />
+      <path value="$PROJECT_DIR$/vendor/symfony/monolog-bundle" />
      <path value="$PROJECT_DIR$/vendor/symfony/stopwatch" />
+      <path value="$PROJECT_DIR$/vendor/symfony/options-resolver" />
+      <path value="$PROJECT_DIR$/vendor/symfony/event-dispatcher" />
+      <path value="$PROJECT_DIR$/vendor/symfony/error-handler" />
+      <path value="$PROJECT_DIR$/vendor/symfony/cache" />
+      <path value="$PROJECT_DIR$/vendor/symfony/filesystem" />
+      <path value="$PROJECT_DIR$/vendor/symfony/framework-bundle" />
+      <path value="$PROJECT_DIR$/vendor/symfony/security-bundle" />
      <path value="$PROJECT_DIR$/vendor/symfony/http-client-contracts" />
-      <path value="$PROJECT_DIR$/vendor/symfony/http-client" />
-      <path value="$PROJECT_DIR$/vendor/thecodingmachine/safe" />
-      <path value="$PROJECT_DIR$/vendor/masterminds/html5" />
-      <path value="$PROJECT_DIR$/vendor/dompdf/dompdf" />
-      <path value="$PROJECT_DIR$/vendor/dompdf/php-svg-lib" />
-      <path value="$PROJECT_DIR$/vendor/sabberworm/php-css-parser" />
-      <path value="$PROJECT_DIR$/vendor/dompdf/php-font-lib" />
-      <path value="$PROJECT_DIR$/vendor/lexik/jwt-authentication-bundle" />
+      <path value="$PROJECT_DIR$/vendor/symfony/polyfill-php85" />
+      <path value="$PROJECT_DIR$/vendor/symfony/polyfill-uuid" />
+      <path value="$PROJECT_DIR$/vendor/symfony/asset" />
+      <path value="$PROJECT_DIR$/vendor/symfony/twig-bridge" />
+      <path value="$PROJECT_DIR$/vendor/symfony/expression-language" />
+      <path value="$PROJECT_DIR$/vendor/symfony/console" />
+      <path value="$PROJECT_DIR$/vendor/symfony/web-link" />
+      <path value="$PROJECT_DIR$/vendor/symfony/property-access" />
+      <path value="$PROJECT_DIR$/vendor/symfony/doctrine-bridge" />
+      <path value="$PROJECT_DIR$/vendor/symfony/event-dispatcher-contracts" />
+      <path value="$PROJECT_DIR$/vendor/symfony/security-csrf" />
+      <path value="$PROJECT_DIR$/vendor/symfony/http-kernel" />
+      <path value="$PROJECT_DIR$/vendor/symfony/uid" />
+      <path value="$PROJECT_DIR$/vendor/symfony/validator" />
+      <path value="$PROJECT_DIR$/vendor/symfony/polyfill-intl-grapheme" />
+      <path value="$PROJECT_DIR$/vendor/symfony/var-exporter" />
+      <path value="$PROJECT_DIR$/vendor/symfony/type-info" />
+      <path value="$PROJECT_DIR$/vendor/symfony/monolog-bridge" />
+      <path value="$PROJECT_DIR$/vendor/symfony/translation-contracts" />
+      <path value="$PROJECT_DIR$/vendor/symfony/routing" />
+      <path value="$PROJECT_DIR$/vendor/theseer/tokenizer" />
+      <path value="$PROJECT_DIR$/vendor/doctrine/sql-formatter" />
+      <path value="$PROJECT_DIR$/vendor/doctrine/collections" />
+      <path value="$PROJECT_DIR$/vendor/doctrine/doctrine-bundle" />
+      <path value="$PROJECT_DIR$/vendor/doctrine/common" />
+      <path value="$PROJECT_DIR$/vendor/doctrine/dbal" />
+      <path value="$PROJECT_DIR$/vendor/doctrine/orm" />
+      <path value="$PROJECT_DIR$/vendor/doctrine/deprecations" />
+      <path value="$PROJECT_DIR$/vendor/doctrine/migrations" />
+      <path value="$PROJECT_DIR$/vendor/doctrine/instantiator" />
+      <path value="$PROJECT_DIR$/vendor/doctrine/lexer" />
+      <path value="$PROJECT_DIR$/vendor/doctrine/persistence" />
+      <path value="$PROJECT_DIR$/vendor/doctrine/event-manager" />
+      <path value="$PROJECT_DIR$/vendor/doctrine/doctrine-migrations-bundle" />
+      <path value="$PROJECT_DIR$/vendor/doctrine/inflector" />
+      <path value="$PROJECT_DIR$/vendor/evenement/evenement" />
      <path value="$PROJECT_DIR$/vendor/lcobucci/jwt" />
+      <path value="$PROJECT_DIR$/vendor/sebastian/object-reflector" />
+      <path value="$PROJECT_DIR$/vendor/sebastian/object-enumerator" />
+      <path value="$PROJECT_DIR$/vendor/sebastian/complexity" />
+      <path value="$PROJECT_DIR$/vendor/sebastian/comparator" />
+      <path value="$PROJECT_DIR$/vendor/sebastian/cli-parser" />
+      <path value="$PROJECT_DIR$/vendor/sebastian/global-state" />
+      <path value="$PROJECT_DIR$/vendor/sebastian/exporter" />
+      <path value="$PROJECT_DIR$/vendor/sebastian/type" />
+      <path value="$PROJECT_DIR$/vendor/sebastian/environment" />
+      <path value="$PROJECT_DIR$/vendor/sebastian/diff" />
+      <path value="$PROJECT_DIR$/vendor/sebastian/recursion-context" />
+      <path value="$PROJECT_DIR$/vendor/sebastian/lines-of-code" />
+      <path value="$PROJECT_DIR$/vendor/webmozart/assert" />
+      <path value="$PROJECT_DIR$/vendor/sebastian/version" />
+      <path value="$PROJECT_DIR$/vendor/willdurand/negotiation" />
+      <path value="$PROJECT_DIR$/vendor/sabberworm/php-css-parser" />
+      <path value="$PROJECT_DIR$/vendor/api-platform/http-cache" />
+      <path value="$PROJECT_DIR$/vendor/masterminds/html5" />
+      <path value="$PROJECT_DIR$/vendor/api-platform/doctrine-common" />
+      <path value="$PROJECT_DIR$/vendor/api-platform/documentation" />
+      <path value="$PROJECT_DIR$/vendor/api-platform/metadata" />
+      <path value="$PROJECT_DIR$/vendor/api-platform/doctrine-orm" />
+      <path value="$PROJECT_DIR$/vendor/api-platform/hydra" />
+      <path value="$PROJECT_DIR$/vendor/api-platform/symfony" />
+      <path value="$PROJECT_DIR$/vendor/api-platform/jsonld" />
+      <path value="$PROJECT_DIR$/vendor/api-platform/serializer" />
+      <path value="$PROJECT_DIR$/vendor/api-platform/json-schema" />
+      <path value="$PROJECT_DIR$/vendor/api-platform/openapi" />
+      <path value="$PROJECT_DIR$/vendor/api-platform/validator" />
+      <path value="$PROJECT_DIR$/vendor/api-platform/state" />
+      <path value="$PROJECT_DIR$/vendor/phpdocumentor/reflection-common" />
+      <path value="$PROJECT_DIR$/vendor/friendsofphp/php-cs-fixer" />
+      <path value="$PROJECT_DIR$/vendor/phpdocumentor/reflection-docblock" />
+      <path value="$PROJECT_DIR$/vendor/phpdocumentor/type-resolver" />
+      <path value="$PROJECT_DIR$/vendor/thecodingmachine/safe" />
+      <path value="$PROJECT_DIR$/vendor/composer" />
+      <path value="$PROJECT_DIR$/vendor/malio/ednotif-bundle" />
+      <path value="$PROJECT_DIR$/vendor/doctrine/doctrine-fixtures-bundle" />
+      <path value="$PROJECT_DIR$/vendor/doctrine/data-fixtures" />
+      <path value="$PROJECT_DIR$/vendor/symfony/maker-bundle" />
    </include_path>
  </component>
  <component name="PhpProjectSharedConfiguration" php_language_level="8.4" />
+  <component name="PhpStan">
+    <PhpStan_settings>
+      <phpstan_by_interpreter asDefaultInterpreter="true" interpreter_id="8475dcce-5d1d-4a2c-9e2f-7454868f1931" timeout="60000" />
+    </PhpStan_settings>
+  </component>
  <component name="PhpStanOptionsConfiguration">
    <option name="transferred" value="true" />
  </component>
@@ -164,6 +190,11 @@
      <PhpUnitSettings custom_loader_path="$PROJECT_DIR$/vendor/autoload.php" />
    </phpunit_settings>
  </component>
+  <component name="Psalm">
+    <Psalm_settings>
+      <psalm_fixer_by_interpreter asDefaultInterpreter="true" interpreter_id="8475dcce-5d1d-4a2c-9e2f-7454868f1931" timeout="60000" />
+    </Psalm_settings>
+  </component>
  <component name="PsalmOptionsConfiguration">
    <option name="transferred" value="true" />
  </component>
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -8,19 +8,29 @@ Project overview
 Backend conventions
 - Use English for code identifiers/messages; keep “pont-bascule” as domain term.
 - API Platform operations are defined on Doctrine entities.
+- No custom repository classes are used (`src/Repository` removed); use default Doctrine repositories via `EntityManagerInterface`.
 - Reception entity is in `src/Entity/Reception.php`, with custom weigh endpoint `/receptions/weigh`.
 - Reception fields: `date_reception`, `license_plate`, `current_step` (default 0), `is_valid` (default false).
+- Reception also has `identification_number` (auto `N-BR-####`), `merchandise_type`, `merchandise_detail`, `buildings` (M2M), and `pellet_buildings` (via `reception_pellet_building`).
 - `date_reception` is set by the UI, stored as `DateTimeImmutable`, serialized as `Y-m-d`.
 - Weight entity (`src/Entity/Weight.php`) is 1–N with Reception, each row stores `type` (`gross` or `tare`), `dsd`, `weight`, `weighed_at` (all nullable except `type`).
 - Weigh endpoint `/receptions/weigh` returns `PontBasculeReading` with `dsd`, `weight`, `weighedAt` (formatted `Y-m-d`).
 - Custom exception: `App\Exception\PontBasculeException` with French messages, mapped to 500 in provider.
 - Parsing of pont-bascule payload is in `src/Service/PontBasculePayloadDecoder.php`.
 - `config/reference.php` is auto-generated; keep it.
+- Bovine storage:
+  - `src/Entity/Bovine.php` with fields `nationalNumber` (unique), `receivedWeight`, `arrivalDate`, and `buildingCase` (ManyToOne).
+  - `src/Entity/BuildingCase.php` has `bovines` (OneToMany).
+- Case PDF report:
+  - Endpoint: `GET /building_cases/{id}/weights-report` (provider: `App\State\BuildingCaseWeightsReportProvider`).
+  - Template: `templates/case_weights_report.html.twig`.
+  - Projection logic is done in backend from `arrivalDate`; daily gain is currently fixed at `1.3 kg/day` for all races.

 Frontend conventions
 - Nuxt SSR disabled; Tailwind used.
 - Layout in `frontend/layouts/default.vue`: max width `1050px`, header full width.
 - Tailwind custom color palette is `primary` (e.g. `bg-primary-500`).
+- Global font stack uses Helvetica via Tailwind (`font-sans`) and `frontend/assets/css/main.css`.
 - API composable in `frontend/composables/useApi.ts` with `get/post/put/patch/delete` and default JSON/PATCH content types.
 - API errors/success toasts can be customized via `toastErrorMessage`/`toastSuccessMessage` or i18n keys `toastErrorKey`/`toastSuccessKey`. Global method fallbacks use `errors.http.*` keys.
 - `useApi` uses `useNuxtApp().$i18n` (not `useI18n`) to avoid setup-only constraint in service calls.
@@ -28,11 +38,13 @@ Frontend conventions
 - Zod is used for form validation (e.g. `frontend/components/reception/reception-form.vue`); shared helpers live in `frontend/utils/zod-errors.ts`.
 - Weighing logic is shared via `frontend/composables/useWeighing.ts`.
 - Reception step UI uses store state (`currentStep`) in `frontend/pages/reception/[[id]].vue`.
+- Step 2 uses `frontend/components/reception/reception-product-received.vue` for merchandise selection; type codes in `frontend/utils/constants.ts`.
 - Active nav styles in header use `NuxtLink` with `custom` slot.
 - Reusable UI components live under `frontend/components/ui/` and are auto-imported with `Ui` prefix (e.g. `UiLoadingDots`).
 - Service layer lives in `frontend/services/` with typed DTOs in `frontend/services/dto/`.
 - Reception service uses `receptions`, `receptions/{id}`, `receptions/weigh` and supports success/error toast keys.
 - Reception receipt endpoint is `receptions/{id}/receipt` (PDF) via `frontend/composables/usePdfPrinter.ts`.
+- Infrastructure case page prints the case weight report PDF from `frontend/pages/infrastructure/case.vue` using `usePdfPrinter('/building_cases/{id}/weights-report')`.

 Environment & routing
 - Frontend dev server: `npm run dev` in `frontend/`.
@@ -44,3 +56,18 @@ Environment & routing
 Notes
 - Do not add a GET that creates resources; use POST + PATCH.
 - Keep endpoints in plural (API Platform convention).
+- Seed and fixtures conventions:
+  - `app:seed` now seeds infrastructure (`statut`, `building_layout`, `building_case`, `building_case_position`) and bovines.
+  - `app:seed` uses intermediate flushes (after buildings and after infrastructure) so find queries can resolve just-created records.
+  - Bovine seed rows use a legacy case token mapping to building-case code (`B{building}-C{case}`) before fallback to direct id lookup.
+  - Fixtures include `BuildingInfrastructureFixtures` + `BovineFixtures` (via `AppFixtures` dependencies).
+- New reference data added:
+  - Reception types (`reception_type`, fields: `label`, `code`), selectable on reception form.
+  - Merchandise types (`merchandise_type`, fields: `label`, `code`) and pellet types (`pellet_type`, fields: `label`, `code`).
+  - Buildings (`building`, fields: `label`, `code`) and reception allocations (`reception_building` M2M, `reception_pellet_building` unique on reception/pellet/building).
+  - Suppliers (`supplier`) with addresses (`address`, fields: `label`, `street`, `postal_code`, `city`, `country_code` ISO2), via `supplier_address` join table.
+  - Trucks (`truck`, field: `name`), linked to receptions.
+  - Carriers (`carrier`, fields: `name`, nullable `code`), Drivers (`driver`, fields: `name`, `carrier_id`), Vehicles (`vehicle`, fields: `plate`, `carrier_id`, `truck_id`) used for LIOT logic.
+  - Reception links: `reception_type_id`, `supplier_id`, `address_id`, `truck_id`, `carrier_id`, `driver_id`, `user_id`.
+  - Address exposes `fullAddress` via getter for display.
+  - LIOT behavior in reception form: if carrier code = `LIOT`, show driver + vehicle selects and hide manual license plate input; vehicle list filters by truck type and carrier; selected vehicle sets `license_plate`.
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,10 @@ Ajouter dans le fichier .env
 - JWT_PUBLIC_KEY
 - JWT_PASSPHRASE (à généré dans le conteneur avec la commande php -r "echo bin2hex(random_bytes(32));")
 - COOKIE_SECURE=0 (en dev 0 et en prod 1)
+- EDNOTIF_EXPLOITATION_CODE
+- EDNOTIF_EXPLOITATION_NUMERO
+- EDNOTIF_LOGIN
+- EDNOTIF_PASSWORD

 Ajouter dans le fichier .env du frontend
 - NUXT_PUBLIC_API_BASE
@@ -20,7 +24,41 @@ Ajouter dans le fichier .env du frontend
 ### Added
 * [#203] Réceptions — Parcours de pesée multi-étapes (début)
 * [#202] Authentification — Connexion utilisateur (JWT)
-
+* Ajout du bundle malio/ednotif-bundle
+* Ajout de composant UI
+* Finalisation de la partie réception de marchandise
+* [#267] Lister les réceptions en attente
+* [#268] Lister les réceptions terminées
+* [#316] Admin liste des transporteurs
+* [#312] Creation administration listing fournisseurs
+* [#315] Creation page admin utilisateur
+* [#317] Admin modification creation transporteur
+* [#318] Affichage modification reception terminée
+* [#320] Affichage modification reception terminée suite
+* [#271] Créer une nouvelle expédition (étape 1)
+* [#272] Créer une nouvelle expédition (étape 2)
+* [#273] Créer une nouvelle expédition (étape 3)
+* [#256] Créer une nouvelle réception (étape 3 - bovin)
+* [#314] Création d'une page d'administration : listing des utilisateurs
+* [#313] Admin modification creation fournisseur
+* [#275] Lister les expéditions en attente
+* [#276] Lister les expéditions terminées
+* [#324] Creation page admin listing clients
+* [#326] Admin modification creation client
+* [#325] Correction diverses
+* fix layout admin
+* Creation page admin listing bovins
+* Creation page admin ajout/modification bovins
+* [#331] Mettre à jour l'entité Shipment et bovin_shipment
+* [#278] Plan du site
+* [#334] Correctifs
+* [#332] Refonte écran réception terminée
+* [#327] afficher/modifier écran expédition terminée
+* [#352] modification front admin fournisseur
+* [#355] modification front admin transporteur
+* [#356] front page admin bovin
+* [#353] modification front admin client
 ### Changed

 ### Fixed
+
--- a/DEPLOYMENT.md
+++ b/DEPLOYMENT.md
@@ -68,10 +68,21 @@

 1. Créer un tag sur `develop` (auto-tag `v0.0.X`)
 2. Attendre que la release Gitea soit publiée
-3. Déployer la release
+3. (Une seule fois) Donner les droits d'écriture à PHP sur `var/` via ACL
   ```bash
-   sudo DEPLOY_OWNER=malio /usr/local/bin/deploy-ferme v0.0.X
+   sudo apt update
+   sudo apt install -y acl
+   sudo setfacl -R -m u:malio:rwx,g:www-data:rwx /var/www/ferme/var
+   sudo setfacl -R -m d:u:malio:rwx,d:g:www-data:rwx /var/www/ferme/var
   ```
+4. Déployer la release
+   ```bash
+   /usr/local/bin/deploy-ferme vX.Y.Z
+   ```
+   Notes :
+   - Lancer le déploiement en tant que `malio` (ou `sudo -u malio`) pour éviter de casser les droits.
+   - Le script applique `umask 002` pour garder les fichiers group-writable (`www-data`).
+   - Le script force des droits d'exécution minimaux sur `/var/www` et `/var/www/ferme` pour éviter un blocage Nginx.

 ### Vérifications
 - Front : `http://ferme.malio-dev.fr/`
--- a/README.md
+++ b/README.md
@@ -28,7 +28,7 @@ Vérifier que dans le .env.local, vous avez :
 * JWT_SECRET_KEY (à générer avec la commande php bin/console lexik:jwt:generate-keypair)
 * JWT_PUBLIC_KEY 
 * JWT_PASSPHRASE (à généré dans le conteneur avec la commande php -r "echo bin2hex(random_bytes(32));")
-* COOKIE_SECURE=0 (en dev 0 et en prod 1)
+* COOKIE_SECURE=0 (en dev 0 et en prod 1. Si c'est du http, laisser en 0)

 Vérifier que dans le .env du dossier frontend, vous avez :
 * NUXT_PUBLIC_API_BASE="http://localhost:8080/api"
@@ -71,6 +71,18 @@ Le frontend ne lit jamais directement le token, le navigateur envoie automatique
 - Le cookie est automatiquement envoyé pour les futures requêtes.
 - La déconnexion utilise `POST /api/logout` et redirige vers `/login`.

+### Fixtures
+Pour lancer les fixtures (Attention sa purge la bdd complètement)
+```bash
+php bin/console doctrine:fixtures:load
+```
+
+Attention cette commande est dangereuse, à utiliser que pour les débuts de la prod ou en recette.
+Dans un premier temps pour remplir les listes, vous pouvez lancer la commande symfony
+```bash
+php bin/console app:seed
+```
+La commande va faire une update ou une création en fonction des data existante.

 ## Livraison en recette
 ### Préparatifs
@@ -82,8 +94,8 @@ Sur la machine, il est disponible dans /usr/local/bin/deploy-ferme <br>
 Pour le modifier, il faut copier le contenu du deploy-release.sh dans le deploy-ferme
 ### Livraison
 Sur le serveur de recette, il suffit d'utiliser cette commande pour livrer
-```bash
-sudo DEPLOY_OWNER=malio /usr/local/bin/deploy-ferme vX.X.X
+```bash 
+/usr/local/bin/deploy-ferme vX.Y.Z
 ```
 ## Commandes utiles
 Pour restart le container
@@ -116,3 +128,7 @@ Sélectionner entity User, taper sont mdp, le copier et l'ajouter dans l'insert
 INSERT INTO "user" (username, roles, password)
 VALUES ('Mon user', '["ROLE_USER"]', 'Mon mdp hashé');
 ```
+## Gestion des logs
+Pour suivre les logs en temps réel :
+* tail -f var/log/dev.log 
+* tail -f var/log/prod.log
--- a/composer.json
+++ b/composer.json
@@ -14,6 +14,7 @@
        "doctrine/orm": "^3.6",
        "dompdf/dompdf": "^3.1",
        "lexik/jwt-authentication-bundle": "*",
+        "malio/ednotif-bundle": ">=0.0.4",
        "nelmio/cors-bundle": "^2.6",
        "phpdocumentor/reflection-docblock": "^5.6",
        "phpstan/phpdoc-parser": "^2.3",
@@ -24,6 +25,7 @@
        "symfony/flex": "^2",
        "symfony/framework-bundle": "8.0.*",
        "symfony/http-client": "8.0.*",
+        "symfony/monolog-bundle": "^4.0",
        "symfony/property-access": "8.0.*",
        "symfony/property-info": "8.0.*",
        "symfony/runtime": "8.0.*",
@@ -86,9 +88,19 @@
        }
    },
    "require-dev": {
+        "doctrine/doctrine-fixtures-bundle": "^4.3",
        "friendsofphp/php-cs-fixer": "^3.92",
        "phpunit/phpunit": "^12.5",
        "symfony/browser-kit": "8.0.*",
-        "symfony/css-selector": "8.0.*"
-    }
+        "symfony/css-selector": "8.0.*",
+        "symfony/maker-bundle": "^1.65",
+        "symfony/stopwatch": "8.0.*",
+        "symfony/web-profiler-bundle": "8.0.*"
+    },
+    "repositories": [
+        {
+            "type": "vcs",
+            "url": "https://gitea.malio.fr/MALIO-DEV/ednotif-bundle"
+        }
+    ]
 }
--- a/composer.lock
+++ b/composer.lock
--- a/config/bundles.php
+++ b/config/bundles.php
@@ -4,12 +4,17 @@ declare(strict_types=1);

 use ApiPlatform\Symfony\Bundle\ApiPlatformBundle;
 use Doctrine\Bundle\DoctrineBundle\DoctrineBundle;
+use Doctrine\Bundle\FixturesBundle\DoctrineFixturesBundle;
 use Doctrine\Bundle\MigrationsBundle\DoctrineMigrationsBundle;
 use Lexik\Bundle\JWTAuthenticationBundle\LexikJWTAuthenticationBundle;
+use Malio\EdnotifBundle\EdnotifBundle;
 use Nelmio\CorsBundle\NelmioCorsBundle;
 use Symfony\Bundle\FrameworkBundle\FrameworkBundle;
+use Symfony\Bundle\MakerBundle\MakerBundle;
+use Symfony\Bundle\MonologBundle\MonologBundle;
 use Symfony\Bundle\SecurityBundle\SecurityBundle;
 use Symfony\Bundle\TwigBundle\TwigBundle;
+use Symfony\Bundle\WebProfilerBundle\WebProfilerBundle;

 return [
    FrameworkBundle::class              => ['all' => true],
@@ -20,4 +25,9 @@ return [
    NelmioCorsBundle::class             => ['all' => true],
    LexikJWTAuthenticationBundle::class => ['all' => true],
    ApiPlatformBundle::class            => ['all' => true],
+    MonologBundle::class                => ['all' => true],
+    EdnotifBundle::class                => ['all' => true],
+    WebProfilerBundle::class            => ['dev' => true],
+    DoctrineFixturesBundle::class       => ['dev' => true, 'test' => true],
+    MakerBundle::class                  => ['dev' => true],
 ];
--- a/config/packages/ednotif.yaml
+++ b/config/packages/ednotif.yaml
@@ -0,0 +1,13 @@
+ednotif:
+    guichet_wsdl: 'https://ws-reswel-elv.equade.fr/wsguichet/WsGuichet?wsdl'
+    metier_wsdl:  'https://ws-ednotif.equade.fr/wsIpBNotif/wsIpBNotif?wsdl'
+    exploitation_code: '%env(string:EDNOTIF_EXPLOITATION_CODE)%'
+    exploitation_number: '%env(string:EDNOTIF_EXPLOITATION_NUMERO)%'
+    exploitation_country_code: 'FR'
+    login: '%env(string:EDNOTIF_LOGIN)%'
+    password: '%env(string:EDNOTIF_PASSWORD)%'
+    token_ttl_seconds: 900
+    soap_options:
+        trace: false
+        exceptions: true
+        connection_timeout: 15
--- a/config/packages/monolog.yaml
+++ b/config/packages/monolog.yaml
@@ -0,0 +1,28 @@
+monolog:
+    channels: [deprecation]
+
+when@dev:
+    monolog:
+        handlers:
+            main:
+                type: stream
+                path: "%kernel.logs_dir%/%kernel.environment%.log"
+                level: debug
+                channels: ["!event"]
+            console:
+                type: console
+                process_psr_3_messages: false
+                channels: ["!event", "!doctrine", "!console"]
+
+when@prod:
+    monolog:
+        handlers:
+            main:
+                type: stream
+                path: "%kernel.logs_dir%/%kernel.environment%.log"
+                level: debug
+                channels: ["!deprecation"]
+            deprecation:
+                type: stream
+                channels: [deprecation]
+                path: "%kernel.logs_dir%/deprecations.log"
--- a/config/packages/security.yaml
+++ b/config/packages/security.yaml
@@ -53,6 +53,8 @@ security:
        - { path: ^/api/users, roles: PUBLIC_ACCESS, methods: [GET] }
        # Doc API (swagger) en public
        - { path: ^/api/docs, roles: PUBLIC_ACCESS }
+        # Version de l'application en public
+        - { path: ^/api/version, roles: PUBLIC_ACCESS, methods: [GET] }
        # Tout le reste nécessite un JWT
        - { path: ^/, roles: IS_AUTHENTICATED_FULLY }

--- a/config/packages/web_profiler.yaml
+++ b/config/packages/web_profiler.yaml
@@ -0,0 +1,7 @@
+when@dev:
+    web_profiler:
+        toolbar: true
+
+    framework:
+        profiler:
+            collect_serializer_data: true
--- a/config/reference.php
+++ b/config/reference.php
--- a/config/routes/web_profiler.yaml
+++ b/config/routes/web_profiler.yaml
@@ -0,0 +1,8 @@
+when@dev:
+    web_profiler_wdt:
+        resource: '@WebProfilerBundle/Resources/config/routing/wdt.php'
+        prefix: /_wdt
+
+    web_profiler_profiler:
+        resource: '@WebProfilerBundle/Resources/config/routing/profiler.php'
+        prefix: /_profiler
--- a/config/services.yaml
+++ b/config/services.yaml
@@ -8,6 +8,9 @@
 # https://symfony.com/doc/current/best_practices.html#use-parameters-for-application-configuration
 parameters:

+imports:
+    - { resource: version.yaml }
+
 services:
    # default configuration for services in *this* file
    _defaults:
--- a/config/version.yaml
+++ b/config/version.yaml
@@ -0,0 +1,2 @@
+parameters:
+    app.version: '0.0.66'
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -14,6 +14,8 @@ services:
      XDEBUG_CLIENT_HOST: ${XDEBUG_CLIENT_HOST:-host.docker.internal}
      XDEBUG_CONFIG: client_host=${XDEBUG_CLIENT_HOST:-host.docker.internal} client_port=9003
      DATABASE_URL: "postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@db:5432/${POSTGRES_DB}?serverVersion=16&charset=utf8"
+      COMPOSER_HOME: /tmp/composer
+      COMPOSER_CACHE_DIR: /tmp/composer/cache
    volumes:
      - ./:/var/www/html
      - ~/.cache:/var/www/.cache # Pour la cache de composer
--- a/docker/.env.docker
+++ b/docker/.env.docker
@@ -7,3 +7,5 @@ POSTGRES_USER=root
 POSTGRES_PASSWORD=root
 POSTGRES_PORT=5432
 XDEBUG_CLIENT_HOST=host.docker.internal
+CURRENT_UID=1004
+CURRENT_GID=1004
--- a/docker/nginx/conf.d/ferme.conf
+++ b/docker/nginx/conf.d/ferme.conf
@@ -10,6 +10,16 @@ server {
        try_files $uri /index.php?$query_string;
    }

+    location ^~ /_wdt/ {
+        root /var/www/html/public;
+        try_files $uri /index.php?$query_string;
+    }
+
+    location ^~ /_profiler/ {
+        root /var/www/html/public;
+        try_files $uri /index.php?$query_string;
+    }
+
    location ^~ /bundles/ {
        root /var/www/html/public;
        try_files $uri =404;
--- a/docker/php/Dockerfile
+++ b/docker/php/Dockerfile
@@ -102,6 +102,11 @@ RUN docker-php-ext-enable opcache
 RUN rm -rf /var/cache/apk/* && rm -rf /tmp/* && \
    curl --insecure https://getcomposer.org/composer.phar -o /usr/bin/composer && chmod +x /usr/bin/composer

+# cache Composer pour www-data
+RUN mkdir -p /var/www/.composer/cache/vcs \
+&& chown -R www-data:www-data /var/www/.composer
+ENV COMPOSER_HOME=/var/www/.composer
+
 # Création de la structure du projet
 RUN mkdir /var/www/html/LOG

--- a/frontend/app.vue
+++ b/frontend/app.vue
@@ -3,3 +3,11 @@
    <NuxtPage />
  </NuxtLayout>
 </template>
+
+<script setup lang="ts">
+const { load } = useAppVersion()
+
+onMounted(() => {
+    load()
+})
+</script>
--- a/frontend/assets/css/main.css
+++ b/frontend/assets/css/main.css
@@ -0,0 +1,9 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  body {
+    @apply font-sans;
+  }
+}
--- a/frontend/components/address.vue
+++ b/frontend/components/address.vue
@@ -0,0 +1,101 @@
+<template>
+    <form @submit.prevent="validateForm">
+        <div class="flex items-center mb-11 justify-between relative">
+            <div class="flex flex-row absolute -left-[60px] ">
+                <Icon @click="goBack" name="gg:arrow-left-o" size="40" class="cursor-pointer text-primary-500"/>
+            </div>
+            <h1 class="text-3xl text-primary-500 font-bold uppercase">
+                {{ props.address ? "Modification d'une adresse" : "Ajout d'une adresse" }}
+            </h1>
+        </div>
+
+        <div class="grid grid-cols-2 gap-y-16 gap-x-[200px] mb-16">
+            <UiTextInput id="address-label" v-model="form.label" label="Libellé" />
+            <UiTextInput id="address-street" v-model="form.street" label="Rue" />
+            <UiTextInput id="address-street2" v-model="form.street2" label="Complément" />
+            <UiTextInput id="address-postalCode" v-model="form.postalCode" label="Code postal" />
+            <UiTextInput id="address-city" v-model="form.city" label="Ville" />
+            <UiTextInput id="address-country" v-model="form.countryCode" label="Pays (code)" />
+        </div>
+        <div class="flex justify-center items-center">
+        <UiButton
+            class="inline-flex items-center justify-center text-xl text-white uppercase bg-primary-500 h-[50px] rounded hover:opacity-80 justify-self-end"
+            type="submit"
+            :disabled="isLoading"
+        >
+            Valider
+        </UiButton>
+        </div>
+    </form>
+</template>
+
+<script setup lang="ts">
+import type { AddressPayload } from "~/services/address"
+
+
+const route = useRoute()
+const router = useRouter()
+
+const props = defineProps<{
+    type?: "supplier" | "customer",
+    address?: AddressPayload | null
+}>()
+
+const isLoading = ref(false)
+
+const emptyForm = (): AddressPayload => ({
+    label: "",
+    street: "",
+    street2: null,
+    postalCode: "",
+    city: "",
+    countryCode: "",
+})
+
+const form = reactive<AddressPayload>(emptyForm())
+
+const backPath = computed(() => {
+    if (props.type === "customer") {
+        const customerId = Number(route.query.customerId)
+        return Number.isFinite(customerId) && customerId > 0
+            ? `/admin/customer/${customerId}`
+            : "/admin/customer/customer-list"
+    }
+
+    const supplierId = Number(route.query.supplierId)
+    return Number.isFinite(supplierId) && supplierId > 0
+        ? `/admin/supplier/${supplierId}`
+        : "/admin/supplier/supplier-list"
+})
+
+const hydrateForm = (address?: AddressPayload | null) => {
+    const data = address ?? emptyForm()
+    form.label = data.label ?? ""
+    form.street = data.street ?? ""
+    form.street2 = data.street2 ?? null
+    form.postalCode = data.postalCode ?? ""
+    form.city = data.city ?? ""
+    form.countryCode = data.countryCode ?? ""
+}
+
+watch(
+    () => props.address,
+    (addr) => {
+        hydrateForm(addr)
+    },
+    { immediate: true }
+)
+
+const validateForm = () => {
+    if (isLoading.value) return
+    emit("validate", {...form})
+}
+
+const goBack = () => {
+    router.push(backPath.value)
+}
+
+const emit = defineEmits<{
+    (event: 'validate', form: AddressPayload): void
+}>()
+</script>
--- a/frontend/components/card-link.vue
+++ b/frontend/components/card-link.vue
@@ -0,0 +1,29 @@
+
+
+<template>
+    <NuxtLink :to="link">
+        <div class="w-[300px] h-[216px] border border-primary-700 rounded-lg p-6 flex flex-col justify-between gap-4">
+            <div class="flex justify-between">
+                <div class="rounded-full w-[80px] h-[80px] bg-[#D9D9D9] flex justify-center items-center">
+                    <Icon :name="iconName" class="!text-primary-700" size="44" />
+                </div>
+                <div>
+                    <Icon name="mdi:plus" style="color: black" size="44"  />
+                </div>
+            </div>
+            <div class="uppercase font-bold">
+                <p class="text-3xl text-primary-700">
+                    <slot name="label">{{ label }}</slot>
+                </p>
+            </div>
+        </div>
+        </NuxtLink>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+    link: string
+    iconName: string
+    label: string
+}>()
+</script>
--- a/frontend/components/commun/update-weight.vue
+++ b/frontend/components/commun/update-weight.vue
@@ -0,0 +1,63 @@
+<template>
+    <form>
+        <div class="grid grid-cols-3 gap-x-40 gap-y-8 mb-8">
+            <UiNumberInput
+                :key="localWeight.type"
+                :label="'POIDS'"
+                labelClass="font-bold uppercase text-xl "
+                v-model="localWeight.weight"
+                :disabled="!isAdmin"
+                :min="0"
+                :max="48000"
+                wrapper-class="flex-col"
+            />
+
+            <UiDateInput
+                label="Date de pesée"
+                v-model="localWeight.weighedAt"
+                :disabled="!isAdmin"
+            />
+
+            <UiNumberInput
+                label="Dsd"
+                class="col-start-2"
+                labelClass="font-bold uppercase"
+                v-model="localWeight.dsd"
+                :disabled="!isAdmin"
+                wrapper-class="flex-col"
+            />
+        </div>
+    </form>
+</template>
+
+<script setup lang="ts">
+import type {WeightEntryData} from '~/services/dto/weight-data'
+import {reactive, watch} from "vue";
+
+const props = defineProps<{
+    modelValue: WeightEntryData
+    isAdmin: boolean
+}>()
+
+const emit = defineEmits<{
+    (event: 'update:modelValue', value: WeightEntryData): void
+}>()
+
+const localWeight = reactive<WeightEntryData>({...props.modelValue})
+
+watch(
+    () => props.modelValue,
+    (value) => {
+        Object.assign(localWeight, value)
+    },
+    {deep: true}
+)
+
+watch(
+    localWeight,
+    (value) => {
+        emit('update:modelValue', {...value})
+    },
+    {deep: true}
+)
+</script>
--- a/frontend/components/reception/reception-bovine-received.vue
+++ b/frontend/components/reception/reception-bovine-received.vue
@@ -0,0 +1,191 @@
+<template>
+    <div
+        v-if="receptionStore.current?.receptionType?.code === RECEPTION_TYPE_CODES.BOVINS"
+        class="flex flex-col gap-16">
+        <h1 class="text-4xl uppercase font-bold text-primary-500">Sélection des races réceptionnées</h1>
+        <div
+            class="flex flex-row gap-8 items-center w-full">
+            <div
+                v-for="type in bovineType"
+                :key="type.id"
+                class="mt-8 flex flex-row mb-2 w-full">
+                <UiNumberInput
+                    :id="type.id"
+                    :label="type.label"
+                    :code="type.code"
+                    v-model="bovineQuantities[String(type.id)]"
+                    :placeholder="0"
+                    :min="0"
+                    :max="10"
+                    class="max-w-[150px]"
+                    wrapper-class="gap-3"
+                />
+            </div>
+            <div
+                class="mt-8 flex flex-row mb-2 gap-6">
+                <UiNumberInput
+                    label="Autres"
+                    v-model="otherQuantity"
+                    class="max-w-[80px]"
+                    wrapper-class="gap-3"
+                />
+            </div>
+        </div>
+        <div class="flex justify-center">
+            <UiButton
+                type="submit"
+                class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] justify-self-end"
+                @click="goNext"
+            >Valider
+            </UiButton>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import type {BovineTypeData} from "~/services/dto/bovine-type-data";
+import {getBovineTypeList} from "~/services/bovine-type";
+import {RECEPTION_TYPE_CODES} from "~/utils/constants";
+import {useReceptionStore} from '~/stores/reception'
+import {
+    createReceptionBovine,
+    deleteReceptionBovine,
+    getReceptionBovineList,
+    updateReceptionBovine
+} from "~/services/reception-bovine";
+import {computed, onMounted, reactive, ref, watch} from "vue";
+
+const toast = useToast()
+const isLoadingBovineType = ref(false)
+const bovineType = ref<BovineTypeData[]>([])
+const receptionStore = useReceptionStore()
+const bovineQuantities = reactive<Record<string, number | null>>({})
+const otherQuantity = ref<number | null>(0)
+const receptionId = computed(() => receptionStore.current?.id ?? null)
+const receptionIri = computed(() =>
+    receptionId.value ? `/api/receptions/${receptionId.value}` : null
+)
+const totalBovines = computed(() => {
+    const base = Object.values(bovineQuantities).reduce((sum, value) => {
+        return sum + (value ?? 0)
+    }, 0)
+    return base + (otherQuantity.value ?? 0)
+})
+
+const loadBovineType = async () => {
+    isLoadingBovineType.value = true
+    try {
+        bovineType.value = await getBovineTypeList()
+    } finally {
+        isLoadingBovineType.value = false
+    }
+}
+
+onMounted(async () => {
+    await loadBovineType()
+})
+
+watch(
+    [() => receptionId.value, () => bovineType.value],
+    async ([id, types]) => {
+        if (!id || !receptionIri.value || types.length === 0) {
+            return
+        }
+
+        const selectionMap: Record<string, number | null> = {}
+        for (const type of types) {
+            selectionMap[String(type.id)] = 0
+        }
+
+        const existing = await getReceptionBovineList(receptionIri.value)
+        for (const selection of existing) {
+            const bovineTypeId = String(selection.bovineType.id)
+            selectionMap[bovineTypeId] = selection.quantity ?? 0
+        }
+
+        for (const key of Object.keys(bovineQuantities)) {
+            delete bovineQuantities[key]
+        }
+        Object.assign(bovineQuantities, selectionMap)
+
+        const existingOther = receptionStore.current?.bovineDetail
+        const parsedOther =
+            typeof existingOther === 'string' && existingOther.trim() !== ''
+                ? Number(existingOther)
+                : 0
+        otherQuantity.value = Number.isFinite(parsedOther) ? parsedOther : 0
+    },
+    {immediate: true}
+)
+
+async function syncBovineSelections(receptionIri: string) {
+    const existing = await getReceptionBovineList(receptionIri)
+    const existingMap = new Map<string, { id: number; quantity: number | null }>()
+
+    for (const selection of existing) {
+        const bovineTypeId = String(selection.bovineType.id)
+        existingMap.set(bovineTypeId, {
+            id: selection.id,
+            quantity: selection.quantity ?? 0
+        })
+    }
+
+    // Supprime les entrées supprimées ou modifiées
+    for (const [bovineTypeId, entry] of existingMap.entries()) {
+        const selectedQuantity = bovineQuantities[bovineTypeId] ?? 0
+        if (!selectedQuantity) {
+            await deleteReceptionBovine(entry.id)
+            existingMap.delete(bovineTypeId)
+            continue
+        }
+
+        if (selectedQuantity !== entry.quantity) {
+            await updateReceptionBovine(entry.id, {quantity: selectedQuantity})
+            existingMap.set(bovineTypeId, {
+                id: entry.id,
+                quantity: selectedQuantity
+            })
+        }
+    }
+
+    // Crée les entrées manquantes
+    for (const [bovineTypeId, quantity] of Object.entries(bovineQuantities)) {
+        if (!quantity) {
+            continue
+        }
+        if (existingMap.has(bovineTypeId)) {
+            // Déjà à jour
+            continue
+        }
+        await createReceptionBovine({
+            reception: receptionIri,
+            bovineType: `/api/bovine_types/${bovineTypeId}`,
+            quantity
+        })
+    }
+}
+
+async function goNext() {
+    if (!receptionStore.current || !receptionIri.value) {
+        return
+    }
+
+    // @TODO Ajouter un composable pour le toaster qui gère les key i18n
+    if (totalBovines.value > 52) {
+        toast.error({
+            title: 'Erreur',
+            message: ('Le total des bovins ne peut pas dépasser 52.')
+        })
+        return
+    }
+
+    const nextStep = receptionStore.current.currentStep + 1
+    await syncBovineSelections(receptionIri.value)
+
+    await receptionStore.updateReception(receptionStore.current.id, {
+        merchandiseType: null,
+        merchandiseDetail: null,
+        bovineDetail: otherQuantity.value ? String(otherQuantity.value) : null,
+        currentStep: nextStep
+    })
+}
+</script>
--- a/frontend/components/reception/reception-form.vue
+++ b/frontend/components/reception/reception-form.vue
@@ -1,67 +1,514 @@
 <template>
    <form @submit.prevent="validate">
-        <div class="grid grid-cols-1 items-start gap-8 mb-16">
-            <h1 class="font-bold text-5xl uppercase">Réception</h1>
-            <div>
+        <div class="grid grid-cols-2 items-start gap-y-8 gap-x-40 mb-16">
+            <h1 class="font-bold text-5xl uppercase col-start-1 row-start-1 text-primary-500">Réception</h1>
+            <!--    Nom de l'utilisateur       -->
+            <UiSelect
+                id="reception-user"
+                v-model="form.userId"
+                label="Nom de l'utilisateur"
+                :options="users.map((user) => ({
+                    value: String(user.id),
+                    label: user.username
+                }))"
+                :loading="isLoadingUsers"
+                wrapper-class="col-start-1 row-start-2"
+            />
+            <!--    Date de réception        -->
+            <UiDateInput
+                id="reception-date"
+                v-model="form.receptionDate"
+                label="Date de réception"
+                wrapper-class="col-start-1 row-start-3"
+            />
+            <!--    Type de réception        -->
+            <UiSelect
+                id="reception-type"
+                v-model="form.receptionTypeId"
+                label="Type de réception"
+                :options="receptionTypes.map((type) => ({
+                    value: String(type.id),
+                    label: type.label
+                }))"
+                wrapper-class="col-start-1 row-start-4"
+            />
+            <!--    Fournisseur        -->
+            <UiSelect
+                id="reception-supplier"
+                v-model="form.supplierId"
+                label="Fournisseur"
+                :options="suppliers.map((supplier) => ({
+                    value: String(supplier.id),
+                    label: supplier.name
+                }))"
+                :loading="isLoadingSuppliers"
+                wrapper-class="col-start-1 row-start-5"
+            />
+            <!--    Adresse fournisseur        -->
+            <UiSelect
+                id="reception-address"
+                v-model="form.addressId"
+                label="Adresse"
+                :options="supplierAddresses.map((address) => ({
+                    value: String(address.id),
+                    label: address.fullAddress
+                }))"
+                :disabled="isLoadingSuppliers || supplierAddresses.length === 0"
+                wrapper-class="col-start-2 row-start-1"
+            />
+            <!--    Camion        -->
+            <UiSelect
+                id="reception-truck"
+                v-model="form.truckId"
+                label="Camion"
+                :options="trucks.map((truck) => ({
+                    value: String(truck.id),
+                    label: truck.name
+                }))"
+                :loading="isLoadingTrucks"
+                wrapper-class="col-start-2 row-start-2"
+            />
+            <!--    Transporteur        -->
+            <UiSelect
+                id="reception-carrier"
+                v-model="form.carrierId"
+                label="Transporteur"
+                :options="carriers.map((carrier) => ({
+                    value: String(carrier.id),
+                    label: carrier.name
+                }))"
+                :loading="isLoadingCarriers"
+                select-class="h-[34px]"
+                wrapper-class="col-start-2 row-start-3"
+            />
+            <!--    Plaque d'immatriculation       -->
+            <div v-if="!isLiotCarrier" class="col-start-2 row-start-4">
                <UiLicensePlateInput
                    v-model="form.licensePlate"
                    v-model:allowAny="allowAnyLicensePlate"
                />
            </div>
-            <div class="flex flex-col">
-                <label for="reception-date" class="font-bold uppercase text-xl mb-4">Date de reception</label>
-                <input
-                    id="reception-date"
-                    v-model="form.receptionDate"
-                    type="date"
-                    class="border-b border-black justify-self-start text-xl pb-[6px] uppercase"
-                />
-            </div>
+            <!--    Immatriculation (LIOT)        -->
+            <UiSelect
+                v-if="isLiotCarrier"
+                id="reception-vehicle"
+                v-model="form.vehicleId"
+                label="Immatriculation"
+                :options="filteredVehicles.map((vehicle) => ({
+                    value: String(vehicle.id),
+                    label: vehicle.plate
+                }))"
+                :loading="isLoadingVehicles"
+                :disabled="isLoadingVehicles || filteredVehicles.length === 0"
+                wrapper-class="col-start-2 row-start-4 h-[64px]"
+            />
+            <!--    Chauffeur (LIOT)        -->
+            <UiSelect
+                id="reception-driver"
+                v-model="form.driverId"
+                label="Nom du chauffeur si LIOT"
+                :options="filteredDrivers.map((driver) => ({
+                    value: String(driver.id),
+                    label: driver.name
+                }))"
+                :loading="isLoadingDrivers"
+                v-if="isLiotCarrier"
+                wrapper-class="col-start-2 row-start-5"
+            />
        </div>
        <div class="flex justify-center">
-            <button
+            <UiButton
                type="submit"
                class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] justify-self-end"
-            >Peser
-            </button>
+            >Valider
+            </UiButton>
        </div>
    </form>
+
 </template>

 <script setup lang="ts">
-import { useReceptionStore } from '~/stores/reception'
-
-type ReceptionFormData = {
-    licensePlate: string
-    receptionDate: string
-}
+import {useReceptionStore} from '~/stores/reception'
+import type {ReceptionTypeData} from '~/services/dto/reception-type-data'
+import {getReceptionTypeList} from '~/services/reception-type'
+import type {UserData} from '~/services/dto/user-data'
+import {getUsers} from '~/services/auth'
+import {useAuthStore} from '~/stores/auth'
+import type {SupplierData} from '~/services/dto/supplier-data'
+import {getSupplierList} from '~/services/supplier'
+import type {TruckData} from '~/services/dto/truck-data'
+import {getTruckList} from '~/services/truck'
+import type {CarrierData} from '~/services/dto/carrier-data'
+import {getCarrierList} from '~/services/carrier'
+import type {DriverData} from '~/services/dto/driver-data'
+import {getDriverList} from '~/services/driver'
+import type {VehicleData} from '~/services/dto/vehicle-data'
+import {getVehicleList} from '~/services/vehicle'
+import {RECEPTION_TYPE_CODES, SUPPLIER_CODE} from "~/utils/constants";
+import {deleteReceptionBovine, getReceptionBovineList} from "~/services/reception-bovine";
+import type {ReceptionFormData} from "~/services/dto/reception-data";

 const router = useRouter()
 const receptionStore = useReceptionStore()
 const form = reactive<ReceptionFormData>({
    licensePlate: '',
-    receptionDate: new Date().toISOString().slice(0, 10)
+    receptionDate: new Date().toISOString().slice(0, 10),
+    receptionTypeId: '',
+    userId: '',
+    supplierId: '',
+    addressId: '',
+    truckId: '',
+    carrierId: '',
+    driverId: '',
+    vehicleId: ''
 })
 const allowAnyLicensePlate = ref(false)
+const receptionTypes = ref<ReceptionTypeData[]>([])
+const users = ref<UserData[]>([])
+const isLoadingUsers = ref(false)
+const suppliers = ref<SupplierData[]>([])
+const isLoadingSuppliers = ref(false)
+const trucks = ref<TruckData[]>([])
+const isLoadingTrucks = ref(false)
+const carriers = ref<CarrierData[]>([])
+const isLoadingCarriers = ref(false)
+const drivers = ref<DriverData[]>([])
+const isLoadingDrivers = ref(false)
+const vehicles = ref<VehicleData[]>([])
+const isLoadingVehicles = ref(false)
+const authStore = useAuthStore()
+// Empêche les watchers de reset des champs pendant le remplissage initial
+const isHydrating = ref(false)

+// Transporteur sélectionné dans le formulaire
+const selectedCarrier = computed(() =>
+    carriers.value.find((carrier) => String(carrier.id) === form.carrierId) ?? null
+)
+// Indique si le transporteur est LIOT
+const isLiotCarrier = computed(() => selectedCarrier.value?.code === SUPPLIER_CODE.LIOT)
+// Adresses disponibles pour le fournisseur sélectionné
+const supplierAddresses = computed(() => {
+    const supplierId = Number(form.supplierId)
+    if (!Number.isFinite(supplierId)) {
+        return []
+    }
+    return suppliers.value.find((supplier) => supplier.id === supplierId)?.addresses ?? []
+})
+// Chauffeurs filtrés par transporteur (LIOT)
+const filteredDrivers = computed<DriverData[]>(() => {
+    if (!form.carrierId) {
+        return []
+    }
+    return drivers.value.filter((driver) => String(driver.carrier?.id) === form.carrierId)
+})
+// Véhicules filtrés par transporteur + type de camion
+const filteredVehicles = computed<VehicleData[]>(() => {
+    if (!form.carrierId) {
+        return []
+    }
+    return vehicles.value.filter(
+        (vehicle) =>
+            String(vehicle.carrier?.id) === form.carrierId &&
+            (!form.truckId || String(vehicle.truck?.id) === form.truckId)
+    )
+})
+
+const selectedReceptionType = computed(() =>
+    receptionTypes.value.find((type) => String(type.id) === form.receptionTypeId) ?? null
+)
+
+// Supprime les données bovines si on change de type de réception
+const clearReceptionBovines = async (receptionIri: string) => {
+    const existing = await getReceptionBovineList(receptionIri)
+    for (const selection of existing) {
+        await deleteReceptionBovine(selection.id)
+    }
+}
+
+// Hydrate le formulaire depuis la réception en cours
 watch(
    () => receptionStore.current,
    (reception) => {
+        isHydrating.value = true
        form.licensePlate = reception?.licensePlate ?? ''
        form.receptionDate = reception?.receptionDate ?? new Date().toISOString().slice(0, 10)
+        form.receptionTypeId = reception?.receptionType?.id
+            ? String(reception.receptionType.id)
+            : ''
+        form.userId = reception?.user?.id
+            ? String(reception.user.id)
+            : form.userId
+        form.supplierId = reception?.supplier?.id
+            ? String(reception.supplier.id)
+            : ''
+        form.addressId = reception?.address?.id
+            ? String(reception.address.id)
+            : ''
+        form.truckId = reception?.truck?.id
+            ? String(reception.truck.id)
+            : ''
+        form.carrierId = reception?.carrier?.id
+            ? String(reception.carrier.id)
+            : ''
+        form.driverId = reception?.driver?.id
+            ? String(reception.driver.id)
+            : ''
+        isHydrating.value = false
    },
-    { immediate: true }
+    {immediate: true}
 )

+// Charge la liste des users pour le select
+const loadUsers = async () => {
+    isLoadingUsers.value = true
+    try {
+        users.value = await getUsers()
+    } finally {
+        isLoadingUsers.value = false
+    }
+}
+
+// Charge la liste des fournisseurs pour le select
+const loadSuppliers = async () => {
+    isLoadingSuppliers.value = true
+    try {
+        suppliers.value = await getSupplierList()
+    } finally {
+        isLoadingSuppliers.value = false
+    }
+}
+
+// Charge la liste des camions pour le select
+const loadTrucks = async () => {
+    isLoadingTrucks.value = true
+    try {
+        trucks.value = await getTruckList()
+    } finally {
+        isLoadingTrucks.value = false
+    }
+}
+
+// Charge la liste des transporteurs pour le select
+const loadCarriers = async () => {
+    isLoadingCarriers.value = true
+    try {
+        carriers.value = await getCarrierList()
+    } finally {
+        isLoadingCarriers.value = false
+    }
+}
+
+// Charge la liste des chauffeurs pour le select
+const loadDrivers = async () => {
+    isLoadingDrivers.value = true
+    try {
+        drivers.value = await getDriverList()
+    } finally {
+        isLoadingDrivers.value = false
+    }
+}
+
+// Charge la liste des véhicules pour le select
+const loadVehicles = async () => {
+    isLoadingVehicles.value = true
+    try {
+        vehicles.value = await getVehicleList()
+    } finally {
+        isLoadingVehicles.value = false
+    }
+}
+
+// On met le user connecté par défaut dans le select
+const setDefaultUser = () => {
+    if (form.userId) {
+        return
+    }
+    if (authStore.user?.id) {
+        form.userId = String(authStore.user.id)
+    }
+}
+
+// On récupère toutes les données des selects au chargement du composant
+onMounted(async () => {
+    receptionTypes.value = await getReceptionTypeList()
+    await loadUsers()
+    await loadSuppliers()
+    await loadTrucks()
+    await loadCarriers()
+    await loadDrivers()
+    await loadVehicles()
+    await authStore.ensureSession()
+    setDefaultUser()
+})
+
+// Ajuste driver/vehicle quand le transporteur change (logique LIOT)
+watch(
+    () => [form.supplierId, form.addressId, suppliers.value],
+    () => {
+        if (!form.supplierId) {
+            form.addressId = ''
+            return
+        }
+        if (!form.addressId && supplierAddresses.value.length === 1) {
+            form.addressId = String(supplierAddresses.value[0].id)
+            return
+        }
+        if (!form.addressId) {
+            return
+        }
+        const matches = supplierAddresses.value.some(
+            (address) => String(address.id) === form.addressId
+        )
+        if (!matches) {
+            if (supplierAddresses.value.length === 1) {
+                form.addressId = String(supplierAddresses.value[0].id)
+            } else {
+                form.addressId = ''
+            }
+        }
+    },
+    {immediate: true}
+)
+
+// Valide/auto-sélectionne le véhicule selon camion + transporteur (LIOT)
+watch(
+    () => form.carrierId,
+    () => {
+        if (isHydrating.value) {
+            return
+        }
+        if (!form.carrierId) {
+            form.driverId = ''
+            form.vehicleId = ''
+            return
+        }
+        if (!isLiotCarrier.value) {
+            form.driverId = ''
+            form.vehicleId = ''
+            return
+        }
+        if (filteredDrivers.value.length === 1) {
+            form.driverId = String(filteredDrivers.value[0].id)
+        }
+        if (filteredVehicles.value.length === 1) {
+            form.vehicleId = String(filteredVehicles.value[0].id)
+        }
+    },
+    {immediate: true}
+)
+
+// Récupère la plaque depuis le véhicule choisi (LIOT)
+watch(
+    () => [form.truckId, form.carrierId, vehicles.value],
+    () => {
+        if (!isLiotCarrier.value) {
+            return
+        }
+        if (filteredVehicles.value.length === 1) {
+            form.vehicleId = String(filteredVehicles.value[0].id)
+            return
+        }
+        if (!form.vehicleId) {
+            return
+        }
+        const matches = filteredVehicles.value.some(
+            (vehicle) => String(vehicle.id) === form.vehicleId
+        )
+        if (!matches) {
+            form.vehicleId = ''
+        }
+    },
+    {immediate: true}
+)
+
+// Auto-renseigne le véhicule si la plaque correspond (LIOT)
+watch(
+    () => [form.vehicleId, form.carrierId, vehicles.value],
+    () => {
+        if (!isLiotCarrier.value) {
+            return
+        }
+        if (isHydrating.value) {
+            return
+        }
+        const selected = filteredVehicles.value.find(
+            (vehicle) => String(vehicle.id) === form.vehicleId
+        )
+        if (selected) {
+            form.licensePlate = selected.plate
+            allowAnyLicensePlate.value = false
+        }
+    }
+)
+
+watch(
+    () => [form.licensePlate, form.carrierId, vehicles.value],
+    () => {
+        if (!isLiotCarrier.value || form.vehicleId) {
+            return
+        }
+        const match = filteredVehicles.value.find(
+            (vehicle) => vehicle.plate === form.licensePlate
+        )
+        if (match) {
+            form.vehicleId = String(match.id)
+        }
+    }
+)
+
+// Valide le formulaire et crée/met à jour la réception
 async function validate() {
    const normalizedLicensePlate = form.licensePlate.trim()
    const normalizedReceptionDate = form.receptionDate.trim()
+    const normalizedReceptionTypeId = form.receptionTypeId.trim()
+    const normalizedUserId = form.userId.trim()
+    const normalizedSupplierId = form.supplierId.trim()
+    const normalizedAddressId = form.addressId.trim()
+    const normalizedTruckId = form.truckId.trim()
+    const normalizedCarrierId = form.carrierId.trim()
+    const normalizedDriverId = form.driverId.trim()
+    const receptionTypeIri = normalizedReceptionTypeId
+        ? `/api/reception_types/${normalizedReceptionTypeId}`
+        : null
+    const userIri = normalizedUserId
+        ? `/api/users/${normalizedUserId}`
+        : null
+    const supplierIri = normalizedSupplierId
+        ? `/api/suppliers/${normalizedSupplierId}`
+        : null
+    const addressIri = normalizedAddressId
+        ? `/api/addresses/${normalizedAddressId}`
+        : null
+    const truckIri = normalizedTruckId
+        ? `/api/trucks/${normalizedTruckId}`
+        : null
+    const carrierIri = normalizedCarrierId
+        ? `/api/carriers/${normalizedCarrierId}`
+        : null
+    const driverIri = normalizedDriverId
+        ? `/api/drivers/${normalizedDriverId}`
+        : null
+
+    const basePayload = {
+        licensePlate: normalizedLicensePlate,
+        receptionDate: normalizedReceptionDate,
+        receptionType: receptionTypeIri,
+        user: userIri,
+        supplier: supplierIri,
+        address: addressIri,
+        truck: truckIri,
+        carrier: carrierIri
+    }
+
+    const payload = {
+        ...basePayload,
+        ...(isLiotCarrier.value && driverIri ? {driver: driverIri} : {})
+    }

    if (!receptionStore.current) {
        const created = await receptionStore.createReception({
            currentStep: 1,
-            licensePlate: normalizedLicensePlate,
-            receptionDate: normalizedReceptionDate
+            ...payload
        })
        if (created) {
            await router.push(`/reception/${created.id}`)
@@ -69,11 +516,20 @@ async function validate() {
        return
    }

+    const previousTypeCode = receptionStore.current.receptionType?.code ?? null
+    const nextTypeCode = selectedReceptionType.value?.code ?? null
+    const receptionIri = `/api/receptions/${receptionStore.current.id}`
+
+    if (
+        previousTypeCode === RECEPTION_TYPE_CODES.BOVINS &&
+        nextTypeCode === RECEPTION_TYPE_CODES.MERCHANDISES
+    ) {
+        await clearReceptionBovines(receptionIri)
+    }
    const nextStep = receptionStore.current.currentStep + 1
    await receptionStore.updateReception(receptionStore.current.id, {
        currentStep: nextStep,
-        licensePlate: normalizedLicensePlate,
-        receptionDate: normalizedReceptionDate
+        ...payload
    })
 }

--- a/frontend/components/reception/reception-product-received.vue
+++ b/frontend/components/reception/reception-product-received.vue
@@ -0,0 +1,258 @@
+<template>
+    <div class="flex flex-col items-center gap-16">
+        <div
+            v-if="receptionStore.current?.receptionType?.code === RECEPTION_TYPE_CODES.MERCHANDISES"
+            class="flex flex-col gap-16 items-center w-full">
+            <h1 class="text-4xl uppercase font-bold text-primary-500">Sélection des marchandises réceptionnnées</h1>
+            <UiSelect
+                id="merchandise-type"
+                v-model="selectedMerchandiseTypeId"
+                label="Type de marchandises"
+                :options="merchandiseTypes.map((type) => ({ value: String(type.id), label: type.label }))"
+                wrapper-class="w-[550px]"
+            />
+            <div
+                v-if="selectedMerchandiseTypeId && isAutres"
+                class="flex flex-col w-full max-w-[550px]"
+            >
+                <UiTextInput
+                    id="merchandise-detail"
+                    v-model="merchandiseDetail"
+                    label="Préciser"
+                    placeholder="Précisions complémentaires"
+                    :maxlength="255"
+                />
+            </div>
+
+            <div
+                v-if="selectedMerchandiseTypeId && !isGranule"
+                class="flex gap-4 w-[550px] justify-between"
+            >
+                <div
+                    v-for="building in buildings"
+                    :key="building.id"
+                >
+                    <UiCheckbox
+                        v-model="selectedBuildingIds"
+                        :value="String(building.id)"
+                        :label="building.label"
+                        label-class="text-xl"
+                    />
+                </div>
+            </div>
+
+            <div
+                v-if="selectedMerchandiseTypeId && isGranule"
+                class="flex flex-col gap-10 w-full max-w-[1100px]"
+            >
+                <div class="grid grid-cols-1 gap-10 md:grid-cols-4">
+                    <div v-for="type in pelletTypes" :key="type.id" class="flex flex-col gap-4">
+                        <p class="font-bold uppercase text-primary-500">{{ type.label }}</p>
+                        <div
+                            v-for="building in buildings"
+                            :key="building.id"
+                            class="flex items-center gap-2 text-lg pl-[2px]"
+                        >
+                            <UiCheckbox
+                                v-model="selectedPelletBuildingIds[String(type.id)]"
+                                :value="String(building.id)"
+                                :label="building.label"
+                                label-class="text-xl"
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="flex justify-center">
+            <UiButton
+                type="submit"
+                class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] justify-self-end"
+                @click="goNext"
+            >Valider
+            </UiButton>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import {computed, onMounted, ref} from 'vue'
+import {getBuildingList} from '~/services/building'
+import {getMerchandiseTypeList} from '~/services/merchandise-type'
+import type {MerchandiseTypeData} from '~/services/dto/merchandise-type-data'
+import type {BuildingData} from '~/services/dto/building-data'
+import type {PelletTypeData} from '~/services/dto/pellet-type-data'
+import {getPelletTypeList} from '~/services/pellet-type'
+import {
+    createReceptionPelletBuilding,
+    deleteReceptionPelletBuilding,
+    getReceptionPelletBuildingList
+} from '~/services/reception-pellet-building'
+import {useReceptionStore} from '~/stores/reception'
+import {MERCHANDISE_TYPE_CODES, RECEPTION_TYPE_CODES} from '~/utils/constants'
+import ReceptionBovineReceived from "~/components/reception/reception-bovine-received.vue";
+
+const receptionStore = useReceptionStore()
+const merchandiseTypes = ref<MerchandiseTypeData[]>([])
+const buildings = ref<BuildingData[]>([])
+const pelletTypes = ref<PelletTypeData[]>([])
+const selectedMerchandiseTypeId = ref('')
+const selectedBuildingIds = ref<string[]>([])
+const selectedPelletBuildingIds = ref<Record<string, string[]>>({})
+const merchandiseDetail = ref('')
+
+// Extrait l'ID d'une relation depuis un IRI ou un objet complet.
+const getRelationId = (value: unknown): string | null => {
+    if (!value) {
+        return null
+    }
+
+    if (typeof value === 'string') {
+        const match = value.match(/\/(\d+)$/)
+        return match ? match[1] : null
+    }
+
+    if (typeof value === 'object' && 'id' in value) {
+        const record = value as { id?: number | string }
+        if (typeof record.id === 'number') {
+            return String(record.id)
+        }
+        if (typeof record.id === 'string') {
+            return record.id
+        }
+    }
+
+    return null
+}
+
+// Type de marchandise sélectionné dans le select
+const selectedMerchandiseType = computed(() =>
+    merchandiseTypes.value.find((type) => String(type.id) === selectedMerchandiseTypeId.value)
+)
+// Indique si le type est "Granulé"
+const isGranule = computed(() => selectedMerchandiseType.value?.code === MERCHANDISE_TYPE_CODES.GRANULE)
+// Indique si le type est "Autres"
+const isAutres = computed(() => selectedMerchandiseType.value?.code === MERCHANDISE_TYPE_CODES.AUTRES)
+
+// Charge les référentiels et hydrate le formulaire depuis la réception
+onMounted(async () => {
+    const [merchandiseTypeList, buildingList, pelletTypeList] = await Promise.all([
+        getMerchandiseTypeList(),
+        getBuildingList(),
+        getPelletTypeList()
+    ])
+    merchandiseTypes.value = merchandiseTypeList
+    buildings.value = buildingList
+    pelletTypes.value = pelletTypeList
+
+    const currentId = receptionStore.current?.merchandiseType?.id
+    if (currentId) {
+        selectedMerchandiseTypeId.value = String(currentId)
+    }
+    merchandiseDetail.value = receptionStore.current?.merchandiseDetail ?? ''
+
+    selectedBuildingIds.value =
+        receptionStore.current?.buildings?.map((building) => String(building.id)) ?? []
+
+    const existingPelletSelections = receptionStore.current?.pelletBuildings ?? []
+    const selectionMap: Record<string, string[]> = {}
+    for (const selection of existingPelletSelections) {
+        // L'API peut renvoyer les relations comme IRI ou comme objets selon le contexte.
+        const pelletTypeId = getRelationId(selection.pelletType)
+        const buildingId = getRelationId(selection.building)
+        if (!pelletTypeId || !buildingId) {
+            continue
+        }
+        if (!selectionMap[pelletTypeId]) {
+            selectionMap[pelletTypeId] = []
+        }
+        selectionMap[pelletTypeId].push(buildingId)
+    }
+    for (const pelletType of pelletTypes.value) {
+        const key = String(pelletType.id)
+        if (!selectionMap[key]) {
+            selectionMap[key] = []
+        }
+    }
+    selectedPelletBuildingIds.value = selectionMap
+})
+// Enregistre les sélections et passe à l'étape suivante
+async function goNext() {
+    if (!receptionStore.current) {
+        return
+    }
+
+    const nextStep = receptionStore.current.currentStep + 1
+    const receptionIri = `/api/receptions/${receptionStore.current.id}`
+
+    await receptionStore.updateReception(receptionStore.current.id, {
+        merchandiseType: selectedMerchandiseTypeId.value
+            ? `/api/merchandise_types/${selectedMerchandiseTypeId.value}`
+            : null,
+        merchandiseDetail: isAutres.value ? merchandiseDetail.value.trim() : null,
+        buildings: isGranule.value
+            ? []
+            : selectedBuildingIds.value.map((id) => `/api/buildings/${id}`),
+        bovineDetail: null,
+        bovinesTypes: null,
+        currentStep: nextStep
+    })
+
+    if (isGranule.value) {
+        await syncPelletSelections(receptionIri)
+    } else {
+        await clearPelletSelections(receptionIri)
+    }
+}
+
+// Supprime toutes les associations granulés/bâtiments existantes
+async function clearPelletSelections(receptionIri: string) {
+    const existing = await getReceptionPelletBuildingList(receptionIri)
+    for (const selection of existing) {
+        await deleteReceptionPelletBuilding(selection.id)
+    }
+}
+// Synchronise les associations granulés/bâtiments avec l'état du formulaire
+async function syncPelletSelections(receptionIri: string) {
+    const existing = await getReceptionPelletBuildingList(receptionIri)
+    const existingMap = new Map<string, number>()
+    for (const selection of existing) {
+        // Construit la table de correspondance avec des IDs normalisés pour éviter les doublons.
+        const pelletTypeId = getRelationId(selection.pelletType)
+        const buildingId = getRelationId(selection.building)
+        if (!pelletTypeId || !buildingId) {
+            continue
+        }
+        const key = `${pelletTypeId}:${buildingId}`
+        existingMap.set(key, selection.id)
+    }
+
+    const desiredEntries: Array<{ pelletTypeId: string; buildingId: string }> = []
+    for (const [pelletTypeId, buildingIds] of Object.entries(selectedPelletBuildingIds.value)) {
+        for (const buildingId of buildingIds) {
+            desiredEntries.push({pelletTypeId, buildingId})
+        }
+    }
+
+    const desiredKeys = new Set(desiredEntries.map(
+        (entry) => `${entry.pelletTypeId}:${entry.buildingId}`
+    ))
+
+    for (const [key, id] of existingMap.entries()) {
+        if (!desiredKeys.has(key)) {
+            await deleteReceptionPelletBuilding(id)
+        }
+    }
+
+    for (const entry of desiredEntries) {
+        const key = `${entry.pelletTypeId}:${entry.buildingId}`
+        if (!existingMap.has(key)) {
+            await createReceptionPelletBuilding({
+                reception: receptionIri,
+                pelletType: `/api/pellet_types/${entry.pelletTypeId}`,
+                building: `/api/buildings/${entry.buildingId}`
+            })
+        }
+    }
+}
+</script>
--- a/frontend/components/reception/reception-unloading.vue
+++ b/frontend/components/reception/reception-unloading.vue
@@ -1,30 +0,0 @@
-<template>
-    <div class="flex flex-col items-center mt-[164px] gap-32">
-        <div class="flex gap-8 items-center justify-center">
-<!--@TODO Prendre en compte que l'on peut aussi décharger de la marchandise-->
-            <h1 class="text-4xl uppercase font-bold">Décharger les bêtes</h1>
-            <UiLoadingDots />
-        </div>
-        <button
-            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
-            @click="goNext"
-        >Peser</button>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { useReceptionStore } from '~/stores/reception'
-
-const receptionStore = useReceptionStore()
-
-async function goNext() {
-    if (!receptionStore.current) {
-        return
-    }
-
-    const nextStep = receptionStore.current.currentStep + 1
-    await receptionStore.updateReception(receptionStore.current.id, {
-        currentStep: nextStep
-    })
-}
-</script>
--- a/frontend/components/reception/reception-weight.vue
+++ b/frontend/components/reception/reception-weight.vue
@@ -1,9 +1,9 @@
 <template>
    <div class="flex justify-center">
        <div class="flex flex-col items-center w-[660px]">
-            <h1 class="font-bold text-5xl uppercase">{{ title }}</h1>
+            <h1 class="font-bold text-5xl uppercase text-primary-500">{{ title }}</h1>
 <!--@TODO Voir comment faire pour savoir si le pont-bascule et bien connecté + ajouter un icon comme sur la maquette-->
-            <p class="text-primary-500 uppercase text-2xl mt-2">Pont-bascule connecté</p>
+            <p class="text-primary-500 uppercase text-2xl text-primary-500 mt-2">Pont-bascule connecté</p>
            <div
                v-if="showLoadingBox"
                class="w-full flex flex-col items-center justify-center border border-black h-[90px] mt-12 mb-[86px]">
@@ -11,40 +11,35 @@
            </div>
            <div v-else-if="displayWeight !== null" class="w-full">
                <div
-                    class="w-full flex flex-col items-center justify-center border border-black h-[90px] mt-12 mb-[25px] text-4xl">
+                    class="w-full flex flex-col items-center justify-center border border-black h-[90px] mt-12 mb-[25px] text-4xl text-primary-500">
                    {{ displayWeight }} kg
                </div>
-<!--                <div class="grid grid-cols-2 border border-black text-center">-->
-<!--                    <p class="border-r border-black py-3 text-4xl font-bold">DSD</p>-->
-<!--                    <p class="py-3 text-4xl">{{ displayDsd }}</p>-->
-<!--                </div>-->
            </div>
        </div>
    </div>
    <div class="flex justify-center mt-[54px]">
-        <button
+        <UiButton
            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
            @click="fetchWeight"
-        >{{ displayWeight !== null ? 'refaire une pesee' : 'peser' }}</button>
-        <button
+        >{{ displayWeight !== null ? 'refaire une pesée' : 'peser' }}</UiButton>
+        <UiButton
            v-if="displayWeight !== null && !showGenerateReceipt"
            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] ml-4"
            @click="saveWeight"
-        >Valider la pesée</button>
-        <button
+        >Valider la pesée</UiButton>
+        <UiButton
            v-if="showGenerateReceipt"
            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] ml-4"
            @click="printReceipt"
-        >Générer le bon</button>
+        >Générer le bon</UiButton>
    </div>
-    <UiPdfPrinter ref="pdfPrinter" />
-
 </template>

 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import {computed, onMounted} from 'vue'
 import { storeToRefs } from 'pinia'
 import { useWeighing } from '~/composables/useWeighing'
+import { usePdfPrinter } from '~/composables/usePdfPrinter'
 import { useReceptionStore } from '~/stores/reception'

 const props = defineProps<{
@@ -54,14 +49,9 @@ const props = defineProps<{
 const router = useRouter()
 const receptionStore = useReceptionStore()
 const { current: storeReception } = storeToRefs(receptionStore)
-type PdfPrinterHandle = {
-    print: (url: string) => Promise<void>
-}
-// Ref sur le composant d'impression pour déclencher le print() du PDF.
-const pdfPrinter = ref<PdfPrinterHandle | null>(null)
+const { printPdf } = usePdfPrinter()
 const {
    displayWeight,
-    displayDsd,
    title,
    showLoadingBox,
    fetchWeight,
@@ -72,17 +62,21 @@ const {
    updateReception: receptionStore.updateReception,
    loadReception: receptionStore.loadReception
 })
+// Affiche le bouton de génération du bon à l'étape tare
 const showGenerateReceipt = computed(
    () => props.mode === 'tare' && displayWeight.value !== null
 )

+// Génère le bon de réception, puis clôture la réception
 const printReceipt = async () => {
-    if (!import.meta.client || !receptionStore.current || !pdfPrinter.value) {
+    if (!import.meta.client || !receptionStore.current) {
        return
    }

    await saveWeight()
-    await pdfPrinter.value.print(`/receptions/${receptionStore.current.id}/receipt`)
+    const reception = receptionStore.current
+    const filename = `${reception.identificationNumber ?? reception.id}_${reception.supplier?.name ?? 'fournisseur'}_${reception.licensePlate ?? 'immat'}.pdf`
+    await printPdf(`/receptions/${reception.id}/receipt`, filename)

    // Laisse le temps a la boite de dialogue d'impression de s'ouvrir.
    await new Promise((resolve) => setTimeout(resolve, 600))
@@ -98,7 +92,10 @@ const printReceipt = async () => {
    await router.push('/')
 }

+// Récupère le poids dès l'arrivée sur l'écran
 onMounted(() => {
-    fetchWeight()
+    if (displayWeight.value === null) {
+        fetchWeight()
+    }
 })
 </script>
--- a/frontend/components/reception/update-bovin.vue
+++ b/frontend/components/reception/update-bovin.vue
@@ -0,0 +1,161 @@
+<template>
+    <form>
+        <div class="flex flex-row justify-between gap-x-12 font-bold uppercase mb-8">
+            <div
+                v-for="type in bovineTypes"
+                :key="type.id"
+            >
+                <UiNumberInput
+                    :label="type.label"
+                    :code="type.code"
+                    v-model="localQuantities[String(type.id)]"
+                    :disabled="!isAdmin"
+                    :placeholder="0"
+                    :min="0"
+                    :max="10"
+                    wrapperClass="w-44 flex-col"
+                    inputClass="font-medium"
+                />
+            </div>
+            <UiNumberInput
+                label="Autres"
+                v-model="localOtherQuantity"
+                :disabled="!isAdmin"
+                wrapperClass="w-44 flex-col"
+                inputClass="font-medium"
+            />
+        </div>
+    </form>
+</template>
+
+<script setup lang="ts">
+import { onMounted, reactive, ref, watch } from 'vue'
+import { getBovineTypeList } from '~/services/bovine-type'
+import type { BovineTypeData } from '~/services/dto/bovine-type-data'
+import type { ReceptionBovineTypeData } from '~/services/dto/reception-bovine-data'
+
+const props = defineProps<{
+    modelValue: ReceptionBovineTypeData[]
+    otherQuantity: number | null
+    isAdmin: boolean
+}>()
+
+const emit = defineEmits<{
+    (event: 'update:modelValue', value: ReceptionBovineTypeData[]): void
+    (event: 'update:otherQuantity', value: number | null): void
+}>()
+
+const bovineTypes = ref<BovineTypeData[]>([])
+const localQuantities = reactive<Record<string, number | null>>({})
+const localOtherQuantity = ref<number | null>(props.otherQuantity ?? 0)
+// Verrou pour éviter les boucles props -> local -> emit -> props.
+const isSyncing = ref(false)
+
+function entriesEqualByTypeAndQuantity(
+    left: ReceptionBovineTypeData[],
+    right: ReceptionBovineTypeData[]
+): boolean {
+    const toMap = (entries: ReceptionBovineTypeData[]) => {
+        const map = new Map<number, number>()
+        for (const entry of entries) {
+            const typeId = entry.bovineType?.id ?? 0
+            map.set(typeId, entry.quantity ?? 0)
+        }
+
+        return map
+    }
+
+    const a = toMap(left)
+    const b = toMap(right)
+    if (a.size !== b.size) {
+        return false
+    }
+
+    for (const [typeId, quantity] of a.entries()) {
+        if ((b.get(typeId) ?? 0) !== quantity) {
+            return false
+        }
+    }
+
+    return true
+}
+
+function buildEntriesFromLocal(): ReceptionBovineTypeData[] {
+    return bovineTypes.value.map((type) => {
+        const existing = props.modelValue.find((entry) => entry.bovineType.id === type.id)
+        return {
+            id: existing?.id ?? 0,
+            bovineType: type,
+            quantity: localQuantities[String(type.id)] ?? 0
+        }
+    })
+}
+
+function syncLocalFromProps() {
+    isSyncing.value = true
+    try {
+        for (const key of Object.keys(localQuantities)) {
+            delete localQuantities[key]
+        }
+
+        for (const type of bovineTypes.value) {
+            const existing = props.modelValue.find((entry) => entry.bovineType.id === type.id)
+            localQuantities[String(type.id)] = existing?.quantity ?? 0
+        }
+    } finally {
+        isSyncing.value = false
+    }
+}
+
+watch(
+    () => props.otherQuantity,
+    (value) => {
+        if (isSyncing.value) {
+            return
+        }
+
+        const next = value ?? 0
+        isSyncing.value = true
+        localOtherQuantity.value = next
+        isSyncing.value = false
+    }
+)
+
+watch(localOtherQuantity, (value) => {
+    if (isSyncing.value) {
+        return
+    }
+
+    const next = value ?? 0
+    emit('update:otherQuantity', next)
+})
+
+watch(
+    () => props.modelValue,
+    () => {
+        // Hydratation locale uniquement quand le parent change.
+        syncLocalFromProps()
+    },
+    { immediate: true }
+)
+
+watch(
+    localQuantities,
+    () => {
+        if (isSyncing.value) {
+            return
+        }
+        // N'émet que si les quantités diffèrent réellement du parent.
+        const nextEntries = buildEntriesFromLocal()
+        if (!entriesEqualByTypeAndQuantity(nextEntries, props.modelValue)) {
+            emit('update:modelValue', nextEntries)
+        }
+    },
+    { deep: true }
+)
+
+onMounted(async () => {
+    bovineTypes.value = await getBovineTypeList()
+    syncLocalFromProps()
+})
+</script>
--- a/frontend/components/reception/update-merchandise.vue
+++ b/frontend/components/reception/update-merchandise.vue
@@ -0,0 +1,269 @@
+<template>
+    <form>
+        <div class="flex flex-col">
+            <div class="w-full col-start-1 row-start-1">
+                <UiRadioGroup
+                    id="merchandise-type"
+                    v-model="selectedMerchandiseTypeId"
+                    label="Type de marchandises"
+                    :options="merchandiseTypes.map((type) => ({
+                        value: String(type.id),
+                        label: type.label
+                    }))"
+                    input-class="accent-primary-700 focus:ring-primary-700"
+                    option-label-class="uppercase"
+                    wrapper-class="w-full uppercase"
+                    group-class="grid grid-cols-[336px_336px_355px_200px] w-[160px_160px_200px_180px] mt-9 mb-7"
+                    :disabled="!isAdmin"
+                />
+            </div>
+
+            <div class="w-full grid grid-cols-[3fr_1fr] gap-12 col-start-2 row-start-1">
+                <div
+                    v-if="selectedMerchandiseTypeId && !isGranule"
+                    class="flex gap-[218px]"
+                >
+                    <div
+                        v-for="building in buildings"
+                        :key="building.id"
+                    >
+                        <UiCheckbox
+                            v-model="selectedBuildingIds"
+                            :value="String(building.id)"
+                            :label="building.label"
+                            :disabled="!isAdmin"
+                            input-class="accent-primary-700 focus:ring-primary-700"
+                            label-class="text-xl uppercase"
+                        />
+                    </div>
+                </div>
+
+                <div
+                    v-if="selectedMerchandiseTypeId && isAutres"
+                    class="flex flex-col justify-self-end max-w-[182px]"
+                >
+                    <UiTextInput
+                        id="merchandise-detail"
+                        :disabled="!isAdmin"
+                        v-model="merchandiseDetail"
+                        placeholder="Préciser"
+                        :maxlength="255"
+                        class="h-6"
+                    />
+                </div>
+            </div>
+
+            <div
+                v-if="selectedMerchandiseTypeId && isGranule"
+                class="flex flex-col gap-10 w-full col-start-2 row-start-1"
+            >
+                <div class="grid grid-cols-1 md:grid-cols-[max-content_max-content_max-content_max-content] justify-between">
+                    <div v-for="type in pelletTypes" :key="type.id" class="flex flex-col gap-4">
+                        <p class="mb-1 font-medium uppercase">{{ type.label }}</p>
+                        <div
+                            v-for="building in buildings"
+                            :key="building.id"
+                            class="flex text-lg"
+                        >
+                            <UiCheckbox
+                                v-model="selectedPelletBuildingIds[String(type.id)]"
+                                :value="String(building.id)"
+                                :label="building.label"
+                                :disabled="!isAdmin"
+                                input-class="accent-primary-700 focus:ring-primary-700"
+                                label-class="text-lg"
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </form>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+import type { BuildingData } from '~/services/dto/building-data'
+import type { MerchandiseTypeData } from '~/services/dto/merchandise-type-data'
+import type { PelletTypeData } from '~/services/dto/pellet-type-data'
+import type { MerchandiseEntryData } from '~/services/dto/reception-data'
+import { getBuildingList } from '~/services/building'
+import { getMerchandiseTypeList } from '~/services/merchandise-type'
+import { getPelletTypeList } from '~/services/pellet-type'
+import { MERCHANDISE_TYPE_CODES } from '~/utils/constants'
+
+const props = defineProps<{
+    modelValue: MerchandiseEntryData
+    isAdmin: boolean
+}>()
+
+const emit = defineEmits<{
+    (event: 'update:modelValue', value: MerchandiseEntryData): void
+}>()
+
+const merchandiseTypes = ref<MerchandiseTypeData[]>([])
+const buildings = ref<BuildingData[]>([])
+const pelletTypes = ref<PelletTypeData[]>([])
+
+const selectedMerchandiseTypeId = ref('')
+const selectedBuildingIds = ref<string[]>([])
+const selectedPelletBuildingIds = ref<Record<string, string[]>>({})
+const merchandiseDetail = ref('')
+// Verrou de synchro pour empêcher les aller-retours infinis entre parent et composant.
+const isSyncing = ref(false)
+const isReady = ref(false)
+
+const selectedMerchandiseType = computed(() =>
+    merchandiseTypes.value.find((type) => String(type.id) === selectedMerchandiseTypeId.value) ?? null
+)
+const isGranule = computed(
+    () => selectedMerchandiseType.value?.code === MERCHANDISE_TYPE_CODES.GRANULE
+)
+const isAutres = computed(
+    () => selectedMerchandiseType.value?.code === MERCHANDISE_TYPE_CODES.AUTRES
+)
+
+function clonePelletSelections(value: Record<string, string[]>) {
+    const clone: Record<string, string[]> = {}
+    for (const [key, buildingIds] of Object.entries(value)) {
+        clone[key] = [...buildingIds]
+    }
+    return clone
+}
+
+function sorted(values: string[]): string[] {
+    return [...values].sort()
+}
+
+function normalizeModel(value: MerchandiseEntryData): MerchandiseEntryData {
+    // Normalisation stable pour comparer deux modèles sans faux positifs (ordre des tableaux).
+    const pellet: Record<string, string[]> = {}
+    const pelletKeys = Object.keys(value.selectedPelletBuildingIds ?? {}).sort()
+    for (const key of pelletKeys) {
+        pellet[key] = sorted(value.selectedPelletBuildingIds[key] ?? [])
+    }
+
+    return {
+        merchandiseTypeId: value.merchandiseTypeId ?? '',
+        merchandiseDetail: value.merchandiseDetail ?? '',
+        selectedBuildingIds: sorted(value.selectedBuildingIds ?? []),
+        selectedPelletBuildingIds: pellet
+    }
+}
+
+function buildCurrentModel(): MerchandiseEntryData {
+    return {
+        merchandiseTypeId: selectedMerchandiseTypeId.value,
+        merchandiseDetail: merchandiseDetail.value,
+        selectedBuildingIds: [...selectedBuildingIds.value],
+        selectedPelletBuildingIds: clonePelletSelections(selectedPelletBuildingIds.value)
+    }
+}
+
+function isSameModel(left: MerchandiseEntryData, right: MerchandiseEntryData): boolean {
+    return JSON.stringify(normalizeModel(left)) === JSON.stringify(normalizeModel(right))
+}
+
+function ensurePelletKeys() {
+    for (const pelletType of pelletTypes.value) {
+        const key = String(pelletType.id)
+        if (!selectedPelletBuildingIds.value[key]) {
+            selectedPelletBuildingIds.value[key] = []
+        }
+    }
+}
+
+function hydrateFromModelValue(value: MerchandiseEntryData) {
+    isSyncing.value = true
+    try {
+        selectedMerchandiseTypeId.value = value.merchandiseTypeId ?? ''
+        merchandiseDetail.value = value.merchandiseDetail ?? ''
+        selectedBuildingIds.value = [...(value.selectedBuildingIds ?? [])]
+        selectedPelletBuildingIds.value = clonePelletSelections(
+            value.selectedPelletBuildingIds ?? {}
+        )
+        ensurePelletKeys()
+    } finally {
+        isSyncing.value = false
+    }
+}
+
+function sanitizeLocalState() {
+    if (isGranule.value) {
+        if (selectedBuildingIds.value.length > 0) {
+            selectedBuildingIds.value = []
+        }
+    } else {
+        for (const key of Object.keys(selectedPelletBuildingIds.value)) {
+            if (selectedPelletBuildingIds.value[key].length > 0) {
+                selectedPelletBuildingIds.value[key] = []
+            }
+        }
+    }
+
+    if (!isAutres.value && merchandiseDetail.value !== '') {
+        merchandiseDetail.value = ''
+    }
+}
+
+function emitCurrentModel() {
+    const currentModel = buildCurrentModel()
+    // Ne pas réémettre si rien n'a changé côté métier.
+    if (isSameModel(currentModel, props.modelValue)) {
+        return
+    }
+
+    emit('update:modelValue', currentModel)
+}
+
+watch(
+    () => props.modelValue,
+    (value) => {
+        const currentModel = buildCurrentModel()
+        // Si local == parent, on ignore pour éviter la boucle de réhydratation.
+        if (isSameModel(currentModel, value)) {
+            return
+        }
+        hydrateFromModelValue(value)
+    },
+    { immediate: true }
+)
+
+watch(
+    [selectedMerchandiseTypeId, selectedBuildingIds, selectedPelletBuildingIds, merchandiseDetail],
+    () => {
+        if (isSyncing.value || !isReady.value) {
+            return
+        }
+
+        const beforeSanitize = buildCurrentModel()
+        isSyncing.value = true
+        // Applique les règles métier (granulé / autres) avant émission.
+        sanitizeLocalState()
+        isSyncing.value = false
+
+        const afterSanitize = buildCurrentModel()
+        // Si la sanitation a modifié l'état, on laisse le watcher repasser proprement.
+        if (!isSameModel(beforeSanitize, afterSanitize)) {
+            return
+        }
+
+        emitCurrentModel()
+    },
+    { deep: true }
+)
+
+onMounted(async () => {
+    const [merchandiseTypeList, buildingList, pelletTypeList] = await Promise.all([
+        getMerchandiseTypeList(),
+        getBuildingList(),
+        getPelletTypeList()
+    ])
+    merchandiseTypes.value = merchandiseTypeList
+    buildings.value = buildingList
+    pelletTypes.value = pelletTypeList
+
+    hydrateFromModelValue(props.modelValue)
+    isReady.value = true
+})
+</script>
--- a/frontend/components/shipment/shipment-form.vue
+++ b/frontend/components/shipment/shipment-form.vue
@@ -0,0 +1,554 @@
+<template>
+    <form @submit.prevent="validate">
+        <div class="grid grid-cols-2 h-[461px] items-start gap-y-8 gap-x-40 mb-16">
+            <h1 class="font-bold text-5xl uppercase col-start-1 row-start-1 text-primary-500">Expédition</h1>
+            <!--    Nom de l'utilisateur       -->
+            <UiSelect
+                id="shipment-user"
+                v-model="form.userId"
+                label="Nom de l'utilisateur"
+                :options="users.map((user) => ({
+                    value: String(user.id),
+                    label: user.username
+                }))"
+                :loading="isLoadingUsers"
+                wrapper-class="col-start-1 row-start-2"
+            />
+            <!--    Date de l'éxpedition        -->
+            <UiDateInput
+                id="shipment-date"
+                v-model="form.shipmentDate"
+                label="Date du jour"
+                wrapper-class="col-start-1 row-start-3"
+            />
+            <!--    Type d'expédition        -->
+            <div class="col-start-1 row-start-4 h-[64px]">
+                <div class="flex w-full items-end gap-[104px]">
+                    <UiRadioGroup
+                        id="shipment-type"
+                        name="shipment-type"
+                        label="Type d'expédition bovine"
+                        input-class="accent-primary-700 focus:ring-primary-700"
+                        wrapper-class=""
+                        group-class="flex flex-row gap-[104px] w-[160px_160px] h-[32px]"
+                        v-model="selectedShipmentTypeId"
+                        :options="bovineShipment.map((type) => ({
+                            value: String(type.id),
+                            label: type.label
+                        }))"
+                    />
+                    <UiNumberInput
+                        id="shipment-type-quantity"
+                        v-model="shipmentQuantity"
+                        :placeholder="0"
+                        :min="0"
+                        :max="1200"
+                        :disabled="!selectedShipmentTypeId"
+                    />
+                </div>
+            </div>
+            <!--    Client        -->
+            <UiSelect
+                id="shipment-customer"
+                v-model="form.customerId"
+                label="Client"
+                :options="customers.map((customer) => ({
+                    value: String(customer.id),
+                    label: customer.name || `Client #${customer.id}`
+                }))"
+                :loading="isLoadingCustomers"
+                wrapper-class="col-start-1 row-start-5"
+            />
+            <!--    Adresse du client        -->
+            <UiSelect
+                id="shipment-address"
+                v-model="form.addressId"
+                :options="customerAddressOptions"
+                :disabled="isLoadingCustomers || customerAddresses.length === 0"
+                label="Adresse"
+                wrapper-class="col-start-2 row-start-1"
+            />
+            <!--   Camion        -->
+            <UiSelect
+                id="shipment-truck"
+                v-model="form.truckId"
+                label="Camion"
+                :options="trucks.map((truck) => ({
+                    value: String(truck.id),
+                    label: truck.name
+                }))"
+                :loading="isLoadingTrucks"
+                wrapper-class="col-start-2 row-start-2"
+            />
+            <!--   Transporteur        -->
+            <UiSelect
+                id="shipment-carrier"
+                v-model="form.carrierId"
+                label="Transporteur"
+                :options="carriers.map((carrier) => ({
+                    value: String(carrier.id),
+                    label: carrier.name
+                }))"
+                wrapper-class="col-start-2 row-start-3"
+            />
+            <!-- Plaque d'immatriculation (hors LIOT)        -->
+            <div v-if="!isLiotCarrier" class="col-start-2 row-start-4">
+                <UiLicensePlateInput
+                    v-model="form.licensePlate"
+                    v-model:allowAny="allowAnyLicensePlate"
+                />
+            </div>
+            <!--    Immatriculation (LIOT)        -->
+            <UiSelect
+                v-if="isLiotCarrier"
+                id="shipment-vehicle"
+                v-model="form.vehicleId"
+                label="Immatriculation"
+                :options="filteredVehicles.map((vehicle) => ({
+                    value: String(vehicle.id),
+                    label: vehicle.plate
+                }))"
+                :loading="isLoadingVehicles"
+                :disabled="isLoadingVehicles || filteredVehicles.length === 0"
+                wrapper-class="col-start-2 row-start-4"
+            />
+            <!--  Chauffeur (LIOT)        -->
+            <UiSelect
+                id="shipment-driver"
+                v-model="form.driverId"
+                label="Nom du chauffeur si LIOT"
+                :options="filteredDrivers.map((driver) => ({
+                    value: String(driver.id),
+                    label: driver.name
+                }))"
+                :loading="isLoadingDrivers"
+                wrapper-class="col-start-2 row-start-5"
+                v-if="isLiotCarrier"
+            />
+        </div>
+        <div class="flex justify-center">
+            <UiButton
+                type="submit"
+                class="text-xl mb-16 uppercase bg-primary-500 text-white h-[50px] w-[272px] justify-self-end"
+            >Valider
+            </UiButton>
+        </div>
+    </form>
+</template>
+<script setup lang="ts">
+
+import type {UserData} from '~/services/dto/user-data'
+import type {CustomerData} from '~/services/dto/customer-data'
+import type {TruckData} from '~/services/dto/truck-data'
+import type {CarrierData} from '~/services/dto/carrier-data'
+import type {DriverData} from '~/services/dto/driver-data'
+import type {VehicleData} from '~/services/dto/vehicle-data'
+import type {AddressData} from '~/services/dto/address-data'
+import {getUsers} from '~/services/auth'
+import {getCustomerList} from '~/services/customer'
+import {getTruckList} from '~/services/truck'
+import {getCarrierList} from '~/services/carrier'
+import {getVehicleList} from '~/services/vehicle'
+import {getDriverList} from '~/services/driver'
+import type {ShipmentFormData} from '~/services/dto/shipment-data'
+import {SUPPLIER_CODE} from "~/utils/constants"
+import {useAuthStore} from '~/stores/auth'
+import {useShipmentStore} from '~/stores/shipment'
+import {computed, reactive, ref, watch, onMounted} from 'vue'
+import type {ShipmentTypeData} from "~/services/dto/shipment-type-data";
+import {getShipmentTypeList} from "~/services/shipment-type";
+
+const users = ref<UserData[]>([])
+const customers = ref<CustomerData[]>([])
+const trucks = ref<TruckData[]>([])
+const carriers = ref<CarrierData[]>([])
+const drivers = ref<DriverData[]>([])
+const vehicles = ref<VehicleData[]>([])
+
+const isLoadingUsers = ref(false)
+const isLoadingShipmentTypes = ref(false)
+const isLoadingCustomers = ref(false)
+const isLoadingTrucks = ref(false)
+const isLoadingCarriers = ref(false)
+const isHydrating = ref(false)
+const isLoadingVehicles = ref(false)
+const allowAnyLicensePlate = ref(false)
+const isLoadingDrivers = ref(false)
+const authStore = useAuthStore()
+const shipmentStore = useShipmentStore()
+const router = useRouter()
+const bovineShipment = ref<ShipmentTypeData[]>([])
+const selectedShipmentTypeId = ref('')
+const shipmentQuantity = ref<number | null>(0)
+// Transporteur sélectionné dans le formulaire
+const selectedCarrier = computed(() =>
+    carriers.value.find((carrier) => String(carrier.id) === form.carrierId) ?? null
+)
+const isLiotCarrier = computed(() => selectedCarrier.value?.code === SUPPLIER_CODE.LIOT)
+
+const form = reactive<ShipmentFormData>({
+    userId: '',
+    shipmentDate: new Date().toISOString().slice(0, 10),
+    customerId: '',
+    addressId: '',
+    truckId: '',
+    carrierId: '',
+    driverId: '',
+    vehicleId: '',
+    licensePlate: '',
+})
+// Adresses liées au client sélectionné
+const customerAddresses = computed<AddressData[]>(() => {
+    const customerId = Number(form.customerId)
+    if (!Number.isFinite(customerId)) {
+        return []
+    }
+    return customers.value.find((customer) => customer.id === customerId)?.addresses ?? []
+})
+// Options pour le select des adresses du client
+const customerAddressOptions = computed(() =>
+    customerAddresses.value
+        .map((address) => ({
+            value: String(address.id),
+            label: address.fullAddress
+        }))
+)
+// Chauffeurs liés au transporteur sélectionné (LIOT)
+const filteredDrivers = computed<DriverData[]>(() => {
+    if (!form.carrierId) {
+        return []
+    }
+    return drivers.value.filter((driver) => String(driver.carrier?.id) === form.carrierId)
+})
+// Véhicules liés au transporteur + camion sélectionnés (LIOT)
+const filteredVehicles = computed<VehicleData[]>(() => {
+    if (!form.carrierId) {
+        return []
+    }
+    return vehicles.value.filter(
+        (vehicle) =>
+            String(vehicle.carrier?.id) === form.carrierId &&
+            (!form.truckId || String(vehicle.truck?.id) === form.truckId)
+    )
+})
+// Chargement des données pour les selects
+const loadUsers = async () => {
+    isLoadingUsers.value = true
+    try {
+        users.value = await getUsers()
+    } finally {
+        isLoadingUsers.value = false
+    }
+}
+
+const loadShipmentType = async () => {
+    isLoadingShipmentTypes.value = true
+    try {
+        bovineShipment.value = await getShipmentTypeList()
+    } finally {
+        isLoadingShipmentTypes.value = false
+    }
+}
+
+const loadCustomers = async () => {
+    isLoadingCustomers.value = true
+    try {
+        customers.value = await getCustomerList()
+    } finally {
+        isLoadingCustomers.value = false
+    }
+
+}
+const loadTrucks = async () => {
+    isLoadingTrucks.value = true
+    try {
+        trucks.value = await getTruckList()
+    } finally {
+        isLoadingTrucks.value = false
+    }
+}
+const loadCarriers = async () => {
+    isLoadingCarriers.value = true
+    try {
+        carriers.value = await getCarrierList()
+    } finally {
+        isLoadingCarriers.value = false
+    }
+}
+const loadVehicles = async () => {
+    isLoadingVehicles.value = true
+    try {
+        vehicles.value = await getVehicleList()
+    } finally {
+        isLoadingVehicles.value = false
+    }
+}
+const loadDrivers = async () => {
+    isLoadingDrivers.value = true
+    try {
+        drivers.value = await getDriverList()
+    } finally {
+        isLoadingDrivers.value = false
+    }
+}
+// On met le user connecté par défaut dans le select
+const setDefaultUser = () => {
+    if (form.userId) {
+        return
+    }
+    if (authStore.user?.id) {
+        form.userId = String(authStore.user.id)
+    }
+}
+// Chargement initial des données
+onMounted(async () => {
+    await loadShipmentType()
+    await loadUsers()
+    await loadCustomers()
+    await loadTrucks()
+    await loadCarriers()
+    await loadVehicles()
+    await loadDrivers()
+    await authStore.ensureSession()
+    setDefaultUser()
+})
+// Hydrate le formulaire depuis l'expédition en cours
+watch(
+    () => shipmentStore.current,
+    (shipment) => {
+        isHydrating.value = true
+        form.licensePlate = shipment?.licensePlate ?? ''
+        form.shipmentDate = shipment?.shipmentDate ?? new Date().toISOString().slice(0, 10)
+        form.userId = shipment?.user?.id ? String(shipment.user.id) :
+            form.userId
+        form.customerId = shipment?.customer?.id ?
+            String(shipment.customer.id) : ''
+        form.addressId = shipment?.address?.id ? String(shipment.address.id) : ''
+        form.truckId = shipment?.truck?.id ? String(shipment.truck.id) : ''
+        form.carrierId = shipment?.carrier?.id ? String(shipment.carrier.id) : ''
+        form.driverId = shipment?.driver?.id ? String(shipment.driver.id) : ''
+        form.vehicleId = shipment?.vehicle?.id ? String(shipment.vehicle.id) : ''
+
+
+        selectedShipmentTypeId.value = shipment?.shipmentType?.id
+            ? String(shipment.shipmentType.id)
+            : ''
+
+        shipmentQuantity.value = shipment?.nbBovinSend ?? 0
+
+
+        isHydrating.value = false
+    },
+    {immediate: true}
+)
+// Ajuste driver/vehicle quand le transporteur change (logique LIOT)
+watch(
+    () => [form.customerId, form.addressId, customers.value],
+    () => {
+        if (!form.customerId) {
+            form.addressId = ''
+            return
+        }
+        if (!form.addressId && customerAddresses.value.length === 1) {
+            form.addressId = String(customerAddresses.value[0].id)
+            return
+        }
+        if (!form.addressId) {
+            return
+        }
+        const matches = customerAddresses.value.some(
+            (address) => String(address.id) === form.addressId
+        )
+        if (!matches) {
+            if (customerAddresses.value.length === 1) {
+                form.addressId = String(customerAddresses.value[0].id)
+            } else {
+                form.addressId = ''
+            }
+        }
+    },
+    {immediate: true}
+)
+// Valide/auto-sélectionne le véhicule selon camion + transporteur (LIOT)
+const applyLiotDefaults = () => {
+    if (isHydrating.value) {
+        return
+    }
+    if (!form.carrierId) {
+        form.driverId = ''
+        form.vehicleId = ''
+        return
+    }
+    if (!isLiotCarrier.value) {
+        form.driverId = ''
+        form.vehicleId = ''
+        return
+    }
+    if (filteredDrivers.value.length === 1) {
+        form.driverId = String(filteredDrivers.value[0].id)
+    }
+    if (filteredVehicles.value.length === 1) {
+        form.vehicleId = String(filteredVehicles.value[0].id)
+    }
+}
+watch(
+    () => form.carrierId,
+    () => {
+        applyLiotDefaults()
+    },
+    {immediate: true}
+)
+watch(
+    () => isHydrating.value,
+    (value) => {
+        if (!value) {
+            applyLiotDefaults()
+        }
+    }
+)
+// Récupère la plaque depuis le véhicule choisi (LIOT)
+watch(
+    () => [form.truckId, form.carrierId, vehicles.value],
+    () => {
+        if (!isLiotCarrier.value) {
+            return
+        }
+        if (filteredVehicles.value.length === 1) {
+            form.vehicleId = String(filteredVehicles.value[0].id)
+            return
+        }
+        if (!form.vehicleId) {
+            return
+        }
+        const matches = filteredVehicles.value.some(
+            (vehicle) => String(vehicle.id) === form.vehicleId
+        )
+        if (!matches) {
+            form.vehicleId = ''
+        }
+    },
+    {immediate: true}
+)
+// Auto-renseigne le véhicule si la plaque correspond (LIOT)
+watch(
+    () => [form.vehicleId, form.carrierId, vehicles.value],
+    () => {
+        if (!isLiotCarrier.value) {
+            return
+        }
+        if (isHydrating.value) {
+            return
+        }
+        const selected = filteredVehicles.value.find(
+            (vehicle) => String(vehicle.id) === form.vehicleId
+        )
+        if (selected) {
+            form.licensePlate = selected.plate
+            allowAnyLicensePlate.value = false
+        }
+    }
+)
+watch(
+    () => [form.licensePlate, form.carrierId, form.vehicleId, vehicles.value],
+    () => {
+        if (!isLiotCarrier.value || form.vehicleId) {
+            return
+        }
+        const match = filteredVehicles.value.find(
+            (vehicle) => vehicle.plate === form.licensePlate
+        )
+        if (match) {
+            form.vehicleId = String(match.id)
+        }
+    }
+)
+
+const buildPayload = () => {
+    const normalizedLicensePlate = form.licensePlate.trim()
+    const normalizedShipmentDate = form.shipmentDate.trim()
+    const normalizedCustomerId = form.customerId.trim()
+    const normalizedTruckId = form.truckId.trim()
+    const normalizedCarrierId = form.carrierId.trim()
+    const normalizedDriverId = form.driverId.trim()
+    const normalizedUserId = form.userId.trim()
+    const normalizedAddressId = form.addressId.trim()
+    const customerIri = normalizedCustomerId
+        ? `/api/customers/${normalizedCustomerId}`
+        : null
+    const truckIri = normalizedTruckId
+        ? `/api/trucks/${normalizedTruckId}`
+        : null
+    const carrierIri = normalizedCarrierId
+        ? `/api/carriers/${normalizedCarrierId}`
+        : null
+    const userIri = normalizedUserId
+        ? `/api/users/${normalizedUserId}`
+        : null
+    const driverIri = normalizedDriverId
+        ? `/api/drivers/${normalizedDriverId}`
+        : null
+    const addressIri = normalizedAddressId
+        ? `/api/addresses/${normalizedAddressId}`
+        : null
+    const normalizedShipmentTypeId = selectedShipmentTypeId.value.trim()
+    const shipmentTypeIri = normalizedShipmentTypeId
+        ? `/api/shipment_types/${normalizedShipmentTypeId}`
+        : null
+
+    const rawQuantity = Number(shipmentQuantity.value ?? 0)
+    const normalizedQuantity = Number.isFinite(rawQuantity) ? Math.max(0,
+        Math.trunc(rawQuantity)) : 0
+
+    return {
+        licensePlate: normalizedLicensePlate,
+        shipmentDate: normalizedShipmentDate,
+        customer: customerIri,
+        truck: truckIri,
+        carrier: carrierIri,
+        driver: driverIri,
+        user: userIri,
+        address: addressIri,
+        shipmentType: shipmentTypeIri,
+        nbBovinSend: normalizedQuantity,
+    }
+}
+
+const saveDraft = async () => {
+    const payload = buildPayload()
+    if (!shipmentStore.current) {
+        await shipmentStore.createShipment({
+            currentStep: 0,
+            ...payload
+        })
+        return
+    }
+
+    await shipmentStore.updateShipment(shipmentStore.current.id, {
+        currentStep: shipmentStore.current.currentStep,
+        ...payload
+    })
+}
+
+defineExpose({saveDraft})
+// Valide le formulaire et crée/met à jour l'expédition
+const validate = async () => {
+    const payload = buildPayload()
+    if (!shipmentStore.current) {
+        const created = await shipmentStore.createShipment({
+            currentStep: 1,
+            ...payload
+        })
+        if (created) {
+            await shipmentStore.loadShipment(created.id)
+            await router.push(`/shipment/${created.id}`)
+        }
+        return
+    }
+    const nextStep = shipmentStore.current.currentStep + 1
+    await shipmentStore.updateShipment(shipmentStore.current.id, {
+        currentStep: nextStep,
+        ...payload
+    })
+    await shipmentStore.loadShipment(shipmentStore.current.id)
+}
+</script>
--- a/frontend/components/shipment/shipment-loading.vue
+++ b/frontend/components/shipment/shipment-loading.vue
@@ -0,0 +1,26 @@
+<template>
+    <div class="flex flex-col items-center gap-[118px]">
+        <h1 class="font-bold text-5xl uppercase text-primary-500">Chargement des bovins</h1>
+        <div
+            class="w-full flex flex-col items-center justify-center">
+            <UiLoadingDots />
+        </div>
+        <UiButton
+            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] ml-4"
+            @click="goNext"
+        >Peser</UiButton>
+    </div>
+</template>
+
+<script setup lang="ts">
+import {useShipmentStore} from "~/stores/shipment";
+
+const shipmentStore = useShipmentStore()
+
+const goNext = async () => {
+    const nextStep = shipmentStore.current.currentStep + 1
+    await shipmentStore.updateShipment(shipmentStore.current.id, {
+        currentStep: nextStep
+    })
+}
+</script>
--- a/frontend/components/shipment/shipment-weight.vue
+++ b/frontend/components/shipment/shipment-weight.vue
@@ -0,0 +1,101 @@
+<template>
+    <div class="flex justify-center">
+        <div class="flex flex-col items-center w-[660px]">
+            <h1 class="font-bold text-5xl uppercase text-primary-500">{{ title }}</h1>
+<!--@TODO Voir comment faire pour savoir si le pont-bascule et bien connecté + ajouter un icon comme sur la maquette-->
+            <p class="text-primary-500 uppercase text-2xl mt-2">Pont-bascule connecté</p>
+            <div
+                v-if="showLoadingBox"
+                class="w-full flex flex-col items-center justify-center border border-black h-[90px] mt-12 mb-[86px]">
+                    <UiLoadingDots />
+            </div>
+            <div v-else-if="displayWeight !== null" class="w-full">
+                <div
+                    class="w-full flex flex-col items-center justify-center border border-primary-500 h-[90px] mt-12 mb-[25px] text-4xl text-primary-500">
+                    {{ displayWeight }} kg
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="flex justify-center mt-[54px]">
+        <UiButton
+            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
+            @click="fetchWeight"
+        >{{ displayWeight !== null ? 'refaire une pesée' : 'peser' }}</UiButton>
+        <UiButton
+            v-if="displayWeight !== null && !showGenerateReceipt"
+            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] ml-4"
+            @click="saveWeight"
+        >Valider la pesée</UiButton>
+        <UiButton
+            v-if="showGenerateReceipt"
+            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] ml-4"
+            @click="printReceipt"
+        >Générer le bon</UiButton>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useWeighingShipment } from '~/composables/useWeighing'
+import { usePdfPrinter } from '~/composables/usePdfPrinter'
+import { useShipmentStore } from '~/stores/shipment'
+
+const props = defineProps<{
+    mode: 'gross' | 'tare'
+}>()
+
+const router = useRouter()
+const shipmentStore = useShipmentStore()
+const { current: storeShipment } = storeToRefs(shipmentStore)
+const { printPdf } = usePdfPrinter()
+const {
+    displayWeight,
+    title,
+    showLoadingBox,
+    fetchWeight,
+    saveWeight
+} = useWeighingShipment({
+    modeShipment: props.mode,
+    shipment: storeShipment,
+    updateShipment: shipmentStore.updateShipment,
+    loadShipment: shipmentStore.loadShipment
+})
+// Affiche le bouton de génération du bon à l'étape tare
+const showGenerateReceipt = computed(
+    () => props.mode === 'tare' && displayWeight.value !== null
+)
+
+// Génère le bon d'expédition, puis clôture l'expédition
+const printReceipt = async () => {
+    if (!import.meta.client || !shipmentStore.current) {
+        return
+    }
+
+    await saveWeight()
+    const shipment = shipmentStore.current
+    const filename = `${shipment.identificationNumber ?? shipment.id}_${shipment.customer?.label ?? 'client'}_${shipment.licensePlate ?? 'immat'}.pdf`
+    await printPdf(`/shipments/${shipment.id}/receipt`, filename)
+
+    // Laisse le temps a la boite de dialogue d'impression de s'ouvrir.
+    await new Promise((resolve) => setTimeout(resolve, 600))
+
+    const result = await shipmentStore.updateShipment(shipmentStore.current.id, {
+        isValid: true
+    })
+    if (!result) {
+        return
+    }
+
+    shipmentStore.clearCurrent()
+    await router.push('/')
+}
+
+// Récupère le poids dès l'arrivée sur l'écran
+onMounted(() => {
+    if (displayWeight.value === null) {
+        fetchWeight()
+    }
+})
+</script>
--- a/frontend/components/ui/UiButton.vue
+++ b/frontend/components/ui/UiButton.vue
@@ -0,0 +1,39 @@
+<template>
+    <component
+        :is="'button'"
+        :type="type"
+        :disabled="isDisabled"
+        class="inline-flex min-w-[194px] items-center justify-center rounded-md"
+        :class="[
+            isDisabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer',
+            buttonClass
+        ]"
+        v-bind="attrs"
+    >
+        <slot v-if="!loading" />
+        <UiLoadingDots v-else />
+    </component>
+</template>
+
+<script setup lang="ts">
+import {computed, useAttrs} from 'vue'
+
+defineOptions({inheritAttrs: false})
+
+const props = withDefaults(
+    defineProps<{
+        type?: 'button' | 'submit' | 'reset'
+        disabled?: boolean
+        loading?: boolean
+        buttonClass?: string
+    }>(),
+    {
+        disabled: false,
+        loading: false,
+        buttonClass: ''
+    }
+)
+
+const attrs = useAttrs()
+const isDisabled = computed(() => props.disabled || props.loading)
+</script>
--- a/frontend/components/ui/UiCheckbox.vue
+++ b/frontend/components/ui/UiCheckbox.vue
@@ -0,0 +1,76 @@
+<template>
+    <div :class="wrapperClass">
+        <label
+            class="flex items-center gap-2 cursor-pointer text-primary-700"
+            :class="labelClass"
+        >
+            <input
+                type="checkbox"
+                :checked="checked"
+                :disabled="disabled"
+                :class="['h-4 w-4 cursor-pointer text-primary-500', inputClass]"
+                @change="onChange"
+            >
+            <span v-if="label">{{ label }}</span>
+        </label>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+type CheckboxValue = string | number
+
+const props = withDefaults(
+    defineProps<{
+        modelValue: boolean | CheckboxValue[]
+        value?: CheckboxValue
+        label?: string
+        disabled?: boolean
+        wrapperClass?: string
+        labelClass?: string
+        inputClass?: string
+    }>(),
+    {
+        value: undefined,
+        label: '',
+        disabled: false,
+        wrapperClass: '',
+        labelClass: '',
+        inputClass: ''
+    }
+)
+
+const emit = defineEmits<{
+    (event: 'update:modelValue', value: boolean | CheckboxValue[]): void
+}>()
+
+const checked = computed(() => {
+    if (Array.isArray(props.modelValue)) {
+        if (props.value === undefined) {
+            return false
+        }
+        return props.modelValue.includes(props.value)
+    }
+    return Boolean(props.modelValue)
+})
+
+const onChange = (event: Event) => {
+    const target = event.target as HTMLInputElement
+    if (Array.isArray(props.modelValue)) {
+        if (props.value === undefined) {
+            emit('update:modelValue', props.modelValue)
+            return
+        }
+        const next = new Set(props.modelValue)
+        if (target.checked) {
+            next.add(props.value)
+        } else {
+            next.delete(props.value)
+        }
+        emit('update:modelValue', Array.from(next))
+        return
+    }
+    emit('update:modelValue', target.checked)
+}
+</script>
--- a/frontend/components/ui/UiDateInput.vue
+++ b/frontend/components/ui/UiDateInput.vue
@@ -0,0 +1,62 @@
+<template>
+    <div :class="['flex flex-col', wrapperClass]">
+        <label
+            v-if="label"
+            :for="id"
+            class="font-bold uppercase text-xl text-primary-700"
+            :class="labelClass"
+        >
+            {{ label }}
+        </label>
+        <input
+            :id="id"
+            type="date"
+            :value="modelValue ?? ''"
+            :disabled="disabled"
+            v-bind="attrs"
+            class="border-b border-primary-700 justify-self-start text-xl text-primary-700 py-[6px] uppercase bg-transparent appearance-none h-[34px]"
+            :class="[
+                isEmpty ? 'text-neutral-400' : 'text-primary-700',
+                disabled ? 'cursor-not-allowed' : 'cursor-pointer',
+                inputClass
+            ]"
+            @input="onInput"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+    defineProps<{
+        id?: string
+        label?: string
+        modelValue: string | null | undefined
+        disabled?: boolean
+        wrapperClass?: string
+        labelClass?: string
+        inputClass?: string
+    }>(),
+    {
+        disabled: false,
+        wrapperClass: '',
+        labelClass: '',
+        inputClass: ''
+    }
+)
+
+const emit = defineEmits<{
+    (event: 'update:modelValue', value: string): void
+}>()
+
+const attrs = useAttrs()
+const isEmpty = computed(() => !props.modelValue)
+
+const onInput = (event: Event) => {
+    const target = event.target as HTMLInputElement
+    emit('update:modelValue', target.value)
+}
+</script>
--- a/frontend/components/ui/UiNumberInput.vue
+++ b/frontend/components/ui/UiNumberInput.vue
@@ -0,0 +1,120 @@
+// flex row passer en class wraper class flex col ainsi que le wfull 34
+<template>
+    <div :class="['flex', wrapperClass]">
+        <label
+            v-if="label"
+            :for="id"
+            class="text-xl flex items-center gap-2 text-primary-700"
+            :class="labelClass"
+        >
+            <span
+                v-if="label">
+                {{ label }}
+            </span>
+            <span
+                v-if="code"
+                class="text-neutral-600">
+                ({{ code }})
+            </span>
+        </label>
+        <input
+            :id="id"
+            type="number"
+            :value="modelValue ?? ''"
+            :min="min"
+            :max="max"
+            :step="step"
+            :disabled="disabled"
+            v-bind="attrs"
+            class="border-b border-primary-700 justify-self-start text-xl text-primary-700 py-[6px] uppercase bg-transparent appearance-none h-[34px]"
+            :class="[
+                isEmpty ? 'text-neutral-400' : 'text-black',
+                disabled ? 'cursor-not-allowed' : 'cursor-text',
+                inputClass
+            ]"
+            @keydown="onKeydown"
+            @input="onInput"
+        >
+    </div>
+</template>
+
+<script setup lang="ts">
+import {computed, useAttrs} from 'vue'
+
+defineOptions({inheritAttrs: false})
+
+const props = withDefaults(
+    defineProps<{
+        id?: string
+        label?: string
+        code?: string
+        modelValue: number | string | null | undefined
+        min?: number | string
+        max?: number | string
+        step?: number | string
+        disabled?: boolean
+        wrapperClass?: string
+        labelClass?: string
+        inputClass?: string
+    }>(),
+    {
+        min: undefined,
+        max: undefined,
+        step: undefined,
+        disabled: false,
+        wrapperClass: '',
+        labelClass: '',
+        inputClass: ''
+    }
+)
+
+const emit = defineEmits<{
+    (event: 'update:modelValue', value: number | null): void
+}>()
+
+const attrs = useAttrs()
+const isEmpty = computed(() => props.modelValue === null || props.modelValue === undefined || props.modelValue === '')
+
+const toNumberOrNull = (value: number | string | undefined) => {
+    if (value === undefined || value === '') {
+        return null
+    }
+    const parsed = Number(value)
+    return Number.isFinite(parsed) ? parsed : null
+}
+
+const onInput = (event: Event) => {
+    const target = event.target as HTMLInputElement
+    if (target.value === '') {
+        emit('update:modelValue', null)
+        return
+    }
+    const parsed = Number(target.value)
+    if (!Number.isFinite(parsed)) {
+        emit('update:modelValue', null)
+        return
+    }
+
+    const min = toNumberOrNull(props.min)
+    const max = toNumberOrNull(props.max)
+
+    let numeric = parsed
+    if (min !== null) {
+        numeric = Math.max(min, numeric)
+    } else {
+        numeric = Math.max(0, numeric)
+    }
+    if (max !== null) {
+        numeric = Math.min(max, numeric)
+    }
+
+    target.value = String(numeric)
+    emit('update:modelValue', numeric)
+}
+
+const onKeydown = (event: KeyboardEvent) => {
+    if (event.key === '-' || event.key === 'e' || event.key === 'E') {
+        event.preventDefault()
+    }
+}
+</script>
--- a/frontend/components/ui/UiRadioGroup.vue
+++ b/frontend/components/ui/UiRadioGroup.vue
@@ -0,0 +1,93 @@
+<template>
+    <div :class="['flex flex-col', wrapperClass]">
+        <label
+            v-if="label"
+            class="font-bold uppercase text-xl text-primary-700"
+            :class="labelClass"
+        >
+            {{ label }}
+        </label>
+        <div
+            role="radiogroup"
+            :aria-label="label || id || 'radio-group'"
+            :class="['flex items-center gap-6 mt-1', groupClass]"
+        >
+            <label
+                v-for="option in options"
+                :key="String(option.value)"
+                :for="`${id || 'radio'}-${option.value}`"
+                class="flex items-center gap-2 text-primary-700"
+                :class="itemClass"
+            >
+                <input
+                    :id="`${id || 'radio'}-${option.value}`"
+                    type="radio"
+                    :name="name || id || 'radio-group'"
+                    :value="String(option.value)"
+                    :checked="String(modelValue ?? '') === String(option.value)"
+                    :disabled="disabled"
+                    v-bind="attrs"
+                    class="h-4 w-4 border-primary-700/50 text-primary-700 focus:ring-primary-700"
+                    :class="[
+                        disabled ? 'cursor-not-allowed' : 'cursor-pointer',
+                        inputClass
+                    ]"
+                    @change="onChange"
+                >
+                <span class="text-xl" :class="optionLabelClass">
+                    {{ option.label }}
+                </span>
+            </label>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useAttrs } from 'vue'
+
+type RadioOption = {
+    value: string | number
+    label: string
+}
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+    defineProps<{
+        id?: string
+        name?: string
+        label?: string
+        modelValue: string | number | null | undefined
+        options: RadioOption[]
+        disabled?: boolean
+        wrapperClass?: string
+        labelClass?: string
+        groupClass?: string
+        itemClass?: string
+        inputClass?: string
+        optionLabelClass?: string
+    }>(),
+    {
+        name: '',
+        label: '',
+        disabled: false,
+        wrapperClass: '',
+        labelClass: '',
+        groupClass: '',
+        itemClass: '',
+        inputClass: '',
+        optionLabelClass: ''
+    }
+)
+
+const emit = defineEmits<{
+    (event: 'update:modelValue', value: string): void
+}>()
+
+const attrs = useAttrs()
+
+const onChange = (event: Event) => {
+    const target = event.target as HTMLInputElement
+    emit('update:modelValue', target.value)
+}
+</script>
--- a/frontend/components/ui/UiSelect.vue
+++ b/frontend/components/ui/UiSelect.vue
@@ -0,0 +1,85 @@
+<template>
+    <div :class="['flex flex-col', wrapperClass]">
+        <label
+            v-if="label"
+            :for="id"
+            class="font-bold uppercase text-xl text-primary-700"
+            :class="labelClass"
+        >
+            {{ label }}
+        </label>
+        <select
+            :id="id"
+            :value="modelValue ?? ''"
+            :disabled="disabled || loading"
+            v-bind="attrs"
+            class="border-b border-primary-700 justify-self-start text-xl text-primary-700 py-[6px] bg-transparent"
+            :class="[
+                isEmpty ? 'text-neutral-400' : 'text-primary-700',
+                disabled || loading ? 'cursor-not-allowed' : 'cursor-pointer',
+                selectClass
+            ]"
+            @change="onChange"
+        >
+            <option value="" disabled class="text-neutral-400">
+                {{ placeholderText }}
+            </option>
+            <option
+                v-for="option in options"
+                :key="option.value"
+                :value="option.value"
+                class="text-primary-700"
+            >
+                {{ option.label }}
+            </option>
+        </select>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue'
+
+type SelectOption = {
+    value: string | number
+    label: string
+}
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+    defineProps<{
+        id?: string
+        label?: string
+        placeholder?: string
+        modelValue: string | number | null | undefined
+        options: SelectOption[]
+        disabled?: boolean
+        loading?: boolean
+        wrapperClass?: string
+        labelClass?: string
+        selectClass?: string
+    }>(),
+    {
+        placeholder: 'Sélectionner',
+        disabled: false,
+        loading: false,
+        wrapperClass: '',
+        labelClass: '',
+        selectClass: ''
+    }
+)
+
+const emit = defineEmits<{
+    (event: 'update:modelValue', value: string): void
+}>()
+
+const attrs = useAttrs()
+
+const isEmpty = computed(() => props.modelValue === '' || props.modelValue === null || props.modelValue === undefined)
+const placeholderText = computed(() => props.placeholder || 'Sélectionner')
+
+const onChange = (event: Event) => {
+    const target = event.target as HTMLSelectElement
+    emit('update:modelValue', target.value)
+}
+</script>
--- a/frontend/components/ui/UiTextInput.vue
+++ b/frontend/components/ui/UiTextInput.vue
@@ -0,0 +1,68 @@
+<template>
+    <div :class="['flex flex-col', wrapperClass]">
+        <label
+            v-if="label"
+            :for="id"
+            class="font-bold uppercase text-xl text-primary-700"
+            :class="labelClass"
+        >
+            {{ label }}
+        </label>
+        <input
+            :id="id"
+            type="text"
+            :value="modelValue ?? ''"
+            :placeholder="placeholder"
+            :maxlength="maxlength"
+            :disabled="disabled"
+            v-bind="attrs"
+            class="border-b border-black text-xl py-[6px] bg-transparent text-primary-700"
+            :class="[
+                isEmpty ? 'text-neutral-400' : 'text-black',
+                disabled ? 'cursor-not-allowed' : 'cursor-text',
+                inputClass
+            ]"
+            @input="onInput"
+        >
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+    defineProps<{
+        id?: string
+        label?: string
+        modelValue: string | null | undefined
+        placeholder?: string
+        maxlength?: number | string
+        disabled?: boolean
+        wrapperClass?: string
+        labelClass?: string
+        inputClass?: string
+    }>(),
+    {
+        placeholder: '',
+        maxlength: undefined,
+        disabled: false,
+        wrapperClass: '',
+        labelClass: '',
+        inputClass: ''
+    }
+)
+
+const emit = defineEmits<{
+    (event: 'update:modelValue', value: string): void
+}>()
+
+const attrs = useAttrs()
+const isEmpty = computed(() => !props.modelValue)
+
+const onInput = (event: Event) => {
+    const target = event.target as HTMLInputElement
+    emit('update:modelValue', target.value)
+}
+</script>
--- a/frontend/components/ui/license-plate-input.vue
+++ b/frontend/components/ui/license-plate-input.vue
@@ -1,26 +1,27 @@
 <template>
  <div class="flex flex-col">
-    <label :for="inputId" class="font-bold uppercase text-xl mb-4">{{ label }}</label>
-    <input
-      :id="inputId"
-      :value="modelValue"
-      v-maska="maskOptions"
-      type="text"
-      :maxlength="maxLength"
-      :placeholder="placeholderText"
-      class="border-b border-black justify-self-start text-xl pb-[6px] uppercase"
-      @input="handleInput"
-    />
-    <label :for="checkboxId" class="mt-3 flex items-center gap-3 text-sm">
-      <input
-        :id="checkboxId"
-        :checked="allowAny"
-        type="checkbox"
-        class="h-4 w-4 accent-primary-500"
-        @change="toggleAllowAny"
-      />
-      Autoriser un format libre
-    </label>
+    <label :for="inputId" class="font-bold uppercase text-xl text-primary-500">{{ label }}</label>
+      <div class="flex items-end gap-8">
+          <input
+              :id="inputId"
+              :value="modelValue"
+              v-maska="maskOptions"
+              type="text"
+              :maxlength="maxLength"
+              :placeholder="placeholderText"
+              class="border-b border-black flex-1 min-w-0 text-xl text-primary-500 uppercase h-[36px] py-[6px]"
+              @input="handleInput"
+          />
+          <UiCheckbox
+              :id="checkboxId"
+              :model-value="allowAny"
+              label="Autoriser un format libre"
+              wrapper-class="ml-auto"
+              label-class="gap-3 whitespace-nowrap text-sm"
+              input-class="h-4 w-4 accent-primary-500"
+              @update:modelValue="handleAllowAnyChange"
+          />
+      </div>
  </div>
 </template>

@@ -78,13 +79,7 @@ const handleInput = (event: Event) => {
  emit('update:modelValue', target.value)
 }

-const toggleAllowAny = (event: Event) => {
-  const target = event.target as HTMLInputElement | null
-  if (!target) {
-    return
-  }
-
-  const nextValue = target.checked
+const handleAllowAnyChange = (nextValue: boolean) => {
  emit('update:allowAny', nextValue)
  if (!nextValue) {
    emit('update:modelValue', props.modelValue)
--- a/frontend/components/ui/pdf-printer.vue
+++ b/frontend/components/ui/pdf-printer.vue
@@ -1,20 +0,0 @@
-<template>
-    <iframe ref="printFrame" class="hidden" />
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import { usePdfPrinter } from '~/composables/usePdfPrinter'
-
-const printFrame = ref<HTMLIFrameElement | null>(null)
-const { printPdf } = usePdfPrinter()
-
-// Expose une methode simple pour imprimer un PDF depuis les ecrans.
-const print = async (url: string): Promise<void> => {
-    return printPdf(url, printFrame)
-}
-
-defineExpose({
-    print
-})
-</script>
--- a/frontend/components/ui/stepper.vue
+++ b/frontend/components/ui/stepper.vue
@@ -0,0 +1,84 @@
+<template>
+    <div class="relative w-full">
+        <div class="relative h-[18px] text-[16px] uppercase font-bold text-black mb-3">
+            <div
+                v-for="(label, index) in labels"
+                :key="label"
+                class="absolute top-0 whitespace-nowrap text-primary-500"
+                :class="labelClass(index)"
+                :style="positionStyle(index)"
+            >
+                {{ label }}
+            </div>
+        </div>
+        <div class="relative h-[22px]">
+            <div class="absolute left-0 right-0 top-1/2 h-[2px] -translate-y-1/2 bg-black"></div>
+            <div
+                v-for="(_, index) in labels"
+                :key="index"
+                class="absolute top-1/2 h-[22px] w-[22px] -translate-y-1/2 rounded-full border border-black"
+                :class="[
+                    dotClass(index),
+                    isActive(index) ? 'bg-black' : 'bg-white',
+                    isClickable(index) ? 'cursor-pointer' : 'cursor-not-allowed'
+                ]"
+                :style="positionStyle(index)"
+                @click="handleClick(index)"
+            ></div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+type Props = {
+    labels: string[]
+    currentStep: number
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{
+    (e: 'select', step: number): void
+}>()
+
+const stepCount = computed(() => Math.max(props.labels.length, 1))
+
+const positionStyle = (index: number) => {
+    if (stepCount.value <= 1) {
+        return { left: '0%' }
+    }
+    if (index === 0) {
+        return { left: '0%' }
+    }
+    if (index === stepCount.value - 1) {
+        return { right: '0%' }
+    }
+    const percent = (index / (stepCount.value - 1)) * 100
+    return { left: `${percent}%` }
+}
+
+const isMiddle = (index: number) => index > 0 && index < stepCount.value - 1
+const isLast = (index: number) => index === stepCount.value - 1
+
+const dotClass = (index: number) => (isMiddle(index) ? '-translate-x-1/2' : '')
+
+const labelClass = (index: number) => {
+    if (isLast(index)) {
+        return 'text-right'
+    }
+    if (isMiddle(index)) {
+        return 'text-center -translate-x-1/2'
+    }
+    return 'text-left'
+}
+
+const isActive = (index: number) => index === props.currentStep
+
+const isClickable = (index: number) => index <= props.currentStep
+
+const handleClick = (index: number) => {
+    if (!isClickable(index)) {
+        return
+    }
+    emit('select', index)
+}
+</script>
--- a/frontend/composables/useApi.ts
+++ b/frontend/composables/useApi.ts
@@ -29,6 +29,7 @@ export const useApi = (): ApiClient => {
  const toast = useToast()
  const auth = useAuthStore()
  const nuxtApp = useNuxtApp()
+  let isHandlingUnauthorized = false
  const i18n = nuxtApp.$i18n as
    | {
        t: (key: string) => string
@@ -95,7 +96,23 @@ export const useApi = (): ApiClient => {
        })
      }
    },
-    onResponseError({ response, error, options }) {
+    async onResponseError({ response, error, options }) {
+      if (response?.status === 401) {
+        const requestUrl = typeof options?.url === 'string' ? options.url : ''
+        if (!requestUrl.includes('login_check') && !requestUrl.includes('logout')) {
+          if (!isHandlingUnauthorized) {
+            isHandlingUnauthorized = true
+            auth.clearSession()
+            const route = useRoute()
+            if (route.path !== '/login') {
+              await navigateTo('/login')
+            }
+            isHandlingUnauthorized = false
+          }
+        }
+        return
+      }
+
      const apiOptions = options as ApiFetchOptions<'json'>
      if (apiOptions?.toast === false) {
        return
--- a/frontend/composables/useAppVersion.ts
+++ b/frontend/composables/useAppVersion.ts
@@ -0,0 +1,17 @@
+export const useAppVersion = () => {
+    const api = useApi()
+    const version = useState<string | null>('app-version', () => null)
+
+    const load = async () => {
+        if (version.value) {
+            return version.value
+        }
+        const response = await api.get<{ version: string }>('version', {}, {
+            toast: false
+        })
+        version.value = response.version
+        return version.value
+    }
+
+    return { version, load }
+}
--- a/frontend/composables/usePdfPrinter.ts
+++ b/frontend/composables/usePdfPrinter.ts
@@ -1,40 +1,29 @@
-import type { Ref } from 'vue'
 import { useApi } from '~/composables/useApi'

-type PrintFrameRef = Ref<HTMLIFrameElement | null>
-
 export const usePdfPrinter = () => {
-  const api = useApi()
+    const api = useApi()

-  const printPdf = async (url: string, frameRef: PrintFrameRef): Promise<void> => {
-    if (!import.meta.client) {
-      return
+    const printPdf = async (url: string, filename = 'document.pdf'): Promise<void> => {
+        const blob = await api.getBlob(url)
+
+        const pdfBlob = blob.type === 'application/pdf'
+            ? blob
+            : new Blob([blob], { type: 'application/pdf' })
+
+        const blobUrl = URL.createObjectURL(pdfBlob)
+
+        const a = document.createElement('a')
+        a.href = blobUrl
+        a.download = filename
+        a.style.display = 'none'
+        document.body.appendChild(a)
+        a.click()
+        a.remove()
+        // L'ouverture dans un nouvel onglet déclenche un 2e PDF sans le nom personnalisé.
+        setTimeout(() => URL.revokeObjectURL(blobUrl), 60_000)
    }

-    const frame = frameRef.value
-    if (!frame) {
-      return
+    return {
+        printPdf
    }
-
-    // On charge le PDF en blob pour rester en same-origin dans l'iframe.
-    const blob = await api.getBlob(url)
-    const blobUrl = URL.createObjectURL(blob)
-
-    const tryPrint = () => {
-      frame.contentWindow?.focus()
-      frame.contentWindow?.print()
-    }
-
-    frame.onload = () => {
-      tryPrint()
-      // On libere l'URL blob apres l'impression.
-      setTimeout(() => URL.revokeObjectURL(blobUrl), 2000)
-    }
-    frame.src = blobUrl
-    setTimeout(tryPrint, 1200)
-  }
-
-  return {
-    printPdf
-  }
 }
--- a/frontend/composables/useWeighing.ts
+++ b/frontend/composables/useWeighing.ts
@@ -1,25 +1,22 @@
 import type {Ref} from 'vue'
 import {computed, ref} from 'vue'
-import type {ReceptionData, WeightEntryData} from '~/services/dto/reception-data'
+import type {ReceptionData, ReceptionPayload, WeightEntryData} from '~/services/dto/reception-data'
 import type {WeightData} from '~/services/dto/weight-data'
 import {getWeight} from '~/services/reception'
+import {getWeightShipment} from '~/services/shipment'
 import {createWeight, updateWeight} from '~/services/weight'
+import type {UseWeighingShipmentOptions, UseWeighingOptions} from '~/services/weight'
+import type {WeightShipmentEntryData} from "~/services/dto/shipment-data";

 export type WeighingMode = 'gross' | 'tare'

-type UseWeighingOptions = {
-    mode: WeighingMode
-    reception: Ref<ReceptionData | null>
-    updateReception: (id: number, payload: Partial<ReceptionData>) => Promise<ReceptionData | null>
-    loadReception?: (id: number) => Promise<ReceptionData | null>
-}

 export const useWeighing = ({
-    mode,
-    reception,
-    updateReception,
-    loadReception
-}: UseWeighingOptions) => {
+                                mode,
+                                reception,
+                                updateReception,
+                                loadReception
+                            }: UseWeighingOptions) => {
    const weightData = ref<WeightData | null>(null)
    const isFetching = ref(false)

@@ -65,7 +62,7 @@ export const useWeighing = ({
            })
        } else {
            await createWeight({
-                reception: `/receptions/${reception.value.id}`,
+                reception: `/api/receptions/${reception.value.id}`,
                type: mode,
                dsd: baseDsd,
                weight: baseWeight,
@@ -97,3 +94,87 @@ export const useWeighing = ({
        saveWeight
    }
 }
+
+export const useWeighingShipment = ({
+                                        modeShipment,
+                                        shipment,
+                                        updateShipment,
+                                        loadShipment
+                                    }: UseWeighingShipmentOptions) => {
+    const weightData = ref<WeightData | null>(null)
+    const isFetching = ref(false)
+
+    const currentWeightEntry = computed<WeightShipmentEntryData | null>(() => {
+        const weights = shipment.value?.weights ?? []
+        return weights.find((entry) => entry.type === modeShipment) ?? null
+    })
+
+    const displayWeight = computed(() => weightData.value?.weight ?? currentWeightEntry.value?.weight ?? null)
+    const displayDsd = computed(() => weightData.value?.dsd ?? currentWeightEntry.value?.dsd ?? '-')
+    const title = computed(() => (modeShipment === 'gross' ? 'Pesée à vide' : 'Pesée à plein'))
+    const showLoadingBox = computed(
+        () => isFetching.value || (displayWeight.value === null && currentWeightEntry.value === null)
+    )
+
+    const fetchWeight = async () => {
+        isFetching.value = true
+        weightData.value = await getWeightShipment().finally(() => {
+            isFetching.value = false
+        })
+    }
+
+    const saveWeight = async () => {
+        if (!shipment.value) {
+            return
+        }
+
+        const existingEntry = currentWeightEntry.value
+        const baseDsd = weightData.value?.dsd ?? existingEntry?.dsd ?? null
+        const baseWeight = weightData.value?.weight ?? existingEntry?.weight ?? null
+        const baseWeighedAt = weightData.value?.weighedAt ?? existingEntry?.weighedAt ?? null
+
+        if (baseWeight === null) {
+            return
+        }
+
+        if (existingEntry?.id) {
+            await updateWeight(existingEntry.id, {
+                type: modeShipment,
+                dsd: baseDsd,
+                weight: baseWeight,
+                weighedAt: baseWeighedAt
+            })
+        } else {
+            await createWeight({
+                shipment: `/api/shipments/${shipment.value.id}`,
+                type: modeShipment,
+                dsd: baseDsd,
+                weight: baseWeight,
+                weighedAt: baseWeighedAt
+            })
+        }
+
+        const nextStep = modeShipment === 'tare'
+            ? shipment.value.currentStep
+            : shipment.value.currentStep + 1
+        await updateShipment(shipment.value.id, {
+            currentStep: nextStep,
+            isValid: shipment.value.isValid
+        })
+
+        if (loadShipment) {
+            await loadShipment(shipment.value.id)
+        }
+    }
+
+    return {
+        weightData,
+        currentWeightEntry,
+        displayWeight,
+        displayDsd,
+        title,
+        showLoadingBox,
+        fetchWeight,
+        saveWeight
+    }
+}
--- a/frontend/constants/steps.ts
+++ b/frontend/constants/steps.ts
@@ -0,0 +1,22 @@
+export enum StepLabel {
+    Reception = 'Réception',
+    GrossWeighing = 'Pesée à plein',
+    Selection = 'Sélection réception',
+    TareWeighing = 'Pesée à vide',
+    Shipment = 'Expédition',
+    ShipmentLoading = 'Chargement',
+}
+
+export const RECEPTION_STEP_LABELS = [
+    StepLabel.Reception,
+    StepLabel.GrossWeighing,
+    StepLabel.Selection,
+    StepLabel.TareWeighing
+]
+
+export const SHIPMENT_STEP_LABELS = [
+    StepLabel.Shipment,
+    StepLabel.TareWeighing,
+    StepLabel.ShipmentLoading,
+    StepLabel.GrossWeighing,
+]
--- a/frontend/i18n/locales/fr.json
+++ b/frontend/i18n/locales/fr.json
@@ -1,32 +1,147 @@
 {
-  "errors": {
-    "http": {
-      "get": "Impossible de récupérer les données.",
-      "post": "Impossible de créer la ressource.",
-      "put": "Impossible de mettre à jour la ressource.",
-      "patch": "Impossible de mettre à jour la ressource.",
-      "delete": "Impossible de supprimer la ressource."
+    "errors": {
+        "http": {
+            "get": "Impossible de récupérer les données.",
+            "post": "Impossible de créer la ressource.",
+            "put": "Impossible de mettre à jour la ressource.",
+            "patch": "Impossible de mettre à jour la ressource.",
+            "delete": "Impossible de supprimer la ressource."
+        },
+        "reception": {
+            "list": "Impossible de récupérer la liste des réceptions.",
+            "fetch": "Impossible de récupérer la réception.",
+            "create": "Impossible de créer la réception.",
+            "update": "Impossible de mettre à jour la réception.",
+            "weight": "Impossible de récupérer la pesée."
+        },
+        "weight": {
+            "update": "Impossible de mettre à jour la pesée"
+        },
+        "shipment": {
+            "list": "Impossible de récupérer la liste des éxpeditions.",
+            "fetch": "Impossible de récupérer l'éxpeditions.",
+            "create": "Impossible de créer l'éxpeditions.",
+            "update": "Impossible de mettre à jour l'éxpeditions.",
+            "weigh": "Impossible de récupérer la pesée."
+        },
+        "shipmentBovine": {
+            "list": "Impossible de récupérer la liste des bovins de l'éxpedition.",
+            "create": "Impossible d'enregistrer le bovin.",
+            "delete": "Impossible de supprimer le bovin.",
+            "update": "Impossible de mettre à jour le bovin."
+        },
+        "shipmentType": {
+            "list": "Impossible de récupérer la liste des types d'éxpedition."
+        },
+        "receptionType": {
+            "list": "Impossible de récupérer la liste des types de réception."
+        },
+        "merchandiseType": {
+            "list": "Impossible de récupérer la liste des types de marchandises."
+        },
+        "building": {
+            "list": "Impossible de récupérer la liste des bâtiments."
+        },
+        "pelletType": {
+            "list": "Impossible de récupérer la liste des types de granulés."
+        },
+        "receptionPelletBuilding": {
+            "list": "Impossible de récupérer la liste des dépôts de granulés.",
+            "create": "Impossible d'enregistrer le dépôt de granulés.",
+            "delete": "Impossible de supprimer le dépôt de granulés."
+        },
+        "receptionBovine": {
+            "list": "Impossible de récupérer la liste des bovins de la réception.",
+            "create": "Impossible d'enregistrer le bovin.",
+            "delete": "Impossible de supprimer le bovin."
+        },
+        "supplier": {
+            "list": "Impossible de récupérer la liste des fournisseurs.",
+            "fetch": "Impossible de récupérer le fournisseur.",
+            "create": "Impossible de créer le fournisseur.",
+            "update": "Impossible de mettre à jour le fournisseur.",
+            "nameRequired": "Le nom du fournisseur est obligatoire."
+        },
+        "address": {
+            "fetch": "Impossible de récupérer l'adresse.",
+            "create": "Impossible de créer l'adresse.",
+            "update": "Impossible de mettre à jour l'adresse.",
+            "entityNotFound": "Entité introuvable.",
+            "streetRequired": "La rue est obligatoire.",
+            "postalCodeRequired": "Le code postal est obligatoire.",
+            "cityRequired": "La ville est obligatoire.",
+            "countryCodeInvalid": "Le pays doit être un code ISO2 (2 lettres)."
+        },
+        "customer": {
+            "list": "Impossible de récupérer la liste des clients.",
+            "fetch": "Impossible de récupérer le client.",
+            "create": "Impossible de créer le client.",
+            "update": "Impossible de mettre à jour le client."
+        },
+        "truck": {
+            "list": "Impossible de récupérer la liste des camions."
+        },
+        "bovin": {
+            "list": "Impossible de récupérer la liste des races de bovins.",
+            "fetch": "Impossible de récupérer le type bovin.",
+            "create": "Impossible de créer le type bovin.",
+            "update": "Impossible de mettre à jour le type bovin."
+        },
+        "carrier": {
+            "list": "Impossible de récupérer la liste des transporteurs.",
+            "fetch": "Impossible de récupérer les données du transporteur",
+            "update": "Impossible de mettre à jour le transporteur",
+            "create": "Impossible de créer le transporteur"
+        },
+        "driver": {
+            "list": "Impossible de récupérer la liste des chauffeurs."
+        },
+        "vehicle": {
+            "list": "Impossible de récupérer la liste des immatriculations."
+        },
+        "auth": {
+            "login": "Identifiants invalides.",
+            "users": "Impossible de récupérer les utilisateurs.",
+            "logout": "Impossible de se déconnecter.",
+            "update": "Impossible de mettre à jour l'utilisateur.",
+            "create": "Impossible de créer l'utilisateur."
+        }
    },
-    "reception": {
-      "list": "Impossible de récupérer la liste des réceptions.",
-      "fetch": "Impossible de récupérer la réception.",
-      "create": "Impossible de créer la réception.",
-      "update": "Impossible de mettre à jour la réception.",
-      "weigh": "Impossible de récupérer la pesée."
-    },
-    "auth": {
-      "login": "Identifiants invalides.",
-      "users": "Impossible de récupérer les utilisateurs.",
-      "logout": "Impossible de se déconnecter."
+    "success": {
+        "reception": {
+            "update": "Réception mise à jour avec succès."
+        },
+        "shipment": {
+            "update": "Éxpedition mise à jour avec succès."
+        },
+        "supplier": {
+            "create": "Fournisseur créé avec succès.",
+            "update": "Fournisseur mis à jour avec succès."
+        },
+        "customer": {
+            "create": "Client créé avec succès.",
+            "update": "Client mis à jour avec succès."
+        },
+        "address": {
+            "create": "Adresse créée avec succès.",
+            "update": "Adresse mise à jour avec succès."
+        },
+        "auth": {
+            "update": "Utilisateur mis à jour avec succès.",
+            "create": "Utilisateur créé avec succès.",
+            "login": "Connexion réussie.",
+            "logout": "Déconnexion réussie."
+        },
+        "carrier": {
+            "update": "Transporteur mis à jour",
+            "create": "Transporteur créé"
+        },
+        "bovin": {
+            "update": "Type bovin mis à jour avec succès.",
+            "create": "Type bovin créé avec succès."
+        },
+        "weight": {
+            "update": "Pesée mis à jour"
+        }
    }
-  },
-  "success": {
-    "reception": {
-      "update": "Réception mise à jour avec succès."
-    },
-    "auth": {
-      "login": "Connexion réussie.",
-      "logout": "Déconnexion réussie."
-    }
-  }
 }
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -1,61 +1,269 @@
 <template>
-    <div class="min-h-screen bg-white text-neutral-900">
-        <header class="w-full border-b border-neutral-200 bg-primary-500">
-            <div class="flex w-full items-center px-6 py-4">
-                <NuxtLink to="/" class="flex items-center gap-3">
-          <span
-              class="flex items-center justify-center bg-white text-xl font-bold uppercase text-primary-500 p-4"
-          >
+    <div class="min-h-screen text-neutral-900 flex flex-col">
+        <!-- HEADER -->
+        <header class="w-full bg-primary-500 py-5 px-6">
+            <div class="flex w-full items-center justify-between">
+                <!-- Burger (mobile) -->
+                <button
+                    type="button"
+                    class="inline-flex items-center justify-center text-3xl text-white md:hidden"
+                    aria-label="Ouvrir le menu"
+                    @click="toggleMenu"
+                >
+          <span aria-hidden="true" class="flex items-center">
+            <Icon name="mdi:menu" size="44"/>
+          </span>
+                </button>
+
+                <!-- Logo -->
+                <NuxtLink to="/" class="shrink-0">
+          <span class="flex items-center justify-center bg-white text-xl font-bold uppercase px-6 py-4">
            LOGO
          </span>
                </NuxtLink>
-                <nav class="mx-8 flex flex-1 gap-8 text-2xl font-bold uppercase text-white">
-                    <NuxtLink to="/" custom v-slot="{ href, navigate, isExactActive }">
+
+                <!-- NAV centré (desktop) -->
+                <nav
+                    class="hidden md:flex flex-1 items-center justify-center gap-8 text-xl font-bold uppercase text-white"
+                >
+                    <NuxtLink to="/" custom v-slot="{ href, navigate }">
                        <a
                            :href="href"
                            @click="navigate"
-                            :class="isExactActive ? 'opacity-100' : 'opacity-50'"
+                            :class="route.path === '/'
+                            ? 'opacity-100'
+                            : 'opacity-65 hover:opacity-100 transition'"
                        >
                            Accueil
                        </a>
                    </NuxtLink>
-                    <NuxtLink to="/reception" custom v-slot="{ href, navigate, isActive }">
+
+                    <NuxtLink
+                        v-if="auth.isAdmin"
+                        to="/admin/supplier/supplier-list"
+                        custom
+                        v-slot="{ href, navigate }"
+                    >
                        <a
                            :href="href"
                            @click="navigate"
-                            :class="isReceptionActive ? 'opacity-100' : 'opacity-50'"
+                            :class="route.path.startsWith('/admin/supplier')
+                            ? 'opacity-100'
+                            : 'opacity-65 hover:opacity-100 transition'"
                        >
-                            Reception
+                            Fournisseurs
+                        </a>
+                    </NuxtLink>
+
+                    <NuxtLink
+                        v-if="auth.isAdmin"
+                        to="/admin/carrier/carrier-list"
+                        custom
+                        v-slot="{ href, navigate }"
+                    >
+                        <a
+                            :href="href"
+                            @click="navigate"
+                            :class="route.path.startsWith('/admin/carrier')
+                            ? 'opacity-100'
+                            : 'opacity-65 hover:opacity-100 transition'"
+                        >
+                            Transporteurs
+                        </a>
+                    </NuxtLink>
+
+                    <NuxtLink
+                        v-if="auth.isAdmin"
+                        to="/admin/user/list"
+                        custom
+                        v-slot="{ href, navigate }"
+                    >
+                        <a
+                            :href="href"
+                            @click="navigate"
+                            :class="route.path.startsWith('/admin/user')
+                            ? 'opacity-100'
+                            : 'opacity-65 hover:opacity-100 transition'"
+                        >
+                            Utilisateurs
+                        </a>
+                    </NuxtLink>
+
+                    <NuxtLink
+                        v-if="auth.isAdmin"
+                        to="/admin/customer/customer-list"
+                        custom
+                        v-slot="{ href, navigate }"
+                    >
+                        <a
+                            :href="href"
+                            @click="navigate"
+                            :class="route.path.startsWith('/admin/customer')
+                            ? 'opacity-100'
+                            : 'opacity-65 hover:opacity-100 transition'"
+                        >
+                            Clients
+                        </a>
+                    </NuxtLink>
+
+                    <NuxtLink
+                        v-if="auth.isAdmin"
+                        to="/admin/bovin/bovin-list"
+                        custom
+                        v-slot="{ href, navigate }"
+                    >
+                        <a
+                            :href="href"
+                            @click="navigate"
+                            :class="route.path.startsWith('/admin/bovin')
+                            ? 'opacity-100'
+                            : 'opacity-65 hover:opacity-100 transition'"
+                        >
+                            Bovins
                        </a>
                    </NuxtLink>
                </nav>
-                <button
-                    type="button"
-                    class="ml-auto text-xl font-bold uppercase text-white transition hover:opacity-80"
-                    @click="handleLogout"
-                >
-                    Déconnexion
-                </button>
+
+                <!-- Spacer mobile (pour centrer visuellement le header si besoin) -->
+                <div class="w-[44px] md:hidden"></div>
+
+                <!-- User dropdown à droite (desktop) -->
+                <div v-if="auth.isAuthenticated" class="ml-auto relative hidden md:flex items-center text-white group">
+                    <button
+                        type="button"
+                        class="inline-flex items-center py-2 -my-2 text-xl leading-none transition hover:opacity-80"
+                        aria-haspopup="true"
+                    >
+                        <span class="capitalize font-bold">{{ userDisplayName }}</span>
+                        <span
+                            class="ml-[6px] inline-flex items-center font-bold transition-transform group-hover:rotate-180 group-focus-within:rotate-180">
+                            <Icon name="mdi:chevron-down" size="20"/>
+                        </span>
+                    </button>
+
+                    <div
+                        class="absolute right-0 top-full z-10 w-56 rounded-md bg-primary-500 py-2 border-neutral-300 border shadow-lg
+                        opacity-0 invisible pointer-events-none transition
+                        group-hover:opacity-100 group-hover:visible group-hover:pointer-events-auto
+                        group-focus-within:opacity-100 group-focus-within:visible group-focus-within:pointer-events-auto"
+                        role="menu"
+                    >
+                        <button
+                            type="button"
+                            class="w-full px-4 py-2 text-left text-sm font-semibold text-white opacity-85 hover:opacity-100 transition"
+                            @click="handleLogout"
+                        >
+                            Déconnexion
+                        </button>
+                    </div>
+                </div>
            </div>
+
+            <!-- Overlay (mobile) -->
+            <transition
+                enter-active-class="transition duration-200 ease-out"
+                enter-from-class="opacity-0"
+                enter-to-class="opacity-100"
+                leave-active-class="transition duration-150 ease-in"
+                leave-from-class="opacity-100"
+                leave-to-class="opacity-0"
+            >
+                <div
+                    v-if="isMenuOpen"
+                    class="fixed inset-0 z-40 bg-black/40 md:hidden"
+                    @click="closeMenu"
+                />
+            </transition>
+
+            <!-- Drawer (mobile) -->
+            <transition
+                enter-active-class="transition duration-200 ease-out"
+                enter-from-class="-translate-x-full"
+                enter-to-class="translate-x-0"
+                leave-active-class="transition duration-150 ease-in"
+                leave-from-class="translate-x-0"
+                leave-to-class="-translate-x-full"
+            >
+                <aside
+                    v-if="isMenuOpen"
+                    class="fixed left-0 top-0 z-50 h-full w-full bg-primary-500 px-6 pb-8 pt-6 text-white shadow-xl md:hidden"
+                >
+                    <div class="flex items-center justify-between">
+                        <span class="text-2xl font-bold uppercase">Menu</span>
+                        <button
+                            type="button"
+                            class="text-2xl"
+                            aria-label="Fermer le menu"
+                            @click="closeMenu"
+                        >
+                            <Icon name="mdi:close" size="44"/>
+                        </button>
+                    </div>
+
+                    <nav class="mt-8 flex flex-col gap-6 text-xl font-bold uppercase">
+                        <NuxtLink to="/admin/dashboard" @click="closeMenu">Accueil</NuxtLink>
+                        <NuxtLink v-if="auth.isAdmin" to="/admin/supplier/supplier-list" @click="closeMenu">
+                            Fournisseurs
+                        </NuxtLink>
+                        <NuxtLink v-if="auth.isAdmin" to="/admin/carrier/carrier-list" @click="closeMenu">
+                            Transporteurs
+                        </NuxtLink>
+                        <NuxtLink v-if="auth.isAdmin" to="/admin/user/list" @click="closeMenu">
+                            Utilisateurs
+                        </NuxtLink>
+                        <NuxtLink v-if="auth.isAdmin" to="/admin/customer/customer-list" @click="closeMenu">
+                            Clients
+                        </NuxtLink>
+                        <NuxtLink v-if="auth.isAdmin" to="/admin/bovin/bovin-list" @click="closeMenu">
+                            Bovins
+                        </NuxtLink>
+                    </nav>
+
+                    <button
+                        v-if="auth.isAuthenticated"
+                        type="button"
+                        class="mt-6 text-xl font-bold uppercase"
+                        @click="handleLogout"
+                    >
+                        Déconnexion
+                    </button>
+                </aside>
+            </transition>
        </header>
-        <main class="mx-auto w-full max-w-[1050px] px-6 pt-[90px] pb-0">
+        <main class="mx-auto w-full max-w-[1280px] mt-16">
            <slot/>
        </main>
+        <footer class="w-full mt-auto bg-primary-500 px-6 py-3">
+            <p class="font-bold text-white text-right">v{{ version }}</p>
+        </footer>
    </div>
 </template>

 <script setup lang="ts">
-import { useAuthStore } from '~/stores/auth'
+import {useAuthStore} from '~/stores/auth'

 const route = useRoute()
 const auth = useAuthStore()
-const isReceptionActive = computed(() => route.path.startsWith('/reception'))
+const {version} = useAppVersion()
+
+const isMenuOpen = ref(false)
+
+const userDisplayName = computed(() => auth.user?.username ?? 'Utilisateur')
+
+const closeMenu = () => {
+    isMenuOpen.value = false
+}
+
+const toggleMenu = () => {
+    isMenuOpen.value = !isMenuOpen.value
+}

 const handleLogout = async () => {
-  try {
-    await auth.logout()
-  } finally {
-    await navigateTo('/login')
-  }
+    try {
+        await auth.logout()
+    } finally {
+        closeMenu()
+        await navigateTo('/login')
+    }
 }
 </script>
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -9,9 +9,10 @@ export default defineNuxtConfig({
    '@nuxtjs/tailwindcss',
    '@pinia/nuxt',
    'nuxt-toast',
-    '@nuxtjs/i18n'
+    '@nuxtjs/i18n',
+    '@nuxt/icon'
  ],
-  css: ['~/assets/css/toast.css'],
+  css: ['~/assets/css/main.css', '~/assets/css/toast.css'],
  runtimeConfig: {
    public: {
      apiBase: process.env.NUXT_PUBLIC_API_BASE
@@ -19,7 +20,7 @@ export default defineNuxtConfig({
  },
  toast: {
    settings: {
-      timeout: 0,
+      timeout: 10000,
      closeOnClick: true,
      progressBar: false
    }
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -7,6 +7,7 @@
      "name": "frontend",
      "hasInstallScript": true,
      "dependencies": {
+        "@nuxt/icon": "^2.2.1",
        "@nuxtjs/i18n": "^10.2.1",
        "@pinia/nuxt": "^0.11.3",
        "izitoast": "^1.4.0",
@@ -35,6 +36,19 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/@antfu/install-pkg": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@antfu/install-pkg/-/install-pkg-1.1.0.tgz",
+      "integrity": "sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==",
+      "license": "MIT",
+      "dependencies": {
+        "package-manager-detector": "^1.3.0",
+        "tinyexec": "^1.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
    "node_modules/@babel/code-frame": {
      "version": "7.27.1",
      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
@@ -1248,6 +1262,47 @@
        "url": "https://github.com/sponsors/nzakas"
      }
    },
+    "node_modules/@iconify/collections": {
+      "version": "1.0.646",
+      "resolved": "https://registry.npmjs.org/@iconify/collections/-/collections-1.0.646.tgz",
+      "integrity": "sha512-zA5Gr1MJm1SI0TjOUl7wu4kvBWXQ6Uh8ALEtqQ5ucXyUxP2M8m2bk2hfVtGykSdMlDB+Xs2AHbJ9pQqayz9WGQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
+    "node_modules/@iconify/types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
+      "license": "MIT"
+    },
+    "node_modules/@iconify/utils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@iconify/utils/-/utils-3.1.0.tgz",
+      "integrity": "sha512-Zlzem1ZXhI1iHeeERabLNzBHdOa4VhQbqAcOQaMKuTuyZCpwKbC2R4Dd0Zo3g9EAc+Y4fiarO8HIHRAth7+skw==",
+      "license": "MIT",
+      "dependencies": {
+        "@antfu/install-pkg": "^1.1.0",
+        "@iconify/types": "^2.0.0",
+        "mlly": "^1.8.0"
+      }
+    },
+    "node_modules/@iconify/vue": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-5.0.0.tgz",
+      "integrity": "sha512-C+KuEWIF5nSBrobFJhT//JS87OZ++QDORB6f2q2Wm6fl2mueSTpFBeBsveK0KW9hWiZ4mNiPjsh6Zs4jjdROSg==",
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/types": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/cyberalien"
+      },
+      "peerDependencies": {
+        "vue": ">=3"
+      }
+    },
    "node_modules/@intlify/bundle-utils": {
      "version": "11.0.3",
      "resolved": "https://registry.npmjs.org/@intlify/bundle-utils/-/bundle-utils-11.0.3.tgz",
@@ -2268,6 +2323,28 @@
        "devtools-wizard": "cli.mjs"
      }
    },
+    "node_modules/@nuxt/icon": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@nuxt/icon/-/icon-2.2.1.tgz",
+      "integrity": "sha512-GI840yYGuvHI0BGDQ63d6rAxGzG96jQcWrnaWIQKlyQo/7sx9PjXkSHckXUXyX1MCr9zY6U25Td6OatfY6Hklw==",
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/collections": "^1.0.641",
+        "@iconify/types": "^2.0.0",
+        "@iconify/utils": "^3.1.0",
+        "@iconify/vue": "^5.0.0",
+        "@nuxt/devtools-kit": "^3.1.1",
+        "@nuxt/kit": "^4.2.2",
+        "consola": "^3.4.2",
+        "local-pkg": "^1.1.2",
+        "mlly": "^1.8.0",
+        "ohash": "^2.0.11",
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.3",
+        "std-env": "^3.10.0",
+        "tinyglobby": "^0.2.15"
+      }
+    },
    "node_modules/@nuxt/kit": {
      "version": "4.2.2",
      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-4.2.2.tgz",
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -11,6 +11,7 @@
    "build:dist": "nuxt generate && rm -rf dist && cp -R .output/public dist"
  },
  "dependencies": {
+    "@nuxt/icon": "^2.2.1",
    "@nuxtjs/i18n": "^10.2.1",
    "@pinia/nuxt": "^0.11.3",
    "izitoast": "^1.4.0",
--- a/frontend/pages/admin/bovin/[[id]].vue
+++ b/frontend/pages/admin/bovin/[[id]].vue
@@ -0,0 +1,110 @@
+<template>
+    <form @submit.prevent="validate">
+        <div class="flex items-center justify-between relative">
+            <div class="flex flex-row absolute -left-[60px]">
+                <Icon
+                    @click="router.push('/admin/bovin/bovin-list')"
+                    name="gg:arrow-left-o"
+                    size="40"
+                    class="cursor-pointer text-primary-500"
+                />
+            </div>
+            <h1 class="text-4xl text-primary-500 font-bold uppercase">
+                {{ route.params.id ? 'Modifications du type bovin' : 'Ajout d\'un type bovin' }}
+            </h1>
+        </div>
+
+        <div class="grid grid-cols-2 items-start pt-7 mb-11 gap-x-[200px]">
+            <UiTextInput label="Nom du bovin" id="bovin-label" v-model="form.label" />
+            <UiTextInput label="Code bovin" id="code-id" v-model="form.code" />
+        </div>
+        <div class="flex justify-center items-center">
+            <UiButton
+                type="submit"
+                :disabled="isLoading || isHydrating"
+                class="inline-flex items-center justify-center text-xl min-w-[194px] text-white uppercase bg-primary-500 h-[50px] rounded hover:opacity-80 justify-self-end"
+            >
+                Valider
+            </UiButton>
+        </div>
+    </form>
+</template>
+
+<script setup lang="ts">
+import {createBovin, getBovin, updateBovin} from "~/services/bovine-type";
+import type {BovineTypeData, BovinFormData} from "~/services/dto/bovine-type-data";
+const router = useRouter()
+const route = useRoute()
+const isLoading = ref(false)
+const isHydrating = ref(false)
+const idBovin = computed(() => resolveId(route.params.id))
+const isEdit = computed(() => idBovin.value !== null)
+
+function resolveId(param: unknown) {
+    const idStr = Array.isArray(param) ? param[0] : param
+    if (!idStr) return null
+    const id = Number(idStr)
+    return Number.isFinite(id) ? id : null
+}
+
+const form = reactive<BovinFormData>({
+    label: '',
+    code: ''
+})
+
+
+const hydrateFromBovin = (bovin: BovineTypeData | null) => {
+    if (!bovin) {
+        return
+    }
+    isHydrating.value = true
+    form.label = bovin.label ?? ''
+    form.code = bovin.code ?? ''
+    isHydrating.value = false
+}
+
+watch(
+    () => idBovin.value,
+    async (id) => {
+        if (id === null) {
+            return
+        }
+        isLoading.value = true
+        try {
+            const bovin = await getBovin(id)
+            hydrateFromBovin(bovin)
+        } finally {
+            isLoading.value = false
+        }
+    },
+    {immediate: true}
+)
+async function validate() {
+    if (isLoading.value || isHydrating.value) return
+
+    const normalizedBovinCode = form.code.trim()
+    const normalizedBovinLabel = form.label.trim()
+
+
+    const basePayload = {
+        label: normalizedBovinLabel,
+        code: normalizedBovinCode
+
+    }
+
+    isLoading.value = true
+    try {
+        if (isEdit.value && idBovin.value !== null) {
+            await updateBovin(idBovin.value, basePayload)
+        } else {
+            await createBovin(basePayload)
+        }
+    } finally {
+        isLoading.value = false
+    }
+}
+
+async function navigate(){
+    return router.push("/admin/bovin/list")
+}
+</script>
--- a/frontend/pages/admin/bovin/bovin-list.vue
+++ b/frontend/pages/admin/bovin/bovin-list.vue
@@ -0,0 +1,67 @@
+<template>
+    <div class="flex items-center justify-between ">
+        <h1 class="text-4xl font-bold uppercase text-primary-500">Liste des types bovins</h1>
+    </div>
+    <div class="mt-7 border border-slate-200 mb-11 ">
+        <div class="grid grid-cols-2 gap-4 text-primary-700 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide">
+            <div>Nom</div>
+            <div>Code</div>
+        </div>
+        <div v-if="!auth.isAdmin" class="px-4 py-6 text-slate-400">
+            Accès réservé aux administrateurs.
+        </div>
+        <div v-else-if="bovinList.length === 0" class="px-4 py-6 text-slate-400">
+            Aucun type de bovin.
+        </div>
+        <template v-else>
+            <div
+                v-for="bovin in bovinList"
+                :key="bovin.id"
+                class="grid grid-cols-2 text-primary-700 gap-4 px-4 py-3 text-sm hover:bg-slate-50 cursor-pointer border-t border-slate-200"
+                role="button"
+                tabindex="0"
+                @click="goToBovin(bovin.id)"
+                @keydown.enter="goToBovin(bovin.id)"
+            >
+                <div>{{ bovin.label }}</div>
+                <div>{{ bovin.code }}</div>
+            </div>
+        </template>
+    </div>
+    <div class="flex justify-center items-center">
+        <NuxtLink
+            to="/admin/bovin"
+            class="inline-flex items-center justify-center text-xl text-white uppercase bg-primary-500 h-[50px] px-8 rounded hover:opacity-80 gap-2"
+            :class="auth.isAdmin ? '' : 'cursor-not-allowed opacity-60'"
+            @click="handleAddClick"
+        >
+            <Icon name="mdi:plus" size="28"  />
+            Ajouter
+        </NuxtLink>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { getBovineTypeList } from "~/services/bovine-type"
+import type { BovineTypeData } from "~/services/dto/bovine-type-data"
+import { useAuthStore } from "~/stores/auth"
+
+const bovinList = ref<BovineTypeData[]>([])
+const router = useRouter()
+const auth = useAuthStore()
+
+const goToBovin = (id: number) => {
+    if (!auth.isAdmin) return
+    router.push(`/admin/bovin/${id}`)
+}
+
+const handleAddClick = (event: Event) => {
+    if (auth.isAdmin) return
+    event.preventDefault()
+}
+
+onMounted(async () => {
+    if (!auth.isAdmin) return
+    bovinList.value = await getBovineTypeList()
+})
+</script>
--- a/frontend/pages/admin/carrier/[[id]].vue
+++ b/frontend/pages/admin/carrier/[[id]].vue
@@ -0,0 +1,113 @@
+
+<template>
+    <form @submit.prevent="validate">
+        <div class="flex items-center justify-between relative">
+            <div class="flex flex-row absolute -left-[60px]">
+                <Icon
+                    @click="router.push('/admin/carrier/carrier-list')"
+                    name="gg:arrow-left-o"
+                    size="40"
+                    class="cursor-pointer text-primary-500"
+                />
+            </div>
+            <h1 class="text-4xl text-primary-500 font-bold uppercase">
+                {{ route.params.id ? 'Modification du transporteur' : 'Ajout d\'un transporteur' }}
+            </h1>
+        </div>
+
+        <div class="grid grid-cols-2 items-start pt-7 mb-11 gap-x-[200px]">
+            <UiTextInput
+                label="Nom du transporteur"
+                id="carrier-name"
+                v-model="form.name"
+            />
+
+            <UiTextInput
+                label="Code transporteur"
+                id="code-id"
+                v-model="form.code"
+            />
+        </div>
+        <div class="flex justify-center items-center">
+            <UiButton
+                type="submit"
+                class="inline-flex items-center justify-center text-xl min-w-[194px] text-white uppercase bg-primary-500 h-[50px] rounded hover:opacity-80 justify-self-end"
+            >
+                Valider
+            </UiButton>
+        </div>
+    </form>
+
+</template>
+
+<script setup lang="ts">
+import {createCarrier, getCarrier, updateCarrier} from "~/services/carrier";
+import type {CarrierData, CarrierFormData} from "~/services/dto/carrier-data";
+import {computed} from "vue";
+const router = useRouter()
+const route = useRoute()
+const idCarrier = computed(() => resolveId(route.params.id))
+const isLoading = ref(false)
+const isHydrating = ref(false)
+
+const resolveId = (param: unknown) => {
+    const idStr = Array.isArray(param) ? param[0] : param
+    if (!idStr) return null
+    const id = Number(idStr)
+    return Number.isFinite(id) ? id : null
+}
+
+const form = reactive<CarrierFormData>({
+    code:'',
+    name:''
+})
+
+const hydrateFromUser = (carrier: CarrierData | null) => {
+    if (!carrier) {
+        return
+    }
+    isHydrating.value = true
+    form.name = carrier.name ?? ''
+    form.code = carrier.code ?? ''
+    isHydrating.value = false
+}
+
+watch(
+    () => idCarrier.value,
+    async (id) => {
+        if (id === null) {
+            return
+        }
+        isLoading.value = true
+        try {
+            const user = await getCarrier(id)
+            hydrateFromUser(user)
+        } finally {
+            isLoading.value = false
+        }
+    },
+    {immediate: true}
+)
+async function validate() {
+
+    const normalizedCarrierCode = form.code.trim()
+    const normalizedCarrierName = form.name.trim()
+
+    const basePayload = {
+        name: normalizedCarrierName,
+        code: normalizedCarrierCode
+
+    }
+
+    if(idCarrier.value){
+        await updateCarrier(idCarrier.value, basePayload)
+        return
+    }else{
+        await createCarrier(basePayload)
+    }
+}
+
+function navigate(){
+    router.push("/admin/carrier/carrier-list")
+}
+</script>
--- a/frontend/pages/admin/carrier/carrier-list.vue
+++ b/frontend/pages/admin/carrier/carrier-list.vue
@@ -0,0 +1,51 @@
+<template>
+
+    <div class="flex items-center justify-between ">
+            <h1 class="text-4xl font-bold uppercase text-primary-500">listes des transporteurs</h1>
+    </div>
+
+        <div class="mt-7 border border-slate-200 mb-11 ">
+            <div class="grid grid-cols-2 gap-4 text-primary-700 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide">
+                <div>Label</div>
+                <div>Code</div>
+            </div>
+            <div
+                v-for="carrier in carrierList"
+                :key="carrier.id"
+                class="grid grid-cols-2 text-primary-700 gap-4 px-4 py-3 text-sm hover:bg-slate-50 cursor-pointer border-t border-slate-200"
+                role="button"
+                tabindex="0"
+                @click="goToCarrier(carrier.id)"
+                @keydown.enter="goToCarrier(carrier.id)"
+            >
+                <div>{{ carrier.name}}</div>
+                <div>{{ carrier.code }}</div>
+            </div>
+        </div>
+    <div class="flex justify-center items-center">
+        <NuxtLink
+            to="/admin/carrier"
+            class="inline-flex items-center justify-center text-xl text-white uppercase bg-primary-500 h-[50px] px-8 rounded hover:opacity-80 gap-2"
+        >
+            <Icon name="mdi:plus" size="28"  />
+            Ajouter
+        </NuxtLink>
+    </div>
+
+</template>
+
+<script setup lang="ts">
+import type {CarrierData} from "~/services/dto/carrier-data";
+import {getCarrierList} from "~/services/carrier";
+
+const carrierList = ref<CarrierData[]>()
+const router = useRouter()
+
+const goToCarrier = (id: number) => {
+    router.push(`/admin/carrier/${id}`)
+}
+
+onMounted(async () => {
+    carrierList.value = await getCarrierList(false)
+})
+</script>
--- a/frontend/pages/admin/customer/[[id]].vue
+++ b/frontend/pages/admin/customer/[[id]].vue
@@ -0,0 +1,202 @@
+<template>
+    <form @submit.prevent="validate">
+        <div class="flex items-center relative">
+            <div class="flex flex-row absolute -left-[60px] ">
+                <Icon @click="router.push('/admin/customer/customer-list')" name="gg:arrow-left-o" size="40" class="cursor-pointer text-primary-500"/>
+            </div>
+            <h1 class="text-3xl text-primary-500  font-bold uppercase">
+                {{ customerId ? "Modification du client" : "Ajout d'un client" }}
+            </h1>
+        </div>
+
+        <div class="flex flex-cols-3 justify-between mb-11 pt-7">
+            <UiTextInput id="customer-name" v-model="form.name" label="Nom du client" :disabled="!auth.isAdmin" wrapper-class="w-[280px]"/>
+            <UiTextInput id="customer-phone" v-model="form.phone" label="Téléphone" :disabled="!auth.isAdmin" wrapper-class="w-[280px]"/>
+            <UiTextInput id="customer-email" v-model="form.email" label="Email" :disabled="!auth.isAdmin" wrapper-class="w-[280px]"/>
+        </div>
+        <div class="flex items-center justify-center">
+            <UiButton
+                class="inline-flex mb-28 items-center justify-center text-xl min-w-[194px] text-white uppercase bg-primary-500 h-[50px] rounded hover:opacity-80 justify-self-end"
+                type="submit"
+                :disabled="isLoading || !auth.isAdmin"
+            >
+                <Icon :name="customerId ? '' : 'mdi:plus'" size="28" />
+                {{ customerId ? "Valider" : "Ajouter" }}
+            </UiButton>
+        </div>
+
+        <div class="flex items-center justify-between mb-7">
+            <h2 class="text-3xl text-primary-500 font-bold uppercase">Adresses du client</h2>
+        </div>
+        <div class="overflow-x-auto mb-11 text-primary-700">
+            <table class="w-full border-collapse text-primary-700">
+                <thead>
+                <tr class="text-left border bg-slate-100 border-gray-200">
+                    <th class="py-3 px-4 text-sm uppercase">Libellé</th>
+                    <th class="py-3 px-4 text-sm uppercase">Rue</th>
+                    <th class="py-3 px-4 text-sm uppercase">Complément</th>
+                    <th class="py-3 px-4 text-sm uppercase">Code postal</th>
+                    <th class="py-3 px-4 text-sm uppercase">Ville</th>
+                    <th class="py-3 px-4 text-sm uppercase">Pays</th>
+                </tr>
+                </thead>
+                <tbody>
+                <template v-if="form.addresses.length === 0">
+                    <tr>
+                        <td colspan="6" class="py-4 text-slate-400">
+                            Aucune adresse.
+                        </td>
+                    </tr>
+                </template>
+                <template v-else>
+                    <tr
+                        v-for="(address, index) in form.addresses"
+                        :key="address.id ?? index"
+                        class="border border-gray-100 hover:bg-slate-50"
+                        :class="auth.isAdmin ? 'cursor-pointer' : 'cursor-not-allowed opacity-60'"
+                        @click="goToEditAddress(address.id ?? null)"
+                    >
+                        <td class="py-3 px-4">{{ address.label || "—" }}</td>
+                        <td class="py-3 px-4">{{ address.street || "—" }}</td>
+                        <td class="py-3 px-4">{{ address.street2 || "—" }}</td>
+                        <td class="py-3 px-4">{{ address.postalCode || "—" }}</td>
+                        <td class="py-3 px-4">{{ address.city || "—" }}</td>
+                        <td class="py-3 px-4">{{ address.countryCode || "—" }}</td>
+                    </tr>
+                </template>
+                </tbody>
+            </table>
+        </div>
+        <div class="flex justify-center items-center">
+            <UiButton
+                type="button"
+                class="inline-flex items-center justify-center text-xl gap-2 text-white uppercase bg-primary-500 h-[50px] rounded hover:opacity-80 justify-self-end"
+                :disabled="customerId === null || !auth.isAdmin"
+                @click="goToAddAddress"
+            >
+                <Icon name="mdi:plus" size="28" />
+                Ajouter
+            </UiButton>
+        </div>
+    </form>
+</template>
+
+<script setup lang="ts">
+import {computed, reactive, ref, watch} from "vue"
+import {createCustomer, getCustomer, updateCustomer} from "~/services/customer"
+import type {CustomerData, CustomerFormData, CustomerPayload} from "~/services/dto/customer-data"
+import {useAuthStore} from "~/stores/auth"
+
+const route = useRoute()
+const router = useRouter()
+const auth = useAuthStore()
+
+const resolveId = (param: unknown) => {
+    const idStr = Array.isArray(param) ? param[0] : param
+    if (!idStr) return null
+    const id = Number(idStr)
+    return Number.isFinite(id) ? id : null
+}
+const customerId = computed(() => resolveId(route.params.id))
+const isLoading = ref(false)
+const form = reactive<CustomerFormData>({
+    name: "",
+    phone: "",
+    email: "",
+    addresses: [],
+})
+
+const goToAddAddress = () => {
+    if (customerId.value === null || !auth.isAdmin) return
+    router.push({
+        path: "/admin/customer/address",
+        query: {
+            customerId: String(customerId.value),
+        },
+    })
+}
+
+const goToEditAddress = (addressId: number | null) => {
+    if (customerId.value === null || addressId === null || !auth.isAdmin) return
+    router.push({
+        path: "/admin/customer/address",
+        query: {
+            customerId: String(customerId.value),
+            addressId: String(addressId),
+        },
+    })
+}
+
+const hydrateFromCustomer = (customer: CustomerData | null) => {
+    if (!customer) return
+    form.name = customer.name ?? ""
+    form.phone = customer.phone ?? ""
+    form.email = customer.email ?? ""
+    if (!Array.isArray(customer.addresses) || customer.addresses.length === 0) {
+        form.addresses = []
+        return
+    }
+    if (typeof customer.addresses[0] === "string") {
+        form.addresses = []
+        return
+    }
+
+    form.addresses = customer.addresses.map((address) => ({
+        id: address.id ?? null,
+        label: address.label ?? "",
+        street: address.street ?? "",
+        street2: address.street2 ?? null,
+        postalCode: address.postalCode ?? "",
+        city: address.city ?? "",
+        countryCode: address.countryCode ?? "",
+    }))
+}
+
+watch(
+    () => customerId.value,
+    async (id) => {
+        if (id === null) return
+        isLoading.value = true
+        try {
+            const customer = await getCustomer(id)
+            hydrateFromCustomer(customer)
+        } finally {
+            isLoading.value = false
+        }
+    },
+    {immediate: true}
+)
+
+async function validate() {
+    if (isLoading.value) return
+    if (!auth.isAdmin) return
+    isLoading.value = true
+
+    try {
+        const name = form.name.trim()
+        const phone = form.phone?.trim() || null
+        const email = form.email?.trim() || null
+
+        const customerPayload: CustomerPayload = {
+            name,
+            phone,
+            email,
+        }
+        let targetId: number | null = null
+
+        if (customerId.value !== null) {
+            await updateCustomer(customerId.value, customerPayload)
+            targetId = customerId.value
+        } else {
+            const created = await createCustomer(customerPayload)
+            targetId = created.id
+        }
+
+        if (targetId !== null) {
+            await router.push(`/admin/customer/${targetId}`)
+        }
+    } finally {
+        isLoading.value = false
+    }
+}
+</script>
--- a/frontend/pages/admin/customer/address.vue
+++ b/frontend/pages/admin/customer/address.vue
@@ -0,0 +1,44 @@
+<template>
+    <Address type="customer" :address="address" @validate="validate"/>
+</template>
+
+<script setup lang="ts">
+import type { AddressData, AddressPayload } from "~/services/address"
+import { createAddress, getAddress, updateAddress } from "~/services/address"
+import { getCustomer, updateCustomer } from "~/services/customer"
+import type { CustomerData } from "~/services/dto/customer-data"
+
+const route = useRoute()
+const router = useRouter()
+const customerId = computed(() => Number(route.query.customerId))
+const customer = ref<CustomerData | null>(null)
+const addressId = computed(() => (route.query.addressId !== undefined ? Number(route.query.addressId) : null))
+const address = ref<AddressData | null>(null)
+
+const validate = async (payload: AddressPayload) => {
+    if (addressId.value !== null) {
+        await updateAddress(addressId.value, payload)
+    } else {
+        await addAddress(payload)
+        await router.push("/admin/customer/" + customerId.value)
+    }
+}
+
+const addAddress = async (payload: AddressPayload) => {
+    const response: AddressData = await createAddress(payload)
+    const addressIRI = `/api/addresses/${response.id}`
+    const existingIris = (customer.value?.addresses ?? [])
+        .map((item: any) => (typeof item === "string" ? item : `/api/addresses/${item.id}`))
+        .filter((iri: string | null) => Boolean(iri)) as string[]
+    const next = [...new Set([...existingIris, addressIRI])]
+
+    return await updateCustomer(customerId.value, { addresses: next })
+}
+
+onMounted(async () => {
+    customer.value = await getCustomer(customerId.value)
+    if (addressId.value !== null) {
+        address.value = await getAddress(addressId.value)
+    }
+})
+</script>
--- a/frontend/pages/admin/customer/customer-list.vue
+++ b/frontend/pages/admin/customer/customer-list.vue
@@ -0,0 +1,117 @@
+<template>
+    <div class="flex items-center justify-between">
+        <h1 class="text-4xl font-bold uppercase text-primary-500">Liste des clients</h1>
+    </div>
+
+    <div v-if="auth.isAdmin" class="mt-7 border border-slate-200 mb-11">
+        <div class="max-h-96 overflow-y-auto">
+            <div
+                class="sticky text-primary-700 top-0 z-10 grid grid-cols-8 gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide"
+            >
+                <div>Nom</div>
+                <div>Téléphone</div>
+                <div>Email</div>
+                <div>Rue</div>
+                <div>Complément</div>
+                <div>Code Postal</div>
+                <div>Ville</div>
+                <div>Pays</div>
+            </div>
+
+            <div v-if="customerList.length === 0" class="px-4 py-6 text-slate-400">
+                Aucun client.
+            </div>
+
+            <div v-for="customer in customerList" :key="customer.id">
+                <div
+                    v-if="!customer.addresses || customer.addresses.length === 0"
+                    class="grid text-primary-700 grid-cols-8 border-t gap-4 px-4 py-2 hover:bg-slate-50 cursor-pointer"
+                    @click="goToCustomer(customer.id)"
+                >
+                    <div class="truncate">{{ customer.name || "—" }}</div>
+                    <div class="truncate">{{ customer.phone || "—" }}</div>
+                    <div class="truncate">{{ customer.email || "—" }}</div>
+                    <div class="col-span-1">Pas d'adresse</div>
+                    <div class="uppercase truncate">{{"—"}}</div>
+                    <div class="uppercase truncate">{{"—"}}</div>
+                    <div class="uppercase truncate">{{"—"}}</div>
+                    <div class="uppercase truncate">{{"—"}}</div>
+                </div>
+
+                <template v-else-if="customer.addresses.length > 0">
+                    <div
+                        v-for="(address, idx) in customer.addresses"
+                        :key="address.id ?? `${customer.id}-${idx}-${address.street}-${address.postalCode}`"
+                        class="grid grid-cols-8 text-primary-700 hover:bg-slate-50 border-t gap-4 px-4 py-2 cursor-pointer"
+                        :class="idx > 0 ? 'pl-4 border-l-4 border-l-slate-200 bg-slate-50' : ''"
+                        @click="goToCustomer(customer.id)"
+                    >
+                        <div class="truncate">
+                            {{ idx === 0 ? (customer.name || "—") : "↳" }}
+                        </div>
+                        <div class="truncate">{{ idx === 0 ? (customer.phone || "—") : ""  }}</div>
+                        <div class="truncate">{{ idx === 0 ? (customer.email || "—") : ""  }}</div>
+                        <div class="truncate">{{ address.street || "—" }}</div>
+                        <div class="truncate">{{ address.street2 || "—" }}</div>
+                        <div>{{ address.postalCode || "—"  }}</div>
+                        <div class="uppercase truncate">{{ address.city || "—"  }}</div>
+                        <div class="uppercase truncate">{{ address.countryCode || "—" }}</div>
+                    </div>
+                </template>
+
+                <template v-else>
+                    <div
+                        class="grid grid-cols-8 text-primary-700 hover:bg-slate-50 border-t gap-4 px-4 py-2 cursor-pointer"
+                        @click="goToCustomer(customer.id)"
+                    >
+                        <div class="truncate">{{ customer.name || "—" }}</div>
+                        <div class="truncate">{{ customer.phone || "—" }}</div>
+                        <div class="truncate">{{ customer.email || "—" }}</div>
+                        <div class="col-span-5 text-slate-400">
+                            Adresses non chargées
+                        </div>
+                    </div>
+                </template>
+            </div>
+        </div>
+    </div>
+    <div v-else class="mt-7 border border-slate-200 mb-11 px-4 py-6 text-slate-400">
+        Accès réservé aux administrateurs.
+    </div>
+    <div class="flex justify-center items-center">
+        <NuxtLink
+            to="/admin/customer"
+            class="inline-flex items-center mb-16 justify-center text-xl text-white uppercase bg-primary-500 h-[50px] px-8 rounded hover:opacity-80 gap-2"
+            :class="auth.isAdmin ? '' : 'cursor-not-allowed opacity-60'"
+            @click="handleAddClick"
+        >
+            <Icon name="mdi:plus" size="28" />
+            Ajouter
+        </NuxtLink>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { getCustomerList } from "~/services/customer"
+import type { CustomerData } from "~/services/dto/customer-data"
+import { useAuthStore } from "~/stores/auth"
+
+const customerList = ref<CustomerData[]>([])
+const router = useRouter()
+const auth = useAuthStore()
+
+const goToCustomer = (id: number) => {
+    if (!auth.isAdmin) return
+    router.push(`/admin/customer/${id}`)
+}
+
+const handleAddClick = (event: Event) => {
+    if (auth.isAdmin) return
+    event.preventDefault()
+}
+
+onMounted(async () => {
+    if (!auth.isAdmin) return
+    customerList.value = await getCustomerList()
+})
+</script>
--- a/frontend/pages/admin/supplier/[[id]].vue
+++ b/frontend/pages/admin/supplier/[[id]].vue
@@ -0,0 +1,203 @@
+<template>
+    <form @submit.prevent="validate">
+
+        <div class="flex items-center relative">
+            <div class="flex flex-row absolute -left-[60px] ">
+                <Icon @click="router.push('/admin/supplier/supplier-list')" name="gg:arrow-left-o" size="40" class="cursor-pointer text-primary-500"/>
+            </div>
+            <h1 class="text-3xl text-primary-500  font-bold uppercase">
+                {{ supplierId ? "Modification du fournisseur" : "Ajout d'un fournisseur" }}
+            </h1>
+        </div>
+
+        <div class="flex flex-cols-3 justify-between mb-11 pt-7">
+            <UiTextInput id="supplier-name" v-model="form.name" label="Nom du fournisseur" :disabled="!auth.isAdmin" wrapper-class="w-[280px]"/>
+            <UiTextInput id="supplier-email" v-model="form.email" label="Email" :disabled="!auth.isAdmin" wrapper-class="w-[280px]"/>
+            <UiTextInput id="supplier-phone" v-model="form.phone" label="Téléphone" :disabled="!auth.isAdmin" wrapper-class="w-[280px]"/>
+        </div>
+        <div class="flex items-center justify-center">
+            <UiButton
+                class="inline-flex mb-28 items-center justify-center text-xl min-w-[194px] text-white uppercase bg-primary-500 h-[50px] rounded hover:opacity-80 justify-self-end"
+                type="submit"
+                :disabled="isLoading || !auth.isAdmin"
+            >
+                <Icon :name="supplierId ? '' : 'mdi:plus'" size="28" />
+                {{ supplierId ? "Valider" : "Ajouter" }}
+            </UiButton>
+        </div>
+
+        <div class="flex items-center justify-between mb-7">
+            <h2 class="text-3xl text-primary-500 font-bold uppercase">Adresses du fournisseur</h2>
+        </div>
+        <div class="overflow-x-auto mb-11 text-primary-700">
+            <table class="w-full border-collapse">
+                <thead>
+                <tr class="text-left border bg-slate-100 border-gray-200">
+                    <th class="py-3 px-4 text-sm uppercase">Libellé</th>
+                    <th class="py-3 px-4 text-sm uppercase">Rue</th>
+                    <th class="py-3 px-4 text-sm uppercase">Complément</th>
+                    <th class="py-3 px-4 text-sm uppercase">Code postal</th>
+                    <th class="py-3 px-4 text-sm uppercase">Ville</th>
+                    <th class="py-3 px-4 text-sm uppercase">Pays</th>
+                </tr>
+                </thead>
+                <tbody>
+                <template v-if="form.addresses.length === 0">
+                    <tr>
+                        <td colspan="6" class="py-4 text-slate-400">
+                            Aucune adresse.
+                        </td>
+                    </tr>
+                </template>
+                <template v-else>
+                    <tr
+                        v-for="(address, index) in form.addresses"
+                        :key="address.id ?? index"
+                        class="border border-gray-100 hover:bg-slate-50"
+                        :class="auth.isAdmin ? 'cursor-pointer' : 'cursor-not-allowed opacity-60'"
+                        @click="goToEditAddress(address.id ?? null)"
+                    >
+                        <td class="py-3 px-4">{{ address.label || "—" }}</td>
+                        <td class="py-3 px-4">{{ address.street || "—" }}</td>
+                        <td class="py-3 px-4">{{ address.street2 || "—" }}</td>
+                        <td class="py-3 px-4">{{ address.postalCode || "—" }}</td>
+                        <td class="py-3 px-4">{{ address.city || "—" }}</td>
+                        <td class="py-3 px-4">{{ address.countryCode || "—" }}</td>
+                    </tr>
+                </template>
+                </tbody>
+            </table>
+        </div>
+        <div class="flex justify-center items-center">
+        <UiButton
+            type="button"
+            class="inline-flex items-center justify-center text-xl gap-2 text-white uppercase bg-primary-500 h-[50px] rounded hover:opacity-80 justify-self-end"
+            :disabled="supplierId === null || !auth.isAdmin"
+            @click="goToAddAddress"
+        >
+            <Icon name="mdi:plus" size="28" />
+            Ajouter
+        </UiButton>
+        </div>
+    </form>
+</template>
+
+<script setup lang="ts">
+import {computed, reactive, ref, watch} from "vue"
+import {createSupplier, getSupplier, updateSupplier} from "~/services/supplier"
+import type {SupplierData, SupplierFormData, SupplierPayload} from "~/services/dto/supplier-data"
+import {useAuthStore} from "~/stores/auth"
+
+const route = useRoute()
+const router = useRouter()
+const auth = useAuthStore()
+
+const resolveId = (param: unknown) => {
+    const idStr = Array.isArray(param) ? param[0] : param
+    if (!idStr) return null
+    const id = Number(idStr)
+    return Number.isFinite(id) ? id : null
+}
+const supplierId = computed(() => resolveId(route.params.id))
+const isLoading = ref(false)
+const form = reactive<SupplierFormData>({
+    name: "",
+    email: "",
+    phone: "",
+    addresses: [],
+})
+
+const goToAddAddress = () => {
+    if (supplierId.value === null || !auth.isAdmin) return
+    router.push({
+        path: "/admin/supplier/address",
+        query: {
+            supplierId: String(supplierId.value),
+            fromSupplier: "1",
+        },
+    })
+}
+
+const goToEditAddress = (addressId: number | null) => {
+    if (supplierId.value === null || addressId === null || !auth.isAdmin) return
+    router.push({
+        path: "/admin/supplier/address",
+        query: {
+            supplierId: String(supplierId.value),
+            addressId: String(addressId),
+            fromSupplier: "1",
+        },
+    })
+}
+
+const hydrateFromSupplier = (supplier: SupplierData | null) => {
+    if (!supplier) return
+    form.name = supplier.name ?? ""
+    form.email = supplier.email ?? ""
+    form.phone = supplier.phone ?? ""
+    if (!Array.isArray(supplier.addresses) || supplier.addresses.length === 0) {
+        form.addresses = []
+        return
+    }
+    if (typeof supplier.addresses[0] === "string") {
+        form.addresses = []
+        return
+    }
+
+    form.addresses = supplier.addresses.map((address) => ({
+        id: address.id ?? null,
+        label: address.label ?? "",
+        street: address.street ?? "",
+        street2: address.street2 ?? null,
+        postalCode: address.postalCode ?? "",
+        city: address.city ?? "",
+        countryCode: address.countryCode ?? "",
+    }))
+}
+
+watch(
+    () => supplierId.value,
+    async (id) => {
+        if (id === null) return
+        isLoading.value = true
+        try {
+            const supplier = await getSupplier(id)
+            hydrateFromSupplier(supplier)
+        } finally {
+            isLoading.value = false
+        }
+    },
+    {immediate: true}
+)
+
+async function validate() {
+    if (isLoading.value) return
+    if (!auth.isAdmin) return
+    isLoading.value = true
+
+    try {
+        const name = form.name.trim()
+        const email = (form.email ?? "").trim() || null
+        const phone = (form.phone ?? "").trim() || null
+
+        const supplierPayload: SupplierPayload = {
+            name,
+            email,
+            phone,
+        }
+        let targetId: number | null = null
+
+        if (supplierId.value !== null) {
+            await updateSupplier(supplierId.value, supplierPayload)
+            targetId = supplierId.value
+        } else {
+            const created = await createSupplier(supplierPayload)
+            targetId = created.id
+        }
+
+        await router.push(`/admin/supplier/${targetId}`)
+    } finally {
+        isLoading.value = false
+    }
+}
+</script>
--- a/frontend/pages/admin/supplier/address.vue
+++ b/frontend/pages/admin/supplier/address.vue
@@ -0,0 +1,42 @@
+<template>
+    <Address type="supplier" :address="address" @validate="validate"/>
+</template>
+
+<script setup lang="ts">
+import type {AddressData, AddressPayload} from "~/services/address";
+import {createAddress, getAddress, updateAddress} from "~/services/address";
+import {getSupplier, updateSupplier} from "~/services/supplier";
+import type {SupplierData} from "~/services/dto/supplier-data";
+
+const route = useRoute()
+const router = useRouter()
+const supplierId = computed(() => { return Number(route.query.supplierId) })
+const supplier = ref<SupplierData|null>(null);
+const addressId = computed(() => { return route.query.addressId !== undefined ? Number(route.query.addressId) : null })
+const address = ref<AddressData|null>(null)
+
+const validate = async (address: AddressPayload) => {
+        if (addressId.value !== null) {
+            await updateAddress(addressId.value, address)
+        } else {
+            await addAddress(address)
+            await router.push('/admin/supplier/' + supplierId.value)
+        }
+}
+
+const addAddress = async (address: AddressPayload) => {
+    const response: AddressData = await createAddress(address)
+    const addressIRI = `/api/addresses/${response.id}`
+    const existingIris = (supplier.value.addresses ?? []).map((item: any) => `/api/addresses/${item.id}`)
+    const next = [...new Set([...existingIris, addressIRI])]
+
+    return await updateSupplier(supplierId.value, { addresses: next })
+}
+
+onMounted(async () => {
+    supplier.value = await getSupplier(supplierId.value)
+    if (addressId.value !== null) {
+        address.value = await getAddress(addressId.value)
+    }
+})
+</script>
--- a/frontend/pages/admin/supplier/supplier-list.vue
+++ b/frontend/pages/admin/supplier/supplier-list.vue
@@ -0,0 +1,113 @@
+<template>
+    <div class="flex items-center justify-between">
+        <h1 class="text-4xl font-bold uppercase text-primary-500">Liste des fournisseurs</h1>
+    </div>
+
+    <div v-if="auth.isAdmin" class="mt-7 border border-slate-200 mb-11">
+        <div class="max-h-96 overflow-y-auto">
+            <div
+                class="sticky text-primary-700 top-0 z-10 grid grid-cols-7 gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide"
+            >
+                <div>Nom</div>
+                <div>Mail</div>
+                <div>Rue</div>
+                <div>Complément</div>
+                <div>Code Postal</div>
+                <div>Ville</div>
+                <div>Pays</div>
+            </div>
+
+            <div v-if="supplierList.length === 0" class="px-4 py-6 text-slate-400">
+                Aucun fournisseur.
+            </div>
+
+            <div v-for="supplier in supplierList" :key="supplier.id">
+                <div
+                    v-if="!supplier.addresses || supplier.addresses.length === 0"
+                    class="grid text-primary-700  grid-cols-7 border-t gap-4 px-4 py-2 hover:bg-slate-50 cursor-pointer"
+                    @click="goToSupplier(supplier.id)"
+                >
+                    <div class="truncate">{{ supplier.name }}</div>
+                    <div class="truncate">{{ supplier.email }}</div>
+                    <div class="col-span-1">Pas d'adresse</div>
+                    <div class="uppercase truncate">{{"—"}}</div>
+                    <div class="uppercase truncate">{{"—"}}</div>
+                    <div class="uppercase truncate">{{"—"}}</div>
+                    <div class="uppercase truncate">{{"—"}}</div>
+                </div>
+
+                <template v-else-if="supplier.addresses.length > 0">
+                    <div
+                        v-for="(address, idx) in supplier.addresses"
+                        :key="address.id ?? `${supplier.id}-${idx}-${address.street}-${address.postalCode}`"
+                        class="grid grid-cols-7 text-primary-700 hover:bg-slate-50 border-t gap-4 px-4 py-2 cursor-pointer"
+                        :class="idx > 0 ? 'pl-4 border-l-4 border-l-slate-200 bg-slate-50' : ''"
+                        @click="goToSupplier(supplier.id)"
+                    >
+                        <div class="truncate">
+                            {{ idx === 0 ? supplier.name : "↳" }}
+                        </div>
+                        <div class="truncate">{{ idx === 0 ? supplier.email : ""  }}</div>
+                        <div class="truncate">{{ address.street || "—" }}</div>
+                        <div class="truncate">{{ address.street2 || "—" }}</div>
+                        <div>{{ address.postalCode || "—"  }}</div>
+                        <div class="uppercase truncate">{{ address.city || "—"  }}</div>
+                        <div class="uppercase truncate">{{ address.countryCode || "—" }}</div>
+                    </div>
+                </template>
+
+                <template v-else>
+                    <div
+                        class="grid grid-cols-7 text-primary-700 hover:bg-slate-50 border-t gap-4 px-4 py-2 cursor-pointer"
+                        @click="goToSupplier(supplier.id)"
+                    >
+                        <div class="truncate">{{ supplier.name }}</div>
+                        <div class="truncate">{{ supplier.email }}</div>
+                        <div class="col-span-5 text-slate-400">
+                            Adresses non chargées
+                        </div>
+                    </div>
+                </template>
+            </div>
+        </div>
+    </div>
+    <div v-else class="mt-7 border border-slate-200 mb-11 px-4 py-6 text-slate-400">
+        Accès réservé aux administrateurs.
+    </div>
+    <div class="flex justify-center items-center">
+        <NuxtLink
+            to="/admin/supplier"
+            class="inline-flex items-center mb-16 justify-center text-xl text-white uppercase bg-primary-500 h-[50px] px-8 rounded hover:opacity-80 gap-2"
+            :class="auth.isAdmin ? '' : 'cursor-not-allowed opacity-60'"
+            @click="handleAddClick"
+        >
+            <Icon name="mdi:plus" size="28" />
+            Ajouter
+        </NuxtLink>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { getSupplierList } from "~/services/supplier"
+import type { SupplierData } from "~/services/dto/supplier-data"
+import { useAuthStore } from "~/stores/auth"
+
+const supplierList = ref<SupplierData[]>([])
+const router = useRouter()
+const auth = useAuthStore()
+
+const goToSupplier = (id: number) => {
+    if (!auth.isAdmin) return
+    router.push(`/admin/supplier/${id}`)
+}
+
+const handleAddClick = (event: Event) => {
+    if (auth.isAdmin) return
+    event.preventDefault()
+}
+
+onMounted(async () => {
+    if (!auth.isAdmin) return
+    supplierList.value = await getSupplierList()
+})
+</script>
--- a/frontend/pages/admin/user/[[id]].vue
+++ b/frontend/pages/admin/user/[[id]].vue
@@ -0,0 +1,124 @@
+<template>
+    <form @submit.prevent="validate">
+        <div
+            class="flex items-center justify-between gap-10">
+            <h1 class="text-3xl font-bold uppercase">
+                {{ userId ? "Modification de l'utilisateur" : "Ajout d'un utilisateur" }}
+            </h1>
+            <UiButton
+                class="inline-flex items-center justify-center text-xl text-white uppercase bg-primary-500 h-[50px] px-8 rounded hover:opacity-80 gap-2"
+                type="submit"
+            >
+                <Icon :name="userId ? '' : 'mdi:plus'" size="28" />
+                {{ userId ? 'Valider' : 'Ajouter' }}
+            </UiButton>
+        </div>
+
+        <div class="grid gap-y-16 gap-x-40 py-12">
+            <UiTextInput
+                id="user-name"
+                v-model="form.username"
+                label="Nom de l'utilisateur"
+            />
+
+            <UiSelect
+                id="user-role"
+                v-model="form.role"
+                label="Rôle de l'utilisateur"
+                :options="ROLE"
+            />
+            <UiTextInput
+                id="user-password"
+                v-model="form.password"
+                label="Mot de passe"
+                type="password"
+
+            />
+
+        </div>
+    </form>
+</template>
+<script setup lang="ts">
+import {computed, reactive, ref, watch} from 'vue'
+import {ROLE} from '~/utils/constants'
+import {createUser, updateUser, getUser} from '~/services/auth'
+import type {UserData, UserFormData, UserPayload} from '~/services/dto/user-data'
+
+const route = useRoute()
+const router = useRouter()
+const userId = computed(() => resolveUserId(route.params.id))
+const isLoading = ref(false)
+const isHydrating = ref(false)
+
+const resolveUserId = (param: unknown) => {
+    const idStr = Array.isArray(param) ? param[0] : param
+    if (!idStr) {
+        return null
+    }
+    const id = Number(idStr)
+    return Number.isFinite(id) ? id : null
+}
+
+
+const form = reactive<UserFormData>({
+    username: '',
+    password: '',
+    role: ''
+})
+
+const hydrateFromUser = (user: UserData | null) => {
+    if (!user) {
+        return
+    }
+    isHydrating.value = true
+    form.username = user.username ?? ''
+    const roles = user.roles ?? []
+    const hasAdmin = roles.includes("ROLE_ADMIN")
+    form.role = hasAdmin ? "ROLE_ADMIN" : "ROLE_USER"
+    form.password = ''
+    isHydrating.value = false
+}
+
+watch(
+    () => userId.value,
+    async (id) => {
+        if (id === null) {
+            return
+        }
+        isLoading.value = true
+        try {
+            const user = await getUser(id)
+            hydrateFromUser(user)
+        } finally {
+            isLoading.value = false
+        }
+    },
+    {immediate: true}
+)
+
+async function validate() {
+
+    const normalizedUsername = form.username.trim()
+    const normalizedRole = form.role.trim()
+    const normalizedPassword = form.password.trim()
+
+    const basePayload: UserPayload = {
+        username: normalizedUsername,
+        roles: normalizedRole ? [normalizedRole] : undefined,
+    }
+    if (normalizedPassword) {
+        basePayload.password = normalizedPassword
+    }
+
+    if (userId.value) {
+        await updateUser(userId.value, basePayload)
+        await router.push(`/admin/user/list/`)
+        return
+    }
+
+    const created = await createUser(basePayload)
+    if (created) {
+        await router.push(`/admin/user/list/`)
+    }
+}
+</script>
--- a/frontend/pages/admin/user/list.vue
+++ b/frontend/pages/admin/user/list.vue
@@ -0,0 +1,66 @@
+<template>
+    <div class="flex items-center justify-between">
+        <h1 class="text-3xl font-bold uppercase text-primary-500">Liste des utilisateurs</h1>
+        <NuxtLink
+            to="/admin/user"
+            class="inline-flex items-center justify-center text-xl text-white uppercase bg-primary-500 h-[50px] px-8 rounded hover:opacity-80 gap-2"
+        >
+            <Icon name="mdi:plus" size="28"  />
+            Ajouter
+        </NuxtLink>
+
+    </div>
+
+    <div>
+        <div class="mt-6 border border-slate-200 mb-16 ">
+            <div class="grid grid-cols-3 gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide">
+                <div>Username</div>
+                <div>Role</div>
+            </div>
+            <div
+                v-for="user in userList"
+                :key="user.id"
+                class="grid grid-cols-3 gap-4 px-4 py-3 text-sm hover:bg-slate-50 cursor-pointer border-t items-center"
+                role="button"
+                tabindex="0"
+                @click="goToUser(user.id)"
+            >
+                <div>
+                    {{ user.username }}
+                </div>
+                <div>
+                    {{ getRoleLabels(user.roles) }}
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+
+<script setup lang="ts">
+import type {UserData} from "~/services/dto/user-data";
+import {getAdminUsers} from "~/services/auth";
+import {ROLE} from "~/utils/constants";
+
+const userList = ref<UserData[]>([])
+const router = useRouter()
+const roleLabelByValue = new Map(ROLE.map((role) => [role.value, role.label]))
+
+const goToUser = (id: number) => {
+    router.push(`/admin/user/${id}`)
+}
+
+const getRoleLabels = (roles?: string[]) => {
+    if (!roles || roles.length === 0) {
+        return ' ---'
+    }
+
+    return roles
+        .map((role) => roleLabelByValue.get(role) ?? role)
+        .join(', ')
+}
+
+onMounted(async () => {
+    userList.value = await getAdminUsers()
+})
+</script>
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -1,21 +1,27 @@
+<script setup lang="ts">
+</script>
 <template>
-    <div class="">
-        <h1 class="text-3xl font-bold">Liste des receptions</h1>
-        <ul>
-            <li v-for="reception in receptionList" :key="reception.id">
-                <NuxtLink :to="`/reception/${reception.id}`">Réception numéro {{ reception.id}}</NuxtLink>
-            </li>
-        </ul>
+    <div class="flex flex-wrap justify-center pb-16 gap-12">
+        <card-link label="NOUVELLE RÉCEPTION" link="/reception" iconName="mdi:truck-outline" />
+        <card-link label="NOUVELLE EXPÉDITION" link="/shipment" iconName="mdi:truck-fast-outline" />
+        <card-link label="PLAN DE SITE" link="/infrastructure/building" iconName="material-symbols:warehouse-outline-rounded" />
+        <card-link link="/reception/waiting-reception" iconName="mdi:truck-remove-outline">
+            <template #label>
+                Réceptions<br>EN ATTENTE
+            </template>
+        </card-link>
+        <card-link link="/shipment/waiting-shipment" iconName="mdi:truck-cargo-container">
+            <template #label>
+                EXPÉDITIONS<br>EN ATTENTE
+            </template>
+        </card-link>
+        <card-link label="CASES" link="/infrastructure/case" iconName="material-symbols:bottom-sheets-outline" />
+        <card-link label="RÉCEPTIONS FINIES" link="/reception/finish-reception" iconName="mdi:truck-check-outline" />
+        <card-link label="EXPÉDITIONS FINIES" link="/shipment/finish-shipment" iconName="mdi:truck-delivery-outline" />
+        <card-link link="/" iconName="mdi:cow">
+            <template #label>
+                PASSEPORT<br>DU BOVIN
+            </template>
+        </card-link>
    </div>
 </template>
-
-<script setup lang="ts">
-import type {ReceptionData} from "~/services/dto/reception-data";
-import {getReceptionList} from "~/services/reception";
-
-const receptionList = ref<ReceptionData[]>()
-
-onMounted(async () => {
-    receptionList.value = await getReceptionList()
-})
-</script>
--- a/frontend/pages/infrastructure/building.vue
+++ b/frontend/pages/infrastructure/building.vue
@@ -0,0 +1,242 @@
+<template>
+    <div class="min-h-screen">
+        <!-- En-tête de page avec retour et titre -->
+        <div class="flex items-center justify-between mb-8">
+            <div class="flex items-center gap-10">
+                <Icon
+                    @click="router.push('/')"
+                    name="gg:arrow-left-o"
+                    size="44"
+                    class="cursor-pointer text-primary-500"
+                />
+                <h1 class="text-3xl font-bold uppercase text-primary-500">bâtiments</h1>
+            </div>
+        </div>
+
+        <div class="px-[86px] space-y-6">
+            <!-- Liste des bâtiments + rendu du plan de chaque bâtiment -->
+            <div
+                v-for="entry in buildingLayouts"
+                :key="entry.building.id"
+            >
+                <div class="font-semibold tracking-wide text-primary-500">
+                    {{ entry.building.label || `Bâtiment ${entry.building.id}` }}
+                </div>
+
+                <div class="py-4">
+                    <!-- Aucun layout disponible pour ce bâtiment -->
+                    <div v-if="!entry.layout" class="text-sm text-slate-400">
+                        Aucun plan de bâtiment.
+                    </div>
+
+                    <!-- Grille CSS : les cases sont positionnées via spanStyle -->
+                    <div v-else class="overflow-auto">
+                        <div class="grid" :style="entry.gridStyle">
+                            <NuxtLink
+                                v-for="cell in entry.cells"
+                                :key="cell.key"
+                                class="relative text-white flex h-[50px] items-center justify-center border-y-[3px] border-y-black bg-white hover:opacity-85 focus-visible:outline-none"
+                                :class="[cell.sideBorderClass, activeLegendStatutId !== null && cell.caseStatusId !== activeLegendStatutId ? 'opacity-35 hover:opacity-70' : '']"
+                                :style="[cell.spanStyle, cell.sideBorderStyle]"
+                                :to="cell.caseId ? `/infrastructure/case?id=${cell.caseId}` : '/infrastructure/case'"
+                                :title="cell.caseStatusLabel ?? undefined"
+                            >
+                                <!-- Le blanc latéral est géré sur ce bloc interne (conditionnel par voisinage) -->
+                                <div
+                                    class="flex h-full w-full items-center justify-center bg-white"
+                                    :class="cell.contentInsetClass"
+                                    :style="cell.caseStyle"
+                                >
+                                    <!-- Numéro de case -->
+                                    {{ cell.display }}
+                                </div>
+                            </NuxtLink>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Légende : survol d'un statut => atténue les autres cases -->
+            <div class="py-4">
+                <!-- 3 zones fixes pour forcer gauche / centre / droite sur toute la largeur -->
+                <div class="grid w-full grid-cols-3 gap-3">
+                    <div
+                        v-for="(statut, index) in statutLegend"
+                        :key="statut.id"
+                        class="flex min-w-0 cursor-pointer items-center gap-2 py-1"
+                        :class="[
+                            index === 0 ? 'justify-self-start' : '',
+                            index === statutLegend.length - 1 ? 'justify-self-end' : '',
+                            index > 0 && index < statutLegend.length - 1 ? 'justify-self-center' : ''
+                        ]"
+                        @mouseenter="activeLegendStatutId = statut.id"
+                        @mouseleave="activeLegendStatutId = null"
+                    >
+                        <span
+                            class="h-5 w-5 border border-slate-300"
+                            :style="statut.couleur ? { backgroundColor: statut.couleur } : {}"
+                        ></span>
+                        <span class="truncate text-sm uppercase text-slate-700">
+                            {{ statut.label }}
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type {BuildingData} from "~/services/dto/building-data"
+import type {BuildingLayoutData} from "~/services/dto/building-layout-data"
+import type {BuildingCasePositionData} from "~/services/dto/building-case-position-data"
+import type {BuildingCaseStatusData} from "~/services/dto/building-case-status-data"
+import {getBuildingList} from "~/services/building"
+import {getStatutList} from "~/services/statut"
+
+definePageMeta({layout: "default"})
+
+const router = useRouter()
+// Données brutes chargées depuis l'API
+const buildingList = ref<BuildingData[]>([])
+const statutLegend = ref<BuildingCaseStatusData[]>([])
+// Statut actuellement survolé dans la légende (pour filtrage visuel)
+const activeLegendStatutId = ref<number | null>(null)
+// Modèle de vue prêt pour le template (layout + cellules + styles de grille)
+const buildingLayouts = computed(() =>
+    buildingList.value.map((building) => {
+        // On affiche uniquement le premier layout du bâtiment
+        const layout = building.layouts?.[0] ?? null
+        const view = layout ? buildLayoutView(layout) : null
+        return {building, layout, cells: view?.cells ?? [], gridStyle: view?.gridStyle ?? {}}
+    })
+)
+
+type GridCell = {
+    key: string
+    caseId: number | null
+    display: string
+    caseStatusId: number | null
+    caseStatusLabel: string | null
+    // Couleur de fond de la case (dépend du statut)
+    caseStyle?: Record<string, string>
+    // Placement dans la grille CSS (colonne/ligne de départ + span)
+    spanStyle: Record<string, string>
+    // Bordures latérales pointillées si la case touche un gap ou le bord du plan
+    sideBorderClass: string
+    // Couleur des bordures pointillées latérales (reprend la couleur de la cellule)
+    sideBorderStyle?: Record<string, string>
+    // Espace blanc interne uniquement côté(s) adjacent(s) à une autre case
+    contentInsetClass: string
+}
+// Type intermédiaire : garde des infos utiles au calcul des bordures, retirées ensuite
+type GridCellDraft = Omit<GridCell, "sideBorderClass" | "sideBorderStyle" | "contentInsetClass"> & { x: number; columnSpan: number }
+
+// Nettoie la couleur de statut pour éviter les chaînes vides / espaces
+const normalizeCaseStatusColor = (value: string | null | undefined): string | null => {
+    const color = (value ?? "").trim()
+    return color.length > 0 ? color : null
+}
+
+// Styles de base communs à toutes les grilles de bâtiments
+const BASE_GRID_STYLE = {gridAutoRows: "1fr", rowGap: "18px", columnGap: "0px", width: "100%"} as const
+
+// Transforme un layout API en structure de rendu (cellules + style de grille)
+const buildLayoutView = (layout: BuildingLayoutData): {
+    cells: GridCell[];
+    gridStyle: Record<string, string>
+} | null => {
+    const rows = layout.rows ?? 0, cols = layout.columns ?? 0
+    if (rows <= 0 || cols <= 0) return null
+
+    // Liste des positions de cases (filtre de sécurité sur les valeurs nulles)
+    const positions = (layout.casePositions ?? []).filter(Boolean) as BuildingCasePositionData[]
+    // Colonnes occupées par au moins une case (sert à détecter les gaps)
+    const occupiedColumns = new Set<number>()
+    // Sécurité : si deux positions ont le même x/y, on garde la première
+    const seenCoordinates = new Set<string>()
+    const cellDrafts: GridCellDraft[] = []
+
+    // Tri visuel : de haut en bas, puis de gauche à droite
+    const positionsSorted = [...positions].sort(
+        (leftPosition, rightPosition) =>
+            (leftPosition.y ?? 1) - (rightPosition.y ?? 1) || (leftPosition.x ?? 1) - (rightPosition.x ?? 1)
+    )
+    for (const position of positionsSorted) {
+        const x = position.x ?? 1
+        const y = position.y ?? 1
+        const coordinateKey = `${x}-${y}`
+        if (seenCoordinates.has(coordinateKey)) continue
+        seenCoordinates.add(coordinateKey)
+
+        // w/h = nombre de colonnes / lignes occupées par la case dans la grille
+        const columnSpan = position.w ?? 1
+        const rowSpan = position.h ?? 1
+
+        // Une case peut couvrir plusieurs colonnes : on les marque toutes comme occupées
+        for (let column = x; column < x + columnSpan; column++) {
+            if (column <= cols) occupiedColumns.add(column)
+        }
+
+        // Métadonnées utiles au rendu / navigation / légende
+        const caseId = (position.buildingCase?.id ?? null) as number | null
+        const caseNumber = (position.buildingCase?.caseNumber ?? null) as number | null
+        const caseStatusId = position.buildingCase?.statut?.id ?? null
+        const caseStatusLabel = position.buildingCase?.statut?.label ?? null
+        const statusColor = normalizeCaseStatusColor(position.buildingCase?.statut?.couleur)
+
+        cellDrafts.push({
+            key: `case-${layout.id}-${position.id}`,
+            x,
+            columnSpan,
+            caseId,
+            display: caseNumber !== null ? String(caseNumber) : "Case",
+            caseStatusId,
+            caseStatusLabel,
+            caseStyle: statusColor ? {backgroundColor: statusColor} : undefined,
+            // Exemple : "14 / span 1" => commence en colonne 14 et occupe 1 colonne
+            spanStyle: {gridColumn: `${x} / span ${columnSpan}`, gridRow: `${y} / span ${rowSpan}`}
+        })
+    }
+
+    // Colonnes vides = gaps visuels (plus étroites dans la grille)
+    const gapColumns = Array.from({length: cols}, (_, i) => i + 1).filter((x) => !occupiedColumns.has(x))
+    const gapSet = new Set(gapColumns)
+
+    // Ajoute les bordures latérales pointillées pour les cases au contact d'un gap ou d'un bord
+    const cells: GridCell[] = cellDrafts.map(({x, columnSpan, ...cell}) => {
+        const touchesLeftGapOrEdge = x === 1 || gapSet.has(x - 1)
+        const touchesRightGapOrEdge = x + columnSpan - 1 === cols || gapSet.has(x + columnSpan)
+        const sideBorderClass = [
+            touchesLeftGapOrEdge ? "border-l-[3px] [border-left-style:dashed]" : "",
+            touchesRightGapOrEdge ? "border-r-[3px] [border-right-style:dashed]" : ""
+        ].filter(Boolean).join(" ")
+        // Les pointillés latéraux reprennent la couleur de la cellule (si un statut en fournit une)
+        const sideBorderStyle = {
+            ...(cell.caseStyle?.backgroundColor && touchesLeftGapOrEdge ? {borderLeftColor: cell.caseStyle.backgroundColor} : {}),
+            ...(cell.caseStyle?.backgroundColor && touchesRightGapOrEdge ? {borderRightColor: cell.caseStyle.backgroundColor} : {})
+        }
+        // Le "blanc" n'est ajouté qu'entre deux cellules adjacentes (pas sur bord/gap)
+        const contentInsetClass = [
+            !touchesLeftGapOrEdge ? "ml-[4px]" : "",
+            !touchesRightGapOrEdge ? "mr-[4px]" : ""
+        ].filter(Boolean).join(" ")
+        return {...cell, sideBorderClass, sideBorderStyle, contentInsetClass}
+    })
+
+    // Les colonnes de gap sont rendues en 24px, les autres occupent l'espace restant
+    const columnsTemplate = Array.from({length: cols}, (_, i) => (gapSet.has(i + 1) ? "24px" : "minmax(0, 1fr)")).join(" ")
+    return {cells, gridStyle: {gridTemplateColumns: columnsTemplate, ...BASE_GRID_STYLE}}
+}
+
+onMounted(async () => {
+    // Chargement initial des bâtiments et de la légende des statuts
+    const buildings = await getBuildingList()
+    const statuts = await getStatutList()
+    buildingList.value = buildings
+    // Tri alphabétique FR pour une légende stable
+    statutLegend.value = [...statuts].sort((a, b) =>
+        (a.label ?? "").localeCompare(b.label ?? "", "fr", {sensitivity: "base"})
+    )
+})
+</script>
--- a/frontend/pages/infrastructure/case.vue
+++ b/frontend/pages/infrastructure/case.vue
@@ -0,0 +1,27 @@
+<template>
+    <div class="flex justify-center items-center">
+        <UiButton
+            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
+            :disabled="!hasCaseId"
+            @click="printCaseReport"
+        >
+            Imprimer
+        </UiButton>
+    </div>
+</template>
+<script setup lang="ts">
+const route = useRoute()
+const { printPdf } = usePdfPrinter()
+
+const caseId = computed(() => Number(route.query.id))
+const hasCaseId = computed(() => Number.isFinite(caseId.value) && caseId.value > 0)
+
+const printCaseReport = async () => {
+    if (!hasCaseId.value) {
+        return
+    }
+
+    const filename = `tableau_poids_case_${caseId.value}.pdf`
+    await printPdf(`/building_cases/${caseId.value}/weights-report`, filename)
+}
+</script>
--- a/frontend/pages/login.vue
+++ b/frontend/pages/login.vue
@@ -39,14 +39,15 @@
        />
      </div>

-      <button
+      <UiButton
        type="submit"
        class="w-full rounded-md bg-primary-500 px-4 py-2 text-base font-semibold text-white transition hover:bg-primary-600 disabled:cursor-not-allowed disabled:opacity-60"
        :disabled="isSubmitting"
      >
        Connexion
-      </button>
-    </form>
+      </UiButton>
+          <p class="font-bold">v{{ version }}</p>
+      </form>
  </div>
 </template>

@@ -57,6 +58,7 @@ import { useAuthStore } from '~/stores/auth'

 const router = useRouter()
 const auth = useAuthStore()
+const { version } = useAppVersion()

 definePageMeta({
  layout: 'auth'
--- a/frontend/pages/reception/[[id]].vue
+++ b/frontend/pages/reception/[[id]].vue
@@ -1,29 +1,41 @@
 <template>
-    <div>
-        <div class="flex justify-between h-[52px] mb-[90px]">
-            <p class="self-center">Indicateur d’étapes</p>
-            <button
-                type="button"
-                class="flex flex-col justify-center uppercase text-xl bg-black text-white h-[50px] w-[272px] text-center"
-                @click="saveAndHold"
-            >Mettre en attente</button>
+    <div class="flex justify-between h-[52px] mb-[80px]">
+        <div class="flex flex-1 mr-16">
+            <UiStepper
+                :labels="RECEPTION_STEP_LABELS"
+                :current-step="storeReception?.currentStep ?? 0"
+                @select="handleStepSelect"
+            />
        </div>
-        <ReceptionForm v-if="!storeReception || storeReception.currentStep === 0"/>
-        <ReceptionWeight v-if="storeReception?.currentStep === 1" mode="gross"/>
-        <ReceptionUnloading v-if="storeReception?.currentStep === 2"/>
-        <ReceptionWeight v-if="storeReception?.currentStep !== null && storeReception?.currentStep >= 3" mode="tare"/>
+        <UiButton
+            type="button"
+            class="flex flex-col justify-center uppercase text-xl bg-black text-white h-[50px] w-[272px] text-center"
+            @click="saveAndHold"
+        >Mettre en attente
+        </UiButton>
    </div>
+    <ReceptionForm v-if="!storeReception || storeReception.currentStep === 0"/>
+    <ReceptionWeight v-if="storeReception?.currentStep === 1" mode="gross"/>
+    <ReceptionProductReceived
+        v-if="storeReception?.currentStep === 2 &&
+            receptionStore.current?.receptionType?.code === RECEPTION_TYPE_CODES.MERCHANDISES"/>
+    <ReceptionBovineReceived
+        v-if="storeReception?.currentStep === 2 &&
+            receptionStore.current?.receptionType?.code === RECEPTION_TYPE_CODES.BOVINS"/>
+    <ReceptionWeight v-if="storeReception?.currentStep !== null && storeReception?.currentStep >= 3" mode="tare"/>
 </template>

 <script setup lang="ts">
-import { useReceptionStore } from '~/stores/reception'
-import { storeToRefs } from 'pinia'
+import {useReceptionStore} from '~/stores/reception'
+import {storeToRefs} from 'pinia'
+import {RECEPTION_STEP_LABELS} from '~/constants/steps'
+import {RECEPTION_TYPE_CODES} from "~/utils/constants";

 const route = useRoute()
 const router = useRouter()

 const receptionStore = useReceptionStore()
-const { current: storeReception } = storeToRefs(receptionStore)
+const {current: storeReception} = storeToRefs(receptionStore)

 const resolveReceptionId = (param: unknown) => {
    const idStr = Array.isArray(param) ? param[0] : param
@@ -44,7 +56,7 @@ watch(
        }
        await receptionStore.loadReception(id)
    },
-    { immediate: true }
+    {immediate: true}
 )

 const saveAndHold = async () => {
@@ -60,4 +72,19 @@ const saveAndHold = async () => {
    })
    await router.push('/')
 }
+
+const handleStepSelect = async (step: number) => {
+    if (!receptionStore.current) {
+        return
+    }
+
+    if (step === receptionStore.current.currentStep) {
+        return
+    }
+
+    await receptionStore.updateReception(receptionStore.current.id, {
+        currentStep: step
+    })
+    await receptionStore.loadReception(receptionStore.current.id)
+}
 </script>
--- a/frontend/pages/reception/finish-reception.vue
+++ b/frontend/pages/reception/finish-reception.vue
@@ -0,0 +1,62 @@
+<template>
+    <div class="flex items-center justify-start gap-10">
+            <Icon @click="router.push('/')" name="gg:arrow-left-o" size="44" class="cursor-pointer text-primary-500"/>
+            <h1 class="text-3xl font-bold uppercase text-primary-500">listes des réceptions finie</h1>
+    </div>
+
+    <div class="px-[86px]">
+        <div class="mt-6 border border-slate-200 mb-16 ">
+            <div class="grid grid-cols-6 gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide">
+                <div>Numéro</div>
+                <div>Date</div>
+                <div>Fournisseur</div>
+                <div>Adresse</div>
+                <div>Type réception</div>
+                <div>Poids</div>
+            </div>
+            <div
+                v-for="reception in receptionList"
+                :key="reception.id"
+                class="grid grid-cols-6 gap-4 px-4 py-3 text-sm hover:bg-slate-50 cursor-pointer border-t border-slate-200"
+                role="button"
+                tabindex="0"
+                @click="goToReception(reception.id)"
+            >
+                <div>{{ reception.identificationNumber}}</div>
+                <div>{{ reception.receptionDate}}</div>
+                <div>{{ reception.supplier?.name }}</div>
+                <div>{{ reception.address?.fullAddress }}</div>
+                <div>{{ reception.receptionType?.label }}</div>
+                <div>{{ formatWeighing(reception) }}</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type {ReceptionData} from "~/services/dto/reception-data";
+import {getReceptionList} from "~/services/reception";
+import type {ShipmentData} from "~/services/dto/shipment-data";
+
+const receptionList = ref<ReceptionData[]>()
+const router = useRouter()
+
+const formatWeighing = (reception: ReceptionData) => {
+    const gross = reception.weights?.find((weight) => weight.type === 'gross')?.weight
+    const tare = reception.weights?.find((weight) => weight.type === 'tare')?.weight
+
+    if (gross == null || tare == null) {
+        return '—'
+    }
+
+    return `${gross - tare} kg`
+}
+
+const goToReception = (id: number) => {
+    router.push(`/reception/update/${id}`)
+}
+
+onMounted(async () => {
+    receptionList.value = await getReceptionList(true)
+})
+</script>
--- a/frontend/pages/reception/update/[[id]].vue
+++ b/frontend/pages/reception/update/[[id]].vue
@@ -0,0 +1,999 @@
+<template>
+
+    <form @submit.prevent="validate">
+        <div class="grid grid-cols-2 items-start gap-y-8 gap-x-40 mb-[60px]">
+            <div class="flex items-center justify-between gap-10 relative">
+                <div class="flex flex-row absolute -left-[60px] justify-between">
+                    <Icon @click="router.push('/reception/finish-reception')" name="gg:arrow-left-o" size="44" class="cursor-pointer text-primary-500"/>
+                </div>
+                <h1 class="font-bold text-4xl col-start-1 row-start-1 text-primary-500 uppercase">Réception {{ form.identificationNumber }}</h1>
+                <Icon @click="printReceipt" name="mdi:printer-outline" size="44" class="cursor-pointer text-primary-500"/>
+            </div>
+            <!--    Nom de l'utilisateur       -->
+            <UiSelect
+                id="reception-user"
+                :disabled="!auth.isAdmin"
+                v-model="form.userId"
+                label="Nom de l'utilisateur"
+                :options="users.map((user) => ({
+                    value: String(user.id),
+                    label: user.username
+                }))"
+                :loading="isLoadingUsers"
+                wrapper-class="col-start-1 row-start-2"
+            />
+            <!--    Date de réception        -->
+            <UiDateInput
+                id="reception-date"
+                :disabled="!auth.isAdmin"
+                v-model="form.receptionDate"
+                label="Date de réception"
+                wrapper-class="col-start-1 row-start-3"
+            />
+            <!--    type de reception        -->
+            <UiSelect
+                id="reception-supplier"
+                v-model="form.receptionTypeId"
+                :disabled="!auth.isAdmin"
+                label="Type de Réception"
+                :options="receptionTypes.map((receptionType) => ({
+                    value: String(receptionType.id),
+                    label: receptionType.label
+                }))"
+                :loading="isLoadingSuppliers"
+                wrapper-class="col-start-1 row-start-4"
+            />
+            <!--    Fournisseur        -->
+            <UiSelect
+                id="reception-supplier"
+                v-model="form.supplierId"
+                :disabled="!auth.isAdmin"
+                label="Fournisseur"
+                :options="suppliers.map((supplier) => ({
+                    value: String(supplier.id),
+                    label: supplier.name
+                }))"
+                :loading="isLoadingSuppliers"
+                wrapper-class="col-start-1 row-start-5"
+            />
+            <!--    Adresse fournisseur        -->
+            <UiSelect
+                id="reception-address"
+                v-model="form.addressId"
+                label="Adresse"
+                :options="supplierAddresses.map((address) => ({
+                    value: String(address.id),
+                    label: address.fullAddress
+                }))"
+                :disabled="(isLoadingSuppliers || supplierAddresses.length === 0) && !auth.isAdmin"
+                wrapper-class="col-start-2 row-start-1"
+            />
+            <!--    Camion        -->
+            <UiSelect
+                id="reception-truck"
+                v-model="form.truckId"
+                :disabled="!auth.isAdmin"
+                label="Camion"
+                :options="trucks.map((truck) => ({
+                    value: String(truck.id),
+                    label: truck.name
+                }))"
+                :loading="isLoadingTrucks"
+                wrapper-class="col-start-2 row-start-2"
+            />
+            <!--    Transporteur        -->
+            <UiSelect
+                id="reception-carrier"
+                v-model="form.carrierId"
+                label="Transporteur"
+                :disabled="!auth.isAdmin"
+                :options="carriers.map((carrier) => ({
+                    value: String(carrier.id),
+                    label: carrier.name
+                }))"
+                :loading="isLoadingCarriers"
+                select-class="h-[34px]"
+                wrapper-class="col-start-2 row-start-3"
+            />
+            <!--    Chauffeur (LIOT)        -->
+            <UiSelect
+                id="reception-driver"
+                v-model="form.driverId"
+                :disabled="!auth.isAdmin"
+                label="Nom du chauffeur si LIOT"
+                :options="filteredDrivers.map((driver) => ({
+                    value: String(driver.id),
+                    label: driver.name
+                }))"
+                :loading="isLoadingDrivers"
+                wrapper-class="col-start-2 row-start-5"
+                v-if="isLiotCarrier"
+            />
+            <!--    Plaque d'immatriculation       -->
+            <div v-if="!isLiotCarrier" class="col-start-2 row-start-4">
+                <UiLicensePlateInput
+                    :disabled="!auth.isAdmin"
+                    v-model="form.licensePlate"
+                    v-model:allowAny="allowAnyLicensePlate"
+                />
+            </div>
+            <!--    Immatriculation (LIOT)        -->
+            <UiSelect
+                v-if="isLiotCarrier"
+                id="reception-vehicle"
+                v-model="form.vehicleId"
+                label="Immatriculation"
+                :options="filteredVehicles.map((vehicle) => ({
+                    value: String(vehicle.id),
+                    label: vehicle.plate
+                }))"
+                :loading="isLoadingVehicles"
+                :disabled="(isLoadingVehicles || filteredVehicles.length === 0) && !auth.isAdmin"
+                wrapper-class="col-start-2 row-start-4"
+            />
+        </div>
+            <div v-if="formIsLoading">
+            <div class="flex justify-evenly gap-y-8 gap-x-41 mb-10 border-b border-primary-500/60">
+                <h1
+                    class="font-bold text-3xl uppercase px-12 col-start-1 row-start-1  cursor-pointer "
+                    :class="activeTab === 'weights' ? 'border-b-[6px] border-primary-500 text-primary-500' : 'text-primary-500/50'"
+                    @click="activeTab = 'weights'"
+                >
+                    pesée à plein
+                </h1>
+                <h1
+                    class="font-bold text-3xl uppercase col-start-1 row-start-1 px-12 cursor-pointer "
+                    :class="activeTab === 'weightsEmpty' ? 'border-b-[6px] border-primary-500 text-primary-500 ' : 'text-primary-500/50'"
+                    @click="activeTab = 'weightsEmpty'"
+                >
+                    pesée à vide
+                </h1>
+                <h1
+                    class="font-bold text-3xl uppercase px-12 col-start-2 row-start-1 cursor-pointer "
+                    :class="activeTab === 'merchandise' ? 'border-b-[6px] border-primary-500 text-primary-500' : 'text-primary-500/50'"
+                    @click="activeTab = 'merchandise'"
+                >
+                    {{ isMerchandise ? "Marchandise" : "Bovins" }}
+                </h1>
+            </div>
+                <div class="mb-12 ">
+                    <update-weight
+                        v-show="activeTab === 'weights'"
+                        v-model="grossWeight"
+                        v-if="grossWeight"
+                        :isAdmin="auth.isAdmin"
+                    />
+
+                    <update-weight
+                        v-show="activeTab === 'weightsEmpty'"
+                        v-model="tareWeight"
+                        v-if="tareWeight"
+                        :isAdmin="auth.isAdmin"
+                    />
+
+                <update-merchandise
+                    v-if="activeTab === 'merchandise' && isMerchandise"
+                    v-model="merchandiseForm"
+                    :isAdmin="auth.isAdmin"
+                />
+
+                <update-bovin
+                    v-if="activeTab === 'merchandise' && !isMerchandise"
+                    v-model="bovineEntries"
+                    v-model:otherQuantity="bovineOtherQuantity"
+                    :isAdmin="auth.isAdmin"
+                />
+            </div>
+                <div class="flex justify-center">
+                    <UiButton
+                        v-if="auth.isAdmin"
+                        type="submit"
+                        class="inline-flex mb-16 items-center justify-center text-xl text-white uppercase bg-primary-500 h-[50px] px-8 rounded hover:opacity-80 gap-2 justify-self-end"
+                    >
+                        Valider
+                    </UiButton>
+                </div>
+            </div>
+    </form>
+</template>
+
+<script setup lang="ts">
+import { usePdfPrinter } from '#imports'
+import { computed } from 'vue'
+import UpdateBovin from '~/components/reception/update-bovin.vue'
+import UpdateMerchandise from '~/components/reception/update-merchandise.vue'
+import UpdateWeight from '~/components/commun/update-weight.vue'
+import { getUsers } from '~/services/auth'
+import { getCarrierList } from '~/services/carrier'
+import type { CarrierData } from '~/services/dto/carrier-data'
+import type { DriverData } from '~/services/dto/driver-data'
+import type { ReceptionBovineTypeData } from '~/services/dto/reception-bovine-data'
+import type {
+    MerchandiseEntryData,
+    ReceptionData,
+    ReceptionFormData,
+} from '~/services/dto/reception-data'
+import type { WeightEntryData } from '~/services/dto/weight-data'
+import type { ReceptionTypeData } from '~/services/dto/reception-type-data'
+import type { SupplierData } from '~/services/dto/supplier-data'
+import type { TruckData } from '~/services/dto/truck-data'
+import type { UserData } from '~/services/dto/user-data'
+import type { VehicleData } from '~/services/dto/vehicle-data'
+import { getDriverList } from '~/services/driver'
+import {
+    createReceptionBovine,
+    deleteReceptionBovine,
+    getReceptionBovineList,
+    updateReceptionBovine
+} from '~/services/reception-bovine'
+import {
+    createReceptionPelletBuilding,
+    deleteReceptionPelletBuilding,
+    getReceptionPelletBuildingList
+} from '~/services/reception-pellet-building'
+import { getReception, updateReception } from '~/services/reception'
+import { getReceptionTypeList } from '~/services/reception-type'
+import { getSupplierList } from '~/services/supplier'
+import { getTruckList } from '~/services/truck'
+import { getVehicleList } from '~/services/vehicle'
+import { createWeight, updateWeight } from '~/services/weight'
+import { useAuthStore } from '~/stores/auth'
+import { useReceptionStore } from '~/stores/reception'
+import { RECEPTION_TYPE_CODES, SUPPLIER_CODE } from '~/utils/constants'
+
+const router = useRouter()
+const route = useRoute()
+const auth = useAuthStore()
+const authStore = useAuthStore()
+const receptionStore = useReceptionStore()
+const { printPdf } = usePdfPrinter()
+
+const activeTab = ref<'weightsEmpty' | 'weights' | 'merchandise'>('weights')
+const grossWeight = ref<WeightEntryData>(createEmptyWeightEntry('gross'))
+const tareWeight = ref<WeightEntryData>(createEmptyWeightEntry('tare'))
+const bovineEntries = ref<ReceptionBovineTypeData[]>([])
+const bovineOtherQuantity = ref<number | null>(0)
+const merchandiseForm = ref<MerchandiseEntryData>({
+    merchandiseTypeId: '',
+    merchandiseDetail: '',
+    selectedBuildingIds: [],
+    selectedPelletBuildingIds: {}
+})
+const allowAnyLicensePlate = ref(false)
+const isLoading = ref(false)
+const users = ref<UserData[]>([])
+const isLoadingUsers = ref(false)
+const isLoadingTypes = ref(false)
+const suppliers = ref<SupplierData[]>([])
+const receptionTypes = ref<ReceptionTypeData[]>([])
+const isLoadingSuppliers = ref(false)
+const trucks = ref<TruckData[]>([])
+const isLoadingTrucks = ref(false)
+const carriers = ref<CarrierData[]>([])
+const isLoadingCarriers = ref(false)
+const drivers = ref<DriverData[]>([])
+const isLoadingDrivers = ref(false)
+const vehicles = ref<VehicleData[]>([])
+const isLoadingVehicles = ref(false)
+const formIsLoading = ref(false)
+const isMerchandise = ref(false)
+const isHydrating = ref(false)
+const vehicleSyncLock = ref(false)
+
+const idReception = Number(route.params.id)
+
+function runWithVehicleSyncLock(mutator: () => void) {
+    if (vehicleSyncLock.value) {
+        return
+    }
+
+    vehicleSyncLock.value = true
+    try {
+        mutator()
+    } finally {
+        queueMicrotask(() => {
+            vehicleSyncLock.value = false
+        })
+    }
+}
+
+const form = reactive<ReceptionFormData>({
+    identificationNumber: null,
+    licensePlate: '',
+    receptionDate: new Date().toISOString().slice(0, 10),
+    receptionTypeId: '',
+    userId: '',
+    supplierId: '',
+    addressId: '',
+    truckId: '',
+    carrierId: '',
+    driverId: '',
+    vehicleId: ''
+})
+
+const selectedCarrier = computed(() =>
+    carriers.value.find((carrier) => String(carrier.id) === form.carrierId) ?? null
+)
+const isLiotCarrier = computed(() => selectedCarrier.value?.code === SUPPLIER_CODE.LIOT)
+const supplierAddresses = computed(() => {
+    const supplierId = Number(form.supplierId)
+    if (!Number.isFinite(supplierId)) {
+        return []
+    }
+    return suppliers.value.find((supplier) => supplier.id === supplierId)?.addresses ?? []
+})
+const filteredDrivers = computed<DriverData[]>(() => {
+    if (!form.carrierId) {
+        return []
+    }
+    return drivers.value.filter((driver) => String(driver.carrier?.id) === form.carrierId)
+})
+const filteredVehicles = computed<VehicleData[]>(() => {
+    if (!form.carrierId) {
+        return []
+    }
+    return vehicles.value.filter(
+        (vehicle) =>
+            String(vehicle.carrier?.id) === form.carrierId &&
+            (!form.truckId || String(vehicle.truck?.id) === form.truckId)
+    )
+})
+
+watch(
+    () => idReception,
+    async (id) => {
+        if (!Number.isFinite(id) || id <= 0) {
+            return
+        }
+        isLoading.value = true
+        try {
+            const reception = await getReception(id)
+            hydrateFromReception(reception)
+            await loadBovineEntries(id)
+        } finally {
+            isLoading.value = false
+        }
+    },
+    {immediate: true}
+)
+
+watch(
+    () => form.receptionTypeId,
+    () => {
+        const receptionType = receptionTypes.value.find((type) => String(type.id) === form.receptionTypeId) ?? null
+        isMerchandise.value = receptionType?.code === RECEPTION_TYPE_CODES.MERCHANDISES
+    }
+)
+
+function createEmptyWeightEntry(type: 'gross' | 'tare'): WeightEntryData {
+    return {
+        type,
+        dsd: null,
+        weight: null,
+        weighedAt: null
+    }
+}
+
+async function clearReceptionBovines(receptionId: number) {
+    const receptionIri = `/api/receptions/${receptionId}`
+    const existing = await getReceptionBovineList(receptionIri)
+    for (const selection of existing) {
+        await deleteReceptionBovine(selection.id)
+    }
+}
+
+async function loadBovineEntries(receptionId: number) {
+    const receptionIri = `/api/receptions/${receptionId}`
+    bovineEntries.value = await getReceptionBovineList(receptionIri)
+}
+
+function syncMerchandiseFlag() {
+    const receptionType =
+        receptionTypes.value.find((type) => String(type.id) === form.receptionTypeId) ?? null
+    isMerchandise.value = receptionType?.code === RECEPTION_TYPE_CODES.MERCHANDISES
+}
+
+function getRelationId(value: unknown): string | null {
+    if (!value) {
+        return null
+    }
+
+    if (typeof value === 'string') {
+        const match = value.match(/\/(\d+)$/)
+        return match ? match[1] : null
+    }
+
+    if (typeof value === 'object' && 'id' in value) {
+        const relation = value as { id?: number | string }
+        if (typeof relation.id === 'number') {
+            return String(relation.id)
+        }
+        if (typeof relation.id === 'string') {
+            return relation.id
+        }
+    }
+
+    return null
+}
+
+async function clearReceptionMerchandise(receptionId: number) {
+    const receptionIri = `/api/receptions/${receptionId}`
+    const existing = await getReceptionPelletBuildingList(receptionIri)
+    for (const selection of existing) {
+        await deleteReceptionPelletBuilding(selection.id)
+    }
+    await updateReception(receptionId, {
+        merchandiseType: null,
+        merchandiseDetail: null,
+        buildings: []
+    })
+}
+
+function hydrateFromReception(reception: ReceptionData | null) {
+    if (!reception) {
+        return
+    }
+    isHydrating.value = true
+    form.identificationNumber = reception?.identificationNumber ?? ''
+    form.licensePlate = reception?.licensePlate ?? ''
+    form.receptionDate = reception?.receptionDate ?? new Date().toISOString().slice(0, 10)
+    form.userId = reception?.user?.id
+        ? String(reception.user.id)
+        : form.userId
+    form.supplierId = reception?.supplier?.id
+        ? String(reception.supplier.id)
+        : ''
+    form.addressId = reception?.address?.id
+        ? String(reception.address.id)
+        : ''
+    form.truckId = reception?.truck?.id
+        ? String(reception.truck.id)
+        : ''
+    form.carrierId = reception?.carrier?.id
+        ? String(reception.carrier.id)
+        : ''
+    form.driverId = reception?.driver?.id
+        ? String(reception.driver.id)
+        : ''
+    form.receptionTypeId = reception?.receptionType?.id
+        ? String(reception.receptionType.id)
+        : ''
+
+    const selectionMap: Record<string, string[]> = {}
+    for (const selection of reception?.pelletBuildings ?? []) {
+        const pelletTypeId = getRelationId(selection.pelletType)
+        const buildingId = getRelationId(selection.building)
+        if (!pelletTypeId || !buildingId) {
+            continue
+        }
+        if (!selectionMap[pelletTypeId]) {
+            selectionMap[pelletTypeId] = []
+        }
+        selectionMap[pelletTypeId].push(buildingId)
+    }
+
+    merchandiseForm.value = {
+        merchandiseTypeId: reception?.merchandiseType?.id ? String(reception.merchandiseType.id) : '',
+        merchandiseDetail: reception?.merchandiseDetail ?? '',
+        selectedBuildingIds: reception?.buildings?.map((building) => String(building.id)) ?? [],
+        selectedPelletBuildingIds: selectionMap
+    }
+
+    const parsedOther =
+        typeof reception?.bovineDetail === 'string' && reception.bovineDetail.trim() !== ''
+            ? Number(reception.bovineDetail)
+            : 0
+    bovineOtherQuantity.value = Number.isFinite(parsedOther) ? parsedOther : 0
+    const gross = reception.weights?.find((weight) => weight.type === 'gross') ?? null
+    const tare = reception.weights?.find((weight) => weight.type === 'tare') ?? null
+    grossWeight.value = gross ? { ...gross } : createEmptyWeightEntry('gross')
+    tareWeight.value = tare ? { ...tare } : createEmptyWeightEntry('tare')
+    isHydrating.value = false
+    syncMerchandiseFlag()
+}
+
+async function loadUsers() {
+    isLoadingUsers.value = true
+    try {
+        users.value = await getUsers()
+    } finally {
+        isLoadingUsers.value = false
+    }
+}
+
+async function loadSuppliers() {
+    isLoadingSuppliers.value = true
+    try {
+        suppliers.value = await getSupplierList()
+    } finally {
+        isLoadingSuppliers.value = false
+    }
+}
+
+async function loadTypes() {
+    isLoadingTypes.value = true
+    try {
+        receptionTypes.value = await getReceptionTypeList()
+    } finally {
+        isLoadingTypes.value = false
+    }
+}
+
+async function loadTrucks() {
+    isLoadingTrucks.value = true
+    try {
+        trucks.value = await getTruckList()
+    } finally {
+        isLoadingTrucks.value = false
+    }
+}
+
+async function loadCarriers() {
+    isLoadingCarriers.value = true
+    try {
+        carriers.value = await getCarrierList()
+    } finally {
+        isLoadingCarriers.value = false
+    }
+}
+
+async function loadDrivers() {
+    isLoadingDrivers.value = true
+    try {
+        drivers.value = await getDriverList()
+    } finally {
+        isLoadingDrivers.value = false
+    }
+}
+
+async function loadVehicles() {
+    isLoadingVehicles.value = true
+    try {
+        vehicles.value = await getVehicleList()
+    } finally {
+        isLoadingVehicles.value = false
+    }
+}
+
+function setDefaultUser() {
+    if (form.userId) {
+        return
+    }
+    if (authStore.user?.id) {
+        form.userId = String(authStore.user.id)
+    }
+}
+
+async function printReceipt() {
+    if (!import.meta.client || !Number.isFinite(idReception) || idReception <= 0) {
+        return
+    }
+
+    const supplierName =
+        suppliers.value.find((supplier) => String(supplier.id) === form.supplierId)?.name ??
+        'fournisseur'
+    const filename = `${form.identificationNumber || idReception}_${supplierName}_${form.licensePlate || 'immat'}.pdf`
+    await printPdf(`/receptions/${idReception}/receipt`, filename)
+
+    // Laisse le temps a la boite de dialogue d'impression de s'ouvrir.
+    await new Promise((resolve) => setTimeout(resolve, 600))
+}
+
+async function saveWeightEntry(entry: WeightEntryData) {
+    if (!idReception || entry.weight === null) {
+        return
+    }
+
+    const payload = {
+        type: entry.type,
+        dsd: entry.dsd ?? null,
+        weight: entry.weight,
+        weighedAt: entry.weighedAt ?? null
+    }
+
+    if (entry.id) {
+        await updateWeight(entry.id, payload)
+        return
+    }
+
+    // Fallback: if id is missing in local state, reuse existing weight by type.
+    const reception = await getReception(idReception)
+    const existingEntry = reception?.weights?.find((weight) => weight.type === entry.type) ?? null
+    if (existingEntry?.id) {
+        await updateWeight(existingEntry.id, payload)
+        return
+    }
+
+    await createWeight({
+        reception: `/api/receptions/${idReception}`,
+        ...payload
+    })
+}
+async function saveBovineEntry(entry: ReceptionBovineTypeData) {
+    if (!idReception || !entry.bovineType || entry.quantity === null || entry.quantity <= 0) {
+        return
+    }
+
+    const payload = {
+        quantity: entry.quantity
+    }
+
+    if (entry.id) {
+        await updateReceptionBovine(entry.id, payload)
+        return
+    }
+
+    await createReceptionBovine({
+        reception: `/api/receptions/${idReception}`,
+        bovineType: `/api/bovine_types/${entry.bovineType.id}`,
+        ...payload
+    })
+}
+
+function getTotalBovines() {
+    const totalTypes = bovineEntries.value.reduce(
+        (sum, entry) => sum + (entry.quantity ?? 0),
+        0
+    )
+    return totalTypes +
+        (bovineOtherQuantity.value ?? 0)
+}
+
+async function syncBovineEntries() {
+    if (!idReception) {
+        return
+    }
+
+    const receptionIri = `/api/receptions/${idReception}`
+    const existing = await getReceptionBovineList(receptionIri)
+    const currentPositive = bovineEntries.value.filter(
+        (entry) => (entry.quantity ?? 0) > 0
+    )
+
+    for (const existingEntry of existing) {
+        const stillPresent = currentPositive.some(
+            (entry) => entry.bovineType.id === existingEntry.bovineType.id
+        )
+        if (!stillPresent) {
+            await deleteReceptionBovine(existingEntry.id)
+        }
+    }
+
+    for (const entry of currentPositive) {
+        await saveBovineEntry(entry)
+    }
+}
+
+async function saveMerchandiseEntry(
+    receptionIri: string,
+    pelletTypeId: string,
+    buildingId: string,
+    existingKeys: Set<string>
+) {
+    const key = `${pelletTypeId}:${buildingId}`
+    if (existingKeys.has(key)) {
+        return
+    }
+    await createReceptionPelletBuilding({
+        reception: receptionIri,
+        pelletType: `/api/pellet_types/${pelletTypeId}`,
+        building: `/api/buildings/${buildingId}`
+    })
+}
+
+async function syncMerchandiseEntries() {
+    if (!idReception) {
+        return
+    }
+
+    const receptionIri = `/api/receptions/${idReception}`
+    const existing = await getReceptionPelletBuildingList(receptionIri)
+    const existingMap = new Map<string, number>()
+    for (const selection of existing) {
+        const pelletTypeId = getRelationId(selection.pelletType)
+        const buildingId = getRelationId(selection.building)
+        if (!pelletTypeId || !buildingId) {
+            continue
+        }
+        existingMap.set(`${pelletTypeId}:${buildingId}`, selection.id)
+    }
+
+    const desiredEntries: Array<{ pelletTypeId: string; buildingId: string }> = []
+    for (const [pelletTypeId, buildingIds] of Object.entries(
+        merchandiseForm.value.selectedPelletBuildingIds
+    )) {
+        for (const buildingId of buildingIds) {
+            desiredEntries.push({ pelletTypeId, buildingId })
+        }
+    }
+    const desiredKeys = new Set(
+        desiredEntries.map((entry) => `${entry.pelletTypeId}:${entry.buildingId}`)
+    )
+
+    for (const [key, selectionId] of existingMap.entries()) {
+        if (!desiredKeys.has(key)) {
+            await deleteReceptionPelletBuilding(selectionId)
+        }
+    }
+
+    const existingKeys = new Set(existingMap.keys())
+    for (const entry of desiredEntries) {
+        await saveMerchandiseEntry(
+            receptionIri,
+            entry.pelletTypeId,
+            entry.buildingId,
+            existingKeys
+        )
+    }
+}
+
+async function validate() {
+    const normalizedLicensePlate = form.licensePlate.trim()
+    const normalizedReceptionDate = form.receptionDate.trim()
+    const normalizedReceptionTypeId = form.receptionTypeId.trim()
+    const normalizedUserId = form.userId.trim()
+    const normalizedSupplierId = form.supplierId.trim()
+    const normalizedAddressId = form.addressId.trim()
+    const normalizedTruckId = form.truckId.trim()
+    const normalizedCarrierId = form.carrierId.trim()
+    const normalizedDriverId = form.driverId.trim()
+    const userIri = normalizedUserId
+        ? `/api/users/${normalizedUserId}`
+        : null
+    const supplierIri = normalizedSupplierId
+        ? `/api/suppliers/${normalizedSupplierId}`
+        : null
+    const addressIri = normalizedAddressId
+        ? `/api/addresses/${normalizedAddressId}`
+        : null
+    const truckIri = normalizedTruckId
+        ? `/api/trucks/${normalizedTruckId}`
+        : null
+    const carrierIri = normalizedCarrierId
+        ? `/api/carriers/${normalizedCarrierId}`
+        : null
+    const driverIri = normalizedDriverId
+        ? `/api/drivers/${normalizedDriverId}`
+        : null
+    const typeIri = normalizedReceptionTypeId
+        ? `/api/reception_types/${normalizedReceptionTypeId}`
+        : null
+
+    const basePayload = {
+        licensePlate: normalizedLicensePlate,
+        receptionDate: normalizedReceptionDate,
+        receptionType: typeIri,
+        user: userIri,
+        supplier: supplierIri,
+        address: addressIri,
+        truck: truckIri,
+        carrier: carrierIri
+    }
+
+    const payload = {
+        ...basePayload,
+        ...(isLiotCarrier.value && driverIri ? { driver: driverIri } : {}),
+    }
+
+    if (idReception) {
+        await receptionStore.updateReception(idReception, {
+            ...payload
+        })
+        await saveWeightEntry(grossWeight.value)
+        await saveWeightEntry(tareWeight.value)
+
+        if (isMerchandise.value) {
+            await clearReceptionBovines(idReception)
+            await updateReception(idReception, {
+                merchandiseType: merchandiseForm.value.merchandiseTypeId
+                    ? `/api/merchandise_types/${merchandiseForm.value.merchandiseTypeId}`
+                    : null,
+                merchandiseDetail: merchandiseForm.value.merchandiseDetail.trim() || null,
+                buildings: merchandiseForm.value.selectedBuildingIds.map(
+                    (buildingId) => `/api/buildings/${buildingId}`
+                ),
+                bovineDetail: null,
+                bovinesTypes: null
+            })
+            await syncMerchandiseEntries()
+        } else {
+                if (getTotalBovines() > 52) {
+                    // toast/erreur UI
+                    return
+                }
+                await clearReceptionMerchandise(idReception)
+                await syncBovineEntries()
+                await updateReception(idReception, {
+                bovineDetail: bovineOtherQuantity.value ? String(bovineOtherQuantity.value) : null
+            })
+        }
+
+        // Évite une réhydratation complète après save (source de cascades de watchers).
+        // On recharge uniquement les bovins quand on est en mode bovins.
+        if (!isMerchandise.value) {
+            await loadBovineEntries(idReception)
+        }
+
+        return
+    }
+}
+
+onMounted(async () => {
+    await loadTypes()
+    syncMerchandiseFlag()
+    formIsLoading.value = true
+    await loadUsers()
+    await loadSuppliers()
+    await loadTrucks()
+    await loadCarriers()
+    await loadDrivers()
+    await loadVehicles()
+    await authStore.ensureSession()
+    setDefaultUser()
+})
+
+watch(
+    () => [form.supplierId, form.addressId, suppliers.value],
+    () => {
+        if (isHydrating.value) {
+            return
+        }
+        if (!form.supplierId) {
+            if (form.addressId !== '') {
+                form.addressId = ''
+            }
+            return
+        }
+        if (!form.addressId && supplierAddresses.value.length === 1) {
+            const nextAddressId = String(supplierAddresses.value[0].id)
+            if (form.addressId !== nextAddressId) {
+                form.addressId = nextAddressId
+            }
+            return
+        }
+        if (!form.addressId) {
+            return
+        }
+        const matches = supplierAddresses.value.some(
+            (address) => String(address.id) === form.addressId
+        )
+        if (!matches) {
+            if (supplierAddresses.value.length === 1) {
+                const nextAddressId = String(supplierAddresses.value[0].id)
+                if (form.addressId !== nextAddressId) {
+                    form.addressId = nextAddressId
+                }
+            } else {
+                if (form.addressId !== '') {
+                    form.addressId = ''
+                }
+            }
+        }
+    },
+    { immediate: true }
+)
+
+watch(
+    () => form.carrierId,
+    () => {
+        if (isHydrating.value || vehicleSyncLock.value) {
+            return
+        }
+        if (!form.carrierId && idReception == null) {
+            runWithVehicleSyncLock(() => {
+                form.driverId = ''
+                form.vehicleId = ''
+            })
+            return
+        }
+        if (!isLiotCarrier.value && idReception == null) {
+            runWithVehicleSyncLock(() => {
+                form.driverId = ''
+                form.vehicleId = ''
+            })
+            return
+        }
+        if (filteredDrivers.value.length === 1) {
+            const nextDriverId = String(filteredDrivers.value[0].id)
+            if (form.driverId !== nextDriverId) {
+                form.driverId = nextDriverId
+            }
+        }
+        if (filteredVehicles.value.length === 1) {
+            const nextVehicleId = String(filteredVehicles.value[0].id)
+            if (form.vehicleId !== nextVehicleId) {
+                runWithVehicleSyncLock(() => {
+                    form.vehicleId = nextVehicleId
+                })
+            }
+        }
+    },
+    { immediate: true }
+)
+
+watch(
+    () => [form.truckId, form.carrierId, vehicles.value],
+    () => {
+        if (isHydrating.value || vehicleSyncLock.value) {
+            return
+        }
+        if (!isLiotCarrier.value) {
+            return
+        }
+        if (filteredVehicles.value.length === 1) {
+            const nextVehicleId = String(filteredVehicles.value[0].id)
+            if (form.vehicleId !== nextVehicleId) {
+                runWithVehicleSyncLock(() => {
+                    form.vehicleId = nextVehicleId
+                })
+            }
+            return
+        }
+        if (!form.vehicleId) {
+            return
+        }
+        const matches = filteredVehicles.value.some(
+            (vehicle) => String(vehicle.id) === form.vehicleId
+        )
+        if (!matches) {
+            if (form.vehicleId !== '') {
+                runWithVehicleSyncLock(() => {
+                    form.vehicleId = ''
+                })
+            }
+        }
+    },
+    { immediate: true }
+)
+
+watch(
+    () => [form.vehicleId, form.carrierId, vehicles.value],
+    () => {
+        if (vehicleSyncLock.value) {
+            return
+        }
+        if (!isLiotCarrier.value) {
+            return
+        }
+        if (isHydrating.value) {
+            return
+        }
+        const selected = filteredVehicles.value.find(
+            (vehicle) => String(vehicle.id) === form.vehicleId
+        )
+        if (selected && form.licensePlate !== selected.plate) {
+            runWithVehicleSyncLock(() => {
+                form.licensePlate = selected.plate
+                allowAnyLicensePlate.value = false
+            })
+        }
+    }
+)
+
+watch(
+    () => [form.licensePlate, form.carrierId, vehicles.value],
+    () => {
+        if (vehicleSyncLock.value) {
+            return
+        }
+        if (isHydrating.value) {
+            return
+        }
+        if (!isLiotCarrier.value || form.vehicleId) {
+            return
+        }
+        const match = filteredVehicles.value.find(
+            (vehicle) => vehicle.plate === form.licensePlate
+        )
+        if (match) {
+            const nextVehicleId = String(match.id)
+            if (form.vehicleId !== nextVehicleId) {
+                runWithVehicleSyncLock(() => {
+                    form.vehicleId = nextVehicleId
+                })
+            }
+        }
+    }
+)
+
+</script>
--- a/frontend/pages/reception/waiting-reception.vue
+++ b/frontend/pages/reception/waiting-reception.vue
@@ -0,0 +1,51 @@
+<template>
+    <div class="flex items-center justify-between">
+        <div class="flex items-center gap-10">
+            <Icon @click="router.push('/')" name="gg:arrow-left-o" size="44" class="cursor-pointer text-primary-500"/>
+            <h1 class="text-3xl font-bold uppercase text-primary-500">listes des réceptions en attente</h1>
+        </div>
+    </div>
+
+    <div class="px-[86px]">
+        <div class="mt-6 border border-slate-200 mb-16">
+            <div class="grid grid-cols-5 gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide">
+                <div>Fournisseur</div>
+                <div>Adresse</div>
+                <div>Type réception</div>
+                <div>Transporteur</div>
+                <div>Immatriculation</div>
+            </div>
+            <div
+                v-for="reception in receptionList"
+                :key="reception.id"
+                class="grid grid-cols-5 gap-4 px-4 py-3 text-sm hover:bg-slate-50 cursor-pointer border-t border-slate-200"
+                role="button"
+                tabindex="0"
+                @click="goToReception(reception.id)"
+                @keydown.enter="goToReception(reception.id)"
+            >
+                <div>{{ reception.supplier?.name }}</div>
+                <div>{{ reception.address?.fullAddress }}</div>
+                <div>{{ reception.receptionType?.label }}</div>
+                <div>{{ reception.carrier?.name }}</div>
+                <div>{{ reception.licensePlate }}</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type {ReceptionData} from "~/services/dto/reception-data";
+import {getReceptionList} from "~/services/reception";
+
+const receptionList = ref<ReceptionData[]>()
+const router = useRouter()
+
+const goToReception = (id: number) => {
+        router.push(`/reception/${id}`)
+}
+
+onMounted(async () => {
+    receptionList.value = await getReceptionList(false)
+})
+</script>
--- a/frontend/pages/shipment/[[id]].vue
+++ b/frontend/pages/shipment/[[id]].vue
@@ -0,0 +1,83 @@
+<template>
+    <div>
+        <div class="flex justify-between h-[52px] mb-[80px]">
+            <div class="flex flex-1 mr-16">
+                <UiStepper
+                    :labels="SHIPMENT_STEP_LABELS"
+                    :current-step="storeShipment?.currentStep ?? 0"
+                    @select="handleStepSelect"
+
+                />
+            </div>
+            <UiButton
+                type="button"
+                class="flex flex-col justify-center uppercase text-xl bg-black text-white h-[50px] w-[272px] text-center"
+                @click="saveAndHold"
+            >Mettre en attente
+            </UiButton>
+        </div>
+        <ShipmentForm v-if="!storeShipment || storeShipment.currentStep === 0" ref="shipmentFormRef"/>
+        <ShipmentWeight v-if="storeShipment?.currentStep === 1" mode="gross"/>
+        <ShipmentLoading v-if="storeShipment?.currentStep === 2"/>
+        <ShipmentWeight v-if="storeShipment?.currentStep === 3" mode="tare"/>
+
+    </div>
+</template>
+<script setup lang="ts">
+
+import {SHIPMENT_STEP_LABELS} from "~/constants/steps";
+import {storeToRefs} from "pinia";
+import {useShipmentStore} from "~/stores/shipment";
+import { ref, watch } from 'vue'
+const shipmentStore = useShipmentStore()
+const {current: storeShipment} = storeToRefs(shipmentStore)
+const shipmentFormRef = ref<{ saveDraft: () => Promise<void> } | null>(null)
+
+const route = useRoute()
+const router = useRouter()
+
+const resolveShipmentId = (param: unknown) => {
+    const idStr = Array.isArray(param) ? param[0] : param
+    if (!idStr) {
+        return null
+    }
+    const id = Number(idStr)
+    return Number.isFinite(id) ? id : null
+}
+
+watch (
+    () => route.params.id,
+    async (param) => {
+        const id = resolveShipmentId(param)
+        if (id === null) {
+            shipmentStore.clearCurrent()
+            return
+        }
+        await shipmentStore.loadShipment(id)
+    },
+    {immediate: true}
+)
+
+const saveAndHold = async () => {
+    if (shipmentFormRef.value) {
+        await shipmentFormRef.value.saveDraft()
+    }
+    await router.push('/')
+}
+const handleStepSelect = async (step: number) => {
+    if (!shipmentStore.current) {
+        return
+    }
+
+    if (step === shipmentStore.current.currentStep) {
+        return
+    }
+
+    await shipmentStore.updateShipment(shipmentStore.current.id, {
+        currentStep: step
+    })
+    await shipmentStore.loadShipment(shipmentStore.current.id)
+}
+
+
+</script>
--- a/frontend/pages/shipment/finish-shipment.vue
+++ b/frontend/pages/shipment/finish-shipment.vue
@@ -0,0 +1,85 @@
+<template>
+    <div class="flex items-center justify-start gap-10">
+        <Icon @click="router.push('/')" name="gg:arrow-left-o" size="44" class="cursor-pointer text-primary-500"/>
+        <h1 class="text-3xl font-bold uppercase text-primary-500">listes des expéditions finie</h1>
+    </div>
+
+    <div class="px-[86px]">
+        <div class="mt-6 border border-slate-200 mb-16 ">
+            <div class="grid grid-cols-6 gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide">
+                <div>Numéro</div>
+                <div>Date</div>
+                <div>Client</div>
+                <div>Adresse</div>
+                <div>Type d'expéditon</div>
+                <div>Poids</div>
+            </div>
+            <div
+                v-for="shipment in shipmentList"
+                :key="shipment
+               .id"
+                class="grid grid-cols-6 gap-4 px-4 py-3 text-sm hover:bg-slate-50 cursor-pointer border-t border-slate-200"
+                role="button"
+                tabindex="0"
+                @click="goShipment(shipment.id)"
+            >
+                <div>{{ shipment.identificationNumber }}</div>
+                <div>{{ shipment.shipmentDate }}</div>
+                <div>{{ shipment.customer?.name }}</div>
+                <div>{{ shipment.address?.fullAddress }}</div>
+                <div>
+                    <template v-if="formatShipmentLines(shipment).length">
+                        <div
+                            v-for="(line, index) in formatShipmentLines(shipment)"
+                            :key="index"
+                            class="leading-5"
+                        >
+                            {{ line }}
+                        </div>
+                    </template>
+                </div>
+                <div>{{ formatWeighing(shipment) }}</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type {ShipmentData} from "~/services/dto/shipment-data";
+import {getShipmentList} from "~/services/shipment";
+
+const shipmentList = ref<ShipmentData[]>()
+const router = useRouter()
+
+const formatWeighing = (shipment: ShipmentData) => {
+    const gross = shipment.weights?.find((weight) => weight.type === 'gross')?.weight
+    const tare = shipment.weights?.find((weight) => weight.type === 'tare')?.weight
+
+    if (gross == null || tare == null) {
+        return '—'
+    }
+
+    return `${gross - tare} kg`
+}
+
+
+const formatShipmentLines = (shipment: ShipmentData) => {
+    if (!shipment.shipmentType && shipment.nbBovinSend == null) {
+        return []
+    }
+
+    const label = typeof shipment.shipmentType === 'string'
+        ? shipment.shipmentType
+        : shipment.shipmentType?.label
+
+    return [`${label ?? '—'} : ${shipment.nbBovinSend ?? '—'}`]
+}
+
+const goShipment = (id: number) => {
+    router.push(`/shipment/update/${id}`)
+}
+
+onMounted(async () => {
+    shipmentList.value = await getShipmentList(true)
+})
+</script>
--- a/frontend/pages/shipment/update/[[id]].vue
+++ b/frontend/pages/shipment/update/[[id]].vue
@@ -0,0 +1,639 @@
+<template>
+    <form @submit.prevent="validate">
+        <div class="grid grid-cols-2 h-[461px] items-start gap-y-8 gap-x-40 mb-16">
+            <div class="flex items-center justify-between gap-10 relative col-start-1 row-start-1">
+                <div class="flex flex-row absolute -left-[60px] justify-between">
+                    <Icon @click="router.push('/shipment/finish-shipment')" name="gg:arrow-left-o" size="44" class="cursor-pointer text-primary-500"/>
+                </div>
+                <h1 class="font-bold text-4xl col-start-1 row-start-1 text-primary-500 uppercase">Expédition {{ form.identificationNumber }}</h1>
+                <Icon @click="printReceipt" name="mdi:printer-outline" size="44" class="cursor-pointer text-primary-500"/>
+            </div>
+
+            <UiSelect
+                id="shipment-user"
+                v-model="form.userId"
+                label="Nom de l'utilisateur"
+                :options="users.map((user) => ({
+                    value: String(user.id),
+                    label: user.username
+                }))"
+                :loading="isLoadingUsers"
+                wrapper-class="col-start-1 row-start-2"
+            />
+
+            <UiDateInput
+                id="shipment-date"
+                v-model="form.shipmentDate"
+                label="Date d'expédition"
+                wrapper-class="col-start-1 row-start-3"
+            />
+
+            <div class="col-start-1 row-start-4 h-[64px]">
+                <div class="flex w-full items-end gap-[104px]">
+                    <UiRadioGroup
+                        id="shipment-type"
+                        name="shipment-type"
+                        label="Type d'expédition bovine"
+                        input-class="accent-primary-700 focus:ring-primary-700"
+                        group-class="flex flex-row gap-[104px] w-[160px_160px] h-[32px]"
+                        v-model="selectedShipmentTypeId"
+                        :options="bovineShipment.map((type) => ({
+                            value: String(type.id),
+                            label: type.label
+                        }))"
+                    />
+                    <UiNumberInput
+                        id="shipment-type-quantity"
+                        v-model="shipmentQuantity"
+                        :placeholder="0"
+                        :min="0"
+                        :max="1200"
+                        :disabled="!selectedShipmentTypeId"
+                    />
+                </div>
+            </div>
+
+            <UiSelect
+                id="shipment-customer"
+                v-model="form.customerId"
+                label="Client"
+                :options="customers.map((customer) => ({
+                    value: String(customer.id),
+                    label: customer.name || `Client #${customer.id}`
+                }))"
+                :loading="isLoadingCustomers"
+                wrapper-class="col-start-1 row-start-5"
+            />
+
+            <UiSelect
+                id="shipment-address"
+                v-model="form.addressId"
+                :options="customerAddressOptions"
+                :disabled="isLoadingCustomers || customerAddresses.length === 0"
+                label="Adresse"
+                wrapper-class="col-start-2 row-start-1"
+            />
+
+            <UiSelect
+                id="shipment-truck"
+                v-model="form.truckId"
+                label="Camion"
+                :options="trucks.map((truck) => ({
+                    value: String(truck.id),
+                    label: truck.name
+                }))"
+                :loading="isLoadingTrucks"
+                wrapper-class="col-start-2 row-start-2"
+            />
+
+            <UiSelect
+                id="shipment-carrier"
+                v-model="form.carrierId"
+                label="Transporteur"
+                :options="carriers.map((carrier) => ({
+                    value: String(carrier.id),
+                    label: carrier.name
+                }))"
+                wrapper-class="col-start-2 row-start-3"
+            />
+
+            <div v-if="!isLiotCarrier" class="col-start-2 row-start-4">
+                <UiLicensePlateInput
+                    v-model="form.licensePlate"
+                    v-model:allowAny="allowAnyLicensePlate"
+                />
+            </div>
+
+            <UiSelect
+                v-if="isLiotCarrier"
+                id="shipment-vehicle"
+                v-model="form.vehicleId"
+                label="Immatriculation"
+                :options="filteredVehicles.map((vehicle) => ({
+                    value: String(vehicle.id),
+                    label: vehicle.plate
+                }))"
+                :loading="isLoadingVehicles"
+                :disabled="isLoadingVehicles || filteredVehicles.length === 0"
+                wrapper-class="col-start-2 row-start-4"
+            />
+
+            <div class="col-start-2 row-start-5 min-h-[72px]">
+                <UiSelect
+                    v-if="isLiotCarrier"
+                    id="shipment-driver"
+                    v-model="form.driverId"
+                    label="Nom du chauffeur si LIOT"
+                    :options="filteredDrivers.map((driver) => ({
+                        value: String(driver.id),
+                        label: driver.name
+                    }))"
+                    :loading="isLoadingDrivers"
+                />
+            </div>
+        </div>
+
+        <div v-if="formIsLoading">
+            <div class="flex justify-evenly gap-y-8 gap-x-41 mb-10 border-b border-primary-500/60">
+                <h1
+                    class="font-bold text-3xl uppercase px-12 col-start-1 row-start-1 cursor-pointer"
+                    :class="activeTab === 'weights' ? 'border-b-[6px] border-primary-500 text-primary-500' : 'text-primary-500/50'"
+                    @click="activeTab = 'weights'"
+                >
+                    pesée à plein
+                </h1>
+                <h1
+                    class="font-bold text-3xl uppercase col-start-1 row-start-1 px-12 cursor-pointer"
+                    :class="activeTab === 'weightsEmpty' ? 'border-b-[6px] border-primary-500 text-primary-500' : 'text-primary-500/50'"
+                    @click="activeTab = 'weightsEmpty'"
+                >
+                    pesée à vide
+                </h1>
+            </div>
+            <div class="mb-12">
+                <update-weight
+                    v-show="activeTab === 'weights'"
+                    v-model="grossWeight"
+                    v-if="grossWeight"
+                    :isAdmin="authStore.isAdmin"
+                />
+                <update-weight
+                    v-show="activeTab === 'weightsEmpty'"
+                    v-model="tareWeight"
+                    v-if="tareWeight"
+                    :isAdmin="authStore.isAdmin"
+                />
+            </div>
+        </div>
+
+        <div class="flex justify-center">
+            <UiButton
+                type="submit"
+                class="text-xl mb-16 uppercase bg-primary-500 text-white h-[50px] w-[272px] justify-self-end"
+            >
+                Valider
+            </UiButton>
+        </div>
+    </form>
+</template>
+
+<script setup lang="ts">
+import { usePdfPrinter } from '#imports'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import UpdateWeight from '~/components/commun/update-weight.vue'
+import { getUsers } from '~/services/auth'
+import { getCarrierList } from '~/services/carrier'
+import { getCustomerList } from '~/services/customer'
+import type { AddressData } from '~/services/dto/address-data'
+import type { CarrierData } from '~/services/dto/carrier-data'
+import type { CustomerData } from '~/services/dto/customer-data'
+import type { DriverData } from '~/services/dto/driver-data'
+import type { ShipmentData, ShipmentFormData } from '~/services/dto/shipment-data'
+import type { ShipmentTypeData } from '~/services/dto/shipment-type-data'
+import type { TruckData } from '~/services/dto/truck-data'
+import type { UserData } from '~/services/dto/user-data'
+import type { VehicleData } from '~/services/dto/vehicle-data'
+import type { WeightEntryData } from '~/services/dto/weight-data'
+import { getDriverList } from '~/services/driver'
+import { getShipment, updateShipment } from '~/services/shipment'
+import { getShipmentTypeList } from '~/services/shipment-type'
+import { getTruckList } from '~/services/truck'
+import { getVehicleList } from '~/services/vehicle'
+import { createWeight, updateWeight } from '~/services/weight'
+import { useAuthStore } from '~/stores/auth'
+import { SUPPLIER_CODE } from '~/utils/constants'
+
+const router = useRouter()
+const route = useRoute()
+const authStore = useAuthStore()
+const { printPdf } = usePdfPrinter()
+
+const users = ref<UserData[]>([])
+const customers = ref<CustomerData[]>([])
+const trucks = ref<TruckData[]>([])
+const carriers = ref<CarrierData[]>([])
+const drivers = ref<DriverData[]>([])
+const vehicles = ref<VehicleData[]>([])
+const bovineShipment = ref<ShipmentTypeData[]>([])
+const currentShipment = ref<ShipmentData | null>(null)
+
+const selectedShipmentTypeId = ref('')
+const shipmentQuantity = ref<number | null>(0)
+const allowAnyLicensePlate = ref(false)
+const activeTab = ref<'weightsEmpty' | 'weights'>('weights')
+const grossWeight = ref<WeightEntryData>(createEmptyWeightEntry('gross'))
+const tareWeight = ref<WeightEntryData>(createEmptyWeightEntry('tare'))
+const formIsLoading = ref(false)
+
+const isLoadingUsers = ref(false)
+const isLoadingShipmentTypes = ref(false)
+const isLoadingCustomers = ref(false)
+const isLoadingTrucks = ref(false)
+const isLoadingCarriers = ref(false)
+const isLoadingVehicles = ref(false)
+const isLoadingDrivers = ref(false)
+const isHydrating = ref(false)
+
+const form = reactive<ShipmentFormData & { identificationNumber: string | null }>({
+    identificationNumber: null,
+    userId: '',
+    shipmentDate: new Date().toISOString().slice(0, 10),
+    customerId: '',
+    addressId: '',
+    truckId: '',
+    carrierId: '',
+    driverId: '',
+    vehicleId: '',
+    licensePlate: ''
+})
+
+const shipmentId = computed(() => {
+    const id = Number(route.params.id)
+    return Number.isFinite(id) ? id : null
+})
+
+const selectedCarrier = computed(() =>
+    carriers.value.find((carrier) => String(carrier.id) === form.carrierId) ?? null
+)
+const isLiotCarrier = computed(() => selectedCarrier.value?.code === SUPPLIER_CODE.LIOT)
+const isAddressData = (value: unknown): value is AddressData =>
+    typeof value === 'object' &&
+    value !== null &&
+    'id' in value &&
+    'fullAddress' in value
+
+const customerAddresses = computed<AddressData[]>(() => {
+    if (!form.customerId) return []
+    const customerId = Number(form.customerId)
+    if (!Number.isFinite(customerId) || customerId <= 0) return []
+
+    const addresses = customers.value.find((c) => c.id === customerId)?.addresses ?? []
+    return addresses.filter(isAddressData)
+})
+
+const customerAddressOptions = computed(() =>
+    customerAddresses.value.map((address) => ({
+        value: String(address.id),
+        label: address.fullAddress
+    }))
+)
+
+const filteredDrivers = computed<DriverData[]>(() => {
+    if (!form.carrierId) {
+        return []
+    }
+    return drivers.value.filter((driver) => String(driver.carrier?.id) === form.carrierId)
+})
+
+const filteredVehicles = computed<VehicleData[]>(() => {
+    if (!form.carrierId) {
+        return []
+    }
+    return vehicles.value.filter(
+        (vehicle) =>
+            String(vehicle.carrier?.id) === form.carrierId &&
+            (!form.truckId || String(vehicle.truck?.id) === form.truckId)
+    )
+})
+
+const loadUsers = async () => {
+    isLoadingUsers.value = true
+    try {
+        users.value = await getUsers()
+    } finally {
+        isLoadingUsers.value = false
+    }
+}
+
+const loadShipmentType = async () => {
+    isLoadingShipmentTypes.value = true
+    try {
+        bovineShipment.value = await getShipmentTypeList()
+    } finally {
+        isLoadingShipmentTypes.value = false
+    }
+}
+
+const loadCustomers = async () => {
+    isLoadingCustomers.value = true
+    try {
+        customers.value = await getCustomerList()
+    } finally {
+        isLoadingCustomers.value = false
+    }
+}
+
+const loadTrucks = async () => {
+    isLoadingTrucks.value = true
+    try {
+        trucks.value = await getTruckList()
+    } finally {
+        isLoadingTrucks.value = false
+    }
+}
+
+const loadCarriers = async () => {
+    isLoadingCarriers.value = true
+    try {
+        carriers.value = await getCarrierList()
+    } finally {
+        isLoadingCarriers.value = false
+    }
+}
+
+const loadVehicles = async () => {
+    isLoadingVehicles.value = true
+    try {
+        vehicles.value = await getVehicleList()
+    } finally {
+        isLoadingVehicles.value = false
+    }
+}
+
+const loadDrivers = async () => {
+    isLoadingDrivers.value = true
+    try {
+        drivers.value = await getDriverList()
+    } finally {
+        isLoadingDrivers.value = false
+    }
+}
+
+function setDefaultUser() {
+    if (form.userId) {
+        return
+    }
+    if (authStore.user?.id) {
+        form.userId = String(authStore.user.id)
+    }
+}
+
+function hydrateFromShipment(shipment: ShipmentData | null) {
+    if (!shipment) {
+        return
+    }
+
+    isHydrating.value = true
+    form.identificationNumber = shipment.identificationNumber ?? null
+    form.licensePlate = shipment.licensePlate ?? ''
+    form.shipmentDate = shipment.shipmentDate ?? new Date().toISOString().slice(0, 10)
+    form.userId = shipment.user?.id ? String(shipment.user.id) : form.userId
+    form.customerId = shipment.customer?.id ? String(shipment.customer.id) : ''
+    form.addressId = shipment.address?.id ? String(shipment.address.id) : ''
+    form.truckId = shipment.truck?.id ? String(shipment.truck.id) : ''
+    form.carrierId = shipment.carrier?.id ? String(shipment.carrier.id) : ''
+    form.driverId = shipment.driver?.id ? String(shipment.driver.id) : ''
+    form.vehicleId = shipment.vehicle?.id ? String(shipment.vehicle.id) : ''
+    selectedShipmentTypeId.value = shipment.shipmentType?.id ? String(shipment.shipmentType.id) : ''
+    shipmentQuantity.value = shipment.nbBovinSend ?? 0
+    const gross = shipment.weights?.find((weight) => weight.type === 'gross') ?? null
+    const tare = shipment.weights?.find((weight) => weight.type === 'tare') ?? null
+    grossWeight.value = gross ? { ...gross } : createEmptyWeightEntry('gross')
+    tareWeight.value = tare ? { ...tare } : createEmptyWeightEntry('tare')
+    isHydrating.value = false
+}
+
+async function printReceipt() {
+    if (!import.meta.client || shipmentId.value === null || shipmentId.value <= 0) {
+        return
+    }
+
+    const customerName =
+        customers.value.find((customer) => String(customer.id) === form.customerId)?.name ??
+        'client'
+    const filename = `${form.identificationNumber || shipmentId.value}_${customerName}_${form.licensePlate || 'immat'}.pdf`
+    await printPdf(`/shipments/${shipmentId.value}/receipt`, filename)
+    await new Promise((resolve) => setTimeout(resolve, 600))
+}
+
+async function loadShipmentForUpdate() {
+    if (shipmentId.value === null) {
+        return
+    }
+    const shipment = await getShipment(shipmentId.value)
+    currentShipment.value = shipment
+    hydrateFromShipment(shipment)
+}
+
+watch(
+    () => [form.customerId, form.addressId, customers.value],
+    () => {
+        if (!form.customerId) {
+            form.addressId = ''
+            return
+        }
+        if (!form.addressId && customerAddresses.value.length === 1) {
+            form.addressId = String(customerAddresses.value[0].id)
+            return
+        }
+        if (!form.addressId) {
+            return
+        }
+        const matches = customerAddresses.value.some(
+            (address) => String(address.id) === form.addressId
+        )
+        if (!matches) {
+            if (customerAddresses.value.length === 1) {
+                form.addressId = String(customerAddresses.value[0].id)
+            } else {
+                form.addressId = ''
+            }
+        }
+    },
+    { immediate: true }
+)
+
+function applyLiotDefaults() {
+    if (isHydrating.value) {
+        return
+    }
+    if (!form.carrierId) {
+        form.driverId = ''
+        form.vehicleId = ''
+        return
+    }
+    if (!isLiotCarrier.value) {
+        form.driverId = ''
+        form.vehicleId = ''
+        return
+    }
+    if (filteredDrivers.value.length === 1) {
+        form.driverId = String(filteredDrivers.value[0].id)
+    }
+    if (filteredVehicles.value.length === 1) {
+        form.vehicleId = String(filteredVehicles.value[0].id)
+    }
+}
+
+watch(
+    () => form.carrierId,
+    () => {
+        applyLiotDefaults()
+    },
+    { immediate: true }
+)
+
+watch(
+    () => isHydrating.value,
+    (value) => {
+        if (!value) {
+            applyLiotDefaults()
+        }
+    }
+)
+
+watch(
+    () => [form.truckId, form.carrierId, vehicles.value],
+    () => {
+        if (!isLiotCarrier.value) {
+            return
+        }
+        if (filteredVehicles.value.length === 1) {
+            form.vehicleId = String(filteredVehicles.value[0].id)
+            return
+        }
+        if (!form.vehicleId) {
+            return
+        }
+        const matches = filteredVehicles.value.some(
+            (vehicle) => String(vehicle.id) === form.vehicleId
+        )
+        if (!matches) {
+            form.vehicleId = ''
+        }
+    },
+    { immediate: true }
+)
+
+watch(
+    () => [form.vehicleId, form.carrierId, vehicles.value],
+    () => {
+        if (!isLiotCarrier.value || isHydrating.value) {
+            return
+        }
+        const selected = filteredVehicles.value.find(
+            (vehicle) => String(vehicle.id) === form.vehicleId
+        )
+        if (selected) {
+            form.licensePlate = selected.plate
+            allowAnyLicensePlate.value = false
+        }
+    }
+)
+
+watch(
+    () => [form.licensePlate, form.carrierId, form.vehicleId, vehicles.value],
+    () => {
+        if (!isLiotCarrier.value || form.vehicleId) {
+            return
+        }
+        const match = filteredVehicles.value.find(
+            (vehicle) => vehicle.plate === form.licensePlate
+        )
+        if (match) {
+            form.vehicleId = String(match.id)
+        }
+    }
+)
+
+function buildPayload() {
+    const normalizedLicensePlate = form.licensePlate.trim()
+    const normalizedShipmentDate = form.shipmentDate.trim()
+    const normalizedCustomerId = form.customerId.trim()
+    const normalizedTruckId = form.truckId.trim()
+    const normalizedCarrierId = form.carrierId.trim()
+    const normalizedDriverId = form.driverId.trim()
+    const normalizedUserId = form.userId.trim()
+    const normalizedAddressId = form.addressId.trim()
+    const normalizedShipmentTypeId = selectedShipmentTypeId.value.trim()
+
+    const customerIri = normalizedCustomerId ? `/api/customers/${normalizedCustomerId}` : null
+    const truckIri = normalizedTruckId ? `/api/trucks/${normalizedTruckId}` : null
+    const carrierIri = normalizedCarrierId ? `/api/carriers/${normalizedCarrierId}` : null
+    const userIri = normalizedUserId ? `/api/users/${normalizedUserId}` : null
+    const driverIri = normalizedDriverId ? `/api/drivers/${normalizedDriverId}` : null
+    const addressIri = normalizedAddressId ? `/api/addresses/${normalizedAddressId}` : null
+    const shipmentTypeIri = normalizedShipmentTypeId
+        ? `/api/shipment_types/${normalizedShipmentTypeId}`
+        : null
+
+    const rawQuantity = Number(shipmentQuantity.value ?? 0)
+    const normalizedQuantity = Number.isFinite(rawQuantity)
+        ? Math.max(0, Math.trunc(rawQuantity))
+        : 0
+
+    return {
+        licensePlate: normalizedLicensePlate,
+        shipmentDate: normalizedShipmentDate,
+        customer: customerIri,
+        truck: truckIri,
+        carrier: carrierIri,
+        driver: driverIri,
+        user: userIri,
+        address: addressIri,
+        shipmentType: shipmentTypeIri,
+        nbBovinSend: normalizedQuantity
+    }
+}
+
+function createEmptyWeightEntry(type: 'gross' | 'tare'): WeightEntryData {
+    return {
+        type,
+        dsd: null,
+        weight: null,
+        weighedAt: null
+    }
+}
+
+async function saveWeightEntry(entry: WeightEntryData) {
+    if (!shipmentId.value || entry.weight === null) {
+        return
+    }
+
+    const payload = {
+        type: entry.type,
+        dsd: entry.dsd ?? null,
+        weight: entry.weight,
+        weighedAt: entry.weighedAt ?? null
+    }
+
+    if (entry.id) {
+        await updateWeight(entry.id, payload)
+        return
+    }
+
+    await createWeight({
+        shipment: `api/shipments/${shipmentId.value}`,
+        ...payload
+    })
+}
+
+async function validate() {
+    if (shipmentId.value === null) {
+        return
+    }
+
+    await updateShipment(shipmentId.value, {
+        currentStep: currentShipment.value?.currentStep ?? 0,
+        ...buildPayload()
+    })
+    await saveWeightEntry(grossWeight.value)
+    await saveWeightEntry(tareWeight.value)
+
+    await loadShipmentForUpdate()
+}
+
+onMounted(async () => {
+    await loadShipmentType()
+    await loadUsers()
+    await loadCustomers()
+    await loadTrucks()
+    await loadCarriers()
+    await loadVehicles()
+    await loadDrivers()
+    await authStore.ensureSession()
+    formIsLoading.value = true
+    setDefaultUser()
+    await loadShipmentForUpdate()
+})
+</script>
--- a/frontend/pages/shipment/waiting-shipment.vue
+++ b/frontend/pages/shipment/waiting-shipment.vue
@@ -0,0 +1,74 @@
+<template>
+    <div class="flex items-center justify-between">
+        <div class="flex items-center gap-10">
+            <Icon @click="router.push('/')" name="gg:arrow-left-o" size="44" class="cursor-pointer text-primary-500"/>
+            <h1 class="text-3xl font-bold uppercase text-primary-500">listes des expéditions en attente</h1>
+        </div>
+    </div>
+
+    <div class="px-[86px]">
+        <div class="mt-6 border border-slate-200 mb-16 ">
+            <div class="grid grid-cols-5 gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide">
+                <div>Client</div>
+                <div>Adresse</div>
+                <div>Type d'expéditions</div>
+                <div>Transporteur</div>
+                <div>Immatriculation</div>
+            </div>
+            <div
+                v-for="shipment in shipmentList"
+                :key="shipment.id"
+                class="grid grid-cols-5 gap-4 px-4 py-3 text-sm hover:bg-slate-50 cursor-pointer border-t border-slate-200"
+                role="button"
+                tabindex="0"
+                @click="goToShipment(shipment.id)"
+                @keydown.enter="goToShipment(shipment.id)"
+            >
+                <div>{{ shipment.customer?.name }}</div>
+                <div>{{ shipment.address?.fullAddress }}</div>
+                <div>
+                    <template v-if="formatShipmentLines(shipment).length">
+                        <div
+                            v-for="(line, index) in formatShipmentLines(shipment)"
+                            :key="index"
+                            class="leading-5"
+                        >
+                            {{ line }}
+                        </div>
+                    </template>
+                </div>
+                <div>{{ shipment.carrier?.name }}</div>
+                <div>{{ shipment.licensePlate }}</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+
+import type {ShipmentData} from "~/services/dto/shipment-data";
+import {getShipmentList} from "~/services/shipment";
+
+const shipmentList = ref<ShipmentData[]>()
+const router = useRouter()
+
+const goToShipment = (id: number) => {
+    router.push(`/shipment/${id}`)
+}
+
+const formatShipmentLines = (shipment: ShipmentData) => {
+    if (!shipment.shipmentType && shipment.nbBovinSend == null) {
+        return []
+    }
+
+    const label = typeof shipment.shipmentType === 'string'
+        ? shipment.shipmentType
+        : shipment.shipmentType?.label
+
+    return [`${label ?? '—'} : ${shipment.nbBovinSend ?? '—'}`]
+}
+
+onMounted(async () => {
+    shipmentList.value = await getShipmentList(false)
+})
+</script>
--- a/frontend/services/address.ts
+++ b/frontend/services/address.ts
@@ -0,0 +1,45 @@
+import { useApi } from '~/composables/useApi'
+import type { AddressData } from '~/services/dto/address-data'
+export interface AddressPayload {
+    label: string
+    street: string
+    street2?: string | null
+    postalCode: string
+    city: string
+    countryCode: string
+}
+
+export interface AddressData extends AddressPayload {
+    id: number
+}
+
+export async function createAddress(
+    payload: AddressPayload
+): Promise<AddressData> {
+    const api = useApi()
+
+    return await api.post<AddressData>('addresses', payload, {
+        toastErrorKey: 'errors.address.create',
+        toastSuccessKey: 'success.address.create',
+    })
+}
+
+export async function updateAddress(
+    id: number,
+    payload: AddressPayload
+): Promise<AddressData> {
+    const api = useApi()
+
+    return await api.patch<AddressData>(`addresses/${id}`, payload, {
+        toastErrorKey: 'errors.address.update',
+        toastSuccessKey: 'success.address.update',
+    })
+}
+
+export async function getAddress(id: number): Promise<AddressData> {
+    const api = useApi()
+
+    return await api.get<AddressData>(`addresses/${id}`, {}, {
+        toastErrorKey: 'errors.address.fetch',
+    })
+}
--- a/frontend/services/auth.ts
+++ b/frontend/services/auth.ts
@@ -1,5 +1,6 @@
 import { useApi } from '~/composables/useApi'
 import type { UserData } from '~/services/dto/user-data'
+import type {UserPayload} from "~/services/dto/user-data";

 export async function getUsers() {
  const api = useApi()
@@ -12,7 +13,40 @@ export async function getUsers() {

  return data['hydra:member'] ?? []
 }
+export async function getAdminUsers() {
+  const api = useApi()
+  const data = await api.get<UserData[] | { 'hydra:member': UserData[] }>('admin/users', {}, {
+    toastErrorKey: 'errors.auth.users'
+  })
+  if (Array.isArray(data)) {
+    return data
+  }

+  return data['hydra:member'] ?? []
+}
+
+export async function getUser(id: number) {
+  const api = useApi()
+  return api.get<UserData>(`users/${id}`, {}, {
+    toastErrorKey: 'errors.auth.user'
+  })
+}
+
+export async function createUser(payload: UserPayload = {}) {
+    const api = useApi()
+    return api.post<UserData>('users', payload, {
+        toastErrorKey: 'errors.auth.create',
+        toastSuccessKey : 'success.auth.create'
+    })
+}
+
+export async function updateUser(id : number, playload: UserPayload = {}){
+    const api = useApi()
+    return api.patch<UserData>(`users/${id}`, playload, {
+        toastErrorKey: 'errors.auth.update',
+        toastSuccessKey: 'success.auth.update'
+    })
+}
 export async function getCurrentUser() {
  const api = useApi()
  return api.get<UserData>('me', {}, {
--- a/frontend/services/bovine-type.ts
+++ b/frontend/services/bovine-type.ts
@@ -0,0 +1,60 @@
+import { useApi } from '~/composables/useApi'
+import type { BovineTypeData, BovinPayload } from "~/services/dto/bovine-type-data";
+
+export type BovineTypeListResponse =
+    | BovineTypeData[]
+    | { 'hydra:member'?: BovineTypeData[] }
+
+export async function getBovineTypeList(): Promise<BovineTypeData[]> {
+    const api = useApi()
+    const response = await api.get<BovineTypeListResponse>('bovine_types', {}, {
+        toastErrorKey: 'errors.bovin.list'
+    })
+
+    if (Array.isArray(response)) {
+        return response.map(mapToBovineTypeData)
+    }
+
+    if (response && typeof response === 'object' && Array.isArray(response['hydra:member'])) {
+        return response['hydra:member'].map(mapToBovineTypeData)
+    }
+
+    return []
+}
+
+export async function getBovin(id: number): Promise<BovineTypeData> {
+    const api = useApi()
+    const response = await api.get<BovineTypeData>(`bovine_types/${id}`, {}, {
+        toastErrorKey: 'errors.bovin.fetch'
+    })
+    return mapToBovineTypeData(response)
+}
+
+export async function createBovin(payload: BovinPayload = {}): Promise<BovineTypeData> {
+    const api = useApi()
+    const response = await api.post<BovineTypeData>('bovine_types', toBovineTypePayload(payload), {
+        toastErrorKey: 'errors.bovin.create',
+        toastSuccessKey: 'success.bovin.create'
+    })
+    return mapToBovineTypeData(response)
+}
+
+export async function updateBovin(id: number, payload: BovinPayload = {}): Promise<BovineTypeData> {
+    const api = useApi()
+    const response = await api.patch<BovineTypeData>(`bovine_types/${id}`, toBovineTypePayload(payload), {
+        toastErrorKey: 'errors.bovin.update',
+        toastSuccessKey: 'success.bovin.update'
+    })
+    return mapToBovineTypeData(response)
+}
+
+const mapToBovineTypeData = (item: BovineTypeData): BovineTypeData => ({
+    id: item.id,
+    label: item.label,
+    code: item.code
+})
+
+const toBovineTypePayload = (payload: BovinPayload): Partial<BovineTypeData> => ({
+    label: payload.label ?? undefined,
+    code: payload.code ?? undefined
+})
--- a/frontend/services/building.ts
+++ b/frontend/services/building.ts
@@ -0,0 +1,23 @@
+import { useApi } from '~/composables/useApi'
+import type { BuildingData } from '~/services/dto/building-data'
+
+export type BuildingListResponse =
+    | BuildingData[]
+    | { 'hydra:member'?: BuildingData[] }
+
+export async function getBuildingList(): Promise<BuildingData[]> {
+    const api = useApi()
+    const response = await api.get<BuildingListResponse>('buildings', {}, {
+        toastErrorKey: 'errors.building.list'
+    })
+
+    if (Array.isArray(response)) {
+        return response
+    }
+
+    if (response && typeof response === 'object' && Array.isArray(response['hydra:member'])) {
+        return response['hydra:member']
+    }
+
+    return []
+}
--- a/frontend/services/carrier.ts
+++ b/frontend/services/carrier.ts
@@ -0,0 +1,46 @@
+import { useApi } from '~/composables/useApi'
+import type {CarrierData, CarrierPayload} from "~/services/dto/carrier-data";
+
+export type CarrierListResponse =
+    | CarrierData[]
+    | { 'hydra:member'?: CarrierData[] }
+
+export async function getCarrierList(): Promise<CarrierData[]> {
+    const api = useApi()
+    const response = await api.get<CarrierListResponse>('carriers', {}, {
+        toastErrorKey: 'errors.carrier.list'
+    })
+
+    if (Array.isArray(response)) {
+        return response
+    }
+
+    if (response && typeof response === 'object' && Array.isArray(response['hydra:member'])) {
+        return response['hydra:member']
+    }
+
+    return []
+}
+
+export async function getCarrier(id: number) {
+    const api = useApi()
+    return api.get<CarrierData>(`carriers/${id}`, {}, {
+        toastErrorKey: 'errors.carrier.fetch'
+    })
+}
+
+export async function updateCarrier(id: number, payload: CarrierPayload) {
+    const api = useApi()
+    return api.patch<CarrierData>(`carriers/${id}`, payload, {
+        toastErrorKey: 'errors.carrier.update',
+        toastSuccessKey: 'success.carrier.update'
+    })
+}
+
+export async function createCarrier(payload: CarrierPayload = {}) {
+    const api = useApi()
+    return api.post<CarrierData>('carriers', payload, {
+        toastErrorKey: 'errors.carrier.create',
+        toastSuccessKey: 'success.carrier.update'
+    })
+}
--- a/frontend/services/customer.ts
+++ b/frontend/services/customer.ts
@@ -0,0 +1,43 @@
+import { useApi } from "~/composables/useApi"
+import type { CustomerData, CustomerPayload } from "~/services/dto/customer-data"
+
+export type CustomerListResponse =
+    | CustomerData[]
+    | { "hydra:member"?: CustomerData[] }
+
+export async function getCustomerList(): Promise<CustomerData[]> {
+    const api = useApi()
+    const response = await api.get<CustomerListResponse>("customers", {}, {
+        toastErrorKey: "errors.customer.list",
+    })
+
+    if (Array.isArray(response)) return response
+    if (response && typeof response === "object" && Array.isArray(response["hydra:member"])) {
+        return response["hydra:member"]
+    }
+    return []
+}
+
+export async function getCustomer(id: number): Promise<CustomerData> {
+    const api = useApi()
+    return api.get<CustomerData>(`customers/${id}`, {}, {
+        toastErrorKey: "errors.customer.fetch",
+    })
+}
+
+export async function updateCustomer(id: number, payload: Partial<CustomerPayload>): Promise<CustomerData> {
+    const api = useApi()
+    return api.patch<CustomerData>(`customers/${id}`, payload, {
+        toastErrorKey: "errors.customer.update",
+        toastSuccessKey: "success.customer.update",
+    })
+}
+
+export async function createCustomer(payload: CustomerPayload): Promise<CustomerData> {
+    const api = useApi()
+    return api.post<CustomerData>("customers", payload, {
+        toastErrorKey: "errors.customer.create",
+        toastSuccessKey: "success.customer.create",
+    })
+}
+
--- a/frontend/services/driver.ts
+++ b/frontend/services/driver.ts
@@ -0,0 +1,23 @@
+import { useApi } from '~/composables/useApi'
+import type { DriverData } from '~/services/dto/driver-data'
+
+export type DriverListResponse =
+    | DriverData[]
+    | { 'hydra:member'?: DriverData[] }
+
+export async function getDriverList(): Promise<DriverData[]> {
+    const api = useApi()
+    const response = await api.get<DriverListResponse>('drivers', {}, {
+        toastErrorKey: 'errors.driver.list'
+    })
+
+    if (Array.isArray(response)) {
+        return response
+    }
+
+    if (response && typeof response === 'object' && Array.isArray(response['hydra:member'])) {
+        return response['hydra:member']
+    }
+
+    return []
+}
--- a/frontend/services/dto/address-data.ts
+++ b/frontend/services/dto/address-data.ts
@@ -0,0 +1,20 @@
+export interface AddressData {
+    id: number
+    label: string
+    street: string
+    street2?: string | null
+    postalCode: string
+    city: string
+    countryCode: string
+    fullAddress: string
+}
+
+export interface AddressFormData {
+    id?: number | null
+    label: string
+    street: string
+    street2?: string | null
+    postalCode: string
+    city: string
+    countryCode: string
+}
--- a/frontend/services/dto/bovine-type-data.ts
+++ b/frontend/services/dto/bovine-type-data.ts
@@ -0,0 +1,15 @@
+export interface BovineTypeData{
+    id: number
+    label: string
+    code: string
+}
+
+export interface BovinFormData {
+    label: string
+    code: string
+}
+
+export type BovinPayload = {
+    label?: string | null
+    code?: string | null
+}
--- a/frontend/services/dto/building-case-data.ts
+++ b/frontend/services/dto/building-case-data.ts
@@ -0,0 +1,9 @@
+import type { BuildingCaseStatusData } from '~/services/dto/building-case-status-data'
+
+export interface BuildingCaseData {
+    id: number
+    caseNumber: number | null
+    code: string | null
+    capacity: number | null
+    statut?: BuildingCaseStatusData | null
+}
--- a/frontend/services/dto/building-case-position-data.ts
+++ b/frontend/services/dto/building-case-position-data.ts
@@ -0,0 +1,11 @@
+import type { BuildingCaseData } from '~/services/dto/building-case-data'
+
+export interface BuildingCasePositionData {
+    id: number
+    x: number | null
+    y: number | null
+    w: number | null
+    h: number | null
+    renderOrder: string | null
+    buildingCase: BuildingCaseData | null
+}
--- a/Show More
+++ b/Show More