feat : ajout des frais kms + alignment du style de l'application

frontend/pages/employees/[id].vue

@@ -55,6 +55,16 @@
                         <Icon name="mdi:schedule" size="24" class="align-self"/>
                         RTT
                     </button>
+                    <button
+                        class="pb-2 border-b-2 flex items-center gap-3"
+                        :class="activeTab === 'mileage'
+                            ? 'border-primary-500 text-primary-500'
+                            : 'border-transparent text-primary-500/50 hover:text-primary-500'"
+                        @click="activeTab = 'mileage'"
+                    >
+                        <Icon name="mdi:car-outline" size="24" class="align-self"/>
+                        Frais Kms
+                    </button>
                 </div>
             </div>
             <div class="min-h-0 flex-1">
@@ -117,6 +127,20 @@
                     </div>
                     <EmployeesRttTab v-else class="h-full" :summary="rttSummary" @submit-rtt-payment="submitRttPayment" />
                 </div>
+                <div v-else-if="activeTab === 'mileage'" class="h-full">
+                    <div v-if="isMileageLoading" class="mt-6 rounded-lg border border-neutral-200 bg-white p-6 text-md text-neutral-600">
+                        Chargement...
+                    </div>
+                    <EmployeesMileageTab
+                        v-else
+                        class="h-full"
+                        :allowances="mileageAllowances"
+                        :api-base="mileageApiBase"
+                        @create="submitCreateMileage"
+                        @update="submitUpdateMileage"
+                        @delete="submitDeleteMileage"
+                    />
+                </div>
             </div>
         </div>
     </div>
@@ -173,7 +197,13 @@ const {
     addSuspensionForm,
     currentActiveContractPeriodId,
     isLeaveLoading,
-    isRttLoading
+    isRttLoading,
+    mileageAllowances,
+    isMileageLoading,
+    mileageApiBase,
+    submitCreateMileage,
+    submitUpdateMileage,
+    submitDeleteMileage
 } = useEmployeeDetailPage()
 
 useHead(() => ({