From e57d1ac696e162c9ca00d0eb5fcebec1da56c146 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Fastr=C3=A9?= <julien.fastre@champs-libres.coop>
Date: Tue, 30 Sep 2025 13:12:06 +0000
Subject: [PATCH 1/2] Support for parent/children motives

---
 .../ChillTicketBundle/chill.api.specs.yaml    |   2 +-
 .../src/Controller/MotiveApiController.php    |   5 +-
 .../src/DataFixtures/ORM/LoadMotives.php      |  83 ++++++----
 .../ChillTicketBundle/src/Entity/Motive.php   |  88 +++++++++-
 .../src/Entity/MotiveHistory.php              |   2 +-
 .../Repository/TicketACLAwareRepository.php   |   5 +-
 .../src/Resources/public/types.ts             |  26 ++-
 .../components/ActionToolbarComponent.vue     |   4 +-
 .../Addressee/AddresseeComponent.vue          |   5 +-
 .../TicketApp/components/BannerComponent.vue  |  14 +-
 .../Comment/CommentEditorComponent.vue        |  23 ++-
 .../components/Motive/MotiveComponent.vue     |  18 +-
 .../Motive/MotiveSelectorComponent.vue        | 141 ++++++++++++----
 .../components/TicketInitFormComponent.vue    |   7 +-
 .../vuejs/TicketApp/store/modules/motive.ts   |  13 ++
 .../vuejs/TicketApp/store/modules/persons.ts  |   2 +-
 .../TicketApp/store/modules/ticket_list.ts    |   3 +-
 .../public/vuejs/TicketApp/utils/utils.ts     |  32 ++--
 .../components/TicketFilterListComponent.vue  |  10 +-
 .../TicketList/components/ToggleComponent.vue |   8 +-
 .../Normalizer/MotiveNormalizer.php           | 103 ++++++++++++
 .../Normalizer/TicketNormalizer.php           |  12 +-
 .../src/migrations/Version20250924124214.php  |  37 +++++
 .../tests/Entity/MotiveTest.php               |  63 +++++++
 .../Normalizer/MotiveNormalizerTest.php       | 154 ++++++++++++++++++
 25 files changed, 724 insertions(+), 136 deletions(-)
 create mode 100644 src/Bundle/ChillTicketBundle/src/Serializer/Normalizer/MotiveNormalizer.php
 create mode 100644 src/Bundle/ChillTicketBundle/src/migrations/Version20250924124214.php
 create mode 100644 src/Bundle/ChillTicketBundle/tests/Entity/MotiveTest.php
 create mode 100644 src/Bundle/ChillTicketBundle/tests/Serializer/Normalizer/MotiveNormalizerTest.php

diff --git a/src/Bundle/ChillTicketBundle/chill.api.specs.yaml b/src/Bundle/ChillTicketBundle/chill.api.specs.yaml
index e2eea460b..f0255fb19 100644
--- a/src/Bundle/ChillTicketBundle/chill.api.specs.yaml
+++ b/src/Bundle/ChillTicketBundle/chill.api.specs.yaml
@@ -112,7 +112,7 @@ paths:
                               - no
                 - name: byMotives
                   in: query
-                  description: the motives of the ticket
+                  description: the motives of the ticket. All the descendants of the motive are taken into account.
                   required: false
                   style: form
                   explode: false
diff --git a/src/Bundle/ChillTicketBundle/src/Controller/MotiveApiController.php b/src/Bundle/ChillTicketBundle/src/Controller/MotiveApiController.php
index d57b43e7b..1b9ce263c 100644
--- a/src/Bundle/ChillTicketBundle/src/Controller/MotiveApiController.php
+++ b/src/Bundle/ChillTicketBundle/src/Controller/MotiveApiController.php
@@ -13,6 +13,7 @@ namespace Chill\TicketBundle\Controller;
 
 use Chill\DocStoreBundle\Serializer\Normalizer\StoredObjectNormalizer;
 use Chill\MainBundle\CRUD\Controller\ApiController;
+use Chill\TicketBundle\Serializer\Normalizer\MotiveNormalizer;
 use Doctrine\ORM\QueryBuilder;
 use Symfony\Component\HttpFoundation\Request;
 
@@ -21,13 +22,13 @@ final class MotiveApiController extends ApiController
     protected function customizeQuery(string $action, Request $request, $query): void
     {
         /* @var $query QueryBuilder */
-        $query->andWhere('e.active = TRUE');
+        $query->andWhere('e.active = TRUE')->andWhere('e.parent IS NULL');
     }
 
     protected function getContextForSerialization(string $action, Request $request, string $_format, $entity): array
     {
         return match ($request->getMethod()) {
-            Request::METHOD_GET => ['groups' => ['read', StoredObjectNormalizer::DOWNLOAD_LINK_ONLY]],
+            Request::METHOD_GET => ['groups' => ['read', 'read:extended', StoredObjectNormalizer::DOWNLOAD_LINK_ONLY, MotiveNormalizer::GROUP_PARENT_TO_CHILDREN]],
             default => parent::getContextForSerialization($action, $request, $_format, $entity),
         };
     }
diff --git a/src/Bundle/ChillTicketBundle/src/DataFixtures/ORM/LoadMotives.php b/src/Bundle/ChillTicketBundle/src/DataFixtures/ORM/LoadMotives.php
index ff65ea016..044949d1e 100644
--- a/src/Bundle/ChillTicketBundle/src/DataFixtures/ORM/LoadMotives.php
+++ b/src/Bundle/ChillTicketBundle/src/DataFixtures/ORM/LoadMotives.php
@@ -13,7 +13,6 @@ namespace Chill\TicketBundle\DataFixtures\ORM;
 
 use Chill\DocStoreBundle\Entity\StoredObject;
 use Chill\DocStoreBundle\Service\StoredObjectManagerInterface;
-use Chill\TicketBundle\Entity\EmergencyStatusEnum;
 use Chill\TicketBundle\Entity\Motive;
 use Doctrine\Bundle\FixturesBundle\Fixture;
 use Doctrine\Bundle\FixturesBundle\FixtureGroupInterface;
@@ -35,6 +34,7 @@ final class LoadMotives extends Fixture implements FixtureGroupInterface
             ['label' => '☀️ De 07h à 21h', 'path' => __DIR__.'/docs/peloton_2.pdf'],
             ['label' => 'Dimanche et jours fériés', 'path' => __DIR__.'/docs/schema_1.png'],
         ];
+        $motivesByLabel = [];
 
         foreach (explode("\n", self::MOTIVES) as $row) {
             if ('' === trim($row)) {
@@ -46,50 +46,65 @@ final class LoadMotives extends Fixture implements FixtureGroupInterface
                 continue;
             }
 
-            $motive = new Motive();
-            $motive->setLabel(['fr' => trim((string) $data[0])]);
-            $motive->setMakeTicketEmergency(match ($data[1]) {
-                'true' => EmergencyStatusEnum::YES,
-                'false' => EmergencyStatusEnum::NO,
-                default => throw new \UnexpectedValueException('Unexpected value'),
-            });
+            $labels = explode(' > ', $data[0]);
+            $parent = null;
 
-            $numberOfDocs = (int) $data[2];
-            for ($i = 1; $i <= $numberOfDocs; ++$i) {
-                $doc = $docs[$i - 1];
-                $storedObject = new StoredObject();
-                $storedObject->setTitle($doc['label']);
+            while (count($labels) > 0) {
+                $label = array_shift($labels);
+                dump($labels);
+                if (isset($motivesByLabel[$label])) {
+                    $motive = $motivesByLabel[$label];
+                } else {
+                    $motive = new Motive();
+                    $motive->setLabel(['fr' => $label]);
+                    $motivesByLabel[$label] = $motive;
+                }
 
-                $content = file_get_contents($doc['path']);
-                $contentType = match (substr($doc['path'], -3, 3)) {
-                    'pdf' => 'application/pdf',
-                    'png' => 'image/png',
-                    default => throw new \UnexpectedValueException('Not supported content type here'),
-                };
-                $this->storedObjectManager->write($storedObject, $content, $contentType);
+                if (null !== $parent) {
+                    $motive->setParent($parent);
+                }
 
-                $motive->addStoredObject($storedObject);
-                $manager->persist($storedObject);
-            }
+                $manager->persist($motive);
+                $parent = $motive;
+
+                if (0 === count($labels)) {
+                    // this is the last one, we add data
+                    $numberOfDocs = (int) $data[2];
+                    for ($i = 1; $i <= $numberOfDocs; ++$i) {
+                        $doc = $docs[$i - 1];
+                        $storedObject = new StoredObject();
+                        $storedObject->setTitle($doc['label']);
+
+                        $content = file_get_contents($doc['path']);
+                        $contentType = match (substr($doc['path'], -3, 3)) {
+                            'pdf' => 'application/pdf',
+                            'png' => 'image/png',
+                            default => throw new \UnexpectedValueException('Not supported content type here'),
+                        };
+                        $this->storedObjectManager->write($storedObject, $content, $contentType);
+
+                        $motive->addStoredObject($storedObject);
+                        $manager->persist($storedObject);
+                    }
 
 
-            foreach (array_slice($data, 3) as $supplementaryComment) {
-                if ('' !== trim((string) $supplementaryComment)) {
-                    $motive->addSupplementaryComment(['label' => trim((string) $supplementaryComment)]);
+                    foreach (array_slice($data, 3) as $supplementaryComment) {
+                        if ('' !== trim((string) $supplementaryComment)) {
+                            $motive->addSupplementaryComment(['label' => trim((string) $supplementaryComment)]);
+                        }
+                    }
                 }
             }
-
-            $manager->persist($motive);
         }
         $manager->flush();
     }
 
     private const MOTIVES = <<<'CSV'
-        "Coordonnées",false,"3","Nouvelles coordonnées",
-        "Horaire de passage",false,"0",
-        "Retard de livraison",false,"0",
-        "Erreur de livraison",false,"0",
-        "Colis incomplet",false,"0",
+        "Motif administratif > Coordonnées",false,"3","Nouvelles coordonnées",
+        "Organisation > Horaire de passage",false,"0",
+        "Organisation > Livraison > Retard de livraison",false,"0",
+        "Organisation > Livraison > Erreur de livraison",false,"0",
+        "Organisation > Livraison > Colis incomplet",false,"0",
         "MATLOC",false,"0",
         "Retard DASRI",false,"1",
         "Planning d'astreintes",false,"0",
@@ -116,7 +131,7 @@ final class LoadMotives extends Fixture implements FixtureGroupInterface
         "Mauvaise adresse",false,"0",
         "Patient absent",false,"0",
         "Annulation",false,"0",
-        "Colis perdu",false,"0",
+        "Organisation > Livraison > Colis perdu",false,"0",
         "Changement de rendez-vous",false,"0",
         "Coordination interservices",false,"0",
         "Problème de substitution produits",true,"0",
diff --git a/src/Bundle/ChillTicketBundle/src/Entity/Motive.php b/src/Bundle/ChillTicketBundle/src/Entity/Motive.php
index 789d6b562..1be0fe47f 100644
--- a/src/Bundle/ChillTicketBundle/src/Entity/Motive.php
+++ b/src/Bundle/ChillTicketBundle/src/Entity/Motive.php
@@ -15,6 +15,7 @@ use Chill\DocStoreBundle\Entity\StoredObject;
 use Doctrine\Common\Collections\ArrayCollection;
 use Doctrine\Common\Collections\Collection;
 use Doctrine\Common\Collections\ReadableCollection;
+use Doctrine\Common\Collections\Selectable;
 use Doctrine\ORM\Mapping as ORM;
 use Symfony\Component\Serializer\Annotation as Serializer;
 
@@ -26,19 +27,15 @@ class Motive
     #[ORM\Id]
     #[ORM\Column(type: \Doctrine\DBAL\Types\Types::INTEGER, nullable: false)]
     #[ORM\GeneratedValue(strategy: 'AUTO')]
-    #[Serializer\Groups(['read'])]
     private ?int $id = null;
 
     #[ORM\Column(type: \Doctrine\DBAL\Types\Types::JSON, nullable: false, options: ['default' => '[]'])]
-    #[Serializer\Groups(['read'])]
     private array $label = [];
 
     #[ORM\Column(type: \Doctrine\DBAL\Types\Types::BOOLEAN, nullable: false, options: ['default' => true])]
-    #[Serializer\Groups(['read'])]
     private bool $active = true;
 
     #[ORM\Column(type: \Doctrine\DBAL\Types\Types::STRING, nullable: true, enumType: EmergencyStatusEnum::class)]
-    #[Serializer\Groups(['read'])]
     private ?EmergencyStatusEnum $makeTicketEmergency = null;
 
     /**
@@ -49,12 +46,22 @@ class Motive
     private Collection $storedObjects;
 
     #[ORM\Column(type: \Doctrine\DBAL\Types\Types::JSON, nullable: false, options: ['jsonb' => true, 'default' => '[]'])]
-    #[Serializer\Groups(['read'])]
     private array $supplementaryComments = [];
 
+    #[ORM\ManyToOne(targetEntity: Motive::class, inversedBy: 'children')]
+    private ?Motive $parent = null;
+
+
+    /**
+     * @var Collection<int, Motive>&Selectable<int, Motive>
+     */
+    #[ORM\OneToMany(targetEntity: Motive::class, mappedBy: 'parent')]
+    private Collection&Selectable $children;
+
     public function __construct()
     {
         $this->storedObjects = new ArrayCollection();
+        $this->children = new ArrayCollection();
     }
 
     public function addStoredObject(StoredObject $storedObject): void
@@ -69,7 +76,6 @@ class Motive
         $this->storedObjects->removeElement($storedObject);
     }
 
-    #[Serializer\Groups(['read'])]
     public function getStoredObjects(): ReadableCollection
     {
         return $this->storedObjects;
@@ -142,4 +148,74 @@ class Motive
             $this->supplementaryComments[$key] = $supplementaryComment;
         }
     }
+
+    public function isParent(): bool
+    {
+        return $this->children->count() > 0;
+    }
+
+    public function isChild(): bool
+    {
+        return null !== $this->parent;
+    }
+
+    public function setParent(?Motive $parent): void
+    {
+        if (null !== $parent) {
+            $parent->addChild($this);
+        } else {
+            $this->parent->removeChild($this);
+        }
+
+        $this->parent = $parent;
+    }
+
+    /**
+     * @internal use @see{setParent} instead
+     */
+    public function addChild(Motive $child): void
+    {
+        if (!$this->children->contains($child)) {
+            $this->children->add($child);
+        }
+    }
+
+    /**
+     * @internal use @see{setParent} with null as argument instead
+     */
+    public function removeChild(Motive $child): void
+    {
+        $this->children->removeElement($child);
+    }
+
+    public function getChildren(): ReadableCollection&Selectable
+    {
+        return $this->children;
+    }
+
+    public function getParent(): ?Motive
+    {
+        return $this->parent;
+    }
+
+    /**
+     * Get the descendants of the current entity.
+     *
+     * This method collects all descendant entities recursively, starting from the current entity
+     * and including all of its children and their descendants.
+     *
+     * @return ReadableCollection&Selectable A collection containing the current entity and all its descendants
+     */
+    public function getDescendants(): ReadableCollection&Selectable
+    {
+        $collection = new ArrayCollection([$this]);
+
+        foreach ($this->getChildren() as $child) {
+            foreach ($child->getDescendants() as $descendant) {
+                $collection->add($descendant);
+            }
+        }
+
+        return $collection;
+    }
 }
diff --git a/src/Bundle/ChillTicketBundle/src/Entity/MotiveHistory.php b/src/Bundle/ChillTicketBundle/src/Entity/MotiveHistory.php
index e2902aae3..e3de710be 100644
--- a/src/Bundle/ChillTicketBundle/src/Entity/MotiveHistory.php
+++ b/src/Bundle/ChillTicketBundle/src/Entity/MotiveHistory.php
@@ -42,7 +42,7 @@ class MotiveHistory implements TrackCreationInterface
     public function __construct(
         #[ORM\ManyToOne(targetEntity: Motive::class)]
         #[ORM\JoinColumn(nullable: false)]
-        #[Serializer\Groups(['read'])]
+        #[Serializer\Groups(['read', 'read:children-to-parent'])]
         private Motive $motive,
         #[ORM\ManyToOne(targetEntity: Ticket::class)]
         #[ORM\JoinColumn(nullable: false)]
diff --git a/src/Bundle/ChillTicketBundle/src/Repository/TicketACLAwareRepository.php b/src/Bundle/ChillTicketBundle/src/Repository/TicketACLAwareRepository.php
index 222199666..ad8fa1387 100644
--- a/src/Bundle/ChillTicketBundle/src/Repository/TicketACLAwareRepository.php
+++ b/src/Bundle/ChillTicketBundle/src/Repository/TicketACLAwareRepository.php
@@ -113,10 +113,11 @@ final readonly class TicketACLAwareRepository implements TicketACLAwareRepositor
         if (array_key_exists('byMotives', $params)) {
             $byMotives = $qb->expr()->orX();
             foreach ($params['byMotives'] as $motive) {
+                $motivesWithDescendants = $motive->getDescendants()->toArray();
                 $byMotives->add(
                     $qb->expr()->exists(sprintf(
                         'SELECT 1 FROM %s tp_motive_%d WHERE tp_motive_%d.ticket = t
-                    AND tp_motive_%d.motive = :motive_%d AND tp_motive_%d.endDate IS NULL
+                    AND tp_motive_%d.motive IN (:motives_%d) AND tp_motive_%d.endDate IS NULL
                     ',
                         MotiveHistory::class,
                         ++$i,
@@ -126,7 +127,7 @@ final readonly class TicketACLAwareRepository implements TicketACLAwareRepositor
                         $i,
                     ))
                 );
-                $qb->setParameter(sprintf('motive_%d', $i), $motive);
+                $qb->setParameter(sprintf('motives_%d', $i), $motivesWithDescendants);
             }
             $qb->andWhere($byMotives);
         }
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/types.ts b/src/Bundle/ChillTicketBundle/src/Resources/public/types.ts
index 4c31f2341..1c914570e 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/types.ts
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/types.ts
@@ -8,14 +8,32 @@ import { Person } from "ChillPersonAssets/types";
 import { Thirdparty } from "../../../../ChillThirdPartyBundle/Resources/public/types";
 import { StoredObject } from "ChillDocStoreAssets/types";
 
-export interface Motive {
+interface MotiveBase {
   type: "ticket_motive";
   id: number;
   active: boolean;
   label: TranslatableString;
+}
+
+/**
+ * Represent a motive with basic information and parent motive.
+ *
+ * Match the "read" and "read:children-to-parent" serializer groups.
+ */
+export interface MotiveWithParent extends MotiveBase {
+  parent: MotiveWithParent | null;
+}
+
+/**
+ * Represents a motive for a ticket, including details like emergency status, stored objects, and supplementary comments.
+ *
+ * Match the "read:extended" serializer group in MotiveNormalizer.
+ */
+export interface Motive extends MotiveBase {
   makeTicketEmergency: TicketEmergencyState;
   storedObjects: StoredObject[];
   supplementaryComments: { label: string }[];
+  children: Motive[];
 }
 
 export type TicketState = "open" | "closed" | "close";
@@ -45,7 +63,7 @@ export interface MotiveHistory {
   id: number;
   startDate: null;
   endDate: null | DateTime;
-  motive: Motive;
+  motive: MotiveWithParent;
   createdBy: User | null;
   createdAt: DateTime | null;
 }
@@ -140,7 +158,7 @@ interface BaseTicket<
   createdAt: DateTime | null;
   currentAddressees: UserGroupOrUser[];
   currentPersons: Person[];
-  currentMotive: null | Motive;
+  currentMotive: MotiveWithParent | null;
   currentState: TicketState | null;
   emergency: TicketEmergencyState | null;
   caller: Person | Thirdparty | null;
@@ -185,7 +203,7 @@ export interface TicketFilterParams {
 
 export interface TicketInitForm {
   content: string;
-  motive?: Motive;
+  motive?: MotiveWithParent | null;
   addressees: UserGroupOrUser[];
   persons: Person[];
   caller: Person | null;
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/ActionToolbarComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/ActionToolbarComponent.vue
index 6c437f0b7..69569f304 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/ActionToolbarComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/ActionToolbarComponent.vue
@@ -179,7 +179,7 @@ import {
   UserGroup,
   UserGroupOrUser,
 } from "../../../../../../../ChillMainBundle/Resources/public/types";
-import { Comment, Motive, Ticket } from "../../../types";
+import { Comment, Motive, MotiveWithParent, Ticket } from "../../../types";
 import { Person } from "ChillPersonAssets/types";
 
 const store = useStore();
@@ -252,7 +252,7 @@ const returnPath = computed((): string => {
   return returnPath;
 });
 
-const motive = ref(ticket.value.currentMotive as Motive);
+const motive = ref(ticket.value.currentMotive as MotiveWithParent | null);
 const content = ref("" as Comment["content"]);
 const addressees = ref(ticket.value.currentAddressees as UserGroupOrUser[]);
 const persons = ref(ticket.value.currentPersons as Person[]);
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/Addressee/AddresseeComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/Addressee/AddresseeComponent.vue
index 4b7447132..edd9503c9 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/Addressee/AddresseeComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/Addressee/AddresseeComponent.vue
@@ -7,7 +7,7 @@
           class="badge-user-group"
           :style="`background-color: ${addressee.backgroundColor}; color: ${addressee.foregroundColor};`"
         >
-          {{ addressee.label.fr }}
+          {{ localizeString(addressee.label) }}
         </span>
         <span v-else-if="addressee.type === 'user'" class="badge-user">
           <user-render-box-badge :user="addressee"
@@ -24,6 +24,9 @@ import UserRenderBoxBadge from "ChillMainAssets/vuejs/_components/Entity/UserRen
 // Types
 import { UserGroupOrUser } from "../../../../../../../../ChillMainBundle/Resources/public/types";
 
+// Utils
+import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";
+
 defineProps<{ addressees: UserGroupOrUser[] }>();
 </script>
 
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/BannerComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/BannerComponent.vue
index c874142b2..0b0c5131a 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/BannerComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/BannerComponent.vue
@@ -6,7 +6,9 @@
           <h1>
             {{ getTicketTitle(ticket) }}
             <peloton-component
-              :stored-objects="ticket.currentMotive?.storedObjects ?? null"
+              :stored-objects="
+                currentMotive ? currentMotive.storedObjects : null
+              "
             />
           </h1>
 
@@ -91,7 +93,7 @@
 </style>
 
 <script setup lang="ts">
-import { computed, ref } from "vue";
+import { computed, ComputedRef, ref } from "vue";
 import { useToast } from "vue-toast-notification";
 
 // Components
@@ -102,7 +104,7 @@ import StateToggleComponent from "./State/StateToggleComponent.vue";
 import PersonComponent from "./Person/PersonComponent.vue";
 
 // Types
-import { Ticket } from "../../../types";
+import { Motive, Ticket } from "../../../types";
 import { Person } from "ChillPersonAssets/types";
 
 import {
@@ -127,7 +129,7 @@ import { useStore } from "vuex";
 // Utils
 import { getTicketTitle } from "../utils/utils";
 
-defineProps<{
+const props = defineProps<{
   ticket: Ticket;
 }>();
 
@@ -135,6 +137,10 @@ const store = useStore();
 const toast = useToast();
 const today = ref(new Date());
 
+const currentMotive: ComputedRef<Motive | null> = computed(() =>
+  store.getters.getMotiveById(props.ticket.currentMotive?.id),
+);
+
 setInterval(() => {
   today.value = new Date();
 }, 5000);
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/Comment/CommentEditorComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/Comment/CommentEditorComponent.vue
index a3d7f84f3..d34e2ddd0 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/Comment/CommentEditorComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/Comment/CommentEditorComponent.vue
@@ -26,22 +26,24 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, watch, computed } from "vue";
+import { reactive, ref, watch, computed, ComputedRef } from "vue";
 
 // Components
 import CommentEditor from "ChillMainAssets/vuejs/_components/CommentEditor/CommentEditor.vue";
 
 // Types
-import { Motive } from "../../../../types";
+import { Motive, MotiveWithParent } from "../../../../types";
 
 // Utils
 import { StoredObject } from "ChillDocStoreAssets/types";
+import { useStore } from "vuex";
 
 const props = defineProps<{
   modelValue?: string;
-  motive?: Motive;
+  motive?: MotiveWithParent | null;
 }>();
 
+const store = useStore();
 const supplementaryCommentsInput = reactive<string[]>([]);
 
 const emit = defineEmits<{
@@ -50,11 +52,14 @@ const emit = defineEmits<{
 }>();
 
 const content = ref(props.modelValue);
+const motive: ComputedRef<Motive | null> = computed(() =>
+  store.getters.getMotiveById(props.motive?.id),
+);
 
-const aggregateSupplementaryComments = computed(() => {
+function aggregateSupplementaryComments() {
   let supplementaryText = " \n\n ";
-  if (props.motive && props.motive.supplementaryComments) {
-    props.motive.supplementaryComments.forEach(
+  if (props.motive && motive.value && motive.value.supplementaryComments) {
+    motive.value.supplementaryComments.forEach(
       (item: { label: string }, index: number) => {
         if (supplementaryCommentsInput[index]) {
           supplementaryText +=
@@ -65,18 +70,18 @@ const aggregateSupplementaryComments = computed(() => {
     );
   }
   return (content.value || "") + supplementaryText;
-});
+}
 
 watch(
   supplementaryCommentsInput,
   () => {
-    emit("update:modelValue", aggregateSupplementaryComments.value);
+    emit("update:modelValue", aggregateSupplementaryComments());
   },
   { deep: true },
 );
 
 watch(content, () => {
-  emit("update:modelValue", aggregateSupplementaryComments.value);
+  emit("update:modelValue", aggregateSupplementaryComments());
 });
 </script>
 
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/Motive/MotiveComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/Motive/MotiveComponent.vue
index 58edb7c19..6ea2c67b2 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/Motive/MotiveComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/Motive/MotiveComponent.vue
@@ -1,24 +1,32 @@
 <template>
   <div class="col-12 fw-bolder">
-    {{ localizeTranslatableString(motiveHistory.motive.label) }}
+    {{ motiveLabelRecursive(props.motiveHistory.motive) }}
     <peloton-component
-      :stored-objects="motiveHistory.motive.storedObjects ?? null"
+      :stored-objects="motive ? motive.storedObjects : null"
       pelotonBtnClass="float-end"
     />
   </div>
 </template>
 
 <script lang="ts" setup>
+import { useStore } from "vuex";
 // Types
-import { MotiveHistory } from "../../../../types";
+import {Motive, MotiveHistory, MotiveWithParent} from "../../../../types";
 
 //Utils
-import { localizeTranslatableString } from "../../utils/utils";
+import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";
 
 //Components
 import PelotonComponent from "../PelotonComponent.vue";
+import { computed, ComputedRef } from "vue";
+import {motiveLabelRecursive} from "../../utils/utils";
 
-defineProps<{ motiveHistory: MotiveHistory }>();
+const props = defineProps<{ motiveHistory: MotiveHistory }>();
+
+const store = useStore();
+const motive: ComputedRef<Motive | null> = computed(() =>
+  store.getters.getMotiveById(props.motiveHistory.motive.id),
+);
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/Motive/MotiveSelectorComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/Motive/MotiveSelectorComponent.vue
index b1f6315d1..de094743a 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/Motive/MotiveSelectorComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/Motive/MotiveSelectorComponent.vue
@@ -5,22 +5,50 @@
         <vue-multiselect
           name="selectMotive"
           id="selectMotive"
-          label="label"
-          :custom-label="customLabel"
+          label="displayLabel"
+          :custom-label="(value: Motive) => localizeString(value.label)"
           track-by="id"
           :open-direction="openDirection"
           :multiple="false"
           :searchable="true"
           :placeholder="trans(CHILL_TICKET_TICKET_SET_MOTIVE_LABEL)"
-          :select-label="trans(MULTISELECT_SELECT_LABEL)"
-          :deselect-label="trans(MULTISELECT_DESELECT_LABEL)"
-          :selected-label="trans(MULTISELECT_SELECTED_LABEL)"
-          :options="motives"
+          :options="flattenedMotives"
           v-model="motive"
           class="form-control"
-        />
+          @remove="(value: Motive) => $emit('remove', value)"
+        >
+          <template
+            #option="{
+              option,
+            }: {
+              option: Motive & {
+                isChild?: boolean;
+                isParent?: boolean;
+                level?: number;
+                breadcrumb: string[];
+              };
+            }"
+          >
+            <span
+              :data-select="trans(MULTISELECT_SELECT_LABEL)"
+              :data-selected="trans(MULTISELECT_SELECTED_LABEL)"
+              :data-deselect="trans(MULTISELECT_DESELECT_LABEL)"
+            >
+              <span v-for="(crumb, idx) in option.breadcrumb" :key="idx">
+                <template v-if="idx < option.breadcrumb.length - 1">
+                  <i>{{ crumb }}</i> &gt;
+                </template>
+                <template v-else>
+                  {{ crumb }}
+                </template>
+              </span>
+            </span>
+          </template>
+        </vue-multiselect>
         <div class="input-group-append">
-          <peloton-component :stored-objects="motive?.storedObjects ?? null" />
+          <peloton-component
+            :stored-objects="motive ? motive.storedObjects : null"
+          />
         </div>
       </div>
     </div>
@@ -28,11 +56,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { computed } from "vue";
 import VueMultiselect from "vue-multiselect";
 
 // Types
-import { Motive } from "../../../../types";
+import { Motive, MotiveWithParent } from "../../../../types";
 
 // Translations
 import {
@@ -46,10 +74,14 @@ import {
 // Component
 import PelotonComponent from "../PelotonComponent.vue";
 
+// Utils
+import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";
+import { useStore } from "vuex";
+
 const props = defineProps({
   modelValue: {
-    type: Object as () => Motive | undefined,
-    default: undefined,
+    type: Object as () => MotiveWithParent | Motive | null,
+    default: null,
   },
   motives: {
     type: Array as () => Motive[],
@@ -59,34 +91,73 @@ const props = defineProps({
     type: String,
     default: "bottom",
   },
-});
-
-const emit =
-  defineEmits<(e: "update:modelValue", value: Motive | undefined) => void>();
-
-const motive = ref(props.modelValue);
-
-watch(motive, (val) => {
-  emit("update:modelValue", val);
-});
-
-watch(
-  () => props.modelValue,
-  (val) => {
-    motive.value = val;
+  allowParentSelection: {
+    type: Boolean,
+    default: false,
   },
-);
+});
+const store = useStore();
 
-function customLabel(motive: Motive) {
-  return motive?.label?.fr;
-}
+const emit = defineEmits<{
+  (e: "update:modelValue", value: Motive | null): void;
+  (e: "remove", value: Motive): void;
+}>();
+
+const motive = computed<Motive | null>({
+  get() {
+    return store.getters.getMotiveById(props.modelValue?.id);
+  },
+  set(value: Motive | null) {
+    emit("update:modelValue", value);
+  },
+});
+
+const flattenedMotives = computed(() => {
+  const result: (Motive & {
+    isChild?: boolean;
+    isParent?: boolean;
+    level?: number;
+    displayLabel: string;
+    breadcrumb: string[];
+  })[] = [];
+
+  const processMotiveRecursively = (
+    motive: Motive,
+    isChild = false,
+    level = 0,
+    parentBreadcrumb: string[] = [],
+  ) => {
+    const hasChildren = motive.children && motive.children.length > 0;
+    const displayLabel = localizeString(motive.label);
+    const breadcrumb = [...parentBreadcrumb, displayLabel];
+
+    if (props.allowParentSelection || !hasChildren) {
+      result.push({
+        ...motive,
+        isChild,
+        isParent: hasChildren,
+        level,
+        breadcrumb,
+        displayLabel,
+      });
+    }
+
+    if (hasChildren) {
+      motive.children.forEach((childMotive) => {
+        processMotiveRecursively(childMotive, true, level + 1, breadcrumb);
+      });
+    }
+  };
+
+  props.motives.forEach((parentMotive) => {
+    processMotiveRecursively(parentMotive, false, 0, []);
+  });
+
+  return result;
+});
 </script>
 
 <style lang="scss" scoped>
-#selectMotive {
-  margin-bottom: 1.5em;
-}
-// Supprime le padding de .form-control pour ce composant
 .form-control {
   padding: 0 !important;
 }
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketInitFormComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketInitFormComponent.vue
index 9d7e6dee1..75fcb9169 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketInitFormComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketInitFormComponent.vue
@@ -57,7 +57,7 @@
           }}</label>
           <comment-editor-component
             v-model="ticketForm.content"
-            :motive="ticketForm.motive"
+            :motive="ticketForm.motive ? ticketForm.motive : null"
           />
         </div>
         <div class="mb-3">
@@ -105,6 +105,7 @@ import ToggleComponent from "../../TicketList/components/ToggleComponent.vue";
 // Types
 import {
   Motive,
+  MotiveWithParent,
   Ticket,
   TicketEmergencyState,
   TicketInitForm,
@@ -142,7 +143,7 @@ const store = useStore();
 const ticketForm = reactive({
   content: "",
   addressees: props.ticket.currentAddressees as UserGroupOrUser[],
-  motive: props.ticket.currentMotive as Motive | null,
+  motive: props.ticket.currentMotive as MotiveWithParent | null,
   persons: props.ticket.currentPersons as Person[],
   caller: props.ticket.caller as Person | null,
   emergency: props.ticket.emergency as TicketEmergencyState,
@@ -174,7 +175,7 @@ function submitForm() {
 }
 function resetForm() {
   ticketForm.content = "";
-  ticketForm.motive = undefined;
+  ticketForm.motive = null;
   ticketForm.persons = [];
   ticketForm.caller = null;
   ticketForm.emergency = props.ticket.emergency as TicketEmergencyState;
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/motive.ts b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/motive.ts
index 9f7db5509..355613fba 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/motive.ts
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/motive.ts
@@ -21,6 +21,19 @@ export const moduleMotive: Module<State, RootState> = {
     getMotives(state) {
       return state.motives;
     },
+    getMotiveById: (state) => (motiveId: number) => {
+      const findInChildren = (motives: Motive[]): Motive | null => {
+        for (const motive of motives) {
+          if (motive.id === motiveId) return motive;
+          const found = motive.children?.length
+            ? findInChildren(motive.children)
+            : null;
+          if (found) return found;
+        }
+        return null;
+      };
+      return findInChildren(state.motives);
+    },
   },
   mutations: {
     setMotives(state, motives) {
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/persons.ts b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/persons.ts
index 84c92051d..dcdad685b 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/persons.ts
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/persons.ts
@@ -3,7 +3,7 @@ import { Person } from "../../../../../../../../ChillPersonBundle/Resources/publ
 import { ApiException } from "../../../../../../../../ChillMainBundle/Resources/public/types";
 import { Module } from "vuex";
 import { RootState } from "..";
-import { Ticket } from "../../../../types";
+import { Ticket } from ".././../../../types";
 import { Thirdparty } from "src/Bundle/ChillThirdPartyBundle/Resources/public/types";
 
 export interface State {
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/ticket_list.ts b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/ticket_list.ts
index af60123a8..dfaa1a9a3 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/ticket_list.ts
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/ticket_list.ts
@@ -1,6 +1,5 @@
 import { Module } from "vuex";
 import { RootState } from "..";
-
 import { TicketFilterParams, TicketSimple } from "../../../../types";
 import {
   makeFetch,
@@ -76,7 +75,7 @@ export const moduleTicketList: Module<State, RootState> = {
           const filteredParams = Object.fromEntries(
             Object.entries(ticketFilterParams).filter(
               ([, value]) =>
-                value !== undefined &&
+                value !== null &&
                 value !== null &&
                 (value === true ||
                   (typeof value === "number" && !isNaN(value)) ||
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/utils/utils.ts b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/utils/utils.ts
index 342df70a6..34a2ad09d 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/utils/utils.ts
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/utils/utils.ts
@@ -8,7 +8,8 @@ import {
   CHILL_TICKET_TICKET_BANNER_AND,
   CHILL_TICKET_TICKET_BANNER_NO_MOTIVE,
 } from "translator";
-import { Ticket, TicketSimple } from "../../../types";
+import {MotiveWithParent, Ticket, TicketSimple} from "../../../types";
+import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";
 
 /**
  * Calcule et formate le temps écoulé depuis une date de création
@@ -65,17 +66,6 @@ export function getSinceCreated(createdAt: string, currentTime: Date): string {
   return parts[0];
 }
 
-export function localizeTranslatableString(
-  translatableString: Record<string, string> | string,
-): string {
-  // This would be implemented based on your localization logic
-  if (typeof translatableString === "string") {
-    return translatableString;
-  }
-  // Assuming it's an object with locale keys
-  return translatableString?.fr || translatableString?.en || "Unknown";
-}
-
 export function formatDateTime(
   dateTime: string,
   dateStyle: string,
@@ -88,7 +78,23 @@ export function formatDateTime(
 }
 export function getTicketTitle(ticket: Ticket | TicketSimple): string {
   if (ticket.currentMotive) {
-    return `#${ticket.id} ${localizeTranslatableString(ticket.currentMotive.label)}`;
+    return `#${ticket.id} ${localizeString(ticket.currentMotive.label)}`;
   }
   return `#${ticket.id} ${trans(CHILL_TICKET_TICKET_BANNER_NO_MOTIVE)}`;
 }
+
+export function motiveLabelRecursive(motive: MotiveWithParent|null): string  {
+  console.log('test', motive);
+  if (null === motive) {
+    return "";
+  }
+
+  const str = [];
+  let m: MotiveWithParent|null = motive;
+  do {
+    str.push(localizeString(m.label));
+    m = m.parent;
+  } while (m !== null);
+
+  return str.reverse().join(" > ");
+}
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketList/components/TicketFilterListComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketList/components/TicketFilterListComponent.vue
index e9e0a9b27..510ffe3a2 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketList/components/TicketFilterListComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketList/components/TicketFilterListComponent.vue
@@ -57,6 +57,8 @@
               <motive-selector
                 v-model="selectedMotive"
                 :motives="availableMotives"
+                :allow-parent-selection="true"
+                @remove="(motive) => removeMotive(motive)"
                 id="motiveSelector"
               />
 
@@ -299,14 +301,13 @@ const selectedAddressees = ref<UserGroupOrUser[]>([]);
 const selectedCreator = ref<User[]>([]);
 
 // Sélection des motifs
-const selectedMotive = ref<Motive | undefined>();
+const selectedMotive = ref<Motive | null>();
 const selectedMotives = ref<Motive[]>([]);
 
 // Watchers pour les sélecteurs
 watch(selectedMotive, (newMotive) => {
   if (newMotive && !selectedMotives.value.find((m) => m.id === newMotive.id)) {
     selectedMotives.value.push(newMotive);
-    selectedMotive.value = undefined; // Reset pour permettre une nouvelle sélection
   }
 });
 
@@ -384,6 +385,9 @@ const removeMotive = (motiveToRemove: Motive): void => {
   if (index !== -1) {
     selectedMotives.value.splice(index, 1);
   }
+  if (selectedMotive.value && motiveToRemove.id == selectedMotive.value.id) {
+    selectedMotive.value = null;
+  }
 };
 
 const applyFilters = (): void => {
@@ -456,7 +460,7 @@ const resetFilters = (): void => {
   selectedCreator.value = [];
   selectedAddressees.value = [];
   selectedMotives.value = [];
-  selectedMotive.value = undefined;
+  selectedMotive.value = null;
   isClosedToggled.value = false;
   isEmergencyToggled.value = false;
   applyFilters();
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketList/components/ToggleComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketList/components/ToggleComponent.vue
index b761a8d05..65c3b1707 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketList/components/ToggleComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketList/components/ToggleComponent.vue
@@ -17,11 +17,7 @@
           : classColor?.off || 'bg-danger',
       ]"
       :style="{
-        backgroundColor: classColor
-          ? undefined
-          : !modelValue
-            ? colorOff
-            : colorOn,
+        backgroundColor: classColor ? '' : !modelValue ? colorOff : colorOn,
         height: '28px',
         width: toggleWidth + 'px',
       }"
@@ -72,7 +68,7 @@ const props = withDefaults(defineProps<Props>(), {
   onLabel: "ON",
   offLabel: "OFF",
   disabled: false,
-  id: undefined,
+  id: "",
   colorOn: "#4caf50",
   colorOff: "#ccc",
   classColor: () => ({
diff --git a/src/Bundle/ChillTicketBundle/src/Serializer/Normalizer/MotiveNormalizer.php b/src/Bundle/ChillTicketBundle/src/Serializer/Normalizer/MotiveNormalizer.php
new file mode 100644
index 000000000..a9b33483b
--- /dev/null
+++ b/src/Bundle/ChillTicketBundle/src/Serializer/Normalizer/MotiveNormalizer.php
@@ -0,0 +1,103 @@
+<?php
+
+declare(strict_types=1);
+
+/*
+ * Chill is a software for social workers
+ *
+ * For the full copyright and license information, please view
+ * the LICENSE file that was distributed with this source code.
+ */
+
+namespace Chill\TicketBundle\Serializer\Normalizer;
+
+use Chill\TicketBundle\Entity\Motive;
+use Symfony\Component\Serializer\Exception\UnexpectedValueException;
+use Symfony\Component\Serializer\Normalizer\AbstractNormalizer;
+use Symfony\Component\Serializer\Normalizer\NormalizerAwareInterface;
+use Symfony\Component\Serializer\Normalizer\NormalizerAwareTrait;
+use Symfony\Component\Serializer\Normalizer\NormalizerInterface;
+
+/**
+ * Normalizes a Motive object into an array format, supporting different serialization groups
+ * to customize the output depending on the context.
+ *
+ * There are several serialization groups available:
+ * - 'read': Basic information about the motive.
+ * - 'read:extended': Includes additional details like stored objects and supplementary comments.
+ * - 'read:parent-to-children': Normalizes children recursively without exposing parent to avoid cycles.
+ * - 'read:children-to-parent': Normalizes parent recursively without exposing children to avoid cycles.
+ */
+final class MotiveNormalizer implements NormalizerInterface, NormalizerAwareInterface
+{
+    use NormalizerAwareTrait;
+
+    public const GROUP_PARENT_TO_CHILDREN = 'read:parent-to-children';
+    public const GROUP_CHILDREN_TO_PARENT = 'read:children-to-parent';
+
+    public function normalize($object, ?string $format = null, array $context = []): array
+    {
+        if (!$object instanceof Motive) {
+            throw new UnexpectedValueException('Expected instance of '.Motive::class);
+        }
+
+        $groups = $context[AbstractNormalizer::GROUPS] ?? [];
+        if (is_string($groups)) {
+            $groups = [$groups];
+        }
+
+        $data = [];
+
+        if (in_array('read', $groups, true) || in_array('read:extended', $groups, true)) {
+            // Build base representation
+            $data = [
+                'type' => 'ticket_motive',
+                'id' => $object->getId(),
+                'label' => $object->getLabel(),
+                'active' => $object->isActive(),
+            ];
+        }
+
+        if (in_array('read:extended', $groups, true)) {
+            $data['makeTicketEmergency'] = $object->getMakeTicketEmergency();
+            $data['supplementaryComments'] = $object->getSupplementaryComments();
+            // Normalize stored objects (delegated to their own normalizer when present)
+            $storedObjects = [];
+            foreach ($object->getStoredObjects() as $storedObject) {
+                $storedObjects[] = $this->normalizer->normalize($storedObject, $format, $context);
+            }
+            $data['storedObjects'] = $storedObjects;
+
+        }
+
+        if (in_array(self::GROUP_PARENT_TO_CHILDREN, $groups, true)) {
+            // Normalize children recursively (but we do not expose parent to avoid cycles)
+            $children = [];
+            foreach ($object->getChildren() as $child) {
+                $children[] = $this->normalizer->normalize($child, $format, $context);
+            }
+            $data['children'] = $children;
+        } elseif (in_array(self::GROUP_CHILDREN_TO_PARENT, $groups, true)) {
+            $data['parent'] = $this->normalizer->normalize($object->getParent(), $format, $context);
+        }
+
+        return $data;
+    }
+
+    public function supportsNormalization($data, ?string $format = null, array $context = []): bool
+    {
+        return $data instanceof Motive;
+    }
+
+    /**
+     * Optimization hint for the Serializer (available since Symfony 5.3+).
+     *
+     * @return array<class-string, bool>
+     */
+    public function getSupportedTypes(?string $format): array
+    {
+        return [
+            Motive::class => true,
+        ];
+    }
+}
diff --git a/src/Bundle/ChillTicketBundle/src/Serializer/Normalizer/TicketNormalizer.php b/src/Bundle/ChillTicketBundle/src/Serializer/Normalizer/TicketNormalizer.php
index ef02ce5eb..30b057f21 100644
--- a/src/Bundle/ChillTicketBundle/src/Serializer/Normalizer/TicketNormalizer.php
+++ b/src/Bundle/ChillTicketBundle/src/Serializer/Normalizer/TicketNormalizer.php
@@ -51,7 +51,7 @@ final class TicketNormalizer implements NormalizerInterface, NormalizerAwareInte
             ]),
             'currentAddressees' => $this->normalizer->normalize($object->getCurrentAddressee(), $format, ['groups' => 'read']),
             'currentInputs' => $this->normalizer->normalize($object->getCurrentInputs(), $format, ['groups' => 'read']),
-            'currentMotive' => $this->normalizer->normalize($object->getMotive(), $format, ['groups' => 'read']),
+            'currentMotive' => $this->normalizer->normalize($object->getMotive(), $format, ['groups' => ['read', MotiveNormalizer::GROUP_CHILDREN_TO_PARENT]]),
             'currentState' => $object->getState()?->value ?? 'open',
             'emergency' => $object->getEmergencyStatus()?->value ?? 'no',
             'caller' => $this->normalizer->normalize($object->getCaller(), $format, ['groups' => 'read']),
@@ -167,12 +167,20 @@ final class TicketNormalizer implements NormalizerInterface, NormalizerAwareInte
                 'event_type' => $data['event_type'],
                 'at' => $this->normalizer->normalize($data['at'], $format, $context),
                 'by' => $this->normalizer->normalize($data['by'], $format, $context),
-                'data' => $this->normalizer->normalize($data['data'], $format, $context),
+                'data' => $this->normalizer->normalize($data['data'], $format, $this->contextByEventType($data['event_type'], $context)),
             ],
             $events
         );
     }
 
+    private function contextByEventType(string $eventType, array $context): array
+    {
+        return match($eventType) {
+            'set_motive' => array_merge($context, ['groups' => ['read', MotiveNormalizer::GROUP_CHILDREN_TO_PARENT]]),
+            default => $context,
+        };
+    }
+
     private function addresseesStates(Ticket $ticket): array
     {
         /** @var array{string, array{added: list<AddresseeHistory>, removed: list<AddresseeHistory>}} $changes */
diff --git a/src/Bundle/ChillTicketBundle/src/migrations/Version20250924124214.php b/src/Bundle/ChillTicketBundle/src/migrations/Version20250924124214.php
new file mode 100644
index 000000000..0af41c592
--- /dev/null
+++ b/src/Bundle/ChillTicketBundle/src/migrations/Version20250924124214.php
@@ -0,0 +1,37 @@
+<?php
+
+declare(strict_types=1);
+
+/*
+ * Chill is a software for social workers
+ *
+ * For the full copyright and license information, please view
+ * the LICENSE file that was distributed with this source code.
+ */
+
+namespace Chill\Migrations\Ticket;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+final class Version20250924124214 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return 'Add parent to motive';
+    }
+
+    public function up(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE chill_ticket.motive ADD parent_id INT DEFAULT NULL');
+        $this->addSql('ALTER TABLE chill_ticket.motive ADD CONSTRAINT FK_DE298BF8727ACA70 FOREIGN KEY (parent_id) REFERENCES chill_ticket.motive (id) NOT DEFERRABLE INITIALLY IMMEDIATE');
+        $this->addSql('CREATE INDEX IDX_DE298BF8727ACA70 ON chill_ticket.motive (parent_id)');
+    }
+
+    public function down(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE chill_ticket.motive DROP CONSTRAINT FK_DE298BF8727ACA70');
+        $this->addSql('DROP INDEX chill_ticket.IDX_DE298BF8727ACA70');
+        $this->addSql('ALTER TABLE chill_ticket.motive DROP parent_id');
+    }
+}
diff --git a/src/Bundle/ChillTicketBundle/tests/Entity/MotiveTest.php b/src/Bundle/ChillTicketBundle/tests/Entity/MotiveTest.php
new file mode 100644
index 000000000..c9bba7f6f
--- /dev/null
+++ b/src/Bundle/ChillTicketBundle/tests/Entity/MotiveTest.php
@@ -0,0 +1,63 @@
+<?php
+
+declare(strict_types=1);
+
+/*
+ * Chill is a software for social workers
+ *
+ * For the full copyright and license information, please view
+ * the LICENSE file that was distributed with this source code.
+ */
+
+namespace Chill\TicketBundle\Tests\Entity;
+
+use Chill\TicketBundle\Entity\Motive;
+use PHPUnit\Framework\TestCase;
+
+/**
+ * @internal
+ *
+ * @covers \Chill\TicketBundle\Entity\Motive::getWithDescendants
+ */
+final class MotiveTest extends TestCase
+{
+    public function testGetDescendantsOnLeafReturnsSelfOnly(): void
+    {
+        $leaf = new Motive();
+        $leaf->setLabel(['fr' => 'Feuille']);
+
+        $collection = $leaf->getDescendants();
+
+        self::assertCount(1, $collection);
+        self::assertSame($leaf, $collection->first());
+        self::assertContains($leaf, $collection->toArray());
+    }
+
+    public function testGetWithDescendantsReturnsSelfAndAllDescendants(): void
+    {
+        $parent = new Motive();
+        $parent->setLabel(['fr' => 'Parent']);
+
+        $childA = new Motive();
+        $childA->setLabel(['fr' => 'Enfant A']);
+        $childA->setParent($parent);
+
+        $childB = new Motive();
+        $childB->setLabel(['fr' => 'Enfant B']);
+        $childB->setParent($parent);
+
+        $grandChildA1 = new Motive();
+        $grandChildA1->setLabel(['fr' => 'Petit-enfant A1']);
+        $grandChildA1->setParent($childA);
+
+        $descendants = $parent->getDescendants();
+        $asArray = $descendants->toArray();
+
+        // It should contain the parent itself, both children and the grand child
+        self::assertCount(4, $descendants, 'Expected parent + 2 children + 1 grandchild');
+        self::assertContains($parent, $asArray);
+        self::assertContains($childA, $asArray);
+        self::assertContains($childB, $asArray);
+        self::assertContains($grandChildA1, $asArray);
+    }
+}
diff --git a/src/Bundle/ChillTicketBundle/tests/Serializer/Normalizer/MotiveNormalizerTest.php b/src/Bundle/ChillTicketBundle/tests/Serializer/Normalizer/MotiveNormalizerTest.php
new file mode 100644
index 000000000..1d9ecd10a
--- /dev/null
+++ b/src/Bundle/ChillTicketBundle/tests/Serializer/Normalizer/MotiveNormalizerTest.php
@@ -0,0 +1,154 @@
+<?php
+
+declare(strict_types=1);
+
+/*
+ * Chill is a software for social workers
+ *
+ * For the full copyright and license information, please view
+ * the LICENSE file that was distributed with this source code.
+ */
+
+namespace Chill\TicketBundle\Tests\Serializer\Normalizer;
+
+use Chill\DocStoreBundle\Entity\StoredObject;
+use Chill\TicketBundle\Entity\EmergencyStatusEnum;
+use Chill\TicketBundle\Entity\Motive;
+use Chill\TicketBundle\Serializer\Normalizer\MotiveNormalizer;
+use PHPUnit\Framework\TestCase;
+use Symfony\Component\Serializer\Normalizer\NormalizerInterface;
+
+/**
+ * @internal
+ *
+ * @covers \Chill\TicketBundle\Serializer\Normalizer\MotiveNormalizer
+ */
+final class MotiveNormalizerTest extends TestCase
+{
+    public function testNormalizeReadBasic(): void
+    {
+        $motive = new Motive();
+        $motive->setLabel(['fr' => 'Logement', 'en' => 'Housing']);
+        // active is true by default
+
+        $normalizer = new MotiveNormalizer();
+        $normalizer->setNormalizer($this->buildDummyNormalizer());
+
+        $actual = $normalizer->normalize($motive, 'json', ['groups' => 'read']);
+
+        self::assertSame('ticket_motive', $actual['type']);
+        self::assertNull($actual['id']);
+        self::assertSame(['fr' => 'Logement', 'en' => 'Housing'], $actual['label']);
+        self::assertTrue($actual['active']);
+        // no extended fields here
+        self::assertArrayNotHasKey('makeTicketEmergency', $actual);
+        self::assertArrayNotHasKey('supplementaryComments', $actual);
+        self::assertArrayNotHasKey('storedObjects', $actual);
+        self::assertArrayNotHasKey('children', $actual);
+    }
+
+    public function testNormalizeExtended(): void
+    {
+        $motive = new Motive();
+        $motive->setLabel(['fr' => 'Financier']);
+        $motive->setMakeTicketEmergency(EmergencyStatusEnum::YES);
+        $motive->addSupplementaryComment(['label' => 'Justifier le revenu']);
+        $motive->addStoredObject(new StoredObject('pending'));
+
+        $normalizer = new MotiveNormalizer();
+        $normalizer->setNormalizer($this->buildDummyNormalizer());
+
+        $actual = $normalizer->normalize($motive, 'json', ['groups' => ['read', 'read:extended']]);
+
+        self::assertSame('ticket_motive', $actual['type']);
+        self::assertSame(['fr' => 'Financier'], $actual['label']);
+        self::assertSame(EmergencyStatusEnum::YES, $actual['makeTicketEmergency']);
+        self::assertSame([
+            ['label' => 'Justifier le revenu'],
+        ], $actual['supplementaryComments']);
+        self::assertSame([
+            ['stored_object'],
+        ], $actual['storedObjects']);
+    }
+
+    public function testNormalizeParentToChildren(): void
+    {
+        $parent = new Motive();
+        $parent->setLabel(['fr' => 'Parent']);
+        $child1 = new Motive();
+        $child1->setLabel(['fr' => 'Enfant 1']);
+        $child2 = new Motive();
+        $child2->setLabel(['fr' => 'Enfant 2']);
+
+        // build relation
+        $child1->setParent($parent);
+        $child2->setParent($parent);
+
+        $normalizer = new MotiveNormalizer();
+        $normalizer->setNormalizer($this->buildDummyNormalizer());
+
+        $actual = $normalizer->normalize($parent, 'json', ['groups' => [MotiveNormalizer::GROUP_PARENT_TO_CHILDREN]]);
+
+        // children must be normalized by the injected normalizer and parent not exposed
+        self::assertArrayHasKey('children', $actual);
+        self::assertSame([
+            ['motive' => 'normalized'],
+            ['motive' => 'normalized'],
+        ], $actual['children']);
+        self::assertArrayNotHasKey('parent', $actual);
+    }
+
+    public function testNormalizeChildrenToParent(): void
+    {
+        $parent = new Motive();
+        $parent->setLabel(['fr' => 'Parent']);
+        $child = new Motive();
+        $child->setLabel(['fr' => 'Enfant']);
+        $child->setParent($parent);
+
+        $normalizer = new MotiveNormalizer();
+        $normalizer->setNormalizer($this->buildDummyNormalizer());
+
+        $actual = $normalizer->normalize($child, 'json', ['groups' => ['read', MotiveNormalizer::GROUP_CHILDREN_TO_PARENT]]);
+
+        // parent must be normalized by the injected normalizer and children not exposed
+        self::assertArrayHasKey('parent', $actual);
+        self::assertSame(['motive' => 'normalized'], $actual['parent']);
+        self::assertArrayNotHasKey('children', $actual);
+    }
+
+    public function testSupportsAndSupportedTypes(): void
+    {
+        $motive = new Motive();
+        $normalizer = new MotiveNormalizer();
+
+        self::assertTrue($normalizer->supportsNormalization($motive, 'json'));
+        self::assertFalse($normalizer->supportsNormalization(new \stdClass(), 'json'));
+
+        $supported = $normalizer->getSupportedTypes('json');
+        self::assertArrayHasKey(Motive::class, $supported);
+        self::assertTrue($supported[Motive::class]);
+    }
+
+    private function buildDummyNormalizer(): NormalizerInterface
+    {
+        return new class () implements NormalizerInterface {
+            public function normalize($object, ?string $format = null, array $context = []): array
+            {
+                if ($object instanceof StoredObject) {
+                    return ['stored_object'];
+                }
+                if ($object instanceof Motive) {
+                    return ['motive' => 'normalized'];
+                }
+
+                return ['normalized'];
+            }
+
+            public function supportsNormalization($data, ?string $format = null): bool
+            {
+                return true;
+            }
+        };
+    }
+}

From b43aeebc3cc100eea289788a3802e5f3922d63ae Mon Sep 17 00:00:00 2001
From: Boris Waaub <boris.waaub@digitalternative.be>
Date: Tue, 30 Sep 2025 13:49:04 +0000
Subject: [PATCH 2/2] FIX des bugs du merge request 884

---
 assets/translator.ts                          | 15 ++++--
 .../localizationHelper/localizationHelper.ts  | 54 +++++++++++++++++--
 .../public/vuejs/HomepageWidget/App.vue       |  6 +--
 .../DashboardWidgets/NewsItem.vue             | 16 +++---
 .../HomepageWidget/MyAccompanyingCourses.vue  |  4 +-
 .../public/vuejs/HomepageWidget/MyCustoms.vue | 41 +++++++-------
 .../vuejs/HomepageWidget/MyEvaluations.vue    |  8 ++-
 .../vuejs/HomepageWidget/MyNotifications.vue  |  4 +-
 .../public/vuejs/HomepageWidget/MyTasks.vue   |  9 ++--
 .../public/vuejs/HomepageWidget/MyWorks.vue   |  3 +-
 .../HomepageWidget/store/modules/homepage.ts  |  2 +
 .../Resources/public/types.ts                 |  1 +
 .../components/TicketInitFormComponent.vue    | 42 ++++++---------
 ts-config-base.json                           |  1 +
 webpack.config.js                             |  2 +-
 15 files changed, 127 insertions(+), 81 deletions(-)

diff --git a/assets/translator.ts b/assets/translator.ts
index fe4e14ffa..2daba91aa 100644
--- a/assets/translator.ts
+++ b/assets/translator.ts
@@ -1,7 +1,12 @@
-import { trans, setLocale, setLocaleFallbacks } from "./ux-translator";
+import {
+  trans,
+  setLocale,
+  getLocale,
+  setLocaleFallbacks,
+} from "./ux-translator";
 
-setLocaleFallbacks({"en": "fr", "nl": "fr", "fr": "en"});
-setLocale('fr');
+setLocaleFallbacks({ en: "fr", nl: "fr", fr: "en" });
+setLocale("fr");
 
-export { trans };
-export * from '../var/translations';
+export { trans, getLocale };
+export * from "../var/translations";
diff --git a/src/Bundle/ChillMainBundle/Resources/public/lib/localizationHelper/localizationHelper.ts b/src/Bundle/ChillMainBundle/Resources/public/lib/localizationHelper/localizationHelper.ts
index 354c9f8af..3b67da68e 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/lib/localizationHelper/localizationHelper.ts
+++ b/src/Bundle/ChillMainBundle/Resources/public/lib/localizationHelper/localizationHelper.ts
@@ -1,4 +1,5 @@
-import { TranslatableString } from "ChillMainAssets/types";
+import { DateTime, TranslatableString } from "ChillMainAssets/types";
+import { getLocale } from "translator";
 
 /**
  * Localizes a translatable string object based on the current locale.
@@ -17,11 +18,10 @@ import { TranslatableString } from "ChillMainAssets/types";
  * @returns The localized URL
  */
 export function localizedUrl(url: string): string {
-  const lang =
-    document.documentElement.lang || navigator.language.split("-")[0] || "fr";
+  const locale = getLocale();
   // Ensure url starts with a slash and does not already start with /{lang}/
   const normalizedUrl = url.startsWith("/") ? url : `/${url}`;
-  const langPrefix = `/${lang}`;
+  const langPrefix = `/${locale}`;
   if (normalizedUrl.startsWith(langPrefix + "/")) {
     return normalizedUrl;
   }
@@ -36,7 +36,7 @@ export function localizeString(
     return "";
   }
 
-  const currentLocale = locale || navigator.language.split("-")[0] || "fr";
+  const currentLocale = locale || getLocale();
 
   if (translatableString[currentLocale]) {
     return translatableString[currentLocale];
@@ -59,3 +59,47 @@ export function localizeString(
 
   return "";
 }
+
+const datetimeFormats: Record<
+  string,
+  Record<string, Intl.DateTimeFormatOptions>
+> = {
+  fr: {
+    short: {
+      year: "numeric",
+      month: "numeric",
+      day: "numeric",
+    },
+    text: {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    },
+    long: {
+      year: "numeric",
+      month: "numeric",
+      day: "numeric",
+      hour: "numeric",
+      minute: "numeric",
+      hour12: false,
+    },
+    hoursOnly: {
+      hour: "numeric",
+      minute: "numeric",
+      hour12: false,
+    },
+  },
+};
+export function localizeDateTimeFormat(
+  dateTime: DateTime,
+  format: keyof typeof datetimeFormats.fr = "short",
+): string {
+  const locale = getLocale();
+  const options =
+    datetimeFormats[locale]?.[format] || datetimeFormats.fr[format];
+  return new Intl.DateTimeFormat(locale, options).format(
+    new Date(dateTime.datetime),
+  );
+}
+
+export default datetimeFormats;
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/App.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/App.vue
index c1ac025ff..a494cfea8 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/App.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/App.vue
@@ -122,7 +122,6 @@ const tabDefinitions: TabDefinition[] = [
 ];
 
 const displayedTabs = computed(() => {
-  // Always show MyCustoms first if present
   const tabs = [] as TabDefinition[];
   for (const tabEnum of homepageConfig.value.displayTabs) {
     const def = tabDefinitions.find(
@@ -137,10 +136,7 @@ const activeTab = ref(Number(HomepageTabs[homepageConfig.value.defaultTab]));
 
 const loading = computed(() => store.state.loading);
 
-function selectTab(tab: HomepageTabs) {
-  if (tab !== HomepageTabs.MyCustoms) {
-    store.dispatch("getByTab", { tab: tab });
-  }
+async function selectTab(tab: HomepageTabs) {
   activeTab.value = tab;
 }
 
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/DashboardWidgets/NewsItem.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/DashboardWidgets/NewsItem.vue
index 5cbd33712..f98451249 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/DashboardWidgets/NewsItem.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/DashboardWidgets/NewsItem.vue
@@ -2,7 +2,9 @@
   <li>
     <h2>{{ props.item.title }}</h2>
     <time class="createdBy" datetime="{{item.startDate.datetime}}">{{
-      $d(newsItemStartDate(), "text")
+      props.item?.startDate
+        ? localizeDateTimeFormat(props.item?.startDate, "text")
+        : ""
     }}</time>
     <div class="content" v-if="shouldTruncate(item.content)">
       <div v-html="prepareContent(item.content)"></div>
@@ -26,7 +28,9 @@
       <template #body>
         <p class="news-date">
           <time class="createdBy" datetime="{{item.startDate.datetime}}">{{
-            $d(newsItemStartDate(), "text")
+            props.item?.startDate
+              ? localizeDateTimeFormat(props.item?.startDate, "text")
+              : ""
           }}</time>
         </p>
         <div v-html="convertMarkdownToHtml(item.content)"></div>
@@ -42,7 +46,7 @@ import DOMPurify from "dompurify";
 import { NewsItemType } from "../../../types";
 import type { PropType } from "vue";
 import { ref } from "vue";
-import { ISOToDatetime } from "../../../chill/js/date";
+import { localizeDateTimeFormat } from "ChillMainAssets/lib/localizationHelper/localizationHelper";
 
 const props = defineProps({
   item: {
@@ -133,7 +137,7 @@ const preprocess = (markdown: string): string => {
 };
 
 const postprocess = (html: string): string => {
-  DOMPurify.addHook("afterSanitizeAttributes", (node: any) => {
+  DOMPurify.addHook("afterSanitizeAttributes", (node: Element) => {
     if ("target" in node) {
       node.setAttribute("target", "_blank");
       node.setAttribute("rel", "noopener noreferrer");
@@ -159,10 +163,6 @@ const prepareContent = (content: string): string => {
   const htmlContent = convertMarkdownToHtml(content);
   return truncateContent(htmlContent);
 };
-
-const newsItemStartDate = (): null | Date => {
-  return ISOToDatetime(props.item?.startDate.datetime);
-};
 </script>
 
 <style scoped>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyAccompanyingCourses.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyAccompanyingCourses.vue
index 863e4784f..4c6ce61c9 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyAccompanyingCourses.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyAccompanyingCourses.vue
@@ -21,7 +21,7 @@
     </template>
     <template #tbody>
       <tr v-for="(c, i) in accompanyingCourses.results" :key="`course-${i}`">
-        <td>{{ $d(new Date(c.openingDate.datetime), "short") }}</td>
+        <td>{{ localizeDateTimeFormat(c.openingDate, "short") }}</td>
         <td>
           <span
             v-for="(issue, index) in c.socialIssues"
@@ -82,6 +82,8 @@ import {
   CONFIDENTIAL,
   trans,
 } from "translator";
+import { localizeDateTimeFormat } from "ChillMainAssets/lib/localizationHelper/localizationHelper";
+
 const store = useStore();
 
 const accompanyingCourses: ComputedRef<PaginationResponse<AccompanyingCourse>> =
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyCustoms.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyCustoms.vue
index 46751a0d2..2bb221e25 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyCustoms.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyCustoms.vue
@@ -1,62 +1,59 @@
 <template>
-  <span v-if="noResults" class="chill-no-data-statement">
-    {{ trans(NO_DASHBOARD) }}
-  </span>
-  <div v-else id="dashboards" class="container g-3">
+  <div id="dashboards" class="container g-3">
     <div class="row">
       <div class="mbloc col-xs-12 col-sm-4">
         <div class="custom1">
           <ul class="list-unstyled">
-            <li v-if="(counter.value?.notifications || 0) > 0">
+            <li v-if="counter.notifications > 0">
               <span :class="counterClass">
                 {{
                   trans(COUNTER_UNREAD_NOTIFICATIONS, {
-                    n: counter.value?.notifications || 0,
+                    n: counter.notifications,
                   })
                 }}
               </span>
             </li>
-            <li v-if="(counter.value?.accompanyingCourses || 0) > 0">
+            <li v-if="counter.accompanyingCourses > 0">
               <span :class="counterClass">
                 {{
                   trans(COUNTER_ASSIGNATED_COURSES, {
-                    n: counter.value?.accompanyingCourses || 0,
+                    n: counter.accompanyingCourses,
                   })
                 }}
               </span>
             </li>
-            <li v-if="(counter.value?.works || 0) > 0">
+            <li v-if="counter.works > 0">
               <span :class="counterClass">
                 {{
                   trans(COUNTER_ASSIGNATED_ACTIONS, {
-                    n: counter.value?.works || 0,
+                    n: counter.works,
                   })
                 }}
               </span>
             </li>
-            <li v-if="(counter.value?.evaluations || 0) > 0">
+            <li v-if="counter.evaluations > 0">
               <span :class="counterClass">
                 {{
                   trans(COUNTER_ASSIGNATED_EVALUATIONS, {
-                    n: counter.value?.evaluations || 0,
+                    n: counter.evaluations,
                   })
                 }}
               </span>
             </li>
-            <li v-if="(counter.value?.tasksAlert || 0) > 0">
+            <li v-if="counter.tasksAlert > 0">
               <span :class="counterClass">
                 {{
                   trans(COUNTER_ALERT_TASKS, {
-                    n: counter.value?.tasksAlert || 0,
+                    n: counter.tasksAlert,
                   })
                 }}
               </span>
             </li>
-            <li v-if="(counter.value?.tasksWarning || 0) > 0">
+            <li v-if="counter.tasksWarning > 0">
               <span :class="counterClass">
                 {{
                   trans(COUNTER_WARNING_TASKS, {
-                    n: counter.value?.tasksWarning || 0,
+                    n: counter.tasksWarning,
                   })
                 }}
               </span>
@@ -85,7 +82,6 @@ import { useStore } from "vuex";
 import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
 import News from "./DashboardWidgets/News.vue";
 import {
-  NO_DASHBOARD,
   COUNTER_UNREAD_NOTIFICATIONS,
   COUNTER_ASSIGNATED_COURSES,
   COUNTER_ASSIGNATED_ACTIONS,
@@ -105,14 +101,19 @@ interface MyCustom {
 
 const store = useStore();
 
-const counter = computed(() => store.getters.counter);
+const counter = computed(() => ({
+  notifications: store.state.homepage.notifications?.count ?? 0,
+  accompanyingCourses: store.state.homepage.accompanyingCourses?.count ?? 0,
+  works: store.state.homepage.works?.count ?? 0,
+  evaluations: store.state.homepage.evaluations?.count ?? 0,
+  tasksAlert: store.state.homepage.tasksAlert?.count ?? 0,
+  tasksWarning: store.state.homepage.tasksWarning?.count ?? 0,
+}));
 
 const counterClass = { counter: true };
 
 const dashboardItems = ref<MyCustom[]>([]);
 
-const noResults = computed(() => false);
-
 const hasDashboardItems = computed(() => dashboardItems.value.length > 0);
 
 onMounted(async () => {
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyEvaluations.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyEvaluations.vue
index 538de040b..5a37388cf 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyEvaluations.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyEvaluations.vue
@@ -22,11 +22,7 @@
       <template #tbody>
         <tr v-for="(e, i) in evaluations.results" :key="`evaluation-${i}`">
           <td>
-            {{
-              e.maxDate?.datetime
-                ? $d(new Date(e.maxDate.datetime), "short")
-                : ""
-            }}
+            {{ e.maxDate ? localizeDateTimeFormat(e.maxDate, "short") : "" }}
           </td>
           <td>
             {{ localizeString(e.evaluation?.title ?? null) }}
@@ -115,6 +111,8 @@ import {
   NO_DATA,
   trans,
 } from "translator";
+import { localizeDateTimeFormat } from "ChillMainAssets/lib/localizationHelper/localizationHelper";
+
 const evaluations: ComputedRef<
   PaginationResponse<AccompanyingPeriodWorkEvaluation>
 > = computed(() => store.state.homepage.evaluations);
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyNotifications.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyNotifications.vue
index effea6f35..4d618e6eb 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyNotifications.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyNotifications.vue
@@ -20,7 +20,7 @@
     </template>
     <template #tbody>
       <tr v-for="(n, i) in notifications.results" :key="`notify-${i}`">
-        <td>{{ $d(new Date(n.date.datetime), "long") }}</td>
+        <td>{{ localizeDateTimeFormat(n.date, "long") }}</td>
         <td>
           <span class="unread">
             <i class="fa fa-envelope-o" />
@@ -65,6 +65,8 @@ import {
   trans,
 } from "translator";
 import { PaginationResponse } from "ChillMainAssets/lib/api/apiMethods";
+import { localizeDateTimeFormat } from "ChillMainAssets/lib/localizationHelper/localizationHelper";
+
 const store = useStore();
 
 const notifications: ComputedRef<PaginationResponse<Notification>> = computed(
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyTasks.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyTasks.vue
index 637767842..932431729 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyTasks.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyTasks.vue
@@ -21,12 +21,12 @@
     <template #tbody>
       <tr v-for="(t, i) in tasks.alert.results" :key="`task-alert-${i}`">
         <td v-if="t.warningDate !== null">
-          {{ $d(new Date(t.warningDate.datetime), "short") }}
+          {{ localizeDateTimeFormat(t.warningDate, "short") }}
         </td>
         <td v-else />
         <td>
           <span class="outdated">{{
-            $d(new Date(t.endDate.datetime), "short")
+            localizeDateTimeFormat(t.endDate, "short")
           }}</span>
         </td>
         <td>{{ t.title }}</td>
@@ -62,10 +62,10 @@
       <tr v-for="(t, i) in tasks.warning.results" :key="`task-warning-${i}`">
         <td>
           <span class="outdated">{{
-            $d(new Date(t.warningDate.datetime), "short")
+            localizeDateTimeFormat(t.warningDate, "short")
           }}</span>
         </td>
-        <td>{{ $d(new Date(t.endDate.datetime), "short") }}</td>
+        <td>{{ localizeDateTimeFormat(t.endDate, "short") }}</td>
         <td>{{ t.title }}</td>
         <td>
           <a class="btn btn-sm btn-show" :href="getUrl(t)">
@@ -94,6 +94,7 @@ import {
 } from "translator";
 import { TasksState } from "./store/modules/homepage";
 import { Alert, Warning } from "ChillPersonAssets/types";
+import { localizeDateTimeFormat } from "ChillMainAssets/lib/localizationHelper/localizationHelper";
 
 const store = useStore();
 
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWorks.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWorks.vue
index a8cc39b83..9cccd6dd6 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWorks.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWorks.vue
@@ -21,7 +21,7 @@
       </template>
       <template #tbody>
         <tr v-for="(w, i) in works.value.results" :key="`works-${i}`">
-          <td>{{ $d(w.startDate.datetime, "short") }}</td>
+          <td>{{ localizeDateTimeFormat(w.startDate.datetime, "short") }}</td>
           <td>
             <span class="chill-entity entity-social-issue">
               <span class="badge bg-chill-l-gray text-dark">
@@ -90,6 +90,7 @@ import {
   trans,
 } from "translator";
 import { Workflow } from "ChillPersonAssets/types";
+import { localizeDateTimeFormat } from "ChillMainAssets/lib/localizationHelper/localizationHelper";
 
 const store = useStore();
 
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/store/modules/homepage.ts b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/store/modules/homepage.ts
index a06250c3b..4fc8dae8c 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/store/modules/homepage.ts
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/store/modules/homepage.ts
@@ -11,6 +11,7 @@ import {
   Warning,
   Workflow,
   WorflowCc,
+  Notification,
 } from "ChillPersonAssets/types";
 import { RootState } from "..";
 import { HomepageTabs } from "ChillMainAssets/types";
@@ -191,6 +192,7 @@ export const moduleHomepage: Module<State, RootState> = {
           if (!getters.isNotificationsLoaded) {
             commit("setLoading", true);
             const url = `/api/1.0/main/notification/my/unread${"?" + param}`;
+
             makeFetch("GET", url)
               .then((response) => {
                 commit("addNotifications", response);
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/types.ts b/src/Bundle/ChillPersonBundle/Resources/public/types.ts
index a4c07e85a..678011576 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/types.ts
+++ b/src/Bundle/ChillPersonBundle/Resources/public/types.ts
@@ -291,6 +291,7 @@ export interface Notification {
   relatedEntityClass: string;
   relatedEntityId: number;
 }
+
 export interface Participation {
   person: Person;
 }
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketInitFormComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketInitFormComponent.vue
index 75fcb9169..7a3066251 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketInitFormComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketInitFormComponent.vue
@@ -2,6 +2,13 @@
   <div class="card mb-4">
     <div class="card-body">
       <form @submit.prevent="submitForm">
+        <div class="mb-3">
+          <label class="form-label pe-2" for="emergency">
+            {{ trans(CHILL_TICKET_LIST_FILTER_EMERGENCY) }}
+          </label>
+          <emergency-toggle-component v-model="isEmergency" class="float-end" />
+        </div>
+
         <!-- Sélection du motif -->
         <div class="mb-3">
           <label class="form-label">{{
@@ -12,16 +19,7 @@
             :motives="motives"
           />
         </div>
-        <!-- Attribution des tickets -->
-        <div class="mb-3">
-          <label class="form-label">
-            {{ trans(CHILL_TICKET_TICKET_ADD_COMMENT_TITLE) }}
-          </label>
-          <addressee-selector-component
-            v-model="ticketForm.addressees"
-            :suggested="userGroups"
-          />
-        </div>
+
         <!-- Sélection des personnes -->
         <div class="row mb-3">
           <div class="col-md-6">
@@ -60,23 +58,17 @@
             :motive="ticketForm.motive ? ticketForm.motive : null"
           />
         </div>
+
+        <!-- Attribution des tickets -->
         <div class="mb-3">
-          <label class="form-label pe-2" for="emergency">
-            {{ trans(CHILL_TICKET_LIST_FILTER_EMERGENCY) }}
+          <label class="form-label">
+            {{ trans(CHILL_TICKET_TICKET_ADD_ADDRESSEE_TITLE) }}
           </label>
-          <toggle-component
-            v-model="isEmergency"
-            :on-label="trans(CHILL_TICKET_LIST_FILTER_EMERGENCY)"
-            :off-label="trans(CHILL_TICKET_LIST_FILTER_EMERGENCY)"
-            :classColor="{
-              on: 'bg-warning',
-              off: 'bg-secondary',
-            }"
-            id="emergency"
-            class="float-end"
+          <addressee-selector-component
+            v-model="ticketForm.addressees"
+            :suggested="userGroups"
           />
         </div>
-
         <!-- Boutons d'action -->
         <div class="d-flex justify-content-end gap-2 mt-4">
           <button type="button" class="btn btn-secondary" @click="resetForm">
@@ -100,8 +92,7 @@ import MotiveSelectorComponent from "./Motive/MotiveSelectorComponent.vue";
 import CommentEditorComponent from "./Comment/CommentEditorComponent.vue";
 import PersonsSelectorComponent from "./Person/PersonsSelectorComponent.vue";
 import AddresseeSelectorComponent from "./Addressee/AddresseeSelectorComponent.vue";
-import ToggleComponent from "../../TicketList/components/ToggleComponent.vue";
-
+import EmergencyToggleComponent from "./Emergency/EmergencyToggleComponent.vue";
 // Types
 import {
   Motive,
@@ -124,6 +115,7 @@ import {
   CHILL_TICKET_TICKET_SET_PERSONS_CALLER_LABEL,
   CHILL_TICKET_TICKET_SET_PERSONS_USER_LABEL,
   CHILL_TICKET_LIST_FILTER_EMERGENCY,
+  CHILL_TICKET_TICKET_ADD_ADDRESSEE_TITLE,
 } from "translator";
 import { UserGroup, UserGroupOrUser } from "ChillMainAssets/types";
 
diff --git a/ts-config-base.json b/ts-config-base.json
index 646ae0597..7260a798d 100644
--- a/ts-config-base.json
+++ b/ts-config-base.json
@@ -19,6 +19,7 @@
         "sourceMap": true
     },
     "includes": [
+        "./assets/**/*.ts",
         "./src/**/*.ts",
         "./src/**/*.vue"
     ],
diff --git a/webpack.config.js b/webpack.config.js
index d3a9b40b8..27a77ad45 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -104,7 +104,7 @@ module.exports = (async () => {
   await populateConfig(Encore, chillEntries);
 
   Encore.addAliases({
-    translator: resolve(__dirname, './assets/translator'),
+    translator: resolve(__dirname, 'assets/translator.ts'),
     "@symfony/ux-translator": resolve(__dirname, './vendor/symfony/ux-translator/assets'),
   });