feat : date filter, project drawer, and misc frontend improvements

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-15 20:25:26 +01:00
parent 046ee396d3
commit f09ef67117
10 changed files with 852 additions and 9 deletions
--- a/frontend/components/ui/DateFilter.vue
+++ b/frontend/components/ui/DateFilter.vue
@@ -0,0 +1,161 @@
+<template>
+    <div class="date-filter">
+        <VueDatePicker
+            v-model="internalValue"
+            range
+            :enable-time-picker="false"
+            :locale="frLocale"
+            :format="formatDate"
+            auto-apply
+            :multi-calendars="false"
+            position="left"
+            @update:model-value="onUpdate"
+        >
+            <template #dp-input="{ value, onInput, onEnter, onTab, onClear, openMenu }">
+                <div class="relative">
+                    <input
+                        :value="value"
+                        class="w-full cursor-pointer rounded-md border border-neutral-300 bg-white px-3 py-[7px] text-sm text-neutral-700 outline-none transition placeholder:text-neutral-400 focus:border-primary-500"
+                        :placeholder="placeholder || t('common.dateFilter')"
+                        readonly
+                        @click="openMenu"
+                        @input="onInput"
+                        @keydown.enter="onEnter"
+                        @keydown.tab="onTab"
+                    />
+                    <button
+                        v-if="value"
+                        class="absolute right-2 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-neutral-600"
+                        @click.stop="onClear"
+                    >
+                        <Icon name="mdi:close-circle" size="16" />
+                    </button>
+                    <Icon
+                        v-else
+                        name="mdi:calendar"
+                        size="16"
+                        class="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-neutral-400"
+                    />
+                </div>
+            </template>
+
+            <template #action-buttons>
+                <div class="flex gap-2 px-3 pb-2">
+                    <button
+                        class="rounded px-2 py-1 text-xs font-medium text-primary-500 hover:bg-primary-500/10 transition"
+                        @click="selectToday"
+                    >
+                        {{ t('common.today') }}
+                    </button>
+                    <button
+                        class="rounded px-2 py-1 text-xs font-medium text-primary-500 hover:bg-primary-500/10 transition"
+                        @click="selectThisWeek"
+                    >
+                        {{ t('common.thisWeek') }}
+                    </button>
+                </div>
+            </template>
+        </VueDatePicker>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { VueDatePicker } from '@vuepic/vue-datepicker'
+import '@vuepic/vue-datepicker/dist/main.css'
+import { fr as frLocale } from 'date-fns/locale'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+    modelValue?: Date | [Date, Date] | null
+    placeholder?: string
+}>()
+
+const emit = defineEmits<{
+    'update:modelValue': [value: Date | [Date, Date] | null]
+}>()
+
+const internalValue = ref<Date[] | null>(null)
+
+function formatDate(dates: Date[]): string {
+    if (!dates || dates.length === 0) return ''
+    if (dates.length === 1) return formatSingleDate(dates[0])
+    if (isSameDay(dates[0], dates[1])) return formatSingleDate(dates[0])
+    return `${formatSingleDate(dates[0])} - ${formatSingleDate(dates[1])}`
+}
+
+function formatSingleDate(d: Date): string {
+    const day = String(d.getDate()).padStart(2, '0')
+    const month = String(d.getMonth() + 1).padStart(2, '0')
+    const year = d.getFullYear()
+    return `${day}/${month}/${year}`
+}
+
+function isSameDay(a: Date, b: Date): boolean {
+    return a.getFullYear() === b.getFullYear()
+        && a.getMonth() === b.getMonth()
+        && a.getDate() === b.getDate()
+}
+
+function onUpdate(value: Date[] | null) {
+    if (!value || value.length === 0) {
+        emit('update:modelValue', null)
+        return
+    }
+    if (value.length === 2 && isSameDay(value[0], value[1])) {
+        emit('update:modelValue', value[0])
+    } else if (value.length === 2) {
+        emit('update:modelValue', [value[0], value[1]])
+    }
+}
+
+function selectToday() {
+    const today = new Date()
+    today.setHours(0, 0, 0, 0)
+    internalValue.value = [today, today]
+    emit('update:modelValue', today)
+}
+
+function selectThisWeek() {
+    const now = new Date()
+    const day = now.getDay()
+    const monday = new Date(now)
+    monday.setDate(now.getDate() - day + (day === 0 ? -6 : 1))
+    monday.setHours(0, 0, 0, 0)
+    const sunday = new Date(monday)
+    sunday.setDate(monday.getDate() + 6)
+    sunday.setHours(23, 59, 59, 999)
+    internalValue.value = [monday, sunday]
+    emit('update:modelValue', [monday, sunday])
+}
+
+watch(() => props.modelValue, (val) => {
+    if (val === null || val === undefined) {
+        internalValue.value = null
+    } else if (Array.isArray(val)) {
+        internalValue.value = [...val]
+    } else {
+        internalValue.value = [val, val]
+    }
+}, { immediate: true })
+</script>
+
+<style>
+.date-filter .dp__theme_light {
+    --dp-primary-color: #222783;
+    --dp-primary-text-color: #fff;
+    --dp-border-color: #d4d4d8;
+    --dp-menu-border-color: #d4d4d8;
+    --dp-border-color-hover: #222783;
+    --dp-hover-color: #f3f4f8;
+    --dp-font-size: 0.875rem;
+}
+
+.date-filter .dp__input_wrap {
+    width: auto;
+}
+
+.date-filter .dp__main {
+    font-family: inherit;
+}
+</style>