From f1ba46ca0152e3b1a3b8f128ec710f3238118036 Mon Sep 17 00:00:00 2001
From: Maud Royer <hello@maudroyer.fr>
Date: Mon, 25 Mar 2024 16:34:32 +0100
Subject: [PATCH] feat: header, summary et certification sur page parcellaire

Signed-off-by: Maud Royer <hello@maudroyer.fr>
---
 src/components/Certification/Summary.vue      | 108 --------------
 .../record/CertificationSection.vue           | 140 ++++++++++++++++++
 .../Summary.vue => record/Header.vue}         |  57 +++----
 .../{Certification => record}/State.test.js   |   0
 .../{Certification => record}/State.vue       |   0
 .../history}/ActionType.test.js               |   0
 .../history}/ActionType.vue                   |   0
 .../history}/HistoryEntry.vue                 |   2 +-
 .../modals}/CertificationModal.vue            |   0
 .../modals}/CultureTypeModal.vue              |   0
 .../modals}/DeleteParcelaireModal.vue         |   0
 .../modals}/EngagementDateModal.vue           |   0
 .../modals}/EngagementLevelModal.vue          |   0
 .../modals}/HistoryModal.vue                  |   2 +-
 .../modals/SaveAuditModal.vue}                |   0
 .../certification/exploitations/index.vue     |   2 +-
 .../[recordId]/ajout-parcelle/dessin.vue      |   2 +-
 .../[recordId]/ajout-parcelle/index.vue       |   2 +-
 .../[numeroBio]/[recordId]/index.vue          |  21 ++-
 .../[recordId]/modifier/[featureId].vue       |   2 +-
 src/pages/exploitations/[numeroBio]/index.vue |   2 +-
 21 files changed, 176 insertions(+), 164 deletions(-)
 delete mode 100644 src/components/Certification/Summary.vue
 create mode 100644 src/components/record/CertificationSection.vue
 rename src/components/{Operator/Summary.vue => record/Header.vue} (73%)
 rename src/components/{Certification => record}/State.test.js (100%)
 rename src/components/{Certification => record}/State.vue (100%)
 rename src/components/{Certification => record/history}/ActionType.test.js (100%)
 rename src/components/{Certification => record/history}/ActionType.vue (100%)
 rename src/components/{Operator => record/history}/HistoryEntry.vue (98%)
 rename src/components/{Certification => record/modals}/CertificationModal.vue (100%)
 rename src/components/{Operator => record/modals}/CultureTypeModal.vue (100%)
 rename src/components/{Operator => record/modals}/DeleteParcelaireModal.vue (100%)
 rename src/components/{Certification => record/modals}/EngagementDateModal.vue (100%)
 rename src/components/{Certification => record/modals}/EngagementLevelModal.vue (100%)
 rename src/components/{Operator => record/modals}/HistoryModal.vue (92%)
 rename src/components/{Certification/SendOffModal.vue => record/modals/SaveAuditModal.vue} (100%)

diff --git a/src/components/Certification/Summary.vue b/src/components/Certification/Summary.vue
deleted file mode 100644
index 2bf3ac3b..00000000
--- a/src/components/Certification/Summary.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-<template>
-  <div class="fr-callout fr-callout--blue-ecume" v-if="canEndAudit && record.certification_state === CERTIFICATION_STATE.OPERATOR_DRAFT">
-    <h3 class="fr-callout__title">Parcellaire complet <span aria-hidden="true">🎉</span></h3>
-
-    <button v-if="permissions.canSaveAudit" class="fr-btn" @click="showSendOffModal = true">Terminer l'audit</button>
-    <span v-else>L'auditeur doit maintenant terminer l'audit.</span>
-  </div>
-
-  <div class="fr-callout fr-callout--blue-ecume" v-else-if="canEndAudit && record.certification_state === CERTIFICATION_STATE.AUDITED">
-    <h3 class="fr-callout__title">Audit terminé</h3>
-
-    <button v-if="permissions.canSendAudit" class="fr-btn" @click="handleSendAudit">Soumettre pour certification</button>
-    <span v-else>L'auditeur doit maintenant soumettre l'audit pour certification.</span>
-  </div>
-
-  <div class="fr-callout fr-callout--blue-ecume" v-else-if="canEndAudit && record.certification_state === CERTIFICATION_STATE.PENDING_CERTIFICATION">
-    <h3 class="fr-callout__title">Certification en cours</h3>
-
-    <button v-if="permissions.canCertify" class="fr-btn" @click="showCertificationModal = true">Certifier le parcellaire</button>
-    <span v-else>Le chargé de certification doit maintenant certifier le parcellaire.</span>
-  </div>
-
-  <div class="fr-callout fr-callout--blue-ecume" v-if="record.audit_notes">
-    <h3 class="fr-callout__title">Notes finales de l'audit</h3>
-
-    <div v-html="record.audit_notes" />
-  </div>
-
-  <Teleport to="body">
-    <SendOffModal :operator="operator" :record="record" v-if="showSendOffModal" @close="showSendOffModal = false" @submit="handleSaveAudit" />
-    <CertificationModal :operator="operator" :record="record" v-if="showCertificationModal" @close="showCertificationModal = false" @submit="handleCertify" />
-  </Teleport>
-</template>
-
-<script setup>
-import { computed, ref } from 'vue'
-import { CERTIFICATION_STATE } from '@/referentiels/ab.js'
-import { updateAuditState } from '@/cartobio-api.js'
-import { useFeaturesSetsStore, usePermissions, useRecordStore } from '@/stores/index.js'
-import CertificationModal from "@/components/Certification/CertificationModal.vue"
-import SendOffModal from "@/components/Certification/SendOffModal.vue"
-import toast from "@/components/toast.js"
-
-const recordStore = useRecordStore()
-const featuresSets = useFeaturesSetsStore()
-const permissions = usePermissions()
-
-const props = defineProps({
-  operator: {
-    type: Object,
-    required: true
-  },
-  features: {
-    type: Object,
-    required: true
-  },
-  record: {
-    type: Object,
-    required: true
-  }
-})
-
-const showSendOffModal = ref(false)
-const showCertificationModal = ref(false)
-
-const canEndAudit = computed(() => recordStore.hasFeatures && !featuresSets.hasRequiredSets)
-
-async function handleSaveAudit ({ record_id: recordId, patch }) {
-  let record
-  try {
-    record = await updateAuditState(recordId, {
-          ...patch,
-          certification_state: CERTIFICATION_STATE.AUDITED
-        }
-    )
-  } catch (e) {
-    if (e.response?.status === 400) {
-      toast.error(e.response.data.error)
-      return
-    }
-
-    throw e
-  }
-
-  recordStore.update(record)
-  showSendOffModal.value = false
-}
-
-async function handleSendAudit () {
-  const record = await updateAuditState(
-    props.record.record_id,
-    { certification_state: CERTIFICATION_STATE.PENDING_CERTIFICATION }
-  )
-
-  recordStore.update(record)
-}
-
-async function handleCertify ({ record_id: recordId, patch }) {
-  const record = await updateAuditState(recordId, {
-      ...patch,
-      certification_state: CERTIFICATION_STATE.CERTIFIED
-    }
-  )
-
-  recordStore.update(record)
-  showCertificationModal.value = false
-}
-</script>
diff --git a/src/components/record/CertificationSection.vue b/src/components/record/CertificationSection.vue
new file mode 100644
index 00000000..e23a7579
--- /dev/null
+++ b/src/components/record/CertificationSection.vue
@@ -0,0 +1,140 @@
+<script setup>
+import { computed, ref } from 'vue'
+import { CERTIFICATION_STATE, isCertificationImmutable } from '@/referentiels/ab.js'
+import { updateAuditState } from '@/cartobio-api.js'
+import { useFeaturesSetsStore, useOperatorStore, usePermissions, useRecordStore } from '@/stores/index.js'
+import CertificationModal from "@/components/record/modals/CertificationModal.vue"
+import SaveAuditModal from "@/components/record/modals/SaveAuditModal.vue"
+import toast from "@/components/toast.js"
+
+const recordStore = useRecordStore()
+const operatorStore = useOperatorStore()
+const featuresSets = useFeaturesSetsStore()
+const permissions = usePermissions()
+const { record } = recordStore
+const { operator } = operatorStore
+
+const displayCallout = computed(() => record.audit_demandes && isCertificationImmutable(record.certification_state))
+const showSaveAuditModal = ref(false)
+const showCertificationModal = ref(false)
+
+const canEndAudit = computed(() => permissions.isOc && recordStore.hasFeatures && !featuresSets.hasRequiredSets)
+
+async function handleSaveAudit ({ record_id: recordId, patch }) {
+  let newRecord
+  try {
+    newRecord = await updateAuditState(recordId, {
+          ...patch,
+          certification_state: CERTIFICATION_STATE.AUDITED
+        }
+    )
+  } catch (e) {
+    if (e.response?.status === 400) {
+      toast.error(e.response.data.error)
+      return
+    }
+
+    throw e
+  }
+
+  recordStore.update(newRecord)
+  showSaveAuditModal.value = false
+}
+
+async function handleSendAudit () {
+  let newRecord
+  try {
+    newRecord = await updateAuditState(
+        record.record_id,
+        { certification_state: CERTIFICATION_STATE.PENDING_CERTIFICATION }
+    )
+  } catch (e) {
+    if (e.response?.status === 400) {
+      toast.error(e.response.data.error)
+      return
+    }
+
+    throw e
+  }
+
+  recordStore.update(newRecord)
+}
+
+async function handleCertify ({ record_id: recordId, patch }) {
+  let newRecord
+  try {
+    newRecord = await updateAuditState(recordId, {
+          ...patch,
+          certification_state: CERTIFICATION_STATE.CERTIFIED
+        }
+    )
+  } catch (e) {
+    if (e.response?.status === 400) {
+      toast.error(e.response.data.error)
+      return
+    }
+
+    throw e
+  }
+
+  recordStore.update(newRecord)
+  showCertificationModal.value = false
+}
+</script>
+
+<template>
+  <div class="demandes fr-callout fr-callout--blue-ecume fr-mb-2w" v-if="displayCallout">
+    <h3 class="fr-callout__title">Demandes formulées lors de l'audit</h3>
+
+    <div v-html="record.audit_demandes" />
+  </div>
+
+  <!-- Agri -->
+
+  <div
+      v-if="permissions.isAgri && record.certification_state !== CERTIFICATION_STATE.OPERATOR_DRAFT"
+      class="fr-alert fr-alert--info fr-alert--sm fr-mb-2w"
+  >
+    <p class="fr-text--sm">Votre parcellaire est en cours de certification, vous ne pouvez pas modifier les données.</p>
+  </div>
+
+  <!-- OC -->
+
+
+  <div class="fr-callout fr-callout--blue-ecume fr-mb-2w" v-if="permissions.isOc && record.audit_notes">
+    <h3 class="fr-callout__title">Notes finales de l'audit</h3>
+
+    <div v-html="record.audit_notes" />
+  </div>
+
+
+  <div class="fr-callout fr-callout--blue-ecume fr-mb-2w" v-if="canEndAudit && record.certification_state === CERTIFICATION_STATE.OPERATOR_DRAFT">
+    <h3 class="fr-callout__title">Parcellaire complet <span aria-hidden="true">🎉</span></h3>
+
+    <button v-if="permissions.canSaveAudit" class="fr-btn" @click="showSaveAuditModal = true">Terminer l'audit</button>
+    <span v-else>L'auditeur doit maintenant terminer l'audit.</span>
+  </div>
+
+  <div class="fr-callout fr-callout--blue-ecume fr-mb-2w" v-else-if="canEndAudit && record.certification_state === CERTIFICATION_STATE.AUDITED">
+    <h3 class="fr-callout__title">Audit terminé</h3>
+
+    <button v-if="permissions.canSendAudit" class="fr-btn" @click="handleSendAudit">Soumettre pour certification</button>
+    <span v-else>L'auditeur doit maintenant soumettre l'audit pour certification.</span>
+  </div>
+
+  <div class="fr-callout fr-callout--blue-ecume fr-mb-2w" v-else-if="canEndAudit && record.certification_state === CERTIFICATION_STATE.PENDING_CERTIFICATION">
+    <h3 class="fr-callout__title">Certification en cours</h3>
+
+    <button v-if="permissions.canCertify" class="fr-btn" @click="showCertificationModal = true">Certifier le parcellaire</button>
+    <span v-else>Le chargé de certification doit maintenant certifier le parcellaire.</span>
+  </div>
+
+  <Teleport to="body">
+    <SaveAuditModal :operator="operator" :record="record" v-if="showSaveAuditModal" @close="showSaveAuditModal = false" @submit="handleSaveAudit" />
+    <CertificationModal :operator="operator" :record="record" v-if="showCertificationModal" @close="showCertificationModal = false" @submit="handleCertify" />
+  </Teleport>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/components/Operator/Summary.vue b/src/components/record/Header.vue
similarity index 73%
rename from src/components/Operator/Summary.vue
rename to src/components/record/Header.vue
index ad8302bf..c2fbcb76 100644
--- a/src/components/Operator/Summary.vue
+++ b/src/components/record/Header.vue
@@ -1,7 +1,7 @@
 <template>
-  <header class="fr-mb-3w">
-    <span :data-numerobio="operator.numeroBio">{{ operator.nom }}</span>
-    <h1 class="fr-h4 fr-my-2v">
+  <header class="fr-mb-2w">
+    <span class="fr-text--bold" :data-numerobio="operator.numeroBio">{{ operator.nom }}</span>
+    <h1 class="fr-h4 fr-my-0 fr-mb-1v">
       {{ record.version_name }}
 
       <button class="fr-btn fr-btn--tertiary-no-outline fr-icon fr-icon-edit-line" @click="showEditVersionModal = true">
@@ -14,7 +14,7 @@
     </p>
 
 
-    <div v-if="disableActions === false" class="actions fr-btns-group fr-btns-group--inline-sm fr-btns-group--icon-left fr-mt-4v">
+    <div v-if="disableActions === false" class="actions fr-btns-group fr-btns-group--sm fr-btns-group--inline-sm fr-btns-group--icon-left">
       <nav role="navigation" class="fr-translate fr-nav">
         <div class="fr-nav-item">
           <button
@@ -51,23 +51,10 @@
         Historique
       </button>
 
-      <button v-if="hasFeatures" class="export-action fr-btn fr-btn--tertiary-no-outline fr-btn--icon-left fr-icon-road-map-line" @click="exportModal = true">
-        Export
+      <button v-if="hasFeatures" class="export-action fr-btn fr-btn--tertiary-no-outline fr-btn--icon-left fr-icon-table-2" @click="exportModal = true">
+        Exporter
       </button>
     </div>
-
-    <div
-        v-if="permissions.isAgri && record.certification_state !== CERTIFICATION_STATE.OPERATOR_DRAFT"
-        class="fr-alert fr-alert--info fr-alert--sm fr-mt-3w"
-    >
-      <p class="fr-text--sm">Votre parcellaire est en cours de certification, vous ne pouvez pas modifier les données.</p>
-    </div>
-
-    <div class="demandes fr-callout fr-callout--blue-ecume" v-if="displayCallout">
-      <h3 class="fr-callout__title">Demandes formulées lors de l'audit</h3>
-
-      <div v-html="record.audit_demandes" />
-    </div>
   </header>
 
   <Teleport to="body">
@@ -91,13 +78,12 @@
 import { computed, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 
-import ParcellaireState from '@/components/Certification/State.vue'
-import OperatorHistoryModal from '@/components/Operator/HistoryModal.vue'
+import ParcellaireState from '@/components/record/State.vue'
+import OperatorHistoryModal from '@/components/record/modals/HistoryModal.vue'
 import FeaturesExportModal from '@/components/Features/ExportModal.vue'
-import DeleteParcellaireModal from '@/components/Operator/DeleteParcelaireModal.vue'
+import DeleteParcellaireModal from '@/components/record/modals/DeleteParcelaireModal.vue'
 
-import { CERTIFICATION_STATE, isCertificationImmutable } from '@/referentiels/ab.js'
-import { useFeaturesStore, useOperatorStore, usePermissions, useRecordStore } from '@/stores/index.js'
+import { useFeaturesStore, useOperatorStore, useRecordStore } from '@/stores/index.js'
 import { onClickOutside } from "@vueuse/core"
 import EditVersionModal from "@/components/versions/EditVersionModal.vue"
 
@@ -114,11 +100,9 @@ const deleteModal = ref(false)
 const featuresStore = useFeaturesStore()
 const operatorStore = useOperatorStore()
 const recordStore = useRecordStore()
-const permissions = usePermissions()
 const { record } = recordStore
 const { operator } = operatorStore
 const { collection, hasFeatures } = storeToRefs(featuresStore)
-const displayCallout = computed(() => record.audit_demandes && isCertificationImmutable(record.certification_state))
 const canDisplayHistory = computed(() => Array.isArray(record.audit_history) && record.audit_history.length)
 
 const versionMenu = ref(false)
@@ -147,20 +131,16 @@ header {
 }
 
 .actions {
-  background: var(--light-background-alt-blue-france, #F5F5FE);
-  display: flex;
   position: relative;
-}
-
-@media screen and (min-width: 62em) {
-  .actions {
-    flex-direction: row;
-    margin-left: 0;
-    margin-right: 0;
-  }
+  display: flex;
+  flex-direction: row;
+  column-gap: 0.5rem;
+  margin: 0;
 
-  div.actions .fr-btn {
-    margin-bottom: 0;
+  .fr-btn {
+    margin: 0;
+    flex-grow: 0;
+    width: auto;
   }
 }
 
@@ -169,6 +149,7 @@ header {
 .fr-menu {
   position: absolute;
   top: 100%;
+  left: 0.5rem;
   width: 9rem;
   padding: 0;
   margin: 0;
diff --git a/src/components/Certification/State.test.js b/src/components/record/State.test.js
similarity index 100%
rename from src/components/Certification/State.test.js
rename to src/components/record/State.test.js
diff --git a/src/components/Certification/State.vue b/src/components/record/State.vue
similarity index 100%
rename from src/components/Certification/State.vue
rename to src/components/record/State.vue
diff --git a/src/components/Certification/ActionType.test.js b/src/components/record/history/ActionType.test.js
similarity index 100%
rename from src/components/Certification/ActionType.test.js
rename to src/components/record/history/ActionType.test.js
diff --git a/src/components/Certification/ActionType.vue b/src/components/record/history/ActionType.vue
similarity index 100%
rename from src/components/Certification/ActionType.vue
rename to src/components/record/history/ActionType.vue
diff --git a/src/components/Operator/HistoryEntry.vue b/src/components/record/history/HistoryEntry.vue
similarity index 98%
rename from src/components/Operator/HistoryEntry.vue
rename to src/components/record/history/HistoryEntry.vue
index e8cdbfd8..7731efc4 100644
--- a/src/components/Operator/HistoryEntry.vue
+++ b/src/components/record/history/HistoryEntry.vue
@@ -49,7 +49,7 @@ import { ddmmmmyyyy } from '@/components/dates.js'
 import { EventType } from '@agencebio/cartobio-types'
 import { deletionReasons } from '@/components/Features/index.js';
 
-import ActionType from '@/components/Certification/ActionType.vue'
+import ActionType from '@/components/record/history/ActionType.vue'
 import ReferenceCadastrale from '@/components/Features/ReferenceCadastrale.vue';
 
 const props = defineProps({
diff --git a/src/components/Certification/CertificationModal.vue b/src/components/record/modals/CertificationModal.vue
similarity index 100%
rename from src/components/Certification/CertificationModal.vue
rename to src/components/record/modals/CertificationModal.vue
diff --git a/src/components/Operator/CultureTypeModal.vue b/src/components/record/modals/CultureTypeModal.vue
similarity index 100%
rename from src/components/Operator/CultureTypeModal.vue
rename to src/components/record/modals/CultureTypeModal.vue
diff --git a/src/components/Operator/DeleteParcelaireModal.vue b/src/components/record/modals/DeleteParcelaireModal.vue
similarity index 100%
rename from src/components/Operator/DeleteParcelaireModal.vue
rename to src/components/record/modals/DeleteParcelaireModal.vue
diff --git a/src/components/Certification/EngagementDateModal.vue b/src/components/record/modals/EngagementDateModal.vue
similarity index 100%
rename from src/components/Certification/EngagementDateModal.vue
rename to src/components/record/modals/EngagementDateModal.vue
diff --git a/src/components/Certification/EngagementLevelModal.vue b/src/components/record/modals/EngagementLevelModal.vue
similarity index 100%
rename from src/components/Certification/EngagementLevelModal.vue
rename to src/components/record/modals/EngagementLevelModal.vue
diff --git a/src/components/Operator/HistoryModal.vue b/src/components/record/modals/HistoryModal.vue
similarity index 92%
rename from src/components/Operator/HistoryModal.vue
rename to src/components/record/modals/HistoryModal.vue
index 5ffb0153..ab946657 100644
--- a/src/components/Operator/HistoryModal.vue
+++ b/src/components/record/modals/HistoryModal.vue
@@ -10,7 +10,7 @@
 
 <script setup>
 import Modal from '@/components/Modal.vue'
-import HistoryEntry from './HistoryEntry.vue'
+import HistoryEntry from '../history/HistoryEntry.vue'
 
 defineProps({
   operator: {
diff --git a/src/components/Certification/SendOffModal.vue b/src/components/record/modals/SaveAuditModal.vue
similarity index 100%
rename from src/components/Certification/SendOffModal.vue
rename to src/components/record/modals/SaveAuditModal.vue
diff --git a/src/pages/certification/exploitations/index.vue b/src/pages/certification/exploitations/index.vue
index 725379ee..75061c50 100644
--- a/src/pages/certification/exploitations/index.vue
+++ b/src/pages/certification/exploitations/index.vue
@@ -86,7 +86,7 @@ import { computed, watch, ref, readonly } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useRoute, useRouter } from 'vue-router'
 
-import ParcellaireState from '@/components/Certification/State.vue'
+import ParcellaireState from '@/components/record/State.vue'
 import { monthYearDateFormat } from '@/components/dates.js'
 
 import { searchOperators as search, fetchLatestOperators } from '@/cartobio-api.js'
diff --git a/src/pages/exploitations/[numeroBio]/[recordId]/ajout-parcelle/dessin.vue b/src/pages/exploitations/[numeroBio]/[recordId]/ajout-parcelle/dessin.vue
index 4bc59259..5b1fbab9 100644
--- a/src/pages/exploitations/[numeroBio]/[recordId]/ajout-parcelle/dessin.vue
+++ b/src/pages/exploitations/[numeroBio]/[recordId]/ajout-parcelle/dessin.vue
@@ -90,7 +90,7 @@ import baseStyle from "@/map-styles/base.json"
 import MapContainer from "@/components/Map/MapContainer.vue"
 import GeojsonLayer from "@/components/Map/GeojsonLayer.vue"
 import { useFeaturesStore, useOperatorStore, usePermissions, usePreferences, useRecordStore } from "@/stores/index.js"
-import ParcellaireState from "@/components/Certification/State.vue"
+import ParcellaireState from "@/components/record/State.vue"
 import CommuneSelect from "@/components/Forms/CommuneSelect.vue"
 import CertificationBodyEditForm from "@/components/Features/SingleItemCertificationBodyForm.vue"
 import OperatorEditForm from "@/components/Features/SingleItemOperatorForm.vue"
diff --git a/src/pages/exploitations/[numeroBio]/[recordId]/ajout-parcelle/index.vue b/src/pages/exploitations/[numeroBio]/[recordId]/ajout-parcelle/index.vue
index d8bb6042..111cbbb4 100644
--- a/src/pages/exploitations/[numeroBio]/[recordId]/ajout-parcelle/index.vue
+++ b/src/pages/exploitations/[numeroBio]/[recordId]/ajout-parcelle/index.vue
@@ -46,7 +46,7 @@ import { bounds } from '@/components/Features/index.js'
 import MapContainer from '@/components/Map/MapContainer.vue'
 import GeojsonLayer from '@/components/Map/GeojsonLayer.vue'
 import SetupOverlay from '@/components/Map/SetupOverlay.vue'
-import OperatorSummary from '@/components/Operator/Summary.vue'
+import OperatorSummary from '@/components/records/Summary.vue'
 import FeatureAddFlow from '@/components/Features/AddFlow.vue'
 
 import baseStyle from '@/map-styles/base.json'
diff --git a/src/pages/exploitations/[numeroBio]/[recordId]/index.vue b/src/pages/exploitations/[numeroBio]/[recordId]/index.vue
index 61f575a3..1ee3f4a2 100644
--- a/src/pages/exploitations/[numeroBio]/[recordId]/index.vue
+++ b/src/pages/exploitations/[numeroBio]/[recordId]/index.vue
@@ -6,8 +6,8 @@ meta:
 </route>
 
 <template>
-  <main class="fr-container fr-py-2w">
-    <nav role="navigation" class="fr-breadcrumb">
+  <main class="fr-container fr-py-9v">
+    <nav role="navigation" class="fr-breadcrumb fr-mb-2w fr-mt-0">
       <ol class="fr-breadcrumb__list">
         <li><router-link class="fr-breadcrumb__link" :to="permissions.startPage">Exploitations</router-link></li>
         <li><router-link class="fr-breadcrumb__link" :to="`/exploitations/${operator.numeroBio}`">{{ operator.nom }}</router-link></li>
@@ -16,17 +16,15 @@ meta:
     </nav>
     <div class="fr-grid-row fr-grid-row--gutters">
       <div class="fr-col-6">
-        <OperatorSummary />
+        <RecordHeader />
+        <CertificationSection />
 
         <div v-if="record.record_id !== operatorStore.records?.[0]?.record_id" class="fr-alert fr-alert--warning fr-alert--sm fr-my-2w">
           <p>
             Cette version du parcellaire n'est pas la plus récente.
           </p>
         </div>
-
-        <CertificationSummary v-if="permissions.isOc" :operator="operator" :record="record" :features="featureStore.collection" />
         <ValidationErrors />
-
         <FeaturesTable :edit-form="EditForm" :mass-actions="massActions" />
       </div>
 
@@ -55,14 +53,16 @@ import { computed, markRaw, ref, shallowRef } from 'vue'
 import { storeToRefs } from 'pinia'
 import { bounds } from '@/components/Features/index.js'
 
+import RecordHeader from '@/components/record/Header.vue'
+import CertificationSection from "@/components/record/CertificationSection.vue"
+
 import FeaturesTable from '@/components/Features/Table.vue'
 import MapContainer from '@/components/Map/MapContainer.vue'
 import GeojsonLayer from '@/components/Map/GeojsonLayer.vue'
 import baseStyle from '@/map-styles/base.json'
 import SingleItemOperatorForm from '@/components/Features/SingleItemOperatorForm.vue'
 import SingleItemCertificationBodyForm from "@/components/Features/SingleItemCertificationBodyForm.vue"
-import OperatorSummary from '@/components/Operator/Summary.vue'
-import CultureTypeModal from '@/components/Operator/CultureTypeModal.vue'
+import CultureTypeModal from '@/components/record/modals/CultureTypeModal.vue'
 
 import { useFeaturesStore, useOperatorStore, usePermissions, usePreferences, useRecordStore } from "@/stores/index.js"
 import surroundingsStyle from "@/map-styles/surroundings.json";
@@ -72,9 +72,8 @@ import FeaturesLayer from "@/components/Map/FeaturesLayer.vue"
 import LayerSelector from "@/components/Map/LayerSelector.vue"
 import CustomControls from "@/components/Map/CustomControls.vue"
 import satelliteStyle from "@/map-styles/satellite.json"
-import CertificationSummary from "@/components/Certification/Summary.vue"
-import EngagementDateModal from "@/components/Certification/EngagementDateModal.vue"
-import EngagementLevelModal from "@/components/Certification/EngagementLevelModal.vue"
+import EngagementDateModal from "@/components/record/modals/EngagementDateModal.vue"
+import EngagementLevelModal from "@/components/record/modals/EngagementLevelModal.vue"
 
 const featureStore = useFeaturesStore()
 const operatorStore = useOperatorStore()
diff --git a/src/pages/exploitations/[numeroBio]/[recordId]/modifier/[featureId].vue b/src/pages/exploitations/[numeroBio]/[recordId]/modifier/[featureId].vue
index 097e0c5d..25cf4739 100644
--- a/src/pages/exploitations/[numeroBio]/[recordId]/modifier/[featureId].vue
+++ b/src/pages/exploitations/[numeroBio]/[recordId]/modifier/[featureId].vue
@@ -89,7 +89,7 @@ import { useRouter } from "vue-router"
 import { feature, featureCollection } from "@turf/helpers"
 
 import baseStyle from "@/map-styles/base.json"
-import ParcellaireState from "@/components/Certification/State.vue"
+import ParcellaireState from "@/components/record/State.vue"
 import MapContainer from "@/components/Map/MapContainer.vue"
 import GeojsonLayer from "@/components/Map/GeojsonLayer.vue"
 import { useFeaturesStore, useOperatorStore, usePreferences, useRecordStore } from "@/stores/index.js"
diff --git a/src/pages/exploitations/[numeroBio]/index.vue b/src/pages/exploitations/[numeroBio]/index.vue
index 3d3ae249..72469315 100644
--- a/src/pages/exploitations/[numeroBio]/index.vue
+++ b/src/pages/exploitations/[numeroBio]/index.vue
@@ -156,7 +156,7 @@ meta:
 <script setup>
 import { defineAsyncComponent, markRaw, reactive, ref } from 'vue'
 
-import State from "@/components/Certification/State.vue"
+import State from "@/components/record/State.vue"
 import ActionDropdown from "@/components/ActionDropdown.vue"
 import EditVersionModal from "@/components/versions/EditVersionModal.vue"
 import DeleteVersionModal from "@/components/versions/DeleteVersionModal.vue"