feat : Ajout du système de RTT sur la page employé avec le repport annuel des heures

frontend/components/employees/RttTab.vue

@@ -1,80 +1,212 @@
 <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">
-      <p class="text-[20px]"><span class="font-semibold">RTT à la date du jour :</span> {{ formatMinutes(summary?.availableMinutes ?? 0) }}</p>
-        <button class="flex justify-center items-center gap-2 bg-white text-primary-500 font-bold w-[150px] rounded-md py-[1px] text-md" @click="openNewPayment">
-            + Payer les RTT
-        </button>
-    </div>
-    <div class="mt-8 min-h-0 flex-1 overflow-y-auto pr-2">
-      <div class="grid grid-cols-4 gap-10 pb-4">
-        <div
-          v-for="month in months"
-          :key="month.month"
-          class="rounded-md bg-tertiary-500 text-primary-500"
+    <!-- Header bar -->
+    <div class="flex items-center justify-between rounded-t-md bg-tertiary-500 px-5 py-4 text-black border border-primary-500">
+      <div class="flex items-center">
+        <button
+          class="rounded px-2 py-1 font-bold hover:bg-primary-600 disabled:opacity-40 disabled:cursor-not-allowed flex items-center"
+          :disabled="currentMonthIndex === 0"
+          @click="currentMonthIndex--"
         >
-          <div class="flex justify-center rounded-t-md bg-primary-500 py-3 font-bold text-white text-[18px]">
-            {{ month.label }}
-          </div>
-          <div class="grid grid-cols-[70%_30%] text-[18px] border border-primary-500">
-            <template v-for="week in month.weeks" :key="week.key">
-              <div class="py-[6px] pl-3 border-r border-b border-primary-500">
-                <span v-if="week.isEmpty">&nbsp;</span>
-                <span v-else>Semaine {{ week.weekNumber }}</span>
-              </div>
-              <div class="py-[6px] pl-3 border-b border-primary-500">
-                <span v-if="week.isEmpty">&nbsp;</span>
-                <span v-else>{{ formatMinutes(week.recoveryMinutes) }}</span>
-              </div>
-            </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-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>
-                <div class="flex justify-center items-center bg-primary-500 rounded-md p-1">
-                    <Icon name="mdi:pencil" size="16" class="self-center text-white" />
-                </div>
-            </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>
-                <div class="flex justify-center items-center bg-primary-500 rounded-md p-1">
-                    <Icon name="mdi:pencil" size="16" class="self-center text-white" />
-                </div>
-            </div>
-          </div>
-        </div>
+          <Icon name="mdi:chevron-left" size="24"/>
+        </button>
+        <span class="text-lg font-bold tracking-wide min-w-[170px] text-center">
+          {{ currentMonthLabel }} {{ currentYear }}
+        </span>
+        <button
+          class="rounded px-2 py-1 font-bold hover:bg-primary-600 disabled:opacity-40 disabled:cursor-not-allowed flex items-center"
+          :disabled="currentMonthIndex === 11"
+          @click="currentMonthIndex++"
+        >
+            <Icon name="mdi:chevron-right" size="24"/>
+        </button>
       </div>
+      <p class="text-[16px]">
+        <span class="font-semibold">RTT À LA DATE DU JOUR :</span>
+        {{ formatMinutes(summary?.availableMinutes ?? 0) }}
+      </p>
+        <div class="flex justify-center">
+            <button
+                class="rounded-md bg-primary-500 px-8 py-2 font-bold text-white hover:bg-primary-600"
+                @click="openPaymentDrawer"
+            >
+                + Payer les RRT
+            </button>
+        </div>
     </div>
-    <AppDrawer v-model="isPaymentDrawerOpen" :title="isEditMode ? 'Modifier le paiement RTT' : 'Payer des RTT'">
+
+    <!-- Table -->
+    <div class="min-h-0 flex-1 overflow-y-auto">
+      <table class="w-full table-fixed border-collapse text-[18px]">
+        <colgroup>
+          <col />
+          <col class="w-[14%]" />
+          <col class="w-[14%]" />
+          <col class="w-[14%]" />
+          <col class="w-[14%]" />
+          <col class="w-[14%]" />
+          <col class="w-[14%]" />
+        </colgroup>
+        <thead>
+          <tr>
+            <th class="px-5 py-[10px] text-left font-bold text-primary-500 border border-primary-500">Semaine</th>
+            <th class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-r-2">Heure</th>
+            <th class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">Base</th>
+            <th class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-r-2">25%</th>
+            <th class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">Base</th>
+            <th class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-r-2">50%</th>
+            <th class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">Total</th>
+          </tr>
+        </thead>
+        <tbody>
+          <!-- Report row (only on June when carry > 0) -->
+          <tr v-if="showReportRow">
+            <td class="px-5 py-[10px] font-bold text-primary-500 border border-primary-500">Report</td>
+            <td class="px-4 py-[10px] text-center text-neutral-500 border border-primary-500 border-r-2">-</td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">{{ formatMinutes(summary!.carryBase25Minutes) }}</td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-r-2">{{ formatMinutes(summary!.carryBonus25Minutes) }}</td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">{{ formatMinutes(summary!.carryBase50Minutes) }}</td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-r-2">{{ formatMinutes(summary!.carryBonus50Minutes) }}</td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">{{ formatMinutes(summary!.carryFromPreviousYearMinutes) }}</td>
+          </tr>
+
+          <!-- Week rows (always 5) -->
+          <tr
+            v-for="(week, idx) in paddedWeeks"
+            :key="week ? week.weekStart : `empty-${idx}`"
+          >
+            <td class="px-5 py-[10px] font-bold text-primary-500 border border-primary-500">
+              <span v-if="week">Semaine {{ week.weekNumber }}</span>
+              <span v-else>&nbsp;</span>
+            </td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-r-2">
+              <span v-if="week">{{ formatMinutes(week.overtimeMinutes) }}</span>
+              <span v-else>0 h</span>
+            </td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">
+              <span v-if="week">{{ formatMinutes(week.base25Minutes) }}</span>
+              <span v-else>0 h</span>
+            </td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-r-2">
+              <span v-if="week">{{ formatMinutes(week.bonus25Minutes) }}</span>
+              <span v-else>0 h</span>
+            </td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">
+              <span v-if="week">{{ formatMinutes(week.base50Minutes) }}</span>
+              <span v-else>0 h</span>
+            </td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-r-2">
+              <span v-if="week">{{ formatMinutes(week.bonus50Minutes) }}</span>
+              <span v-else>0 h</span>
+            </td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">
+              <span v-if="week">{{ formatMinutes(week.totalMinutes) }}</span>
+              <span v-else>0 h</span>
+            </td>
+          </tr>
+
+          <!-- Total row -->
+          <tr>
+            <td class="px-5 py-[10px] font-bold text-primary-500 border border-primary-500 border-t-2">Total</td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-r-2 border-t-2">{{ formatMinutes(totals.overtime) }}</td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-t-2">{{ formatMinutes(totals.base25) }}</td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-r-2 border-t-2">{{ formatMinutes(totals.bonus25) }}</td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-t-2">{{ formatMinutes(totals.base50) }}</td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-r-2 border-t-2">{{ formatMinutes(totals.bonus50) }}</td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-t-2">{{ formatMinutes(totals.total) }}</td>
+          </tr>
+
+          <!-- Payé row -->
+          <tr>
+            <td class="px-5 py-[10px] font-bold text-primary-500 border border-primary-500">Payé</td>
+            <td class="px-4 py-[10px] text-center text-neutral-500 border border-primary-500 border-r-2">-</td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">{{ currentPayment ? formatMinutes(-currentPayment.paidBase25Minutes) : '0 h' }}</td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-r-2">{{ currentPayment ? formatMinutes(-currentPayment.paidBonus25Minutes) : '0 h' }}</td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">{{ currentPayment ? formatMinutes(-currentPayment.paidBase50Minutes) : '0 h' }}</td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-r-2">{{ currentPayment ? formatMinutes(-currentPayment.paidBonus50Minutes) : '0 h' }}</td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">{{ formatMinutes(paidTotal) }}</td>
+          </tr>
+
+          <!-- Reste row -->
+          <tr>
+            <td class="px-5 py-[10px] font-bold text-primary-500 border border-primary-500">Reste</td>
+            <td class="px-4 py-[10px] text-center text-neutral-500 border border-primary-500 border-r-2">-</td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">{{ formatMinutes(totals.base25 - (currentPayment?.paidBase25Minutes ?? 0)) }}</td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-r-2">{{ formatMinutes(totals.bonus25 - (currentPayment?.paidBonus25Minutes ?? 0)) }}</td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">{{ formatMinutes(totals.base50 - (currentPayment?.paidBase50Minutes ?? 0)) }}</td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-r-2">{{ formatMinutes(totals.bonus50 - (currentPayment?.paidBonus50Minutes ?? 0)) }}</td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">{{ formatMinutes(resteTotal) }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Payment Drawer -->
+    <AppDrawer v-model="isPaymentDrawerOpen" title="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">
+          <select
+            v-model.number="paymentForm.month"
+            class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-md text-neutral-900"
+          >
             <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" />
+          <label class="block text-sm font-medium text-neutral-700">Base 25% (heures)</label>
+          <input
+            v-model.number="paymentForm.base25Hours"
+            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-4">
+          <label class="block text-sm font-medium text-neutral-700">Heures 25% (heures)</label>
+          <input
+            v-model.number="paymentForm.bonus25Hours"
+            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-4">
+          <label class="block text-sm font-medium text-neutral-700">Base 50% (heures)</label>
+          <input
+            v-model.number="paymentForm.base50Hours"
+            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>
+          <label class="block text-sm font-medium text-neutral-700">Heures 50% (heures)</label>
+          <input
+            v-model.number="paymentForm.bonus50Hours"
+            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="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>
+          <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>
@@ -82,7 +214,7 @@
 </template>
 
 <script setup lang="ts">
-import type { EmployeeRttSummary } from '~/services/dto/employee-rtt-summary'
+import type { EmployeeRttSummary, EmployeeRttWeekSummary } from '~/services/dto/employee-rtt-summary'
 import AppDrawer from '~/components/AppDrawer.vue'
 
 const props = defineProps<{
@@ -90,27 +222,27 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  (event: 'submit-rtt-payment', month: number, minutes: number, rate: '25' | '50'): void
+  (event: 'submit-rtt-payment', month: number, base25Minutes: number, bonus25Minutes: number, base50Minutes: number, bonus50Minutes: number): void
 }>()
 
-const isPaymentDrawerOpen = ref(false)
-const isEditMode = ref(false)
-const paymentForm = reactive({ month: 1, hours: 0, rate: '25' as '25' | '50' })
+// --- Month navigation ---
 
-const monthLabels = [
-  'Janvier',
-  'Fevrier',
-  'Mars',
-  'Avril',
-  'Mai',
-  'Juin',
-  'Juillet',
-  'Aout',
-  'Septembre',
-  'Octobre',
-  'Novembre',
-  'Decembre'
-] as const
+const orderedMonths = [6, 7, 8, 9, 10, 11, 12, 1, 2, 3, 4, 5] as const
+
+const monthLabels: Record<number, string> = {
+  1: 'JANVIER',
+  2: 'FEVRIER',
+  3: 'MARS',
+  4: 'AVRIL',
+  5: 'MAI',
+  6: 'JUIN',
+  7: 'JUILLET',
+  8: 'AOUT',
+  9: 'SEPTEMBRE',
+  10: 'OCTOBRE',
+  11: 'NOVEMBRE',
+  12: 'DECEMBRE',
+}
 
 const orderedMonthOptions = [
   { value: 6, label: 'Juin' },
@@ -124,97 +256,152 @@ const orderedMonthOptions = [
   { value: 2, label: 'Fevrier' },
   { value: 3, label: 'Mars' },
   { value: 4, label: 'Avril' },
-  { value: 5, label: 'Mai' }
+  { 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
+// Initialize to current month's position in the exercise
+const today = new Date()
+const todayMonth = today.getMonth() + 1
+const initialIndex = orderedMonths.indexOf(todayMonth as (typeof orderedMonths)[number])
+const currentMonthIndex = ref(initialIndex >= 0 ? initialIndex : 0)
+
+const currentMonth = computed(() => orderedMonths[currentMonthIndex.value])
+
+const currentMonthLabel = computed(() => monthLabels[currentMonth.value])
+
+const currentYear = computed(() => {
+  if (!props.summary) return ''
+  return currentMonth.value >= 6 ? props.summary.year - 1 : props.summary.year
 })
 
-const getMonthPaid25 = (month: number) => paymentsByMonth.value.get(month)?.paid25 ?? 0
-const getMonthPaid50 = (month: number) => paymentsByMonth.value.get(month)?.paid50 ?? 0
+// --- Weeks for current month ---
 
-const months = computed(() => {
-  type DisplayWeek = {
-    key: string
-    weekNumber: number
-    recoveryMinutes: number
-    isEmpty?: boolean
-  }
-
-  const byMonth = new Map<number, { month: number; label: string; weeks: DisplayWeek[]; totalMinutes: number }>()
-  const orderedMonths = [6, 7, 8, 9, 10, 11, 12, 1, 2, 3, 4, 5]
-  for (const month of orderedMonths) {
-    byMonth.set(month, {
-      month,
-      label: monthLabels[month - 1],
-      weeks: [],
-      totalMinutes: 0
-    })
-  }
-
-  for (const week of props.summary?.weeks ?? []) {
-    const month = byMonth.get(week.month)
-    if (!month) continue
-
-    month.weeks.push({
-      key: week.weekStart,
-      weekNumber: week.weekNumber,
-      recoveryMinutes: week.recoveryMinutes
-    })
-    month.totalMinutes += week.recoveryMinutes
-  }
-
-  return orderedMonths
-    .map((monthNumber) => byMonth.get(monthNumber)!)
-    .filter(Boolean)
-    .map((month) => {
-      const minRows = 5
-      const missing = Math.max(0, minRows - month.weeks.length)
-      for (let i = 0; i < missing; i += 1) {
-        month.weeks.push({
-          key: `empty-${month.month}-${i}`,
-          weekNumber: 0,
-          recoveryMinutes: 0,
-          isEmpty: true
-        })
-      }
-      return month
-    })
+const weeksForCurrentMonth = computed((): EmployeeRttWeekSummary[] => {
+  if (!props.summary) return []
+  return props.summary.weeks.filter((w) => w.month === currentMonth.value)
 })
 
-const formatMinutes = (minutes: number) => {
+const paddedWeeks = computed((): (EmployeeRttWeekSummary | null)[] => {
+  const weeks = weeksForCurrentMonth.value
+  const padded: (EmployeeRttWeekSummary | null)[] = [...weeks]
+  while (padded.length < 5) {
+    padded.push(null)
+  }
+  return padded
+})
+
+// --- Report row ---
+
+const reportMonth = computed(() => {
+  if (!props.summary) return 6
+  const carryMonth = props.summary.carryMonth
+  // Report appears in the month AFTER carryMonth (wrapping 12 -> 1)
+  return carryMonth >= 12 ? 1 : carryMonth + 1
+})
+
+const showReportRow = computed(() => {
+  return (
+    currentMonth.value === reportMonth.value &&
+    (props.summary?.carryFromPreviousYearMinutes ?? 0) > 0
+  )
+})
+
+// --- Totals ---
+
+const totals = computed(() => {
+  const weeks = weeksForCurrentMonth.value
+  const base = {
+    overtime: weeks.reduce((s, w) => s + w.overtimeMinutes, 0),
+    base25: weeks.reduce((s, w) => s + w.base25Minutes, 0),
+    bonus25: weeks.reduce((s, w) => s + w.bonus25Minutes, 0),
+    base50: weeks.reduce((s, w) => s + w.base50Minutes, 0),
+    bonus50: weeks.reduce((s, w) => s + w.bonus50Minutes, 0),
+    total: weeks.reduce((s, w) => s + w.totalMinutes, 0),
+  }
+
+  if (showReportRow.value && props.summary) {
+    base.base25 += props.summary.carryBase25Minutes
+    base.bonus25 += props.summary.carryBonus25Minutes
+    base.base50 += props.summary.carryBase50Minutes
+    base.bonus50 += props.summary.carryBonus50Minutes
+    base.total += props.summary.carryFromPreviousYearMinutes
+  }
+
+  return base
+})
+
+const currentPayment = computed(() => {
+  if (!props.summary) return null
+  return props.summary.monthPayments.find((p) => p.month === currentMonth.value) ?? null
+})
+
+const paidTotal = computed(() => {
+  if (!currentPayment.value) return 0
+  const p = currentPayment.value
+  return -(p.paidBase25Minutes + p.paidBonus25Minutes + p.paidBase50Minutes + p.paidBonus50Minutes)
+})
+
+const resteTotal = computed(() => {
+  return totals.value.total + paidTotal.value
+})
+
+// --- Format ---
+
+const formatMinutes = (minutes: number): string => {
+  if (minutes === 0) return '0 h'
+  const sign = minutes < 0 ? '- ' : ''
   const abs = Math.abs(minutes)
   const hours = Math.floor(abs / 60)
   const rest = abs % 60
-  const sign = minutes < 0 ? '-' : ''
-  return `${sign}${hours.toString().padStart(2, '0')}h${rest.toString().padStart(2, '0')}`
+  if (rest === 0) return `${sign}${hours} h`
+  return `${sign}${hours} h ${rest} m`
 }
 
-const openNewPayment = () => {
-  isEditMode.value = false
-  paymentForm.month = 6
-  paymentForm.hours = 0
-  paymentForm.rate = '25'
-  isPaymentDrawerOpen.value = true
+// --- Payment drawer ---
+
+const isPaymentDrawerOpen = ref(false)
+const paymentForm = reactive({
+  month: 6,
+  base25Hours: 0,
+  bonus25Hours: 0,
+  base50Hours: 0,
+  bonus50Hours: 0,
+})
+
+const prefillFromExistingPayment = (month: number) => {
+  const existing = props.summary?.monthPayments.find((p) => p.month === month) ?? null
+  if (existing) {
+    paymentForm.base25Hours = existing.paidBase25Minutes / 60
+    paymentForm.bonus25Hours = existing.paidBonus25Minutes / 60
+    paymentForm.base50Hours = existing.paidBase50Minutes / 60
+    paymentForm.bonus50Hours = existing.paidBonus50Minutes / 60
+  } else {
+    paymentForm.base25Hours = 0
+    paymentForm.bonus25Hours = 0
+    paymentForm.base50Hours = 0
+    paymentForm.bonus50Hours = 0
+  }
 }
 
-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
+watch(() => paymentForm.month, (newMonth) => {
+  prefillFromExistingPayment(newMonth)
+})
+
+const openPaymentDrawer = () => {
+  paymentForm.month = currentMonth.value
+  prefillFromExistingPayment(currentMonth.value)
   isPaymentDrawerOpen.value = true
 }
 
 const onSubmitPayment = () => {
-  const minutes = Math.round(paymentForm.hours * 60)
-  emit('submit-rtt-payment', paymentForm.month, minutes, paymentForm.rate)
+  emit(
+    'submit-rtt-payment',
+    paymentForm.month,
+    Math.round(paymentForm.base25Hours * 60),
+    Math.round(paymentForm.bonus25Hours * 60),
+    Math.round(paymentForm.base50Hours * 60),
+    Math.round(paymentForm.bonus50Hours * 60),
+  )
   isPaymentDrawerOpen.value = false
 }
 </script>

frontend/composables/useEmployeeDetailPage.ts

@@ -71,6 +71,7 @@ export const useEmployeeDetailPage = () => {
 
   const contractHistory = computed(() => employee.value?.contractHistory ?? [])
   const showLeaveTab = computed(() => employee.value?.currentContractNature !== 'INTERIM')
+  const showRttTab = computed(() => employee.value?.contract?.type !== CONTRACT_TYPES.FORFAIT)
   const employeeContractWorkLabel = computed(() => {
     const contract = employee.value?.contract
     if (!contract) return '-'
@@ -242,7 +243,9 @@ export const useEmployeeDetailPage = () => {
         showLeaveTab.value
           ? getEmployeeLeaveSummary(loadedEmployee.id, leaveYear)
           : Promise.resolve(null),
-        getEmployeeRttSummary(loadedEmployee.id, rttYear),
+        showRttTab.value
+          ? getEmployeeRttSummary(loadedEmployee.id, rttYear)
+          : Promise.resolve(null),
         ...holidayYears.map((y) => listPublicHolidays('metropole', y))
       ])
       employeeAbsences.value = absences
@@ -252,6 +255,9 @@ export const useEmployeeDetailPage = () => {
       if (!showLeaveTab.value && activeTab.value === 'leave') {
         activeTab.value = 'contract'
       }
+      if (!showRttTab.value && activeTab.value === 'rtt') {
+        activeTab.value = 'contract'
+      }
     } finally {
       isLoading.value = false
     }
@@ -374,10 +380,10 @@ export const useEmployeeDetailPage = () => {
     await loadEmployee()
   }
 
-  const submitRttPayment = async (month: number, minutes: number, rate: '25' | '50') => {
+  const submitRttPayment = async (month: number, base25Minutes: number, bonus25Minutes: number, base50Minutes: number, bonus50Minutes: number) => {
     if (!employee.value) return
     const year = rttSummary.value?.year ?? undefined
-    await createRttPayment(employee.value.id, month, minutes, rate, year)
+    await createRttPayment(employee.value.id, month, base25Minutes, bonus25Minutes, base50Minutes, bonus50Minutes, year)
     await loadEmployee()
   }
 
@@ -402,6 +408,7 @@ export const useEmployeeDetailPage = () => {
     rttSummary,
     publicHolidays,
     showLeaveTab,
+    showRttTab,
     contractHistory,
     employeeContractWorkLabel,
     contractForm,

frontend/pages/calendar.vue

@@ -578,10 +578,6 @@ const handleSubmit = async () => {
             window.alert("La demi-journee de fin ne peut pas etre avant la demi-journee de debut.")
             return
         }
-        if (hasHolidayInRange(start, end)) {
-            window.alert("Impossible de creer une absence sur un jour ferie.")
-            return
-        }
         const overlaps = absences.value.filter((absence) => {
             if (absence.employee?.id !== Number(form.employeeId)) return false
             if (editingAbsence.value && absence.id === editingAbsence.value.id) return false

frontend/pages/employees/[id].vue

@@ -21,7 +21,7 @@
                     <p class="text-[18px]">{{ employee.site?.name ?? '-' }}</p>
                 </div>
             </div>
-            <div class="mt-12 border-b border-primary-500">
+            <div class="mt-[44px] border-b border-primary-500">
                 <div class="flex justify-center gap-16 text-2xl font-bold">
                     <button
                         class="pb-2 border-b-2 flex items-center gap-3"
@@ -45,6 +45,7 @@
                         Congé
                     </button>
                     <button
+                        v-if="showRttTab"
                         class="pb-2 border-b-2 flex items-center gap-3"
                         :class="activeTab === 'rtt'
                             ? 'border-primary-500 text-primary-500'
@@ -105,7 +106,7 @@
                     :public-holidays="publicHolidays"
                     @update-fractioned-days="submitFractionedDays"
                 />
-                <EmployeesRttTab v-else class="h-full" :summary="rttSummary" @submit-rtt-payment="submitRttPayment" />
+                <EmployeesRttTab v-else-if="showRttTab && activeTab === 'rtt'" class="h-full" :summary="rttSummary" @submit-rtt-payment="submitRttPayment" />
             </div>
         </div>
     </div>
@@ -122,6 +123,7 @@ const {
     rttSummary,
     publicHolidays,
     showLeaveTab,
+    showRttTab,
     contractHistory,
     employeeContractWorkLabel,
     contractForm,

frontend/services/dto/employee-rtt-summary.ts

@@ -3,22 +3,33 @@ export type EmployeeRttWeekSummary = {
   weekNumber: number
   weekStart: string
   weekEnd: string
-  recoveryMinutes: number
+  overtimeMinutes: number
+  base25Minutes: number
+  bonus25Minutes: number
+  base50Minutes: number
+  bonus50Minutes: number
+  totalMinutes: number
 }
 
 export type RttMonthPayment = {
   month: number
-  paidMinutes25: number
-  paidMinutes50: number
+  paidBase25Minutes: number
+  paidBonus25Minutes: number
+  paidBase50Minutes: number
+  paidBonus50Minutes: number
 }
 
 export type EmployeeRttSummary = {
   year: number
+  carryMonth: number
   carryFromPreviousYearMinutes: number
+  carryBase25Minutes: number
+  carryBonus25Minutes: number
+  carryBase50Minutes: number
+  carryBonus50Minutes: number
   currentYearRecoveryMinutes: number
   totalPaidMinutes: number
   availableMinutes: number
   weeks: EmployeeRttWeekSummary[]
   monthPayments: RttMonthPayment[]
 }
-

frontend/services/employee-rtt-summary.ts

@@ -6,9 +6,17 @@ export const getEmployeeRttSummary = async (employeeId: number, year?: number) =
   return api.get<EmployeeRttSummary>(`/employees/${employeeId}/rtt-summary`, query, { toast: false })
 }
 
-export const createRttPayment = async (employeeId: number, month: number, minutes: number, rate: '25' | '50', year?: number) => {
+export const createRttPayment = async (
+  employeeId: number,
+  month: number,
+  base25Minutes: number,
+  bonus25Minutes: number,
+  base50Minutes: number,
+  bonus50Minutes: number,
+  year?: number
+) => {
   const api = useApi()
-  const body: Record<string, unknown> = { month, minutes, rate }
+  const body: Record<string, unknown> = { month, base25Minutes, bonus25Minutes, base50Minutes, bonus50Minutes }
   if (year) body.year = year
   return api.patch(`/employees/${employeeId}/rtt-payments`, body)
 }