From 9d4a12f6cbaca0f8387e46d32a921ca725872fe8 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Tue, 19 May 2026 12:05:03 +0200
Subject: [PATCH] feat(employee) : contract phase picker + past-mode banner

---
 frontend/pages/employees/[id].vue | 26 +++++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/frontend/pages/employees/[id].vue b/frontend/pages/employees/[id].vue
index 1ab73c0..ef4c472 100644
--- a/frontend/pages/employees/[id].vue
+++ b/frontend/pages/employees/[id].vue
@@ -30,6 +30,24 @@
                     <p class="text-[18px]">{{ employee.site?.name ?? '-' }}</p>
                 </div>
             </div>
+            <div v-if="showPicker" class="mt-3 flex items-center gap-3">
+                <label class="text-sm font-bold text-primary-500">Vue contrat</label>
+                <MalioSelect
+                    :model-value="selectedPhase?.id ?? null"
+                    :options="phaseOptions"
+                    group-class="w-[420px]"
+                    min-width=""
+                    @update:model-value="(v) => { if (v !== null) setSelectedPhase(Number(v)) }"
+                />
+            </div>
+            <div
+                v-if="isViewingPastPhase && selectedPhase"
+                class="mt-3 rounded-md border border-amber-300 bg-amber-100 px-4 py-2 text-sm text-amber-900"
+            >
+                Vous consultez l'historique
+                <strong>{{ formatPhaseLabel(selectedPhase) }}</strong>.
+                Les paiements de solde sont possibles ; l'édition d'absences et des stocks de report est désactivée.
+            </div>
             <div class="mt-[44px] border-b border-primary-500">
                 <div class="flex justify-center gap-16 text-2xl font-bold">
                     <button
@@ -253,6 +271,7 @@
 import { ref } from 'vue'
 import EmployeeYearlyHoursDrawer from '~/components/EmployeeYearlyHoursDrawer.vue'
 import { usePdfPrinter } from '~/composables/usePdfPrinter'
+import { formatPhaseLabel } from '~/composables/useEmployeeContractPhase'
 
 const { printPdf } = usePdfPrinter()
 const isYearlyHoursDrawerOpen = ref(false)
@@ -342,7 +361,12 @@ const {
     isObservationLoading,
     submitCreateObservation,
     submitUpdateObservation,
-    submitDeleteObservation
+    submitDeleteObservation,
+    selectedPhase,
+    showPicker,
+    phaseOptions,
+    setSelectedPhase,
+    isViewingPastPhase,
 } = useEmployeeDetailPage()
 
 const handleYearlyHoursPrint = async (payload: { year: number; month: number | null }) => {