fix : wip

frontend/components/CalendarGrid.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="h-full min-h-0 overflow-auto rounded-lg border border-neutral-200 bg-white">
         <div class="min-w-[900px]">
-            <div class="grid" :style="gridStyle">
+            <div class="grid" :style="gridStyle" @mouseleave="clearHoveredCell">
                 <div
                     class="sticky left-0 top-0 z-30 border-b border-neutral-200 bg-tertiary-500 px-4 py-3 text-md font-semibold text-neutral-700"
                 >
@@ -10,16 +10,23 @@
                 <div
                     v-for="day in daysInMonth"
                     :key="day.date"
-                    class="sticky top-0 z-20 border-b border-neutral-200 bg-tertiary-500 px-2 py-3 text-center text-xs font-semibold text-neutral-700"
+                    class="sticky top-0 z-20 border-b border-neutral-200 px-2 py-3 text-center text-xs font-semibold transition-colors"
+                    :class="isHoveredColumn(day.date) ? 'bg-primary-500 text-white' : 'bg-tertiary-500 text-neutral-700'"
                 >
                     <div>{{ day.label }}</div>
-                    <div class="text-[10px] text-neutral-500">{{ day.weekday }}</div>
+                    <div
+                        class="text-[10px]"
+                        :class="isHoveredColumn(day.date) ? 'text-white/90' : 'text-neutral-500'"
+                    >
+                        {{ day.weekday }}
+                    </div>
                 </div>
 
                 <template v-for="employee in visibleEmployees" :key="employee.id">
                     <div
-                        class="sticky left-0 z-10 border-b border-neutral-100 px-4 py-3 text-md font-semibold text-black cursor-pointer"
-                        :style="{ backgroundColor: employee.site?.color ?? '#304998' }"
+                        class="sticky left-0 z-10 border-b border-neutral-100 px-4 py-3 text-md font-semibold text-black cursor-pointer transition-shadow"
+                        :class="isHoveredRow(employee.id) ? 'bg-primary-500 text-white ring-2 ring-inset ring-primary-500/40' : ''"
+                        :style="rowHeaderStyle(employee)"
                         draggable="true"
                         @dragstart="handleDragStart($event, employee)"
                         @dragover="handleDragOver"
@@ -30,12 +37,14 @@
                     <div
                         v-for="day in daysInMonth"
                         :key="employee.id + '-' + day.date"
-                        class="border-b border-neutral-300 px-2 py-2 text-center text-xs text-neutral-800 hover:bg-neutral-500"
+                        class="border-b border-neutral-300 px-2 py-2 text-center text-xs text-neutral-800 transition-colors"
+                        :class="cellContainerClass(employee.id, day.date)"
+                        @mouseenter="setHoveredCell(employee.id, day.date)"
                     >
                         <template v-if="getCellInfo(employee.id, day.date)">
                             <button
                                 type="button"
-                                class="relative flex h-8 w-full items-center justify-center overflow-hidden rounded-md border border-neutral-200 text-[11px] font-semibold text-neutral-800 hover:border-white"
+                                class="relative flex h-8 w-full items-center justify-center overflow-hidden rounded-md border border-neutral-200 text-[11px] font-semibold text-neutral-800"
                                 :class="isHolidayDate(day.date) ? 'cursor-not-allowed opacity-80' : ''"
                                 :style="getCellStyle(employee.id, day.date)"
                                 :disabled="isHolidayDate(day.date)"
@@ -63,7 +72,7 @@
                         <template v-else>
                             <button
                                 type="button"
-                                class="relative flex h-8 w-full items-center justify-center rounded-md border border-neutral-200 text-[11px] font-semibold text-neutral-800 bg-white hover:border-white"
+                                class="relative flex h-8 w-full items-center justify-center rounded-md border border-neutral-200 text-[11px] font-semibold text-neutral-800 bg-white"
                                 :class="isHolidayDate(day.date) ? 'cursor-not-allowed opacity-80' : ''"
                                 :style="getCellStyle(employee.id, day.date)"
                                 :disabled="isHolidayDate(day.date)"
@@ -89,7 +98,7 @@ type DayInfo = {
     weekday: string
 }
 
-defineProps<{
+const props = defineProps<{
     daysInMonth: DayInfo[]
     visibleEmployees: Employee[]
     gridStyle: Record<string, string>
@@ -124,4 +133,56 @@ const handleDrop = (event: DragEvent, employee: Employee) => {
     if (!dragId || dragId === employee.id) return
     emit('reorder', { dragId, dropId: employee.id })
 }
+
+// Etat de la cellule actuellement survolee.
+const hoveredEmployeeId = ref<number | null>(null)
+const hoveredDate = ref<string | null>(null)
+
+const setHoveredCell = (employeeId: number, date: string) => {
+    hoveredEmployeeId.value = employeeId
+    hoveredDate.value = date
+}
+
+const clearHoveredCell = () => {
+    hoveredEmployeeId.value = null
+    hoveredDate.value = null
+}
+
+const isHoveredRow = (employeeId: number) => hoveredEmployeeId.value === employeeId
+
+const isHoveredColumn = (date: string) => hoveredDate.value === date
+
+// On garde la couleur du site tant que la ligne n'est pas survolee.
+const rowHeaderStyle = (employee: Employee) => {
+    if (isHoveredRow(employee.id)) return undefined
+    return { backgroundColor: employee.site?.color ?? '#304998' }
+}
+
+// Index de ligne par employe pour savoir si une case est "au-dessus" de la case survolee.
+const employeeIndexById = computed(() => {
+    const indexMap = new Map<number, number>()
+    props.visibleEmployees.forEach((employee, index) => {
+        indexMap.set(employee.id, index)
+    })
+    return indexMap
+})
+
+const cellContainerClass = (employeeId: number, date: string) => {
+    if (!hoveredEmployeeId.value || !hoveredDate.value) return 'hover:bg-primary-500'
+
+    const hoveredRowIndex = employeeIndexById.value.get(hoveredEmployeeId.value)
+    const currentRowIndex = employeeIndexById.value.get(employeeId)
+
+    // Forme en L:
+    // - ligne: toutes les cases a gauche (et la case cible)
+    // - colonne: toutes les cases au-dessus (et la case cible)
+    const isOnLeftSegment = isHoveredRow(employeeId) && date <= hoveredDate.value
+    const isOnTopSegment = isHoveredColumn(date)
+        && typeof hoveredRowIndex === 'number'
+        && typeof currentRowIndex === 'number'
+        && currentRowIndex <= hoveredRowIndex
+
+    if (isOnLeftSegment || isOnTopSegment) return 'bg-primary-500'
+    return 'hover:bg-primary-500'
+}
 </script>

frontend/components/EmployeeNameFilterInput.vue

@@ -0,0 +1,18 @@
+<template>
+  <input
+    v-model="model"
+    type="text"
+    :placeholder="placeholder"
+    class="h-10 w-full max-w-md rounded-md border border-neutral-300 bg-white px-3 text-md text-neutral-900"
+  />
+</template>
+
+<script setup lang="ts">
+const model = defineModel<string>({ required: true })
+
+withDefaults(defineProps<{
+  placeholder?: string
+}>(), {
+  placeholder: 'Chercher un employé (nom ou prénom)'
+})
+</script>

frontend/components/SiteFilterSelector.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="inline-flex w-fit max-w-full flex-wrap items-center gap-6 py-2">
+    <div v-for="site in sites" :key="site.id" class="flex items-center gap-2">
+      <div :style="{ backgroundColor: site.color }" class="h-4 w-4 rounded" />
+      <label class="text-md" :for="`site-${site.id}`">{{ site.name }}</label>
+      <input
+        :id="`site-${site.id}`"
+        v-model="selectedSiteIds"
+        :value="site.id"
+        type="checkbox"
+        class="h-4 w-4"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Site } from '~/services/dto/site'
+
+const selectedSiteIds = defineModel<number[]>({ required: true })
+
+defineProps<{
+  sites: Site[]
+}>()
+</script>

frontend/components/hours/HoursDayView.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="rounded-lg border border-neutral-200 bg-white overflow-hidden flex flex-1 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">Présent</span>
+        <span class="pl-2">Jour</span>
+        <span>Nuit</span>
+        <span>Total</span>
+        <span v-if="isAdmin">Valider</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)"/>
+          <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)"
+          />
+        </div>
+        <div class="pr-2">
+          <TimeSelect v-if="isTimeTracking(employee)" v-model="rows[employee.id].morningTo" :disabled="isRowLocked(employee.id)"/>
+        </div>
+        <div class="pl-2">
+          <TimeSelect v-if="isTimeTracking(employee)" v-model="rows[employee.id].afternoonFrom" :disabled="isRowLocked(employee.id)"/>
+          <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)"
+          />
+        </div>
+        <div class="pr-2">
+          <TimeSelect v-if="isTimeTracking(employee)" v-model="rows[employee.id].afternoonTo" :disabled="isRowLocked(employee.id)"/>
+        </div>
+        <div class="pl-2">
+          <TimeSelect v-if="isTimeTracking(employee)" v-model="rows[employee.id].eveningFrom" :disabled="isRowLocked(employee.id)"/>
+        </div>
+        <div class="pr-2">
+          <TimeSelect v-if="isTimeTracking(employee)" v-model="rows[employee.id].eveningTo" :disabled="isRowLocked(employee.id)"/>
+        </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>
+        <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>
+        <div v-if="isAdmin">
+          <input
+            :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)"
+            @change="onToggleValidation(employee.id, ($event.target as HTMLInputElement).checked)"
+          />
+        </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 })
+
+defineProps<{
+  employees: Employee[]
+  isAdmin: boolean
+  dayGridCols: string
+  contractLabel: (employee: Employee) => string
+  isTimeTracking: (employee: Employee) => boolean
+  isPresenceTracking: (employee: Employee) => boolean
+  isRowLocked: (employeeId: number) => boolean
+  isValidationPending: (employeeId: number) => boolean
+  onToggleValidation: (employeeId: number, checked: boolean) => void
+  getRowMetrics: (employeeId: number) => { dayMinutes: number; nightMinutes: number; totalMinutes: number }
+  formatMinutes: (minutes: number) => string
+}>()
+</script>

frontend/components/hours/HoursToolbar.vue

@@ -0,0 +1,144 @@
+<template>
+  <div class="py-6 flex flex-col gap-3">
+    <SiteFilterSelector v-if="sites.length > 0" 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 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"
+          class="pointer-events-none absolute inset-0 h-full w-full opacity-0"
+          tabindex="-1"
+          aria-hidden="true"
+        />
+        <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 class="w-80 max-w-full">
+      <EmployeeNameFilterInput v-model="employeeFilter" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Site } from '~/services/dto/site'
+import EmployeeNameFilterInput from '~/components/EmployeeNameFilterInput.vue'
+import SiteFilterSelector from '~/components/SiteFilterSelector.vue'
+
+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[]
+  formattedSelectedDate: string
+  shortcutButtonClass: (target: 'yesterday' | 'today' | 'tomorrow') => string
+}>()
+
+const emit = defineEmits<{
+  (e: 'set-yesterday'): void
+  (e: 'set-today'): void
+  (e: 'set-tomorrow'): void
+  (e: 'shift-date', value: number): void
+}>()
+
+const nativeDateInput = ref<HTMLInputElement | null>(null)
+
+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()
+}
+</script>

frontend/components/hours/HoursWeekView.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="rounded-lg border border-neutral-200 bg-white overflow-hidden flex flex-1 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 sem.</span>
+        <span>Total sem.</span>
+        <span>+25%</span>
+        <span>+50%</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"
+        :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">
+          <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.weeklyOvertime25Minutes ?? 0) }}
+        </div>
+        <div class="font-semibold">
+          {{ row.trackingMode === 'PRESENCE' ? '-' : formatMinutes(row.weeklyOvertime50Minutes ?? 0) }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { WeeklyWorkHourSummary } from '~/services/dto/work-hour'
+
+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
+}

frontend/components/ui/TimeSelect.vue

@@ -0,0 +1,151 @@
+<template>
+  <div ref="root" class="relative w-full">
+    <button
+      ref="trigger"
+      type="button"
+      class="w-full flex justify-between rounded-md border border-neutral-300 bg-white px-3 py-2 text-left text-sm text-neutral-900 focus:outline-none focus:border-primary-500 disabled:cursor-not-allowed disabled:bg-neutral-100 disabled:text-neutral-500"
+      :disabled="props.disabled"
+      @click="toggleOpen"
+    >
+      {{ displayValue }}
+        <Icon name="mdi:chevron-down" class="self-center"/>
+    </button>
+  </div>
+  <Teleport to="body">
+    <div
+      v-if="isOpen"
+      ref="menu"
+      class="fixed z-[120] overflow-y-auto rounded-md border border-neutral-300 bg-white shadow-sm"
+      :style="menuStyle"
+    >
+      <button
+        type="button"
+        class="block w-full px-2 py-2 text-left text-sm hover:bg-tertiary-500"
+        @click="selectValue('')"
+      >
+        {{ placeholder }}
+      </button>
+      <button
+        v-for="slot in timeSlots"
+        :key="slot"
+        type="button"
+        class="block w-full px-2 py-2 text-left text-sm hover:bg-tertiary-500"
+        @click="selectValue(slot)"
+      >
+        {{ slot }}
+      </button>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  modelValue: string
+  placeholder?: string
+  disabled?: boolean
+}>(), {
+  placeholder: '--',
+  disabled: false
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+const root = ref<HTMLElement | null>(null)
+const trigger = ref<HTMLElement | null>(null)
+const menu = ref<HTMLElement | null>(null)
+const isOpen = ref(false)
+const menuStyle = ref<Record<string, string>>({
+  top: '0px',
+  left: '0px',
+  width: '0px',
+  maxHeight: '224px'
+})
+
+const timeSlots = computed(() => {
+  const slots: string[] = []
+  for (let hour = 0; hour < 24; hour++) {
+    for (let minute = 0; minute < 60; minute += 15) {
+      slots.push(`${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}`)
+    }
+  }
+  return slots
+})
+
+const displayValue = computed(() => props.modelValue || props.placeholder)
+
+const updateMenuPosition = () => {
+  const triggerEl = trigger.value
+  if (!triggerEl) return
+
+  const rect = triggerEl.getBoundingClientRect()
+  const menuHeight = 224
+  const belowTop = rect.bottom + 4
+  const aboveTop = Math.max(8, rect.top - menuHeight - 4)
+  const canOpenBelow = belowTop + menuHeight <= window.innerHeight - 8
+  const top = canOpenBelow ? belowTop : aboveTop
+
+  menuStyle.value = {
+    top: `${top}px`,
+    left: `${rect.left}px`,
+    width: `${rect.width}px`,
+    maxHeight: `${menuHeight}px`
+  }
+}
+
+const toggleOpen = () => {
+  if (props.disabled) return
+  const next = !isOpen.value
+  isOpen.value = next
+  if (next) {
+    nextTick(updateMenuPosition)
+  }
+}
+
+const selectValue = (value: string) => {
+  if (props.disabled) return
+  emit('update:modelValue', value)
+  isOpen.value = false
+}
+
+const onDocumentClick = (event: MouseEvent) => {
+  const target = event.target as Node | null
+  if (!target) return
+  if (root.value?.contains(target) || menu.value?.contains(target)) return
+
+  isOpen.value = false
+}
+
+const onWindowChange = () => {
+  if (!isOpen.value) return
+  updateMenuPosition()
+}
+
+watch(isOpen, (open) => {
+  if (open) {
+    window.addEventListener('resize', onWindowChange)
+    window.addEventListener('scroll', onWindowChange, true)
+    nextTick(updateMenuPosition)
+  } else {
+    window.removeEventListener('resize', onWindowChange)
+    window.removeEventListener('scroll', onWindowChange, true)
+  }
+})
+
+watch(() => props.disabled, (disabled) => {
+  if (disabled) {
+    isOpen.value = false
+  }
+})
+
+onMounted(() => {
+  document.addEventListener('click', onDocumentClick)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('click', onDocumentClick)
+  window.removeEventListener('resize', onWindowChange)
+  window.removeEventListener('scroll', onWindowChange, true)
+})
+</script>