feat : ajout des RTT payés

frontend/components/employees/RttTab.vue

@@ -1,8 +1,8 @@
 <template>
   <section class="flex h-full min-h-0 flex-col overflow-hidden pt-8">
     <div class="flex gap-10 justify-center items-center bg-primary-500 rounded-md text-white py-5 text-[20px]">
-      <p><span class="font-semibold uppercase">RTT à la date du jour :</span> {{ formatDays(summary?.availableMinutes ?? 0) }}</p>
-        <button class="bg-white rounded-md text-primary-500 font-bold px-6 py-1">
+      <p><span class="font-semibold uppercase">RTT à la date du jour :</span> {{ formatMinutes(summary?.availableMinutes ?? 0) }}</p>
+        <button class="bg-white rounded-md text-primary-500 font-bold px-6 py-1" @click="openNewPayment">
             <Icon name="mdi:plus-thick" size="16"/>
             Payer les RTT
         </button>
@@ -30,22 +30,70 @@
             </template>
             <div class="py-[6px] pl-3 border-r border-b border-primary-500 font-semibold">Total</div>
             <div class="py-[6px] pl-3 border-b border-primary-500 font-semibold">{{ formatMinutes(month.totalMinutes) }}</div>
-            <div class="py-[6px] pl-3 border-r border-primary-500">Heure payée</div>
-            <div class="py-[6px] pl-3">0h</div>
+            <div class="py-[6px] pl-3 border-r border-b border-primary-500">Heure payée 25%</div>
+            <div class="py-[6px] pl-3 border-b border-primary-500 flex gap-3 items-center cursor-pointer hover:bg-primary-500/10"
+                 @click="openEditPayment(month.month, '25')"
+                 title="Modifier les heures payées"
+            >
+                <p>{{ formatMinutes(getMonthPaid25(month.month)) }}</p>
+                <Icon name="mdi:pencil" size="16" class="self-center"/>
+            </div>
+            <div class="py-[6px] pl-3 border-r border-primary-500">Heure payée 50%</div>
+            <div class="py-[6px] px-3 flex gap-3 items-center cursor-pointer hover:bg-primary-500/10"
+                 @click="openEditPayment(month.month, '50')"
+                 title="Modifier les heures payées"
+            >
+                <p>{{ formatMinutes(getMonthPaid50(month.month)) }}</p>
+                <Icon name="mdi:pencil" size="16" class="self-center"/>
+            </div>
           </div>
         </div>
       </div>
     </div>
+    <AppDrawer v-model="isPaymentDrawerOpen" :title="isEditMode ? 'Modifier le paiement RTT' : 'Payer des RTT'">
+      <form @submit.prevent="onSubmitPayment">
+        <div class="mb-4">
+          <label class="block text-sm font-medium text-neutral-700">Mois</label>
+          <select v-model.number="paymentForm.month" :disabled="isEditMode" class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-md text-neutral-900 disabled:opacity-50 disabled:cursor-not-allowed">
+            <option v-for="m in orderedMonthOptions" :key="m.value" :value="m.value">{{ m.label }}</option>
+          </select>
+        </div>
+        <div class="mb-4">
+          <label class="block text-sm font-medium text-neutral-700">Nombre d'heures</label>
+          <input v-model.number="paymentForm.hours" type="number" step="0.5" 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" />
+        </div>
+        <div class="mb-6">
+          <label class="block text-sm font-medium text-neutral-700">Taux</label>
+          <select v-model="paymentForm.rate" :disabled="isEditMode" class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-md text-neutral-900 disabled:opacity-50 disabled:cursor-not-allowed">
+            <option value="25">25%</option>
+            <option value="50">50%</option>
+          </select>
+        </div>
+        <div class="flex justify-end gap-3">
+          <button type="button" class="rounded-md border border-neutral-300 px-4 py-2 text-sm font-medium text-neutral-700 hover:bg-neutral-50" @click="isPaymentDrawerOpen = false">Annuler</button>
+          <button type="submit" class="rounded-md bg-primary-500 px-4 py-2 text-sm font-medium text-white hover:bg-primary-600">Enregistrer</button>
+        </div>
+      </form>
+    </AppDrawer>
   </section>
 </template>
 
 <script setup lang="ts">
 import type { EmployeeRttSummary } from '~/services/dto/employee-rtt-summary'
+import AppDrawer from '~/components/AppDrawer.vue'
 
 const props = defineProps<{
   summary: EmployeeRttSummary | null
 }>()
 
+const emit = defineEmits<{
+  (event: 'submit-rtt-payment', month: number, minutes: number, rate: '25' | '50'): void
+}>()
+
+const isPaymentDrawerOpen = ref(false)
+const isEditMode = ref(false)
+const paymentForm = reactive({ month: 1, hours: 0, rate: '25' as '25' | '50' })
+
 const monthLabels = [
   'Janvier',
   'Fevrier',
@@ -61,6 +109,32 @@ const monthLabels = [
   'Decembre'
 ] as const
 
+const orderedMonthOptions = [
+  { value: 6, label: 'Juin' },
+  { value: 7, label: 'Juillet' },
+  { value: 8, label: 'Aout' },
+  { value: 9, label: 'Septembre' },
+  { value: 10, label: 'Octobre' },
+  { value: 11, label: 'Novembre' },
+  { value: 12, label: 'Decembre' },
+  { value: 1, label: 'Janvier' },
+  { value: 2, label: 'Fevrier' },
+  { value: 3, label: 'Mars' },
+  { value: 4, label: 'Avril' },
+  { value: 5, label: 'Mai' }
+]
+
+const paymentsByMonth = computed(() => {
+  const map = new Map<number, { paid25: number; paid50: number }>()
+  for (const mp of props.summary?.monthPayments ?? []) {
+    map.set(mp.month, { paid25: mp.paidMinutes25, paid50: mp.paidMinutes50 })
+  }
+  return map
+})
+
+const getMonthPaid25 = (month: number) => paymentsByMonth.value.get(month)?.paid25 ?? 0
+const getMonthPaid50 = (month: number) => paymentsByMonth.value.get(month)?.paid50 ?? 0
+
 const months = computed(() => {
   type DisplayWeek = {
     key: string
@@ -115,12 +189,29 @@ const formatMinutes = (minutes: number) => {
   const hours = Math.floor(abs / 60)
   const rest = abs % 60
   const sign = minutes < 0 ? '-' : ''
-  return `${sign}${hours}h${rest.toString().padStart(2, '0')}`
+  return `${sign}${hours.toString().padStart(2, '0')}h${rest.toString().padStart(2, '0')}`
 }
 
-const formatDays = (minutes: number) => {
-  const days = minutes / 420
-  const sign = days < 0 ? '-' : ''
-  return `${sign}${Math.abs(days).toFixed(2)} j`
+const openNewPayment = () => {
+  isEditMode.value = false
+  paymentForm.month = 6
+  paymentForm.hours = 0
+  paymentForm.rate = '25'
+  isPaymentDrawerOpen.value = true
+}
+
+const openEditPayment = (month: number, rate: '25' | '50') => {
+  isEditMode.value = true
+  paymentForm.month = month
+  paymentForm.rate = rate
+  const currentMinutes = rate === '25' ? getMonthPaid25(month) : getMonthPaid50(month)
+  paymentForm.hours = currentMinutes / 60
+  isPaymentDrawerOpen.value = true
+}
+
+const onSubmitPayment = () => {
+  const minutes = Math.round(paymentForm.hours * 60)
+  emit('submit-rtt-payment', paymentForm.month, minutes, paymentForm.rate)
+  isPaymentDrawerOpen.value = false
 }
 </script>