From e94b890e94e3efdbcf8bfbdbf7ecceabdc6c90c2 Mon Sep 17 00:00:00 2001
From: Hugoobx <hugo.bertoux@icloud.com>
Date: Fri, 18 Oct 2024 15:16:33 +0200
Subject: [PATCH 1/4] feat: ajout du statut de notification

---
 .../records/NotificationState.test.js         |  58 ++++++++++
 src/components/records/NotificationState.vue  |  64 +++++++++++
 .../certification/exploitations/index.vue     | 104 +++++++++++++-----
 src/pages/exploitations/[numeroBio]/index.vue |  15 ++-
 src/pages/exploitations/index.vue             |  31 ++++--
 src/referentiels/ab.js                        |  50 +++++++++
 src/stores/operator.js                        |   3 +-
 src/utils/__fixtures__/operator.json          |   3 +-
 src/utils/dates.js                            |  16 +++
 src/utils/helper-notification.js              |  60 ++++++++++
 src/utils/helper-notification.test.js         |  96 ++++++++++++++++
 11 files changed, 457 insertions(+), 43 deletions(-)
 create mode 100644 src/components/records/NotificationState.test.js
 create mode 100644 src/components/records/NotificationState.vue
 create mode 100644 src/utils/helper-notification.js
 create mode 100644 src/utils/helper-notification.test.js

diff --git a/src/components/records/NotificationState.test.js b/src/components/records/NotificationState.test.js
new file mode 100644
index 00000000..481ec8ba
--- /dev/null
+++ b/src/components/records/NotificationState.test.js
@@ -0,0 +1,58 @@
+import { describe, expect, it } from "vitest";
+import { mount } from "@vue/test-utils";
+import NotificationState from "./NotificationState.vue";
+
+describe("NotificationState", () => {
+  it('renders correctly for "BROUILLON" state', () => {
+    const wrapper = mount(NotificationState, {
+      props: {
+        record: "BROUILLON",
+        text: true,
+      },
+    });
+
+    expect(wrapper.find(".fr-icon--sm").classes()).toContain("fr-icon-article-line");
+    expect(
+      wrapper
+        .find("span")
+        .text()
+        .replace(/\u00A0/g, " "),
+    ).toContain("Brouillon");
+
+    const spanElement = wrapper.find("span");
+    expect(spanElement.attributes("style")).toContain("background-color: rgb(211, 211, 211)");
+    expect(spanElement.attributes("style")).toContain("color: rgb(128, 128, 128)");
+  });
+
+  it('does not render text when "text" prop is false', () => {
+    const wrapper = mount(NotificationState, {
+      props: {
+        record: "BROUILLON",
+        text: false,
+      },
+    });
+
+    expect(wrapper.find(".mr-1").exists()).toBe(false);
+  });
+
+  it('applies styles and classes for "ENGAGEE" state', () => {
+    const wrapper = mount(NotificationState, {
+      props: {
+        record: "ENGAGEE",
+        text: true,
+      },
+    });
+
+    expect(wrapper.find(".fr-icon--sm").classes()).toContain("fr-icon-success-line");
+    expect(
+      wrapper
+        .find("span")
+        .text()
+        .replace(/\u00A0/g, " "),
+    ).toContain("Notification Engagée");
+
+    const spanElement = wrapper.find("span");
+    expect(spanElement.attributes("style")).toContain("background-color: rgb(158, 249, 190)");
+    expect(spanElement.attributes("style")).toContain("color: rgb(41, 114, 84)");
+  });
+});
diff --git a/src/components/records/NotificationState.vue b/src/components/records/NotificationState.vue
new file mode 100644
index 00000000..745555f1
--- /dev/null
+++ b/src/components/records/NotificationState.vue
@@ -0,0 +1,64 @@
+<template>
+  <span :class="badgeClasses.class" :style="badgeClasses.style">
+    <span
+      v-if="stateInfo"
+      :class="['icon', 'fr-icon--sm', stateInfo != null ? stateInfo.icon : '']"
+      aria-hidden="true"
+    ></span>
+    <span v-if="text && record !== 'BROUILLON'" class="mr-1">Notification&nbsp;</span>
+    <span :class="{ lowercase: text && record !== 'BROUILLON' }">{{ stateInfo ? stateInfo.label : "-" }}</span>
+  </span>
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+import { notificationsStateLevel } from "@/referentiels/ab.js";
+
+const props = defineProps({
+  record: {
+    type: String,
+    required: true,
+  },
+  text: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const badgeClasses = computed(() => {
+  const baseClasses = ["component"];
+  let colorClasses;
+  if (stateInfo.value != null) {
+    colorClasses = {
+      backgroundColor: `${stateInfo.value.color} !important`,
+      color: `${stateInfo.value.textColor} !important`,
+    };
+  }
+
+  return {
+    class: [baseClasses],
+    style: colorClasses,
+  };
+});
+const stateInfo = computed(() => notificationsStateLevel[props.record]);
+</script>
+
+<style>
+.component {
+  padding: 4px 8px;
+  border-radius: 9999px;
+  font-size: 13px;
+  font-weight: 400;
+  display: inline-flex;
+  align-items: center;
+}
+
+.icon {
+  margin-right: 4px;
+}
+
+.lowercase {
+  text-transform: lowercase;
+}
+</style>
diff --git a/src/pages/certification/exploitations/index.vue b/src/pages/certification/exploitations/index.vue
index aff53c05..9e694fd9 100644
--- a/src/pages/certification/exploitations/index.vue
+++ b/src/pages/certification/exploitations/index.vue
@@ -48,10 +48,12 @@ meta:
               }}
             </caption>
             <colgroup>
-              <col width="45%" />
-              <col width="15%" />
-              <col width="15%" />
-              <col width="30%" />
+              <col width="35%" />
+              <col width="10%" />
+              <col width="20%" />
+              <col width="10%" />
+              <col width="25%" />
+              <col witdh="2%" />
             </colgroup>
             <thead>
               <tr>
@@ -61,35 +63,36 @@ meta:
                     code="nom"
                     v-model="sortOrder"
                     @update:modelValue="(v) => updateQuery({ ...v, page: 1 })"
-                    >Exploitation</TableSort
+                    >Exploitation <span class="numeroBio">(n° Bio)</span></TableSort
                   >
                 </th>
-                <th
-                  scope="col"
-                  :aria-sort="sortAttribute('engagement_date')"
-                  class="table-header-engagement_date fr-text--align-right"
-                >
+                <th scope="col" :aria-sort="sortAttribute('engagement_date')" class="table-header-engagement_date">
                   <TableSort
                     :show-control="showOptionalControl"
                     code="engagement_date"
                     v-model="sortOrder"
                     @update:modelValue="(v) => updateQuery({ ...v, page: 1 })"
-                    >Début de conversion</TableSort
+                    >Engagé le</TableSort
                   >
                 </th>
-                <th
-                  scope="col"
-                  :aria-sort="sortAttribute('audit_date')"
-                  class="table-header-audit_date fr-text--align-right"
-                >
+                <th scope="col" :aria-sort="sortAttribute('engagement_date')" class="table-header-engagement_date">
+                  <TableSort
+                    :show-control="showOptionalControl"
+                    code="engagement_date"
+                    v-model="sortOrder"
+                    @update:modelValue="(v) => updateQuery({ ...v, page: 1 })"
+                    >Notification</TableSort
+                  >
+                </th>
+                <th scope="col" :aria-sort="sortAttribute('audit_date')" class="table-header-audit_date">
                   <TableSort
                     code="audit_date"
                     v-model="sortOrder"
                     @update:modelValue="(v) => updateQuery({ ...v, page: 1 })"
-                    >Date de l'audit</TableSort
+                    >Dernier audit</TableSort
                   >
                 </th>
-                <th scope="col" :aria-sort="sortAttribute('statut')" class="table-header-statut fr-text--align-right">
+                <th scope="col" :aria-sort="sortAttribute('statut')" class="table-header-statut">
                   <TableSort
                     code="statut"
                     v-model="sortOrder"
@@ -97,11 +100,12 @@ meta:
                     >Statut</TableSort
                   >
                 </th>
+                <th></th>
               </tr>
             </thead>
             <tbody aria-live="polite">
               <tr v-if="isSearching">
-                <td colspan="4" class="center">
+                <td colspan="6" class="center">
                   <Spinner>Chargement des données…</Spinner>
                 </td>
               </tr>
@@ -113,7 +117,7 @@ meta:
                 </td>
               </tr>
               <tr v-else-if="!isSearching && operators.length === 0">
-                <td colspan="4">
+                <td colspan="6">
                   <div class="fr-alert fr-alert--warning" role="alert">
                     <h3 class="fr-alert__title">Aucune exploitation trouvée</h3>
 
@@ -135,21 +139,41 @@ meta:
               >
                 <td>
                   <router-link :to="`/exploitations/${operator.numeroBio}`" class="fr-link">
-                    {{ operator.nom }} </router-link
+                    {{ `${operator.nom}` }}
+                    <span class="numeroBio"> {{ `(${operator.numeroBio})` }}</span> </router-link
                   ><br />
                   <span class="fr-hint-text">{{ operator.commune }}, {{ operator.codePostal }}</span>
                 </td>
-                <td class="fr-text--align-right">
+                <td class="fr-text--align-left">
                   <time :datetime="operator.dateEngagement" v-if="operator.dateEngagement">{{
-                    monthYearDateFormat(operator.dateEngagement)
+                    jjmmyyyy(operator.dateEngagement)
                   }}</time>
                   <span aria-hidden v-else>-</span>
                 </td>
-                <td class="fr-text--align-right">
-                  <time :datetime="audit_date" v-if="audit_date">{{ monthYearDateFormat(audit_date) }}</time>
+                <td class="fr-text--align-left">
+                  <NotificationState
+                    v-if="operator.certificats"
+                    :record="
+                      operator.certificats.sort(
+                        (a, b) => new Date(b.dateSignatureContrat) - new Date(a.dateSignatureContrat),
+                      )[0]?.etatCertification
+                    "
+                  />
+                  <NotificationState
+                    v-else-if="operator.notifications"
+                    :record="
+                      operator.notifications.sort(
+                        (a, b) => new Date(b.dateSignatureContrat) - new Date(a.dateSignatureContrat),
+                      )[0]?.etatCertification
+                    "
+                  />
                   <span aria-hidden v-else>-</span>
                 </td>
-                <td class="fr-text--align-right badges">
+                <td class="fr-text--align-left">
+                  <time :datetime="audit_date" v-if="audit_date">{{ jjmmyyyy(audit_date) }}</time>
+                  <span aria-hidden v-else>-</span>
+                </td>
+                <td class="fr-text--align-left badges">
                   <ParcellaireState
                     :record="{ certification_date_debut, certification_state, audit_date }"
                     :show-date="false"
@@ -157,14 +181,16 @@ meta:
                   <span v-if="certification_date_fin" class="fr-hint-text">
                     Du {{ dateFormat(certification_date_debut) }} au {{ dateFormat(certification_date_fin) }}
                   </span>
+                </td>
+                <td>
                   <span aria-hidden class="fr-ml-1w fr-icon-arrow-right-line fr-icon--sm" />
                 </td>
               </tr>
             </tbody>
             <tfoot v-if="!isSearching && hasResults && isOnline">
               <tr>
-                <td class="results-total">{{ operators.length }} sur {{ pagination.total }} résultats</td>
-                <td colspan="3">
+                <td colspan="2" class="results-total">{{ operators.length }} sur {{ pagination.total }} résultats</td>
+                <td colspan="4">
                   <Pagination
                     :currentPage="currentPage"
                     :maxPage="pagination.page_max"
@@ -205,7 +231,9 @@ import { AxiosError } from "axios";
 import ParcellaireState from "@/components/records/State.vue";
 import Spinner from "@/components/widgets/Spinner.vue";
 import TableSort from "@/components/widgets/TableSort.vue";
-import { monthYearDateFormat, dateFormat } from "@/utils/dates.js";
+import { monthYearDateFormat, dateFormat, jjmmyyyy } from "@/utils/dates.js";
+import NotificationState from "@/components/records/NotificationState.vue";
+import { filterAndSortNotifications } from "@/utils/helper-notification.js";
 
 import { searchOperators } from "@/cartobio-api.js";
 import { useUserStore } from "@/stores/user.js";
@@ -251,6 +279,15 @@ const operators = computed(() =>
   isOnline.value
     ? searchResults.value
     : Object.entries(storage.operators)
+        .filter((e) => e.isProduction)
+        .forEach((e) => {
+          if (e.certificats) {
+            e.certificats = filterAndSortNotifications(e.certificats);
+          }
+          if (e.notifications) {
+            e.notifications = filterAndSortNotifications(e.notifications);
+          }
+        })
         .map(([, { records, operator }]) => ({ ...operator, ...records[0] }))
         .sort((a, b) =>
           (a[sortOrder.value.sort] < b[sortOrder.value.sort]) ^ (sortOrder.value.order === "desc") ? -1 : 1,
@@ -404,6 +441,10 @@ watch(
 .fr-text--align-right {
   text-align: right !important;
 }
+
+.fr-text--align-center {
+  text-align: center !important;
+}
 .badges span {
   vertical-align: middle;
 
@@ -423,4 +464,9 @@ watch(
 .fr-alert--waiting::before {
   mask-image: url(@gouvfr/dsfr/icons/system/time-fill.svg);
 }
+
+.numeroBio {
+  font-weight: 400;
+  margin-left: auto;
+}
 </style>
diff --git a/src/pages/exploitations/[numeroBio]/index.vue b/src/pages/exploitations/[numeroBio]/index.vue
index bad67f9e..35d752d0 100644
--- a/src/pages/exploitations/[numeroBio]/index.vue
+++ b/src/pages/exploitations/[numeroBio]/index.vue
@@ -15,9 +15,18 @@ meta:
         </li>
       </ol>
     </nav>
-
+    <h1 class="fr-h3 fr-m-0">
+      {{ operatorStore.operator.nom }}
+    </h1>
     <div class="header fr-mb-8v">
-      <h1 class="fr-h3 fr-m-0">{{ operatorStore.operator.nom }}</h1>
+      <NotificationState
+        v-if="operatorStore.operator.certificats && operatorStore.operator.certificats.length > 0"
+        :record="
+          operatorStore.operator.certificats[0].etatCertification || operatorStore.operator.certificats[0].status
+        "
+        :text="true"
+      />
+      <div v-else></div>
       <button
         v-if="permissions.canCreateVersion && operatorStore.records && operatorStore.records.length > 0"
         class="fr-btn fr-btn--secondary fr-btn--icon-left fr-icon-add-line"
@@ -272,6 +281,7 @@ import OperatorSetupFlow from "@/components/setup/Flow/index.vue";
 import ActionFromScratch from "@/components/setup/actions/FromScratch.vue";
 import ActionFromSource from "@/components/setup/actions/FromSource.vue";
 import ActionByOperator from "@/components/setup/actions/ByOperator.vue";
+import NotificationState from "@/components/records/NotificationState.vue";
 
 import { useOperatorStore } from "@/stores/operator.js";
 import { usePermissions } from "@/stores/permissions.js";
@@ -318,7 +328,6 @@ const operatorSetupActions = [
   },
   { id: "manual", selector: markRaw(ActionFromScratch) },
 ];
-
 const showYears = reactive({
   [new Date().getFullYear()]: true,
   [new Date().getFullYear() - 1]: true,
diff --git a/src/pages/exploitations/index.vue b/src/pages/exploitations/index.vue
index 19e816d1..1b9c5d90 100644
--- a/src/pages/exploitations/index.vue
+++ b/src/pages/exploitations/index.vue
@@ -35,12 +35,16 @@ meta:
                       <li><b>Date de début de conversion</b> : {{ operator.dateEngagement }}</li>
                     </ul>
                   </div>
-                  <div class="fr-card__start">
-                    <ul class="fr-tags-group">
-                      <li>
-                        <p class="fr-badge fr-badge--success fr-icon-medal-fill">vérifié</p>
-                      </li>
-                    </ul>
+                  <div class="fr-card__start" v-if="!isLoading">
+                    <NotificationState
+                      v-if="operator.certificats.length > 0"
+                      :text="true"
+                      :record="
+                        operator.certificats[0].etatCertification
+                          ? operator.certificats[0].etatCertification
+                          : operator.certificats[0].status
+                      "
+                    />
                   </div>
                 </div>
 
@@ -75,8 +79,9 @@ import { getUserOperators } from "@/cartobio-api.js";
 import { useRouter } from "vue-router";
 import Spinner from "@/components/widgets/Spinner.vue";
 import Pagination from "@/components/widgets/Pagination.vue";
-
-const RESULTS_PER_PAGE = 10;
+import NotificationState from "@/components/records/NotificationState.vue";
+import { filterAndSortNotifications } from "@/utils/helper-notification.js";
+const RESULTS_PER_PAGE = 12;
 
 const router = useRouter();
 const isLoading = ref(true);
@@ -100,9 +105,13 @@ async function loadOperators() {
   if (res.nbTotal === 1 && res.operators.length === 1) {
     await router.push(`/exploitations/${res.operators[0].numeroBio}`);
   }
-
   operators.value = res.operators;
   nbTotal.value = res.nbTotal;
+  operators.value.forEach((e) => {
+    if (e.certificats.length > 0) {
+      e.certificats = filterAndSortNotifications(e.certificats);
+    }
+  });
   isLoading.value = false;
 }
 </script>
@@ -120,4 +129,8 @@ span[aria-selected="true"] {
   --ul-type: none;
   --ul-start: 0;
 }
+
+.fr-card__title {
+  margin-top: 10px;
+}
 </style>
diff --git a/src/referentiels/ab.js b/src/referentiels/ab.js
index aece7046..5d18ff42 100644
--- a/src/referentiels/ab.js
+++ b/src/referentiels/ab.js
@@ -235,3 +235,53 @@ export const certificationDateFin = {
     return d;
   },
 };
+
+export const notificationsStateLevel = {
+  ["BROUILLON"]: {
+    label: "Brouillon",
+    color: "#D3D3D3",
+    textColor: "#808080",
+    icon: "fr-icon-article-line",
+  },
+  ["ARRETEE"]: {
+    label: "Arrêtée",
+    color: "#FFE9E9",
+    textColor: "#CE0500",
+    icon: "fr-icon-error-fill",
+  },
+  ["NON ENGAGEE"]: {
+    label: "Non engagée",
+    color: "#FBE769",
+    textColor: "#66673D",
+    icon: "fr-icon-stop-circle-line",
+  },
+  // NOTE : Pas sûr d'avoir cette enum
+  // ["NON ENGAGEE-CHT OC"]: {
+  //   label: "Certification en cours",
+  //   color: "fr-badge--new",
+  // },
+  ["ENGAGEE FUTUR"]: {
+    label: "Engagée future",
+    color: "#E3E3FD",
+    textColor: "#000091",
+    icon: "fr-icon-time-line",
+  },
+  ["SUSPENDUE"]: {
+    label: "Suspendue",
+    color: "#FDDFDB",
+    textColor: "#A94645",
+    icon: "fr-icon-pause-circle-line",
+  },
+  ["ENGAGEE"]: {
+    label: "Engagée",
+    color: "#9EF9BE",
+    textColor: "#297254",
+    icon: "fr-icon-success-line",
+  },
+  ["RETIREE"]: {
+    label: "Retirée",
+    color: "#EEE4D9",
+    textColor: "#6A6156",
+    icon: "fr-icon-close-circle-line",
+  },
+};
diff --git a/src/stores/operator.js b/src/stores/operator.js
index 9c52a36e..cf6bd09c 100644
--- a/src/stores/operator.js
+++ b/src/stores/operator.js
@@ -3,6 +3,7 @@ import { computed, ref, watch } from "vue";
 import { CUSTOM_DIMENSION_DEPARTEMENT, deleteCustomDimension, setCustomDimension } from "@/stats.js";
 import { apiClient } from "@/cartobio-api.js";
 import { useCartoBioStorage } from "@/stores/storage.js";
+import { filterAndSortNotifications } from "@/utils/helper-notification.js";
 
 /**
  * @typedef {import('@vue/reactivity').Ref} Ref
@@ -70,7 +71,7 @@ export const useOperatorStore = defineStore("operator", () => {
           : serverR,
       );
     }
-
+    operatorData.certificats = filterAndSortNotifications(operatorData.certificats);
     operator.value = operatorData;
     records.value = recordsData.sort((recordA, recordB) => date(recordB) - date(recordA));
   }
diff --git a/src/utils/__fixtures__/operator.json b/src/utils/__fixtures__/operator.json
index a1827e81..f61add2c 100644
--- a/src/utils/__fixtures__/operator.json
+++ b/src/utils/__fixtures__/operator.json
@@ -13,5 +13,6 @@
       "long": 4.5885,
       "codeCommune": "42271"
     }
-  ]
+  ],
+  "certificats": []
 }
diff --git a/src/utils/dates.js b/src/utils/dates.js
index 17618710..a2653370 100644
--- a/src/utils/dates.js
+++ b/src/utils/dates.js
@@ -26,6 +26,14 @@ const mmyyIntl = new Intl.DateTimeFormat("fr-FR", {
   year: "numeric",
 });
 
+// 07/12/2022
+const jjmmyyIntl = new Intl.DateTimeFormat("fr-FR", {
+  timeZone: "Europe/Paris",
+  day: "numeric",
+  month: "numeric",
+  year: "numeric",
+});
+
 // 08h58
 const hhmmIntl = new Intl.DateTimeFormat("fr-FR", {
   timeZone: "Europe/Paris",
@@ -74,6 +82,14 @@ export function mmyyyy(date) {
   return onValidDate(date, (d) => mmyyIntl.format(d));
 }
 
+/**
+ * @param {String} date
+ * @returns {String} formatted date as JJ MM YYYY
+ */
+export function jjmmyyyy(date) {
+  return onValidDate(date, (d) => jjmmyyIntl.format(d));
+}
+
 /**
  * @returns {string}
  */
diff --git a/src/utils/helper-notification.js b/src/utils/helper-notification.js
new file mode 100644
index 00000000..e57d81bd
--- /dev/null
+++ b/src/utils/helper-notification.js
@@ -0,0 +1,60 @@
+function excludeOldNonEngagees(notifications) {
+  const sixMonthsAgo = new Date();
+  sixMonthsAgo.setMonth(sixMonthsAgo.getMonth() - 6);
+
+  return notifications.filter((n) => {
+    const certificationDate = new Date(n.updatedAt);
+    return !(n.etatCertification === "NON ENGAGEE" && certificationDate < sixMonthsAgo);
+  });
+}
+
+const priorityOrder = [
+  "RETIREE",
+  "ENGAGEE",
+  "SUSPENDUE",
+  "ENGAGEE FUTUR",
+  "NON ENGAGEE-CHT OC",
+  "ARRETEE",
+  "NON ENGAGEE",
+];
+
+function sortByPriority(notifications) {
+  return notifications.sort((a, b) => {
+    const priorityA = priorityOrder.indexOf(a.etatCertification);
+    const priorityB = priorityOrder.indexOf(b.etatCertification);
+    return priorityA - priorityB;
+  });
+}
+
+function resolveConflicts(notifications) {
+  const groupedNotifications = {};
+
+  notifications.forEach((n) => {
+    const key = `${n.numeroBio}-${n.organismeCertificateurId}`;
+    if (!groupedNotifications[key]) {
+      groupedNotifications[key] = [];
+    }
+    groupedNotifications[key].push(n);
+  });
+
+  Object.keys(groupedNotifications).forEach((key) => {
+    const group = groupedNotifications[key];
+
+    group.sort((a, b) => {
+      if (a.etatCertification === b.etatCertification) {
+        if (a.etatCertification === "ENGAGEE" || a.etatCertification === "ARRÊTÉE") {
+          return new Date(b.dateDemarrage || b.dateArret) - new Date(a.dateDemarrage || a.dateArret);
+        }
+        return new Date(b.createdAt) - new Date(a.createdAt);
+      }
+    });
+  });
+
+  return Object.values(groupedNotifications).flat();
+}
+
+export function filterAndSortNotifications(notifications) {
+  let filtered = excludeOldNonEngagees(notifications);
+  filtered = sortByPriority(filtered);
+  return resolveConflicts(filtered);
+}
diff --git a/src/utils/helper-notification.test.js b/src/utils/helper-notification.test.js
new file mode 100644
index 00000000..f5732a82
--- /dev/null
+++ b/src/utils/helper-notification.test.js
@@ -0,0 +1,96 @@
+import { describe, test, expect, beforeEach } from "vitest";
+
+import { filterAndSortNotifications } from "./helper-notification.js";
+
+const creerNotification = ({
+  productionId,
+  active,
+  updatedAt,
+  etatCertification,
+  numeroBio,
+  organismeCertificateurId,
+  dateDemarrage,
+  dateArret,
+  createdAt,
+}) => ({
+  productionId,
+  active,
+  updatedAt,
+  etatCertification,
+  numeroBio,
+  organismeCertificateurId,
+  dateDemarrage,
+  dateArret,
+  createdAt,
+});
+
+describe("filterAndSortNotifications", () => {
+  let notifications;
+
+  beforeEach(() => {
+    notifications = [
+      creerNotification({
+        productionId: 1,
+        active: true,
+        updatedAt: "2024-09-12",
+        etatCertification: "NON ENGAGEE",
+        numeroBio: "123",
+        organismeCertificateurId: "111",
+        createdAt: "2024-09-12",
+      }),
+      creerNotification({
+        productionId: 1,
+        active: true,
+        updatedAt: "2023-07-01",
+        etatCertification: "ENGAGEE",
+        numeroBio: "124",
+        organismeCertificateurId: "112",
+        dateDemarrage: "2023-06-01",
+        createdAt: "2023-06-01",
+      }),
+      creerNotification({
+        productionId: 3,
+        active: true,
+        updatedAt: "2023-06-01",
+        etatCertification: "SUSPENDUE",
+        numeroBio: "123",
+        organismeCertificateurId: "111",
+        dateArret: "2023-06-01",
+        createdAt: "2023-05-01",
+      }),
+      creerNotification({
+        productionId: 4,
+        active: true,
+        updatedAt: "2022-01-01",
+        etatCertification: "NON ENGAGEE",
+        numeroBio: "125",
+        organismeCertificateurId: "113",
+        createdAt: "2021-12-01",
+      }),
+    ];
+  });
+
+  test("filtre les productions actives", () => {
+    const filtered = filterAndSortNotifications(notifications);
+    expect(filtered).toHaveLength(3);
+  });
+
+  test("exclut les anciennes notifications NON ENGAGEE de plus de 6 mois", () => {
+    const filtered = filterAndSortNotifications(notifications);
+    expect(filtered).not.toContainEqual(
+      expect.objectContaining({ etatCertification: "NON ENGAGEE", updatedAt: "2022-01-01" }),
+    );
+  });
+
+  test("tri par priorité", () => {
+    const sorted = filterAndSortNotifications(notifications);
+    const order = sorted.map((n) => n.etatCertification);
+    expect(order).toEqual(["ENGAGEE", "SUSPENDUE", "NON ENGAGEE"]);
+  });
+
+  test("résout les conflits par la date de certification la plus récente", () => {
+    const filtered = filterAndSortNotifications(notifications);
+    expect(filtered[0].etatCertification).toBe("ENGAGEE");
+    expect(filtered[1].etatCertification).toBe("SUSPENDUE");
+  });
+});

From 1220e7d618d5b65967948401afe706bc34fb3d8a Mon Sep 17 00:00:00 2001
From: GregoireDucharme <gregoire.ducharme@gmail.com>
Date: Wed, 4 Dec 2024 15:17:27 +0100
Subject: [PATCH 2/4] fix: Recupere la derniere notification non-brouillon

---
 .../records/NotificationState.test.js         | 54 +++++++++++++++++--
 src/components/records/NotificationState.vue  | 31 ++++++++---
 .../certification/exploitations/index.vue     | 52 +++++++-----------
 src/pages/exploitations/[numeroBio]/index.vue |  4 +-
 src/pages/exploitations/index.vue             | 10 +---
 5 files changed, 95 insertions(+), 56 deletions(-)

diff --git a/src/components/records/NotificationState.test.js b/src/components/records/NotificationState.test.js
index 481ec8ba..216a9263 100644
--- a/src/components/records/NotificationState.test.js
+++ b/src/components/records/NotificationState.test.js
@@ -6,7 +6,13 @@ describe("NotificationState", () => {
   it('renders correctly for "BROUILLON" state', () => {
     const wrapper = mount(NotificationState, {
       props: {
-        record: "BROUILLON",
+        operator: {
+          notifications: [
+            {
+              status: "BROUILLON",
+            },
+          ],
+        },
         text: true,
       },
     });
@@ -24,10 +30,46 @@ describe("NotificationState", () => {
     expect(spanElement.attributes("style")).toContain("color: rgb(128, 128, 128)");
   });
 
+  it('does not render "BROUILLON" state IF another notifications exists', () => {
+    const wrapper = mount(NotificationState, {
+      props: {
+        operator: {
+          notifications: [
+            {
+              status: "BROUILLON",
+            },
+            {
+              status: "ENGAGEE",
+            },
+          ],
+        },
+        text: true,
+      },
+    });
+
+    expect(wrapper.find(".fr-icon--sm").classes()).toContain("fr-icon-success-line");
+    expect(
+      wrapper
+        .find("span")
+        .text()
+        .replace(/\u00A0/g, " "),
+    ).toContain("Engagée");
+
+    const spanElement = wrapper.find("span");
+    expect(spanElement.attributes("style")).toContain("background-color: rgb(158, 249, 190)");
+    expect(spanElement.attributes("style")).toContain("color: rgb(41, 114, 84)");
+  });
+
   it('does not render text when "text" prop is false', () => {
     const wrapper = mount(NotificationState, {
       props: {
-        record: "BROUILLON",
+        operator: {
+          notifications: [
+            {
+              etatCertification: "BROUILLON",
+            },
+          ],
+        },
         text: false,
       },
     });
@@ -38,7 +80,13 @@ describe("NotificationState", () => {
   it('applies styles and classes for "ENGAGEE" state', () => {
     const wrapper = mount(NotificationState, {
       props: {
-        record: "ENGAGEE",
+        operator: {
+          certificats: [
+            {
+              status: "ENGAGEE",
+            },
+          ],
+        },
         text: true,
       },
     });
diff --git a/src/components/records/NotificationState.vue b/src/components/records/NotificationState.vue
index 745555f1..af1b7e9c 100644
--- a/src/components/records/NotificationState.vue
+++ b/src/components/records/NotificationState.vue
@@ -5,8 +5,10 @@
       :class="['icon', 'fr-icon--sm', stateInfo != null ? stateInfo.icon : '']"
       aria-hidden="true"
     ></span>
-    <span v-if="text && record !== 'BROUILLON'" class="mr-1">Notification&nbsp;</span>
-    <span :class="{ lowercase: text && record !== 'BROUILLON' }">{{ stateInfo ? stateInfo.label : "-" }}</span>
+    <span v-if="text && stateInfo && stateInfo.label !== 'Brouillon'">Notification&nbsp;</span>
+    <span :class="{ lowercase: text && stateInfo && stateInfo.label !== 'Brouillon' }">{{
+      stateInfo ? stateInfo.label : "-"
+    }}</span>
   </span>
 </template>
 
@@ -16,8 +18,8 @@ import { computed } from "vue";
 import { notificationsStateLevel } from "@/referentiels/ab.js";
 
 const props = defineProps({
-  record: {
-    type: String,
+  operator: {
+    type: Object,
     required: true,
   },
   text: {
@@ -26,6 +28,22 @@ const props = defineProps({
   },
 });
 
+const stateInfo = computed(() => {
+  const array = props.operator.certificats ?? props.operator.notifications;
+
+  array.sort((a, b) => new Date(b.dateSignatureContrat) - new Date(a.dateSignatureContrat));
+
+  for (const notif of array) {
+    const currentStatut = notif.etatCertification || notif.status;
+
+    if (currentStatut != "BROUILLON") {
+      return notificationsStateLevel[currentStatut];
+    }
+  }
+
+  return notificationsStateLevel["BROUILLON"];
+});
+
 const badgeClasses = computed(() => {
   const baseClasses = ["component"];
   let colorClasses;
@@ -41,14 +59,13 @@ const badgeClasses = computed(() => {
     style: colorClasses,
   };
 });
-const stateInfo = computed(() => notificationsStateLevel[props.record]);
 </script>
 
 <style>
 .component {
-  padding: 4px 8px;
+  padding: 2px 8px;
   border-radius: 9999px;
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 400;
   display: inline-flex;
   align-items: center;
diff --git a/src/pages/certification/exploitations/index.vue b/src/pages/certification/exploitations/index.vue
index 9e694fd9..b8cc1422 100644
--- a/src/pages/certification/exploitations/index.vue
+++ b/src/pages/certification/exploitations/index.vue
@@ -110,7 +110,7 @@ meta:
                 </td>
               </tr>
               <tr v-else-if="error">
-                <td colspan="4">
+                <td colspan="7">
                   <div class="fr-alert fr-alert--warning" role="alert">
                     <p>{{ error }}</p>
                   </div>
@@ -151,23 +151,7 @@ meta:
                   <span aria-hidden v-else>-</span>
                 </td>
                 <td class="fr-text--align-left">
-                  <NotificationState
-                    v-if="operator.certificats"
-                    :record="
-                      operator.certificats.sort(
-                        (a, b) => new Date(b.dateSignatureContrat) - new Date(a.dateSignatureContrat),
-                      )[0]?.etatCertification
-                    "
-                  />
-                  <NotificationState
-                    v-else-if="operator.notifications"
-                    :record="
-                      operator.notifications.sort(
-                        (a, b) => new Date(b.dateSignatureContrat) - new Date(a.dateSignatureContrat),
-                      )[0]?.etatCertification
-                    "
-                  />
-                  <span aria-hidden v-else>-</span>
+                  <NotificationState v-if="operator.certificats || operator.notifications" :operator="operator" />
                 </td>
                 <td class="fr-text--align-left">
                   <time :datetime="audit_date" v-if="audit_date">{{ jjmmyyyy(audit_date) }}</time>
@@ -231,7 +215,7 @@ import { AxiosError } from "axios";
 import ParcellaireState from "@/components/records/State.vue";
 import Spinner from "@/components/widgets/Spinner.vue";
 import TableSort from "@/components/widgets/TableSort.vue";
-import { monthYearDateFormat, dateFormat, jjmmyyyy } from "@/utils/dates.js";
+import { dateFormat, jjmmyyyy } from "@/utils/dates.js";
 import NotificationState from "@/components/records/NotificationState.vue";
 import { filterAndSortNotifications } from "@/utils/helper-notification.js";
 
@@ -276,22 +260,22 @@ const error = ref("");
 const isSearching = ref(false);
 const searchResults = ref([]);
 const operators = computed(() =>
-  isOnline.value
+  (isOnline.value
     ? searchResults.value
-    : Object.entries(storage.operators)
-        .filter((e) => e.isProduction)
-        .forEach((e) => {
-          if (e.certificats) {
-            e.certificats = filterAndSortNotifications(e.certificats);
-          }
-          if (e.notifications) {
-            e.notifications = filterAndSortNotifications(e.notifications);
-          }
-        })
-        .map(([, { records, operator }]) => ({ ...operator, ...records[0] }))
-        .sort((a, b) =>
-          (a[sortOrder.value.sort] < b[sortOrder.value.sort]) ^ (sortOrder.value.order === "desc") ? -1 : 1,
-        ),
+    : Object.entries(storage.operators).map(([, { records, operator }]) => ({ ...operator, ...records[0] }))
+  )
+    .map((e) => {
+      if (e.certificats) {
+        e.certificats = filterAndSortNotifications(e.certificats);
+      }
+      if (e.notifications) {
+        e.notifications = filterAndSortNotifications(e.notifications);
+      }
+      return e;
+    })
+    .sort((a, b) =>
+      (a[sortOrder.value.sort] < b[sortOrder.value.sort]) ^ (sortOrder.value.order === "desc") ? -1 : 1,
+    ),
 );
 
 // controlled by the form
diff --git a/src/pages/exploitations/[numeroBio]/index.vue b/src/pages/exploitations/[numeroBio]/index.vue
index 35d752d0..c424a49f 100644
--- a/src/pages/exploitations/[numeroBio]/index.vue
+++ b/src/pages/exploitations/[numeroBio]/index.vue
@@ -21,9 +21,7 @@ meta:
     <div class="header fr-mb-8v">
       <NotificationState
         v-if="operatorStore.operator.certificats && operatorStore.operator.certificats.length > 0"
-        :record="
-          operatorStore.operator.certificats[0].etatCertification || operatorStore.operator.certificats[0].status
-        "
+        :operator="operatorStore.operator"
         :text="true"
       />
       <div v-else></div>
diff --git a/src/pages/exploitations/index.vue b/src/pages/exploitations/index.vue
index 1b9c5d90..91d45077 100644
--- a/src/pages/exploitations/index.vue
+++ b/src/pages/exploitations/index.vue
@@ -36,15 +36,7 @@ meta:
                     </ul>
                   </div>
                   <div class="fr-card__start" v-if="!isLoading">
-                    <NotificationState
-                      v-if="operator.certificats.length > 0"
-                      :text="true"
-                      :record="
-                        operator.certificats[0].etatCertification
-                          ? operator.certificats[0].etatCertification
-                          : operator.certificats[0].status
-                      "
-                    />
+                    <NotificationState v-if="operator.certificats.length > 0" :text="true" :operator="operator" />
                   </div>
                 </div>
 

From 22a69d2c057b5a49bba160b89642b4fda6c794c1 Mon Sep 17 00:00:00 2001
From: GregoireDucharme <gregoire.ducharme@gmail.com>
Date: Mon, 9 Dec 2024 09:26:40 +0100
Subject: [PATCH 3/4] =?UTF-8?q?fix:=20ne=20pas=20filtrer=20les=20notif=20n?=
 =?UTF-8?q?on=20engag=C3=A9e=20plus=20ancienne=20que=206=20mois?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/helper-notification.js      | 15 +++++++++------
 src/utils/helper-notification.test.js |  8 +++++---
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/utils/helper-notification.js b/src/utils/helper-notification.js
index e57d81bd..46e59da4 100644
--- a/src/utils/helper-notification.js
+++ b/src/utils/helper-notification.js
@@ -1,11 +1,14 @@
 function excludeOldNonEngagees(notifications) {
-  const sixMonthsAgo = new Date();
-  sixMonthsAgo.setMonth(sixMonthsAgo.getMonth() - 6);
+  return notifications;
 
-  return notifications.filter((n) => {
-    const certificationDate = new Date(n.updatedAt);
-    return !(n.etatCertification === "NON ENGAGEE" && certificationDate < sixMonthsAgo);
-  });
+  //FIXME: En attente de savoir si on gère la pagination ou pas
+  // const sixMonthsAgo = new Date();
+  // sixMonthsAgo.setMonth(sixMonthsAgo.getMonth() - 6);
+
+  // return notifications.filter((n) => {
+  //   const certificationDate = new Date(n.updatedAt);
+  //   return !(n.etatCertification === "NON ENGAGEE" && certificationDate < sixMonthsAgo);
+  // });
 }
 
 const priorityOrder = [
diff --git a/src/utils/helper-notification.test.js b/src/utils/helper-notification.test.js
index f5732a82..34f48da2 100644
--- a/src/utils/helper-notification.test.js
+++ b/src/utils/helper-notification.test.js
@@ -72,20 +72,22 @@ describe("filterAndSortNotifications", () => {
 
   test("filtre les productions actives", () => {
     const filtered = filterAndSortNotifications(notifications);
-    expect(filtered).toHaveLength(3);
+    expect(filtered).toHaveLength(4);
   });
 
+  //FIXME: En attente de savoir si on gère la pagination ou pas
+  /*
   test("exclut les anciennes notifications NON ENGAGEE de plus de 6 mois", () => {
     const filtered = filterAndSortNotifications(notifications);
     expect(filtered).not.toContainEqual(
       expect.objectContaining({ etatCertification: "NON ENGAGEE", updatedAt: "2022-01-01" }),
     );
-  });
+  });*/
 
   test("tri par priorité", () => {
     const sorted = filterAndSortNotifications(notifications);
     const order = sorted.map((n) => n.etatCertification);
-    expect(order).toEqual(["ENGAGEE", "SUSPENDUE", "NON ENGAGEE"]);
+    expect(order).toEqual(["ENGAGEE", "SUSPENDUE", "NON ENGAGEE", "NON ENGAGEE"]);
   });
 
   test("résout les conflits par la date de certification la plus récente", () => {

From 4d69e93aa7369d4b9d300109aec8bc3de8920383 Mon Sep 17 00:00:00 2001
From: GregoireDucharme <gregoire.ducharme@gmail.com>
Date: Thu, 12 Dec 2024 16:28:44 +0100
Subject: [PATCH 4/4] feat: affichage de la date de demarrage au lieu de la
 date d'engagement

---
 .../certification/exploitations/index.vue     | 24 +++++++++++++++--
 src/pages/exploitations/index.vue             | 26 ++++++++++++++++++-
 2 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/src/pages/certification/exploitations/index.vue b/src/pages/certification/exploitations/index.vue
index b8cc1422..8af7d675 100644
--- a/src/pages/certification/exploitations/index.vue
+++ b/src/pages/certification/exploitations/index.vue
@@ -145,8 +145,8 @@ meta:
                   <span class="fr-hint-text">{{ operator.commune }}, {{ operator.codePostal }}</span>
                 </td>
                 <td class="fr-text--align-left">
-                  <time :datetime="operator.dateEngagement" v-if="operator.dateEngagement">{{
-                    jjmmyyyy(operator.dateEngagement)
+                  <time :datetime="getDateDemarrage(operator)" v-if="getDateDemarrage(operator)">{{
+                    jjmmyyyy(getDateDemarrage(operator))
                   }}</time>
                   <span aria-hidden v-else>-</span>
                 </td>
@@ -356,6 +356,26 @@ async function doSearch(input, page, sort, order) {
   }
 }
 
+function getDateDemarrage(operator) {
+  const array = operator.certificats ?? operator.notifications ?? [];
+
+  array.sort((a, b) => new Date(b.dateSignatureContrat) - new Date(a.dateSignatureContrat));
+  let dateDemarrage;
+
+  for (const notif of array) {
+    const currentStatut = notif.etatCertification || notif.status;
+    if (notif.dateDemarrage) {
+      dateDemarrage = notif.dateDemarrage;
+    }
+
+    if (currentStatut != "BROUILLON") {
+      return dateDemarrage;
+    }
+  }
+
+  return dateDemarrage;
+}
+
 watch(
   [searchInput, currentPage, sortOrder],
   () => doSearch(searchInput.value, currentPage.value, sortOrder.value.sort, sortOrder.value.order),
diff --git a/src/pages/exploitations/index.vue b/src/pages/exploitations/index.vue
index 91d45077..97b6b140 100644
--- a/src/pages/exploitations/index.vue
+++ b/src/pages/exploitations/index.vue
@@ -32,7 +32,9 @@ meta:
                       <li v-if="operator.siret"><b>SIRET</b> : {{ operator.siret }}</li>
                       <li v-if="operator.numeroPacage"><b>PACAGE</b> : {{ operator.numeroPacage }}</li>
                       <li><b>Numéro Bio</b> : {{ operator.numeroBio }}</li>
-                      <li><b>Date de début de conversion</b> : {{ operator.dateEngagement }}</li>
+                      <li v-if="getDateDemarrage(operator)">
+                        <b>Date d'engagement</b> : {{ jjmmyyyy(getDateDemarrage(operator)) }}
+                      </li>
                     </ul>
                   </div>
                   <div class="fr-card__start" v-if="!isLoading">
@@ -73,6 +75,7 @@ import Spinner from "@/components/widgets/Spinner.vue";
 import Pagination from "@/components/widgets/Pagination.vue";
 import NotificationState from "@/components/records/NotificationState.vue";
 import { filterAndSortNotifications } from "@/utils/helper-notification.js";
+import { jjmmyyyy } from "@/utils/dates";
 const RESULTS_PER_PAGE = 12;
 
 const router = useRouter();
@@ -106,6 +109,27 @@ async function loadOperators() {
   });
   isLoading.value = false;
 }
+
+//Date de début de conversion : 2024-12-10
+function getDateDemarrage(operator) {
+  const array = operator.certificats ?? operator.notifications;
+
+  array.sort((a, b) => new Date(b.dateSignatureContrat) - new Date(a.dateSignatureContrat));
+  let dateDemarrage;
+
+  for (const notif of array) {
+    const currentStatut = notif.etatCertification || notif.status;
+    if (notif.dateDemarrage) {
+      dateDemarrage = notif.dateDemarrage;
+    }
+
+    if (currentStatut != "BROUILLON") {
+      return dateDemarrage;
+    }
+  }
+
+  return dateDemarrage;
+}
 </script>
 
 <style scoped>