feat : ajout d'une colonne montant dans les Frais employé

frontend/components/employees/MileageTab.vue

@@ -2,9 +2,10 @@
     <section class="mt-8">
         <div class="overflow-hidden bg-white">
             <div
-                class="grid grid-cols-4 border border-black bg-tertiary-500 px-6 py-3 text-[20px] font-semibold text-black rounded-t-md">
+                class="grid grid-cols-5 border border-black bg-tertiary-500 px-6 py-3 text-[20px] font-semibold text-black rounded-t-md">
                 <p>Mois</p>
                 <p>Nombre de Km</p>
+                <p>Montant €</p>
                 <p>Commentaire</p>
                 <p>Justificatif</p>
             </div>
@@ -15,11 +16,12 @@
                 <div
                     v-for="item in allowances"
                     :key="item.id"
-                    class="grid grid-cols-4 border-b border-primary-500 px-6 py-3 text-md font-bold text-primary-500 last:border-b-0 cursor-pointer hover:bg-tertiary-500"
+                    class="grid grid-cols-5 border-b border-primary-500 px-6 py-3 text-md font-bold text-primary-500 last:border-b-0 cursor-pointer hover:bg-tertiary-500"
                     @click="onOpenEditDrawer(item)"
                 >
                     <p>{{ formatMonth(item.month) }}</p>
                     <p>{{ item.kilometers }}</p>
+                    <p>{{ item.amount ? item.amount + ' €' : '-' }}</p>
                     <p>{{ item.comment ?? '-' }}</p>
                     <p>
                         <a
@@ -48,7 +50,7 @@
         </div>
 
 
-        <AppDrawer v-model="isDrawerOpen" title="Frais Kms">
+        <AppDrawer v-model="isDrawerOpen" title="Frais">
             <form class="space-y-4" @submit.prevent="onSubmit">
                 <div>
                     <label class="text-md font-semibold text-neutral-700" for="mileage-month">
@@ -64,7 +66,7 @@
 
                 <div>
                     <label class="text-md font-semibold text-neutral-700" for="mileage-kilometers">
-                        Nombre de Km <span class="text-red-600">*</span>
+                        Nombre de Km
                     </label>
                     <input
                         id="mileage-kilometers"
@@ -76,6 +78,21 @@
                     />
                 </div>
 
+                <div>
+                    <label class="text-md font-semibold text-neutral-700" for="mileage-amount">
+                        Montant (€)
+                    </label>
+                    <input
+                        id="mileage-amount"
+                        v-model.number="form.amount"
+                        type="number"
+                        step="0.01"
+                        min="0"
+                        class="mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20"
+                    />
+                    <p class="mt-1 text-sm text-neutral-500">Au moins un des deux champs doit être rempli</p>
+                </div>
+
                 <div>
                     <label class="text-md font-semibold text-neutral-700" for="mileage-receipt">
                         Justificatif
@@ -148,8 +165,8 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-    (event: 'create', data: { month: string; kilometers: number; comment?: string }, file?: File): void
-    (event: 'update', id: number, data: { month: string; kilometers: number; comment?: string }, file?: File): void
+    (event: 'create', data: { month: string; kilometers: number; amount: number; comment?: string }, file?: File): void
+    (event: 'update', id: number, data: { month: string; kilometers: number; amount: number; comment?: string }, file?: File): void
     (event: 'delete', id: number): void
 }>()
 
@@ -168,11 +185,12 @@ const currentYearMonth = () => {
 const form = reactive({
     month: currentYearMonth(),
     kilometers: 0,
+    amount: 0,
     comment: ''
 })
 
 const isFormValid = computed(() => {
-    return form.month && form.kilometers > 0 && !fileError.value
+    return form.month && (form.kilometers > 0 || form.amount > 0) && !fileError.value
 })
 
 const monthLabels: Record<number, string> = {
@@ -201,6 +219,7 @@ const formatMonth = (dateStr: string): string => {
 const resetForm = () => {
     form.month = currentYearMonth()
     form.kilometers = 0
+    form.amount = 0
     form.comment = ''
     selectedFile.value = undefined
     fileError.value = ''
@@ -222,6 +241,7 @@ const onOpenEditDrawer = (item: MileageAllowance) => {
     // Extract YYYY-MM from YYYY-MM-DD
     form.month = item.month.substring(0, 7)
     form.kilometers = item.kilometers
+    form.amount = item.amount
     form.comment = item.comment ?? ''
     selectedFile.value = undefined
     if (fileInput.value) {
@@ -247,6 +267,7 @@ const onSubmit = () => {
     const data = {
         month: `${form.month}-01`,
         kilometers: form.kilometers,
+        amount: form.amount,
         comment: form.comment || undefined
     }