feat : ajout de la gestion RTT

frontend/components/employees/RttTab.vue

@@ -1,7 +1,122 @@
 <template>
-  <section class="mt-8">
-    <div class="rounded-lg border border-neutral-200 bg-white p-6 text-md text-neutral-600">
-      Bloc RTT (à implémenter)
+  <section class="flex h-full min-h-0 flex-col overflow-hidden pt-8">
+    <div class="flex 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>
+    </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"
+        >
+          <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-[60%_40%] 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-primary-500">Heure payée</div>
+            <div class="py-[6px] pl-3">0h</div>
+          </div>
+        </div>
+      </div>
     </div>
   </section>
 </template>
+
+<script setup lang="ts">
+import type { EmployeeRttSummary } from '~/services/dto/employee-rtt-summary'
+
+const props = defineProps<{
+  summary: EmployeeRttSummary | null
+}>()
+
+const monthLabels = [
+  'Janvier',
+  'Fevrier',
+  'Mars',
+  'Avril',
+  'Mai',
+  'Juin',
+  'Juillet',
+  'Aout',
+  'Septembre',
+  'Octobre',
+  'Novembre',
+  'Decembre'
+] as const
+
+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 formatMinutes = (minutes: number) => {
+  const abs = Math.abs(minutes)
+  const hours = Math.floor(abs / 60)
+  const rest = abs % 60
+  const sign = minutes < 0 ? '-' : ''
+  return `${sign}${hours}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`
+}
+</script>