[#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/HoursDayView.vue

@@ -0,0 +1,187 @@
+<template>
+  <div class="rounded-lg border border-neutral-200 bg-white overflow-hidden flex min-h-0 flex-col">
+    <div 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: dayGridCols }"
+      >
+        <span>Nom</span>
+        <span class="pl-4">Début matin</span>
+        <span class="pr-2">Fin matin</span>
+        <span class="pl-2">Début après-midi</span>
+        <span class="pr-2">Fin après-midi</span>
+        <span class="pl-2">Début soir</span>
+        <span class="pr-2">Fin soir</span>
+        <span class="pl-2">Absence</span>
+        <span class="pl-2">Jour</span>
+        <span>Nuit</span>
+        <span>Total</span>
+        <span class="inline-flex items-center gap-2">
+          <span v-if="isAdmin">Valider</span>
+          <span v-else>Validation RH</span>
+          <input
+            v-if="isAdmin"
+            ref="bulkValidationInput"
+            :checked="isBulkValidationChecked"
+            type="checkbox"
+            class="h-4 w-4 cursor-pointer"
+            @change="onBulkValidationChange"
+          />
+        </span>
+      </div>
+
+      <div
+        v-for="employee in employees"
+        :key="employee.id"
+        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"
+        :style="{ gridTemplateColumns: dayGridCols }"
+      >
+        <div class="text-neutral-900 min-w-0">
+          <p class="font-semibold truncate">
+            {{ employee.firstName }} {{ employee.lastName }}
+            <span class="font-normal text-neutral-600">({{ contractLabel(employee) }})</span>
+          </p>
+          <p class="text-neutral-500 truncate">{{ employee.site?.name ?? 'Sans site' }}</p>
+        </div>
+        <div class="pl-4">
+          <TimeSelect
+            v-if="isTimeTracking(employee)"
+            v-model="rows[employee.id].morningFrom"
+            :disabled="isRowLocked(employee.id) || (!isAdmin && isHalfLockedByAbsence(employee.id, 'AM'))"
+          />
+          <input
+            v-else-if="isPresenceTracking(employee)"
+            v-model="rows[employee.id].isPresentMorning"
+            type="checkbox"
+            class="cursor-pointer h-4 w-4"
+            :disabled="isRowLocked(employee.id) || (!isAdmin && isHalfLockedByAbsence(employee.id, 'AM'))"
+          />
+        </div>
+        <div class="pr-2">
+          <TimeSelect
+            v-if="isTimeTracking(employee)"
+            v-model="rows[employee.id].morningTo"
+            :disabled="isRowLocked(employee.id) || (!isAdmin && isHalfLockedByAbsence(employee.id, 'AM'))"
+          />
+        </div>
+        <div class="pl-2">
+          <TimeSelect
+            v-if="isTimeTracking(employee)"
+            v-model="rows[employee.id].afternoonFrom"
+            :disabled="isRowLocked(employee.id) || (!isAdmin && isHalfLockedByAbsence(employee.id, 'PM'))"
+          />
+          <input
+            v-else-if="isPresenceTracking(employee)"
+            v-model="rows[employee.id].isPresentAfternoon"
+            type="checkbox"
+            class="cursor-pointer h-4 w-4"
+            :disabled="isRowLocked(employee.id) || (!isAdmin && isHalfLockedByAbsence(employee.id, 'PM'))"
+          />
+        </div>
+        <div class="pr-2">
+          <TimeSelect
+            v-if="isTimeTracking(employee)"
+            v-model="rows[employee.id].afternoonTo"
+            :disabled="isRowLocked(employee.id) || (!isAdmin && isHalfLockedByAbsence(employee.id, 'PM'))"
+          />
+        </div>
+        <div class="pl-2">
+          <TimeSelect
+            v-if="isTimeTracking(employee)"
+            v-model="rows[employee.id].eveningFrom"
+            :disabled="isRowLocked(employee.id) || (!isAdmin && isEveningLockedByAbsence(employee.id))"
+          />
+        </div>
+        <div class="pr-2">
+          <TimeSelect
+            v-if="isTimeTracking(employee)"
+            v-model="rows[employee.id].eveningTo"
+            :disabled="isRowLocked(employee.id) || (!isAdmin && isEveningLockedByAbsence(employee.id))"
+          />
+        </div>
+        <div class="pl-2 self-stretch flex flex-col justify-between py-0.5">
+          <p
+            class="text-sm text-neutral-700 truncate"
+            :class="getRowAbsenceLabel(employee.id) ? '' : 'invisible'"
+          >
+            {{ getRowAbsenceLabel(employee.id) || '—' }}
+          </p>
+          <button
+            type="button"
+            class="self-start text-left text-xs font-semibold underline"
+            :class="isRowLocked(employee.id) ? 'text-neutral-400 cursor-not-allowed' : 'text-primary-500 cursor-pointer'"
+            :disabled="isRowLocked(employee.id)"
+            @click="onAbsenceClick(employee.id)"
+          >
+            Modifier
+          </button>
+        </div>
+        <div class="pl-2 text-sm font-semibold text-neutral-700">
+          <div v-if="isTimeTracking(employee)">{{ formatMinutes(getRowMetrics(employee.id).dayMinutes) }}</div>
+        </div>
+        <div class="text-sm font-semibold text-neutral-700">
+          <div v-if="isTimeTracking(employee)">{{ formatMinutes(getRowMetrics(employee.id).nightMinutes) }}</div>
+        </div>
+        <div class="text-sm font-semibold text-neutral-700">
+          <div v-if="isTimeTracking(employee)">{{ formatMinutes(getRowMetrics(employee.id).totalMinutes) }}</div>
+          <div v-else>{{ getPresenceDayValue(employee.id) }}</div>
+        </div>
+        <div>
+          <input
+            v-if="isAdmin"
+            :checked="rows[employee.id]?.isValid ?? false"
+            type="checkbox"
+            class="h-4 w-4 cursor-pointer"
+            @change="onToggleValidation(employee.id, ($event.target as HTMLInputElement).checked)"
+          />
+          <span v-else-if="rows[employee.id]?.isValid" class="text-xs font-semibold text-neutral-700">Validé</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Employee } from '~/services/dto/employee'
+import TimeSelect from '~/components/ui/TimeSelect.vue'
+import type { HourRow } from './types'
+
+const rows = defineModel<Record<number, HourRow>>('rows', { required: true })
+const bulkValidationInput = ref<HTMLInputElement | null>(null)
+
+const props = defineProps<{
+  employees: Employee[]
+  isAdmin: boolean
+  dayGridCols: string
+  contractLabel: (employee: Employee) => string
+  isTimeTracking: (employee: Employee) => boolean
+  isPresenceTracking: (employee: Employee) => boolean
+  isRowLocked: (employeeId: number) => boolean
+  isHalfLockedByAbsence: (employeeId: number, half: 'AM' | 'PM') => boolean
+  isEveningLockedByAbsence: (employeeId: number) => boolean
+  isValidationPending: (employeeId: number) => boolean
+  canToggleValidation: (employeeId: number) => boolean
+  isBulkValidationChecked: boolean
+  isBulkValidationIndeterminate: boolean
+  onToggleValidation: (employeeId: number, checked: boolean) => void
+  onToggleValidationBulk: (checked: boolean) => void
+  getRowMetrics: (employeeId: number) => { dayMinutes: number; nightMinutes: number; totalMinutes: number }
+  getRowAbsenceLabel: (employeeId: number) => string
+  getPresenceDayValue: (employeeId: number) => string
+  onAbsenceClick: (employeeId: number) => void
+  formatMinutes: (minutes: number) => string
+}>()
+
+const onBulkValidationChange = (event: Event) => {
+  props.onToggleValidationBulk((event.target as HTMLInputElement).checked)
+}
+
+watch(
+  () => props.isBulkValidationIndeterminate,
+  (isIndeterminate) => {
+    if (!bulkValidationInput.value) return
+    bulkValidationInput.value.indeterminate = isIndeterminate
+  },
+  { immediate: true }
+)
+</script>

frontend/components/hours/HoursToolbar.vue

@@ -0,0 +1,213 @@
+<template>
+  <div class="py-6 flex flex-col gap-3">
+    <SiteFilterSelector v-if="sites.length > 0 && isAdmin" v-model="selectedSiteIds" :sites="sites" />
+
+    <div class="flex justify-between items-center gap-4">
+      <div class="flex gap-4 flex-wrap">
+      <div
+        v-if="viewMode === 'day'"
+        class="inline-flex h-10 w-[320px] overflow-hidden rounded-md border border-primary-500 bg-white"
+      >
+        <button
+          type="button"
+          class="flex-1 px-4 py-2 text-sm font-semibold active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40"
+          :class="shortcutButtonClass('yesterday')"
+          @click="emit('set-yesterday')"
+        >
+          Hier
+        </button>
+        <button
+          type="button"
+          class="flex-1 border-x border-primary-500 px-4 py-2 text-sm font-semibold active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40"
+          :class="shortcutButtonClass('today')"
+          @click="emit('set-today')"
+        >
+          Aujourd'hui
+        </button>
+        <button
+          type="button"
+          class="flex-1 px-4 py-2 text-sm font-semibold active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40"
+          :class="shortcutButtonClass('tomorrow')"
+          @click="emit('set-tomorrow')"
+        >
+          Demain
+        </button>
+      </div>
+
+      <div
+        v-else
+        class="inline-flex h-10 w-[320px] overflow-hidden rounded-md border border-primary-500 bg-white"
+      >
+        <button
+          type="button"
+          class="flex-1 px-4 py-2 text-sm font-semibold active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40"
+          :class="weekShortcutButtonClass('previousWeek')"
+          @click="emit('set-previous-week')"
+        >
+          {{ getWeekShortcutLabel('previousWeek') }}
+        </button>
+        <button
+          type="button"
+          class="flex-1 border-x border-primary-500 px-4 py-2 text-sm font-semibold active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40"
+          :class="weekShortcutButtonClass('thisWeek')"
+          @click="emit('set-this-week')"
+        >
+          {{ getWeekShortcutLabel('thisWeek') }}
+        </button>
+        <button
+          type="button"
+          class="flex-1 px-4 py-2 text-sm font-semibold active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40"
+          :class="weekShortcutButtonClass('nextWeek')"
+          @click="emit('set-next-week')"
+        >
+          {{ getWeekShortcutLabel('nextWeek') }}
+        </button>
+      </div>
+
+      <div class="relative inline-flex h-10 w-[320px] items-center overflow-hidden rounded-md border border-primary-500 bg-white">
+        <input
+          ref="nativeDateInput"
+          :value="pickerValue"
+          :type="viewMode === 'week' ? 'week' : 'date'"
+          class="pointer-events-none absolute inset-0 h-full w-full opacity-0"
+          tabindex="-1"
+          aria-hidden="true"
+          @input="onPickerInput"
+          @change="onPickerInput"
+        />
+        <button
+          type="button"
+          class="h-10 px-3 text-lg font-semibold text-primary-500 hover:bg-tertiary-500 active:bg-tertiary-500 active:scale-[0.96] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40"
+          aria-label="Période précédente"
+          @click="emit('shift-date', -1)"
+        >
+          ‹
+        </button>
+        <button
+          type="button"
+          class="h-10 flex-1 border-x border-primary-500 px-4 text-sm font-semibold text-primary-500 text-center hover:bg-tertiary-500 active:bg-tertiary-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40"
+          @click="openDatePicker"
+        >
+          {{ formattedSelectedDate }}
+        </button>
+        <button
+          type="button"
+          class="h-10 px-3 text-lg font-semibold text-primary-500 hover:bg-tertiary-500 active:bg-tertiary-500 active:scale-[0.96] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40"
+          aria-label="Période suivante"
+          @click="emit('shift-date', 1)"
+        >
+          ›
+        </button>
+      </div>
+      </div>
+
+      <div v-if="isAdmin" class="inline-flex h-10 overflow-hidden rounded-md border border-primary-500 bg-white">
+        <button
+          type="button"
+          class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40"
+          :class="viewModeButtonClass('day')"
+          @click="viewMode = 'day'"
+        >
+          <Icon name="mdi:calendar-clock" />
+          Jour
+        </button>
+        <button
+          type="button"
+          class="inline-flex items-center gap-2 border-l border-primary-500 px-4 py-2 text-sm font-semibold active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40"
+          :class="viewModeButtonClass('week')"
+          @click="viewMode = 'week'"
+        >
+          <Icon name="mdi:calendar-week" />
+          Semaine
+        </button>
+      </div>
+    </div>
+
+    <div v-if="isAdmin" class="w-80 max-w-full">
+      <EmployeeNameFilterInput v-model="employeeFilter" />
+    </div>
+
+    <div
+      v-if="isAdmin && viewMode === 'week' && absenceTypes.length > 0"
+      class="flex flex-wrap items-center gap-6"
+    >
+      <p class="font-bold">Légende :</p>
+      <div v-for="type in absenceTypes" :key="type.id" class="flex items-center gap-2">
+        <div :style="{ backgroundColor: type.color }" class="h-4 w-4 rounded"></div>
+        <p>{{ type.label }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Site } from '~/services/dto/site'
+import type { AbsenceType } from '~/services/dto/absence-type'
+import EmployeeNameFilterInput from '~/components/EmployeeNameFilterInput.vue'
+import SiteFilterSelector from '~/components/SiteFilterSelector.vue'
+import { weekInputValueToYmd, ymdToWeekInputValue } from '~/utils/date'
+
+const selectedDate = defineModel<string>('selectedDate', { required: true })
+const viewMode = defineModel<'day' | 'week'>('viewMode', { required: true })
+const selectedSiteIds = defineModel<number[]>('selectedSiteIds', { required: true })
+const employeeFilter = defineModel<string>('employeeFilter', { required: true })
+
+defineProps<{
+  isAdmin: boolean
+  sites: Site[]
+  absenceTypes: AbsenceType[]
+  formattedSelectedDate: string
+  shortcutButtonClass: (target: 'yesterday' | 'today' | 'tomorrow') => string
+  weekShortcutButtonClass: (target: 'previousWeek' | 'thisWeek' | 'nextWeek') => string
+  getWeekShortcutLabel: (target: 'previousWeek' | 'thisWeek' | 'nextWeek') => string
+}>()
+
+const emit = defineEmits<{
+  (e: 'set-yesterday'): void
+  (e: 'set-today'): void
+  (e: 'set-tomorrow'): void
+  (e: 'set-previous-week'): void
+  (e: 'set-this-week'): void
+  (e: 'set-next-week'): void
+  (e: 'shift-date', value: number): void
+}>()
+
+const nativeDateInput = ref<HTMLInputElement | null>(null)
+const pickerValue = computed(() => {
+  if (viewMode.value === 'week') return ymdToWeekInputValue(selectedDate.value)
+  return selectedDate.value
+})
+
+const viewModeButtonClass = (mode: 'day' | 'week') => {
+  if (viewMode.value === mode) {
+    return 'bg-primary-500 text-white'
+  }
+
+  return 'bg-white text-primary-500 hover:bg-tertiary-500'
+}
+
+const openDatePicker = () => {
+  const input = nativeDateInput.value
+  if (!input) return
+  if (typeof input.showPicker === 'function') {
+    input.showPicker()
+    return
+  }
+  input.focus()
+  input.click()
+}
+
+const onPickerInput = (event: Event) => {
+  const value = (event.target as HTMLInputElement).value
+  if (!value) return
+
+  if (viewMode.value === 'week') {
+    const ymd = weekInputValueToYmd(value)
+    if (!ymd) return
+    selectedDate.value = ymd
+    return
+  }
+
+  selectedDate.value = value
+}
+</script>

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>

frontend/components/hours/types.ts

@@ -0,0 +1,12 @@
+export type HourRow = {
+  workHourId: number | null
+  morningFrom: string
+  morningTo: string
+  afternoonFrom: string
+  afternoonTo: string
+  eveningFrom: string
+  eveningTo: string
+  isPresentMorning: boolean
+  isPresentAfternoon: boolean
+  isValid: boolean
+}