Gestion du changement de type de contrat + correction du calcule des RTT sur un contrat qui commence en milieu de semaine (#19)

| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|                  |                 |

## Description de la PR

## Modification du .env

## Check list

- [x] Pas de régression
- [x] TU/TI/TF rédigée
- [x] TU/TI/TF OK
- [x] CHANGELOG modifié

Reviewed-on: #19
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>

frontend/pages/employees/[id].vue

@@ -26,10 +26,28 @@
                     <p>Date d'entrée : {{ employee.entryDate ? employee.entryDate.split('-').reverse().join('/') : '-' }}</p>
                 </div>
                 <div class="text-right">
-                    <p class="font-bold text-[22px]">{{ contractNatureLabel(employee.currentContractNature) }} {{ employeeContractWorkLabel }}{{ forfaitRemainingDaysLabel }}</p>
+                    <p class="font-bold text-[22px]">{{ contractNatureLabel(employee.currentContractNature) }} {{ employeeContractWorkLabel }}{{ forfaitRemainingDaysLabel }}{{ nonForfaitPresenceLabel }}</p>
                     <p class="text-[18px]">{{ employee.site?.name ?? '-' }}</p>
                 </div>
             </div>
+            <div v-if="showPicker" class="mt-3 flex items-center gap-3">
+                <MalioSelect
+                    label="Contrat"
+                    :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
@@ -179,6 +197,7 @@
                         :selected-year="selectedRttYear"
                         :available-years="availableRttYears"
                         :current-year="currentRttYear"
+                        :selected-phase="selectedPhase"
                         @submit-rtt-payment="submitRttPayment"
                         @update-selected-year="setSelectedRttYear"
                     />
@@ -253,6 +272,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)
@@ -279,6 +299,7 @@ const {
     contractHistory,
     employeeContractWorkLabel,
     forfaitRemainingDaysLabel,
+    nonForfaitPresenceLabel,
     contractForm,
     createContractForm,
     isContractDrawerOpen,
@@ -342,7 +363,12 @@ const {
     isObservationLoading,
     submitCreateObservation,
     submitUpdateObservation,
-    submitDeleteObservation
+    submitDeleteObservation,
+    selectedPhase,
+    showPicker,
+    phaseOptions,
+    setSelectedPhase,
+    isViewingPastPhase,
 } = useEmployeeDetailPage()
 
 const handleYearlyHoursPrint = async (payload: { year: number; month: number | null }) => {