fix : wip

2026-02-19 17:44:37 +01:00
parent c2e118dc33
commit 13274ff297
31 changed files with 1539 additions and 126 deletions
--- a/frontend/components/AbsenceFormDrawer.vue
+++ b/frontend/components/AbsenceFormDrawer.vue
@@ -9,6 +9,7 @@
                    id="employee"
                    v-model="absenceForm.employeeId"
                    :class="employeeFieldClass"
+                    :disabled="props.lockEmployee"
                >
                    <option value="" disabled>Choisir un employé</option>
                    <option v-for="employee in employees" :key="employee.id" :value="employee.id">
@@ -48,6 +49,7 @@
                            v-model="absenceForm.startDate"
                            type="date"
                            class="w-full rounded-md border border-neutral-300 px-3 py-2 text-md text-neutral-900"
+                            :disabled="props.lockDates"
                        />
                        <select
                            v-model="absenceForm.startHalf"
@@ -67,6 +69,7 @@
                            v-model="absenceForm.endDate"
                            type="date"
                            class="w-full rounded-md border border-neutral-300 px-3 py-2 text-md text-neutral-900"
+                            :disabled="props.lockDates"
                        />
                        <select
                            v-model="absenceForm.endHalf"
@@ -80,7 +83,7 @@
                </div>
            </div>

-            <div>
+            <div v-if="props.showComment !== false">
                <label class="text-md font-semibold text-neutral-700" for="comment">Commentaire</label>
                <textarea
                    id="comment"
@@ -142,6 +145,9 @@ const props = defineProps<{
    }
    editingAbsence: Absence | null
    isSubmitting: boolean
+    lockEmployee?: boolean
+    lockDates?: boolean
+    showComment?: boolean
 }>()

 const emit = defineEmits<{
--- a/frontend/components/hours/HoursDayView.vue
+++ b/frontend/components/hours/HoursDayView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded-lg border border-neutral-200 bg-white overflow-hidden flex flex-1 min-h-0 flex-col">
+  <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"
@@ -12,11 +12,22 @@
        <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">Présent</span>
+        <span class="pl-2">Absence</span>
        <span class="pl-2">Jour</span>
        <span>Nuit</span>
        <span>Total</span>
-        <span v-if="isAdmin">Valider</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
@@ -33,38 +44,78 @@
          <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)"/>
+          <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)"
+            :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)"/>
+          <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)"/>
+          <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)"
+            :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)"/>
+          <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)"/>
+          <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)"/>
+          <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"></div>
        <div class="pl-2 text-sm font-semibold text-neutral-700">
          <div v-if="isTimeTracking(employee)">{{ formatMinutes(getRowMetrics(employee.id).dayMinutes) }}</div>
        </div>
@@ -73,16 +124,17 @@
        </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 v-if="isAdmin">
+        <div>
          <input
+            v-if="isAdmin"
            :checked="rows[employee.id]?.isValid ?? false"
            type="checkbox"
-            class="h-4 w-4"
-            :class="rows[employee.id]?.workHourId ? 'cursor-pointer' : 'cursor-not-allowed opacity-60'"
-            :disabled="!rows[employee.id]?.workHourId || isValidationPending(employee.id)"
+            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>
@@ -95,8 +147,9 @@ 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)

-defineProps<{
+const props = defineProps<{
  employees: Employee[]
  isAdmin: boolean
  dayGridCols: string
@@ -104,9 +157,31 @@ defineProps<{
  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>
--- a/frontend/components/hours/HoursToolbar.vue
+++ b/frontend/components/hours/HoursToolbar.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="py-6 flex flex-col gap-3">
-    <SiteFilterSelector v-if="sites.length > 0" v-model="selectedSiteIds" :sites="sites" />
+    <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">
@@ -34,14 +34,46 @@
        </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"
-          v-model="selectedDate"
-          type="date"
+          :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"
@@ -91,7 +123,7 @@
      </div>
    </div>

-    <div class="w-80 max-w-full">
+    <div v-if="isAdmin" class="w-80 max-w-full">
      <EmployeeNameFilterInput v-model="employeeFilter" />
    </div>
  </div>
@@ -101,6 +133,7 @@
 import type { Site } from '~/services/dto/site'
 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 })
@@ -112,16 +145,25 @@ defineProps<{
  sites: Site[]
  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) {
@@ -141,4 +183,18 @@ const openDatePicker = () => {
  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>
--- a/frontend/components/hours/HoursWeekView.vue
+++ b/frontend/components/hours/HoursWeekView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded-lg border border-neutral-200 bg-white overflow-hidden flex flex-1 min-h-0 flex-col">
+  <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
@@ -8,16 +8,18 @@
      >
        <span>Nom</span>
        <span v-for="day in weekDayHeaders" :key="day.date" class="text-left">{{ day.label }}</span>
-        <span>Jour/Nuit sem.</span>
-        <span>Total sem.</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"
+        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">
@@ -46,12 +48,18 @@
        <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' ? '-' : formatMinutes(row.weeklyOvertime25Minutes ?? 0) }}
        </div>
        <div class="font-semibold">
          {{ row.trackingMode === 'PRESENCE' ? '-' : formatMinutes(row.weeklyOvertime50Minutes ?? 0) }}
        </div>
+        <div class="font-semibold">
+          {{ row.trackingMode === 'PRESENCE' ? '-' : formatMinutes(row.weeklyRecoveryMinutes ?? 0) }}
+        </div>
      </div>
    </div>
  </div>
--- a/frontend/composables/useHoursPage.ts
+++ b/frontend/composables/useHoursPage.ts
@@ -1,11 +1,17 @@
 import { computed, onMounted, ref, watch } from 'vue'
 import type { Employee } from '~/services/dto/employee'
 import type { Site } from '~/services/dto/site'
-import type { WorkHour, WeeklyWorkHourSummary } from '~/services/dto/work-hour'
+import type { WorkHour, WorkHourDayContext, WeeklyWorkHourSummary } from '~/services/dto/work-hour'
+import type { AbsenceType } from '~/services/dto/absence-type'
+import type { Absence } from '~/services/dto/absence'
+import type { HalfDay } from '~/services/dto/half-day'
 import type { HourRow } from '~/components/hours/types'
 import { listScopedEmployees } from '~/services/employees'
+import { listAbsenceTypes } from '~/services/absence-types'
+import { createAbsence, deleteAbsence, listAbsences, updateAbsence } from '~/services/absences'
 import {
  bulkUpsertWorkHours,
+  getWorkHourDayContext,
  getWeeklyWorkHourSummary,
  listWorkHoursByDate,
  updateWorkHourValidation
@@ -14,7 +20,9 @@ import {
  formatDateLongFr,
  formatWeekDayHeaderFr,
  formatWeekRangeFr,
+  getIsoWeekNumber,
  getOffsetFromTodayYmd,
+  getWeekStartDate,
  getTodayYmd,
  parseYmd,
  shiftYmd
@@ -23,6 +31,7 @@ import { sortEmployeesBySiteAndOrder } from '~/utils/employee'

 export const useHoursPage = () => {
  const auth = useAuthStore()
+  const toast = useToast()
  const isAdmin = computed(() => auth.user?.roles?.includes('ROLE_ADMIN') ?? false)
  const viewMode = ref<'day' | 'week'>('day')

@@ -32,19 +41,33 @@ export const useHoursPage = () => {
  const selectedSiteIds = ref<number[]>([])
  const sitesInitialized = ref(false)
  const rows = ref<Record<number, HourRow>>({})
+  const dayContext = ref<WorkHourDayContext | null>(null)
  const weeklySummary = ref<WeeklyWorkHourSummary | null>(null)
+  const absenceTypes = ref<AbsenceType[]>([])
+  const absences = ref<Absence[]>([])
+  const isAbsenceDrawerOpen = ref(false)
+  const isAbsenceSubmitting = ref(false)
+  const editingAbsence = ref<Absence | null>(null)
+  const absenceForm = ref({
+    employeeId: '' as number | '',
+    typeId: '' as number | '',
+    startDate: '',
+    startHalf: 'AM' as HalfDay,
+    endDate: '',
+    endHalf: 'PM' as HalfDay,
+    comment: ''
+  })
  const isLoading = ref(false)
  const isWeekLoading = ref(false)
  const isSubmitting = ref(false)
  const validatingRowIds = ref<number[]>([])

  const dayGridCols = computed(() => {
-    const metricCol = '0.5fr'
-    const cols = `1.2fr repeat(6, 1fr) ${metricCol} ${metricCol} ${metricCol} ${metricCol}`
-    return isAdmin.value ? `${cols} ${metricCol}` : cols
+    const metricCol = '0.4fr'
+    return `1.2fr repeat(6, 1fr) 0.8fr ${metricCol} ${metricCol} ${metricCol} ${metricCol}`
  })

-  const weekGridCols = '1.6fr repeat(7, 1fr) 1fr 0.8fr 0.8fr 0.8fr'
+  const weekGridCols = '1.6fr repeat(7, 1fr) repeat(6, 0.6fr)'

  const sites = computed<Site[]>(() => {
    const siteMap = new Map<number, Site>()
@@ -94,6 +117,34 @@ export const useHoursPage = () => {
  })

  const isValidationPending = (employeeId: number) => validatingRowIds.value.includes(employeeId)
+  const canToggleValidation = (employeeId: number) => !!rows.value[employeeId]?.workHourId
+
+  const validatableEmployeeIds = computed(() => {
+    return employees.value
+      .map((employee) => employee.id)
+      .filter((employeeId) => canToggleValidation(employeeId))
+  })
+
+  const isBulkValidationChecked = computed(() => {
+    const ids = validatableEmployeeIds.value
+    if (ids.length === 0) return false
+    return ids.every((employeeId) => rows.value[employeeId]?.isValid ?? false)
+  })
+
+  const isBulkValidationIndeterminate = computed(() => {
+    const ids = validatableEmployeeIds.value
+    if (ids.length === 0) return false
+    const checkedCount = ids.filter((employeeId) => rows.value[employeeId]?.isValid ?? false).length
+    return checkedCount > 0 && checkedCount < ids.length
+  })
+
+  const dayContextByEmployeeId = computed(() => {
+    const map = new Map<number, WorkHourDayContext['rows'][number]>()
+    for (const row of dayContext.value?.rows ?? []) {
+      map.set(row.employeeId, row)
+    }
+    return map
+  })

  const shortcutButtonClass = (target: 'yesterday' | 'today' | 'tomorrow') => {
    const targetDate = target === 'yesterday'
@@ -109,6 +160,37 @@ export const useHoursPage = () => {
    return 'bg-white text-primary-500 hover:bg-tertiary-500'
  }

+  const weekShortcutButtonClass = (target: 'previousWeek' | 'thisWeek' | 'nextWeek') => {
+    const selected = parseYmd(selectedDate.value)
+    if (!selected) {
+      return 'bg-white text-primary-500 hover:bg-tertiary-500'
+    }
+
+    const today = new Date()
+    const targetDate = new Date(today)
+    if (target === 'previousWeek') targetDate.setDate(today.getDate() - 7)
+    if (target === 'nextWeek') targetDate.setDate(today.getDate() + 7)
+
+    const selectedWeekStart = getWeekStartDate(selected)
+    const targetWeekStart = getWeekStartDate(targetDate)
+    const isActive = selectedWeekStart.getTime() === targetWeekStart.getTime()
+
+    if (isActive) {
+      return 'bg-primary-500 text-white'
+    }
+
+    return 'bg-white text-primary-500 hover:bg-tertiary-500'
+  }
+
+  const getWeekShortcutLabel = (target: 'previousWeek' | 'thisWeek' | 'nextWeek') => {
+    const today = new Date()
+    if (target === 'previousWeek') today.setDate(today.getDate() - 7)
+    if (target === 'nextWeek') today.setDate(today.getDate() + 7)
+
+    const weekNumber = getIsoWeekNumber(today)
+    return `Sem. S${weekNumber}`
+  }
+
  const formattedSelectedDate = computed(() => {
    const parsed = parseYmd(selectedDate.value)
    if (!parsed) return selectedDate.value
@@ -146,6 +228,40 @@ export const useHoursPage = () => {
    shiftDate(1)
  }

+  const setThisWeek = () => {
+    selectedDate.value = getTodayYmd()
+  }
+
+  const setPreviousWeek = () => {
+    const previousWeek = shiftYmd(getTodayYmd(), -7)
+    if (!previousWeek) return
+    selectedDate.value = previousWeek
+  }
+
+  const setNextWeek = () => {
+    const nextWeek = shiftYmd(getTodayYmd(), 7)
+    if (!nextWeek) return
+    selectedDate.value = nextWeek
+  }
+
+  const resetAbsenceForm = () => {
+    absenceForm.value = {
+      employeeId: '',
+      typeId: '',
+      startDate: '',
+      startHalf: 'AM',
+      endDate: '',
+      endHalf: 'PM',
+      comment: ''
+    }
+  }
+
+  const closeAbsenceDrawer = () => {
+    isAbsenceDrawerOpen.value = false
+    editingAbsence.value = null
+    resetAbsenceForm()
+  }
+
  const emptyRow = (): HourRow => ({
    workHourId: null,
    morningFrom: '',
@@ -243,10 +359,42 @@ export const useHoursPage = () => {
      nightMinutes += nightIntervalMinutes(from, to)
    }

+    const creditedMinutes = dayContextByEmployeeId.value.get(employeeId)?.creditedMinutes ?? 0
+    totalMinutes += creditedMinutes
    const dayMinutes = Math.max(0, totalMinutes - nightMinutes)
    return { dayMinutes, nightMinutes, totalMinutes }
  }

+  const getRowAbsenceLabel = (employeeId: number) => {
+    const dayRow = dayContextByEmployeeId.value.get(employeeId)
+    if (!dayRow?.absenceLabel) return ''
+    if (dayRow.absenceHalf === 'AM' || dayRow.absenceHalf === 'PM') {
+      const halfLabel = dayRow.absenceHalf === 'AM' ? 'Matin' : 'ap.-m.'
+      return `${dayRow.absenceLabel} (${halfLabel})`
+    }
+    return `${dayRow.absenceLabel} (journée)`
+  }
+
+  const getPresenceDayValue = (employeeId: number) => {
+    const row = rows.value[employeeId]
+    const basePresence = (row?.isPresentMorning ? 0.5 : 0) + (row?.isPresentAfternoon ? 0.5 : 0)
+    const creditedPresence = dayContextByEmployeeId.value.get(employeeId)?.creditedPresenceUnits ?? 0
+    const total = Math.min(1, basePresence + creditedPresence)
+    return Number.isInteger(total) ? String(total) : total.toFixed(1)
+  }
+
+  const isHalfLockedByAbsence = (employeeId: number, half: 'AM' | 'PM') => {
+    const dayRow = dayContextByEmployeeId.value.get(employeeId)
+    if (!dayRow) return false
+    return half === 'AM' ? dayRow.absentMorning : dayRow.absentAfternoon
+  }
+
+  const isEveningLockedByAbsence = (employeeId: number) => {
+    const dayRow = dayContextByEmployeeId.value.get(employeeId)
+    if (!dayRow) return false
+    return dayRow.absentMorning && dayRow.absentAfternoon
+  }
+
  const formatMinutes = (minutes: number) => {
    const safeMinutes = Math.max(0, minutes)
    const hours = Math.floor(safeMinutes / 60)
@@ -280,19 +428,162 @@ export const useHoursPage = () => {
    rows.value = nextRows
  }

-  const toggleValidation = async (employeeId: number, checked: boolean) => {
+  const loadAbsenceTypes = async () => {
+    absenceTypes.value = await listAbsenceTypes()
+  }
+
+  const loadAbsences = async () => {
+    absences.value = await listAbsences({
+      from: selectedDate.value,
+      to: selectedDate.value,
+      siteIds: isAdmin.value ? selectedSiteIds.value : undefined
+    })
+  }
+
+  const openAbsenceDrawer = (employeeId: number) => {
+    const existing = absences.value.find((absence) => {
+      if (absence.employee?.id !== employeeId) return false
+      const start = absence.startDate.slice(0, 10)
+      const end = absence.endDate.slice(0, 10)
+      return selectedDate.value >= start && selectedDate.value <= end
+    }) ?? null
+
+    if (existing) {
+      editingAbsence.value = existing
+      absenceForm.value = {
+        employeeId,
+        typeId: existing.type?.id ?? '',
+        startDate: existing.startDate.slice(0, 10),
+        startHalf: existing.startHalf ?? 'AM',
+        endDate: existing.endDate.slice(0, 10),
+        endHalf: existing.endHalf ?? 'PM',
+        comment: existing.comment ?? ''
+      }
+    } else {
+      editingAbsence.value = null
+      absenceForm.value = {
+        employeeId,
+        typeId: '',
+        startDate: selectedDate.value,
+        startHalf: 'AM',
+        endDate: selectedDate.value,
+        endHalf: 'PM',
+        comment: ''
+      }
+    }
+
+    isAbsenceDrawerOpen.value = true
+  }
+
+  const submitAbsence = async () => {
+    const form = absenceForm.value
+    if (isAbsenceSubmitting.value || form.employeeId === '' || form.typeId === '') return
+
+    isAbsenceSubmitting.value = true
+    try {
+      if (editingAbsence.value) {
+        await updateAbsence({
+          id: editingAbsence.value.id,
+          employeeId: Number(form.employeeId),
+          typeId: Number(form.typeId),
+          startDate: form.startDate,
+          startHalf: form.startHalf,
+          endDate: form.endDate,
+          endHalf: form.endHalf,
+          comment: editingAbsence.value.comment ?? ''
+        })
+      } else {
+        await createAbsence({
+          employeeId: Number(form.employeeId),
+          typeId: Number(form.typeId),
+          startDate: form.startDate,
+          startHalf: form.startHalf,
+          endDate: form.endDate,
+          endHalf: form.endHalf,
+          comment: ''
+        })
+      }
+
+      closeAbsenceDrawer()
+      await refreshByDate()
+      await loadAbsences()
+    } finally {
+      isAbsenceSubmitting.value = false
+    }
+  }
+
+  const deleteAbsenceFromDrawer = async () => {
+    if (!editingAbsence.value || isAbsenceSubmitting.value) return
+
+    isAbsenceSubmitting.value = true
+    try {
+      await deleteAbsence(editingAbsence.value.id)
+      closeAbsenceDrawer()
+      await refreshByDate()
+      await loadAbsences()
+    } finally {
+      isAbsenceSubmitting.value = false
+    }
+  }
+
+  const toggleValidation = async (
+    employeeId: number,
+    checked: boolean,
+    options: { toast?: boolean } = {}
+  ) => {
    const row = rows.value[employeeId]
    if (!row?.workHourId || isValidationPending(employeeId)) return

    validatingRowIds.value = [...validatingRowIds.value, employeeId]
    try {
-      await updateWorkHourValidation(row.workHourId, checked)
+      await updateWorkHourValidation(row.workHourId, checked, { toast: options.toast })
      row.isValid = checked
    } finally {
      validatingRowIds.value = validatingRowIds.value.filter((id) => id !== employeeId)
    }
  }

+  const toggleValidationBulk = async (checked: boolean) => {
+    const employeeIds = validatableEmployeeIds.value
+    if (employeeIds.length === 0) return
+
+    let successCount = 0
+    let failedCount = 0
+
+    for (const employeeId of employeeIds) {
+      if (isValidationPending(employeeId)) continue
+      try {
+        await toggleValidation(employeeId, checked, { toast: false })
+        successCount += 1
+      } catch {
+        failedCount += 1
+      }
+    }
+
+    if (failedCount === 0) {
+      toast.success({
+        title: 'Succès',
+        message: checked
+          ? `${successCount} ligne(s) validée(s).`
+          : `${successCount} validation(s) retirée(s).`
+      })
+      return
+    }
+
+    if (successCount === 0) {
+      toast.error({
+        title: 'Erreur',
+        message: 'Impossible de mettre à jour les validations.'
+      })
+      return
+    }
+
+    toast.error({
+      title: 'Erreur',
+      message: `${successCount} mise(s) à jour, ${failedCount} en échec.`
+    })
+  }
+
  const loadEmployees = async () => {
    const scopedEmployees = await listScopedEmployees()
    employees.value = sortEmployeesBySiteAndOrder(scopedEmployees)
@@ -312,20 +603,25 @@ export const useHoursPage = () => {
    }
  }

+  const loadDayContext = async () => {
+    dayContext.value = await getWorkHourDayContext(selectedDate.value)
+  }
+
  const refreshByDate = async () => {
    if (isAdmin.value) {
-      await Promise.all([loadWorkHours(), loadWeeklySummary()])
+      await Promise.all([loadWorkHours(), loadWeeklySummary(), loadDayContext(), loadAbsences()])
      return
    }

    weeklySummary.value = null
-    await loadWorkHours()
+    await Promise.all([loadWorkHours(), loadDayContext(), loadAbsences()])
  }

  const loadPage = async () => {
    isLoading.value = true
    try {
      await loadEmployees()
+      await loadAbsenceTypes()
      await refreshByDate()
    } finally {
      isLoading.value = false
@@ -347,11 +643,15 @@ export const useHoursPage = () => {
    selectedSiteIds.value = selectedSiteIds.value.filter((siteId) => currentSiteIds.includes(siteId))
  }, { immediate: true })

-  watch(isAdmin, (admin) => {
+  watch(isAdmin, async (admin) => {
    if (!admin) {
      viewMode.value = 'day'
      weeklySummary.value = null
+      await Promise.all([loadAbsenceTypes(), loadAbsences()])
+      return
    }
+    await loadAbsenceTypes()
+    await loadAbsences()
  }, { immediate: true })

  watch(selectedDate, async () => {
@@ -414,6 +714,11 @@ export const useHoursPage = () => {
    employees,
    visibleEmployees,
    rows,
+    absenceTypes,
+    absenceForm,
+    isAbsenceDrawerOpen,
+    isAbsenceSubmitting,
+    editingAbsence,
    weeklySummary,
    filteredWeeklySummary,
    isLoading,
@@ -425,17 +730,34 @@ export const useHoursPage = () => {
    formattedSelectedDate,
    weekDayHeaders,
    shortcutButtonClass,
+    weekShortcutButtonClass,
+    getWeekShortcutLabel,
    setToday,
    setYesterday,
    setTomorrow,
+    setThisWeek,
+    setPreviousWeek,
+    setNextWeek,
    shiftDate,
    contractLabel,
    isTimeTracking,
    isPresenceTracking,
    isRowLocked,
+    isHalfLockedByAbsence,
+    isEveningLockedByAbsence,
    isValidationPending,
+    canToggleValidation,
+    isBulkValidationChecked,
+    isBulkValidationIndeterminate,
    toggleValidation,
+    toggleValidationBulk,
    getRowMetrics,
+    getRowAbsenceLabel,
+    getPresenceDayValue,
+    openAbsenceDrawer,
+    submitAbsence,
+    deleteAbsenceFromDrawer,
+    closeAbsenceDrawer,
    formatMinutes,
    handleSave
  }
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -3,7 +3,9 @@ export default defineNuxtConfig({
    devtools: {enabled: false},
    ssr: false,
    app: {
-        baseURL: process.env.NUXT_PUBLIC_APP_BASE || '/'
+        baseURL: process.env.NODE_ENV === 'production'
+          ? (process.env.NUXT_PUBLIC_APP_BASE || '/')
+          : '/'
    },
    modules: [
      '@nuxtjs/tailwindcss',
@@ -37,4 +39,4 @@ export default defineNuxtConfig({
    typescript: {
        strict: true
    }
-})
+})
--- a/frontend/pages/absence-types.vue
+++ b/frontend/pages/absence-types.vue
@@ -19,10 +19,11 @@
    </div>

    <div v-else class="overflow-hidden rounded-lg border border-neutral-200 bg-white">
-      <div class="grid grid-cols-[120px_120px_1fr_200px] gap-4 border-b border-neutral-200 bg-tertiary-500 px-6 py-3 text-md font-semibold text-neutral-700">
+      <div class="grid grid-cols-[120px_160px_1fr_220px_200px] gap-4 border-b border-neutral-200 bg-tertiary-500 px-6 py-3 text-md font-semibold text-neutral-700">
        <span class="text-left">Code</span>
        <span class="text-left">Libellé</span>
        <span class="text-left">Couleur</span>
+        <span class="text-left">Compte en heures</span>
        <span class="text-right">Actions</span>
      </div>
      <div v-if="isLoading" class="px-6 py-4 text-md text-neutral-500">
@@ -32,7 +33,7 @@
        <div
          v-for="type in absenceTypes"
          :key="type.id"
-          class="grid grid-cols-[120px_120px_1fr_200px] items-center gap-4 border-b border-neutral-100 px-6 py-3 text-md text-neutral-800 last:border-b-0"
+          class="grid grid-cols-[120px_160px_1fr_220px_200px] items-center gap-4 border-b border-neutral-100 px-6 py-3 text-md text-neutral-800 last:border-b-0"
        >
          <span class="font-semibold text-left">{{ type.code }}</span>
          <span class="text-left">{{ type.label }}</span>
@@ -43,6 +44,14 @@
            />
            <span class="text-md uppercase text-neutral-500">{{ type.color }}</span>
          </div>
+          <div class="text-left">
+            <span
+              class="inline-flex rounded-md px-2 py-1 text-sm font-semibold"
+              :class="type.countAsWorkedHours ? 'bg-emerald-100 text-emerald-700' : 'bg-neutral-100 text-neutral-700'"
+            >
+              {{ type.countAsWorkedHours ? 'Oui' : 'Non' }}
+            </span>
+          </div>
          <div class="flex items-center justify-end gap-2">
            <button
              type="button"
@@ -94,6 +103,31 @@
            Le libellé est obligatoire.
          </p>
        </div>
+        <div>
+          <label class="text-md font-semibold text-neutral-700">
+            Compté comme travaillé
+          </label>
+          <div class="mt-2 flex items-center gap-6">
+            <label class="inline-flex items-center gap-2 text-md text-neutral-800">
+              <input
+                v-model="form.countAsWorkedHours"
+                type="radio"
+                class="h-4 w-4"
+                :value="true"
+              />
+              Oui
+            </label>
+            <label class="inline-flex items-center gap-2 text-md text-neutral-800">
+              <input
+                v-model="form.countAsWorkedHours"
+                type="radio"
+                class="h-4 w-4"
+                :value="false"
+              />
+              Non
+            </label>
+          </div>
+        </div>
        <div>
          <label class="text-md font-semibold text-neutral-700" for="color">
            Couleur <span class="text-red-600">*</span>
@@ -150,7 +184,8 @@ const drawerTitle = computed(() =>
 const form = reactive({
  code: '',
  label: '',
-  color: '#222783'
+  color: '#222783',
+  countAsWorkedHours: true
 })

 const validationTouched = reactive({
@@ -214,6 +249,7 @@ const resetForm = () => {
  form.code = ''
  form.label = ''
  form.color = '#222783'
+  form.countAsWorkedHours = true
 }

 const openCreate = () => {
@@ -227,6 +263,7 @@ const openEdit = (type: AbsenceType) => {
  form.code = type.code
  form.label = type.label
  form.color = type.color
+  form.countAsWorkedHours = type.countAsWorkedHours
  isDrawerOpen.value = true
 }

@@ -249,13 +286,15 @@ const handleSubmit = async () => {
      await updateAbsenceType(editingType.value.id, {
        code: form.code,
        label: form.label,
-        color: form.color
+        color: form.color,
+        countAsWorkedHours: form.countAsWorkedHours
      })
    } else {
      await createAbsenceType({
        code: form.code,
        label: form.label,
-        color: form.color
+        color: form.color,
+        countAsWorkedHours: form.countAsWorkedHours
      })
    }

--- a/frontend/pages/hours.vue
+++ b/frontend/pages/hours.vue
@@ -13,9 +13,14 @@
            :sites="sites"
            :formatted-selected-date="formattedSelectedDate"
            :shortcut-button-class="shortcutButtonClass"
+            :week-shortcut-button-class="weekShortcutButtonClass"
+            :get-week-shortcut-label="getWeekShortcutLabel"
            @set-yesterday="setYesterday"
            @set-today="setToday"
            @set-tomorrow="setTomorrow"
+            @set-previous-week="setPreviousWeek"
+            @set-this-week="setThisWeek"
+            @set-next-week="setNextWeek"
            @shift-date="shiftDate"
        />

@@ -28,30 +33,43 @@
        </div>

        <div v-else class="flex flex-1 min-h-0 flex-col gap-4">
-            <HoursDayView
-                v-if="viewMode === 'day'"
-                v-model:rows="rows"
-                :employees="visibleEmployees"
-                :is-admin="isAdmin"
-                :day-grid-cols="dayGridCols"
-                :contract-label="contractLabel"
-                :is-time-tracking="isTimeTracking"
+            <div class="flex-1 min-h-0 flex flex-col">
+                <HoursDayView
+                    v-if="viewMode === 'day'"
+                    v-model:rows="rows"
+                    :employees="visibleEmployees"
+                    :is-admin="isAdmin"
+                    :day-grid-cols="dayGridCols"
+                    :contract-label="contractLabel"
+                    :is-time-tracking="isTimeTracking"
                :is-presence-tracking="isPresenceTracking"
                :is-row-locked="isRowLocked"
+                :is-half-locked-by-absence="isHalfLockedByAbsence"
+                :is-evening-locked-by-absence="isEveningLockedByAbsence"
                :is-validation-pending="isValidationPending"
+                :can-toggle-validation="canToggleValidation"
+                :is-bulk-validation-checked="isBulkValidationChecked"
+                :is-bulk-validation-indeterminate="isBulkValidationIndeterminate"
                :on-toggle-validation="toggleValidation"
+                :on-toggle-validation-bulk="toggleValidationBulk"
                :get-row-metrics="getRowMetrics"
+                :get-row-absence-label="getRowAbsenceLabel"
+                :get-presence-day-value="getPresenceDayValue"
+                :on-absence-click="openAbsenceDrawer"
                :format-minutes="formatMinutes"
+                class="max-h-full"
            />

-            <HoursWeekView
-                v-else-if="isAdmin && viewMode === 'week'"
-                :is-week-loading="isWeekLoading"
-                :week-grid-cols="weekGridCols"
-                :weekly-summary="filteredWeeklySummary"
-                :week-day-headers="weekDayHeaders"
-                :format-minutes="formatMinutes"
-            />
+                <HoursWeekView
+                    v-else-if="isAdmin && viewMode === 'week'"
+                    :is-week-loading="isWeekLoading"
+                    :week-grid-cols="weekGridCols"
+                    :weekly-summary="filteredWeeklySummary"
+                    :week-day-headers="weekDayHeaders"
+                    :format-minutes="formatMinutes"
+                    class="max-h-full"
+                />
+            </div>

            <div v-if="viewMode === 'day'" class="shrink-0 px-4 pt-4 flex justify-center">
                <button
@@ -65,6 +83,21 @@
                </button>
            </div>
        </div>
+
+        <AbsenceFormDrawer
+            v-model="isAbsenceDrawerOpen"
+            :employees="employees"
+            :absence-types="absenceTypes"
+            :form="absenceForm"
+            :editing-absence="editingAbsence"
+            :is-submitting="isAbsenceSubmitting"
+            :lock-employee="true"
+            :lock-dates="true"
+            :show-comment="false"
+            @submit="submitAbsence"
+            @delete="deleteAbsenceFromDrawer"
+            @cancel="closeAbsenceDrawer"
+        />
    </div>
 </template>

@@ -79,6 +112,11 @@ const {
  employees,
  visibleEmployees,
  rows,
+  absenceTypes,
+  absenceForm,
+  isAbsenceDrawerOpen,
+  isAbsenceSubmitting,
+  editingAbsence,
  filteredWeeklySummary,
  isLoading,
  isWeekLoading,
@@ -89,17 +127,34 @@ const {
  formattedSelectedDate,
  weekDayHeaders,
  shortcutButtonClass,
+  weekShortcutButtonClass,
+  getWeekShortcutLabel,
  setToday,
  setYesterday,
  setTomorrow,
+  setThisWeek,
+  setPreviousWeek,
+  setNextWeek,
  shiftDate,
  contractLabel,
  isTimeTracking,
  isPresenceTracking,
  isRowLocked,
+  isHalfLockedByAbsence,
+  isEveningLockedByAbsence,
  isValidationPending,
+  canToggleValidation,
+  isBulkValidationChecked,
+  isBulkValidationIndeterminate,
  toggleValidation,
+  toggleValidationBulk,
  getRowMetrics,
+  getRowAbsenceLabel,
+  getPresenceDayValue,
+  openAbsenceDrawer,
+  submitAbsence,
+  deleteAbsenceFromDrawer,
+  closeAbsenceDrawer,
  formatMinutes,
  handleSave
 } = useHoursPage()
--- a/frontend/services/absence-types.ts
+++ b/frontend/services/absence-types.ts
@@ -12,7 +12,7 @@ export const listAbsenceTypes = async () => {
 }

 export const createAbsenceType = async (
-  payload: Pick<AbsenceType, 'code' | 'label' | 'color'>
+  payload: Pick<AbsenceType, 'code' | 'label' | 'color' | 'countAsWorkedHours'>
 ) => {
  const api = useApi()
  return api.post<AbsenceType>('/absence_types', payload, {
@@ -23,7 +23,7 @@ export const createAbsenceType = async (

 export const updateAbsenceType = async (
  id: number,
-  payload: Pick<AbsenceType, 'code' | 'label' | 'color'>
+  payload: Pick<AbsenceType, 'code' | 'label' | 'color' | 'countAsWorkedHours'>
 ) => {
  const api = useApi()
  return api.patch<AbsenceType>(`/absence_types/${id}`, payload, {
--- a/frontend/services/dto/absence-type.ts
+++ b/frontend/services/dto/absence-type.ts
@@ -3,4 +3,5 @@ export type AbsenceType = {
  code: string
  label: string
  color: string
+  countAsWorkedHours: boolean
 }
--- a/frontend/services/dto/work-hour.ts
+++ b/frontend/services/dto/work-hour.ts
@@ -47,8 +47,10 @@ export type WeeklyWorkHourRowSummary = {
  weeklyNightMinutes: number
  weeklyTotalMinutes: number
  weeklyPresenceCount?: number
+  weeklyOvertimeTotalMinutes?: number
  weeklyOvertime25Minutes?: number
  weeklyOvertime50Minutes?: number
+  weeklyRecoveryMinutes?: number
 }

 export type WeeklyWorkHourSummary = {
@@ -57,3 +59,18 @@ export type WeeklyWorkHourSummary = {
  days: string[]
  rows: WeeklyWorkHourRowSummary[]
 }
+
+export type WorkHourDayContextRow = {
+  employeeId: number
+  absenceLabel?: string | null
+  absenceHalf?: 'AM' | 'PM' | null
+  absentMorning: boolean
+  absentAfternoon: boolean
+  creditedMinutes: number
+  creditedPresenceUnits: number
+}
+
+export type WorkHourDayContext = {
+  workDate: string
+  rows: WorkHourDayContextRow[]
+}
--- a/frontend/services/work-hours.ts
+++ b/frontend/services/work-hours.ts
@@ -1,4 +1,5 @@
 import type {
+  WorkHourDayContext,
  WorkHour,
  WorkHourEntryPayload,
  WeeklyWorkHourSummary
@@ -39,12 +40,17 @@ export const bulkUpsertWorkHours = async (payload: {
  )
 }

-export const updateWorkHourValidation = async (id: number, isValid: boolean) => {
+export const updateWorkHourValidation = async (
+  id: number,
+  isValid: boolean,
+  options?: { toast?: boolean }
+) => {
  const api = useApi()
  return api.patch<WorkHour>(
    `/work_hours/${id}`,
    { isValid },
    {
+      toast: options?.toast ?? true,
      toastSuccessMessage: isValid ? 'Ligne validée.' : 'Validation retirée.',
      toastErrorMessage: 'Impossible de mettre à jour la validation.'
    }
@@ -59,3 +65,12 @@ export const getWeeklyWorkHourSummary = async (weekStart: string) => {
    { toast: false }
  )
 }
+
+export const getWorkHourDayContext = async (workDate: string) => {
+  const api = useApi()
+  return api.get<WorkHourDayContext>(
+    '/work-hours/day-context',
+    { workDate },
+    { toast: false }
+  )
+}
--- a/frontend/utils/date.ts
+++ b/frontend/utils/date.ts
@@ -42,6 +42,46 @@ export const getWeekStartDate = (date: Date) => {
  return copy
 }

+export const getIsoWeekNumber = (date: Date) => {
+  const utc = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()))
+  const day = utc.getUTCDay() || 7
+  utc.setUTCDate(utc.getUTCDate() + 4 - day)
+  const yearStart = new Date(Date.UTC(utc.getUTCFullYear(), 0, 1))
+  return Math.ceil((((utc.getTime() - yearStart.getTime()) / 86400000) + 1) / 7)
+}
+
+export const getIsoWeekYear = (date: Date) => {
+  const utc = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()))
+  const day = utc.getUTCDay() || 7
+  utc.setUTCDate(utc.getUTCDate() + 4 - day)
+  return utc.getUTCFullYear()
+}
+
+export const ymdToWeekInputValue = (dateYmd: string) => {
+  const parsed = parseYmd(dateYmd)
+  if (!parsed) return ''
+  const weekDate = getWeekStartDate(parsed)
+  const weekNumber = getIsoWeekNumber(weekDate)
+  const weekYear = getIsoWeekYear(weekDate)
+  return `${weekYear}-W${String(weekNumber).padStart(2, '0')}`
+}
+
+export const weekInputValueToYmd = (weekValue: string) => {
+  const match = /^(\d{4})-W(\d{2})$/.exec(weekValue)
+  if (!match) return null
+
+  const year = Number(match[1])
+  const week = Number(match[2])
+  if (!Number.isInteger(year) || !Number.isInteger(week) || week < 1 || week > 53) return null
+
+  const jan4 = new Date(year, 0, 4)
+  const week1Monday = getWeekStartDate(jan4)
+  const monday = new Date(week1Monday)
+  monday.setDate(week1Monday.getDate() + ((week - 1) * 7))
+
+  return toYmd(monday.getFullYear(), monday.getMonth(), monday.getDate())
+}
+
 export const getTodayYmd = () => {
  const date = new Date()
  return toYmd(date.getFullYear(), date.getMonth(), date.getDate())
@@ -64,6 +104,7 @@ export const formatWeekRangeFr = (date: Date) => {
  const start = getWeekStartDate(date)
  const end = new Date(start)
  end.setDate(start.getDate() + 6)
+  const weekNumber = getIsoWeekNumber(start)

  const formatter = new Intl.DateTimeFormat('fr-FR', {
    day: '2-digit',
@@ -71,7 +112,7 @@ export const formatWeekRangeFr = (date: Date) => {
    year: 'numeric'
  })

-  return `Semaine du ${formatter.format(start)} au ${formatter.format(end)}`
+  return `S${weekNumber} du ${formatter.format(start)} au ${formatter.format(end)}`
 }

 export const getDaysInMonth = (year: number, month: number) => {