feat : ajout des suspensions et des jours de présence

frontend/components/AppDrawer.vue

@@ -17,7 +17,7 @@
             ✕
           </button>
         </div>
-        <div class="p-6">
+        <div class="overflow-y-auto p-6" style="max-height: calc(100% - 65px)">
           <slot />
         </div>
       </div>

frontend/components/employees/ContractTab.vue

@@ -31,7 +31,7 @@
         :disabled="isContractSubmitting || !canCloseCurrentContract"
         @click="onOpenCloseContractDrawer"
       >
-        Clôturer
+        Modifier
       </button>
       <button
         type="button"
@@ -43,7 +43,30 @@
       </button>
     </div>
 
-    <AppDrawer :model-value="isContractDrawerOpen" title="Clôturer le contrat" @update:model-value="onUpdateContractDrawerOpen">
+    <AppDrawer :model-value="isContractDrawerOpen" title="Modifier le contrat" @update:model-value="onUpdateContractDrawerOpen">
+      <div class="mb-4 flex border-b border-neutral-200">
+          <button
+              type="button"
+              class="pb-2 px-4 border-b-2 font-semibold"
+              :class="drawerTab === 'close'
+                  ? 'border-primary-500 text-primary-500'
+                  : 'border-transparent text-neutral-400 hover:text-neutral-600'"
+              @click="drawerTab = 'close'"
+          >
+              Clôturer
+          </button>
+          <button
+              type="button"
+              class="pb-2 px-4 border-b-2 font-semibold"
+              :class="drawerTab === 'suspend'
+                  ? 'border-primary-500 text-primary-500'
+                  : 'border-transparent text-neutral-400 hover:text-neutral-600'"
+              @click="drawerTab = 'suspend'"
+          >
+              Suspendre
+          </button>
+      </div>
+      <div v-if="drawerTab === 'close'">
       <form class="space-y-4" @submit.prevent="onSubmitCloseContract">
         <div>
           <label class="text-md font-semibold text-neutral-700" for="contract-nature">
@@ -128,6 +151,62 @@
           </button>
         </div>
       </form>
+      </div>
+
+      <div v-if="drawerTab === 'suspend'" class="space-y-6">
+          <div
+              v-for="(form, index) in suspensionForms"
+              :key="form.id ?? `new-${index}`"
+              class="space-y-4 rounded-lg border border-neutral-200 p-4"
+          >
+              <div>
+                  <label class="text-md font-semibold text-neutral-700">
+                      Date de début <span class="text-red-600">*</span>
+                  </label>
+                  <input
+                      v-model="form.startDate"
+                      type="date"
+                      class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20"
+                  />
+              </div>
+              <div>
+                  <label class="text-md font-semibold text-neutral-700">
+                      Date de fin
+                  </label>
+                  <input
+                      v-model="form.endDate"
+                      type="date"
+                      class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20"
+                  />
+              </div>
+              <div>
+                  <label class="text-md font-semibold text-neutral-700">
+                      Commentaire
+                  </label>
+                  <textarea
+                      v-model="form.comment"
+                      rows="3"
+                      class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20"
+                  />
+              </div>
+              <button
+                  type="button"
+                  class="w-full rounded-md bg-primary-500 px-4 py-2 text-base font-semibold text-white transition hover:bg-secondary-500 disabled:cursor-not-allowed disabled:opacity-60"
+                  :disabled="!form.startDate || isSuspensionSubmitting"
+                  @click="onSubmitSuspension(index)"
+              >
+                  {{ form.id ? 'Modifier' : 'Ajouter' }}
+              </button>
+          </div>
+
+          <button
+              type="button"
+              class="w-full rounded-md border-2 border-dashed border-neutral-300 px-4 py-3 text-base font-semibold text-neutral-500 transition hover:border-primary-500 hover:text-primary-500"
+              @click="onAddSuspensionForm"
+          >
+              + Ajouter une suspension
+          </button>
+      </div>
     </AppDrawer>
 
     <AppDrawer :model-value="isCreateContractDrawerOpen" title="Ajouter un contrat" @update:model-value="onUpdateCreateContractDrawerOpen">
@@ -195,6 +274,13 @@
 import type { Contract } from '~/services/dto/contract'
 import type { ContractHistoryItem } from '~/services/dto/employee'
 
+type SuspensionForm = {
+  id: number | null
+  startDate: string
+  endDate: string
+  comment: string
+}
+
 type ContractForm = {
   contractId: number | ''
   contractName: string
@@ -213,7 +299,7 @@ type CreateContractForm = {
   endDate: string
 }
 
-defineProps<{
+const props = defineProps<{
   contractHistory: ContractHistoryItem[]
   contractNatureLabel: (value?: 'CDI' | 'CDD' | 'INTERIM') => string
   contractHistoryLabel: (item: ContractHistoryItem) => string
@@ -245,5 +331,16 @@ defineProps<{
   onUpdateCreateContractDrawerOpen: (open: boolean) => void
   onSubmitCloseContract: () => void
   onSubmitCreateContract: () => void
+  suspensionForms: SuspensionForm[]
+  isSuspensionSubmitting: boolean
+  onSubmitSuspension: (index: number) => void
+  onAddSuspensionForm: () => void
+  currentContractPeriodId?: number | null
 }>()
+
+const drawerTab = ref<'close' | 'suspend'>('close')
+
+watch(() => props.isContractDrawerOpen, (open) => {
+  if (open) drawerTab.value = 'close'
+})
 </script>

frontend/components/employees/LeaveTab.vue

@@ -29,7 +29,7 @@
         </div>
         <div class="mt-8 min-h-0 flex-1 overflow-y-auto pr-2">
             <div class="grid grid-cols-4 gap-10">
-                <div v-for="month in months" :key="month.label" class="rounded-md bg-tertiary-500 text-primary-500">
+                <div v-for="month in months" :key="month.label" class="rounded-md bg-tertiary-500 text-primary-500 flex flex-col justify-between">
                     <div class="flex justify-center rounded-t-md bg-primary-500 py-1 font-bold uppercase text-white">
                         {{ month.label }}
                     </div>
@@ -54,6 +54,7 @@
                             </div>
                         </template>
                     </div>
+                    <div class="px-2 py-2 text-center border-t border-primary-500">Jours de présence : {{ summary?.presenceDaysByMonth?.[month.monthKey] ?? 0 }}</div>
                 </div>
             </div>
         </div>
@@ -259,9 +260,12 @@ const months = computed(() => {
             cells.push(null)
         }
 
+        const monthKey = `${monthYear}-${String(monthIndex + 1).padStart(2, '0')}`
+
         return {
             label,
-            cells
+            cells,
+            monthKey
         }
     })
 })