[#322] Page horaire (#4)

| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|        #322          |        Page horaire         |

## Description de la PR
[#322] Page horaire

## Modification du .env

## Check list

- [ ] Pas de régression
- [ ] TU/TI/TF rédigée
- [ ] TU/TI/TF OK
- [ ] CHANGELOG modifié

Reviewed-on: #4
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>

frontend/components/hours/HoursWeekView.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="rounded-lg border border-neutral-200 bg-white overflow-hidden flex min-h-0 flex-col">
+    <div v-if="isWeekLoading" class="p-6 text-md text-neutral-600">Chargement de la semaine...</div>
+    <div v-else class="overflow-y-auto min-h-0">
+      <div
+        class="grid w-full min-w-0 gap-1 border-b border-neutral-200 bg-tertiary-500 px-4 py-3 text-sm font-semibold text-neutral-700 sticky top-0 z-10"
+        :style="{ gridTemplateColumns: weekGridCols }"
+      >
+        <span>Nom</span>
+        <span v-for="day in weekDayHeaders" :key="day.date" class="text-left">{{ day.label }}</span>
+        <span>Jour/Nuit <br>sem.</span>
+        <span>Total <br>sem.</span>
+        <span>Total <br>h. supp.</span>
+        <span>+25%</span>
+        <span>+50%</span>
+        <span>Total <br>récup.</span>
+      </div>
+
+      <div
+        v-for="row in weeklySummary?.rows ?? []"
+        :key="row.employeeId"
+        class="grid w-full min-w-0 items-center gap-1 border-b border-neutral-100 px-4 py-2 text-sm last:border-b-0 hover:bg-tertiary-500"
+        :style="{ gridTemplateColumns: weekGridCols }"
+      >
+        <div class="text-neutral-900 min-w-0">
+          <p class="font-semibold truncate">
+            {{ row.firstName }} {{ row.lastName }}
+            <span class="font-normal text-neutral-600">({{ row.contractName ?? '-' }})</span>
+          </p>
+          <p class="text-[11px] text-neutral-500 truncate">{{ row.siteName ?? 'Sans site' }}</p>
+        </div>
+
+        <div
+          v-for="daily in row.daily"
+          :key="daily.date"
+          class="text-left leading-4 rounded-md px-2 py-1"
+          :class="daily.hasAbsence ? 'text-white' : ''"
+          :style="getDailyCellStyle(daily)"
+          :title="daily.absenceLabel ?? ''"
+        >
+          <template v-if="row.trackingMode === 'PRESENCE'">{{ daily.present ?? 0 }}</template>
+          <template v-else>
+            <div>J {{ formatMinutes(daily.dayMinutes) }}</div>
+            <div>N {{ formatMinutes(daily.nightMinutes) }}</div>
+          </template>
+        </div>
+
+        <div class="font-semibold leading-4">
+          <template v-if="row.trackingMode === 'PRESENCE'">-</template>
+          <template v-else>
+            <div>J {{ formatMinutes(row.weeklyDayMinutes) }}</div>
+            <div>N {{ formatMinutes(row.weeklyNightMinutes) }}</div>
+          </template>
+        </div>
+        <div class="font-semibold">
+          {{ row.trackingMode === 'PRESENCE' ? (row.weeklyPresenceCount ?? 0) : formatMinutes(row.weeklyTotalMinutes) }}
+        </div>
+        <div class="font-semibold">
+          {{ row.trackingMode === 'PRESENCE' ? '-' : formatMinutes(row.weeklyOvertimeTotalMinutes ?? 0) }}
+        </div>
+        <div class="font-semibold">
+          {{ row.trackingMode === 'PRESENCE' || isInterimContract(row.contractType) ? '-' : formatMinutes(row.weeklyOvertime25Minutes ?? 0) }}
+        </div>
+        <div class="font-semibold">
+          {{ row.trackingMode === 'PRESENCE' || isInterimContract(row.contractType) ? '-' : formatMinutes(row.weeklyOvertime50Minutes ?? 0) }}
+        </div>
+        <div class="font-semibold">
+          {{ row.trackingMode === 'PRESENCE' || isInterimContract(row.contractType) ? '-' : formatMinutes(row.weeklyRecoveryMinutes ?? 0) }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { WeeklyWorkHourSummary } from '~/services/dto/work-hour'
+import { CONTRACT_TYPES, type ContractType } from '~/services/dto/contract'
+
+const isInterimContract = (contractType?: ContractType | null) => {
+  return contractType === CONTRACT_TYPES.INTERIM
+}
+
+const getDailyCellStyle = (daily: {
+  hasAbsence?: boolean
+  absenceColor?: string | null
+}) => {
+  if (!daily.hasAbsence) return undefined
+  return { backgroundColor: daily.absenceColor || '#dc2626' }
+}
+
+defineProps<{
+  isWeekLoading: boolean
+  weekGridCols: string
+  weeklySummary: WeeklyWorkHourSummary | null
+  weekDayHeaders: Array<{ date: string; label: string }>
+  formatMinutes: (minutes: number) => string
+}>()
+</script>