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

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

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>

frontend/i18n/locales/fr.json

@@ -166,7 +166,11 @@
     },
     "common": {
         "cancel": "Annuler",
-        "loading": "Chargement..."
+        "loading": "Chargement...",
+        "dateFilter": "Date",
+        "today": "Aujourd'hui",
+        "thisWeek": "Cette semaine",
+        "clear": "Effacer"
     },
     "gitea": {
         "settings": {

frontend/nuxt.config.ts

@@ -62,5 +62,8 @@ export default defineNuxtConfig({
     },
     typescript: {
         strict: true
+    },
+    build: {
+        transpile: ['@vuepic/vue-datepicker']
     }
 })

frontend/package-lock.json

@@ -12,6 +12,7 @@
                 "@nuxtjs/i18n": "^10.2.3",
                 "@nuxtjs/tailwindcss": "^6.14.0",
                 "@pinia/nuxt": "^0.11.3",
+                "@vuepic/vue-datepicker": "^12.1.0",
                 "chart.js": "^4.5.1",
                 "nuxt": "^4.3.1",
                 "nuxt-toast": "^1.4.0",
@@ -541,6 +542,12 @@
                 "postcss-selector-parser": "^7.0.0"
             }
         },
+        "node_modules/@date-fns/tz": {
+            "version": "1.4.1",
+            "resolved": "https://registry.npmjs.org/@date-fns/tz/-/tz-1.4.1.tgz",
+            "integrity": "sha512-P5LUNhtbj6YfI3iJjw5EL9eUAG6OitD0W3fWQcpQjDRc/QIsL0tRNuO1PcDvPccWL1fSTXXdE1ds+l95DV/OFA==",
+            "license": "MIT"
+        },
         "node_modules/@dxup/nuxt": {
             "version": "0.3.2",
             "resolved": "https://registry.npmjs.org/@dxup/nuxt/-/nuxt-0.3.2.tgz",
@@ -1094,6 +1101,68 @@
                 "node": "^20.19.0 || ^22.13.0 || >=24"
             }
         },
+        "node_modules/@floating-ui/core": {
+            "version": "1.7.5",
+            "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.5.tgz",
+            "integrity": "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@floating-ui/utils": "^0.2.11"
+            }
+        },
+        "node_modules/@floating-ui/dom": {
+            "version": "1.7.6",
+            "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.6.tgz",
+            "integrity": "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@floating-ui/core": "^1.7.5",
+                "@floating-ui/utils": "^0.2.11"
+            }
+        },
+        "node_modules/@floating-ui/utils": {
+            "version": "0.2.11",
+            "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.11.tgz",
+            "integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
+            "license": "MIT"
+        },
+        "node_modules/@floating-ui/vue": {
+            "version": "1.1.11",
+            "resolved": "https://registry.npmjs.org/@floating-ui/vue/-/vue-1.1.11.tgz",
+            "integrity": "sha512-HzHKCNVxnGS35r9fCHBc3+uCnjw9IWIlCPL683cGgM9Kgj2BiAl8x1mS7vtvP6F9S/e/q4O6MApwSHj8hNLGfw==",
+            "license": "MIT",
+            "dependencies": {
+                "@floating-ui/dom": "^1.7.6",
+                "@floating-ui/utils": "^0.2.11",
+                "vue-demi": ">=0.13.0"
+            }
+        },
+        "node_modules/@floating-ui/vue/node_modules/vue-demi": {
+            "version": "0.14.10",
+            "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+            "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+            "hasInstallScript": true,
+            "license": "MIT",
+            "bin": {
+                "vue-demi-fix": "bin/vue-demi-fix.js",
+                "vue-demi-switch": "bin/vue-demi-switch.js"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            },
+            "peerDependencies": {
+                "@vue/composition-api": "^1.0.0-rc.1",
+                "vue": "^3.0.0-0 || ^2.6.0"
+            },
+            "peerDependenciesMeta": {
+                "@vue/composition-api": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@humanfs/core": {
             "version": "0.19.1",
             "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -5259,6 +5328,12 @@
             "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==",
             "license": "MIT"
         },
+        "node_modules/@types/web-bluetooth": {
+            "version": "0.0.21",
+            "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
+            "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==",
+            "license": "MIT"
+        },
         "node_modules/@typescript-eslint/project-service": {
             "version": "8.56.1",
             "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.56.1.tgz",
@@ -5720,6 +5795,62 @@
             "integrity": "sha512-w7SR0A5zyRByL9XUkCfdLs7t9XOHUyJ67qPGQjOou3p6GvBeBW+AVjUUmlxtZ4PIYaRvE+1LmK44O4uajlZwcg==",
             "license": "MIT"
         },
+        "node_modules/@vuepic/vue-datepicker": {
+            "version": "12.1.0",
+            "resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-12.1.0.tgz",
+            "integrity": "sha512-QuWcO+CqIGYFoRNCagp9xUY9sMK/OHUlVIDxBYjw7HjCTWXfuE/r3l3loB00faEtb0Teo3DeBn26hT3tYA5pgg==",
+            "license": "MIT",
+            "dependencies": {
+                "@date-fns/tz": "^1.4.1",
+                "@floating-ui/vue": "^1.1.9",
+                "@vueuse/core": "^14.1.0",
+                "date-fns": "^4.1.0"
+            },
+            "engines": {
+                "node": ">=18.12.0"
+            },
+            "peerDependencies": {
+                "vue": ">=3.5.0"
+            }
+        },
+        "node_modules/@vueuse/core": {
+            "version": "14.2.1",
+            "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-14.2.1.tgz",
+            "integrity": "sha512-3vwDzV+GDUNpdegRY6kzpLm4Igptq+GA0QkJ3W61Iv27YWwW/ufSlOfgQIpN6FZRMG0mkaz4gglJRtq5SeJyIQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/web-bluetooth": "^0.0.21",
+                "@vueuse/metadata": "14.2.1",
+                "@vueuse/shared": "14.2.1"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            },
+            "peerDependencies": {
+                "vue": "^3.5.0"
+            }
+        },
+        "node_modules/@vueuse/metadata": {
+            "version": "14.2.1",
+            "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-14.2.1.tgz",
+            "integrity": "sha512-1ButlVtj5Sb/HDtIy1HFr1VqCP4G6Ypqt5MAo0lCgjokrk2mvQKsK2uuy0vqu/Ks+sHfuHo0B9Y9jn9xKdjZsw==",
+            "license": "MIT",
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            }
+        },
+        "node_modules/@vueuse/shared": {
+            "version": "14.2.1",
+            "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-14.2.1.tgz",
+            "integrity": "sha512-shTJncjV9JTI4oVNyF1FQonetYAiTBd+Qj7cY89SWbXSkx7gyhrgtEdF2ZAVWS1S3SHlaROO6F2IesJxQEkZBw==",
+            "license": "MIT",
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            },
+            "peerDependencies": {
+                "vue": "^3.5.0"
+            }
+        },
         "node_modules/abbrev": {
             "version": "3.0.1",
             "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-3.0.1.tgz",
@@ -7126,6 +7257,16 @@
             "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
             "license": "MIT"
         },
+        "node_modules/date-fns": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+            "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/kossnocorp"
+            }
+        },
         "node_modules/db0": {
             "version": "0.3.4",
             "resolved": "https://registry.npmjs.org/db0/-/db0-0.3.4.tgz",

frontend/package.json

@@ -16,6 +16,7 @@
         "@nuxtjs/i18n": "^10.2.3",
         "@nuxtjs/tailwindcss": "^6.14.0",
         "@pinia/nuxt": "^0.11.3",
+        "@vuepic/vue-datepicker": "^12.1.0",
         "chart.js": "^4.5.1",
         "nuxt": "^4.3.1",
         "nuxt-toast": "^1.4.0",

frontend/pages/projects/[id]/index.vue

@@ -3,13 +3,22 @@
         <div class="sticky top-8 z-20 bg-white pb-4 sm:top-12">
             <div class="flex items-center justify-between gap-3">
                 <h1 class="text-xl font-bold text-primary-500 sm:text-2xl">{{ project?.name ?? '' }}</h1>
-                <button
-                    class="shrink-0 rounded-md bg-primary-500 px-3 py-2 text-xs font-semibold text-white hover:bg-secondary-500 sm:px-4 sm:text-sm"
-                    @click="openTaskCreate"
-                >
-                    <span class="hidden sm:inline">+ Ajouter un ticket</span>
-                    <span class="sm:hidden">+ Ticket</span>
-                </button>
+                <div class="flex items-center gap-2">
+                    <button
+                        class="shrink-0 rounded-md bg-primary-500 px-3 py-2 text-xs font-semibold text-white hover:bg-secondary-500 sm:px-4 sm:text-sm"
+                        @click="openTaskCreate"
+                    >
+                        <span class="hidden sm:inline">+ Ajouter un ticket</span>
+                        <span class="sm:hidden">+ Ticket</span>
+                    </button>
+                    <button
+                        class="flex shrink-0 items-center rounded-md bg-neutral-200 px-3 py-2 text-neutral-600 hover:bg-neutral-300 sm:px-4"
+                        title="Paramètres du projet"
+                        @click="projectDrawerOpen = true"
+                    >
+                        <Icon name="heroicons:cog-6-tooth" class="size-4 sm:size-5" />
+                    </button>
+                </div>
             </div>
 
             <div class="mt-4 flex flex-wrap gap-3">
@@ -120,6 +129,13 @@
             @saved="onSaved"
         />
 
+        <ProjectDrawer
+            v-model="projectDrawerOpen"
+            :project="project"
+            :clients="clients"
+            @saved="onProjectSaved"
+        />
+
     </div>
 </template>
 
@@ -132,7 +148,9 @@ import type { TaskPriority } from '~/services/dto/task-priority'
 import type { TaskTag } from '~/services/dto/task-tag'
 import type { TaskGroup } from '~/services/dto/task-group'
 import type { UserData } from '~/services/dto/user-data'
+import type { Client } from '~/services/dto/client'
 import { useProjectService } from '~/services/projects'
+import { useClientService } from '~/services/clients'
 import { useTaskService } from '~/services/tasks'
 import { useTaskStatusService } from '~/services/task-statuses'
 import { useTaskEffortService } from '~/services/task-efforts'
@@ -147,6 +165,7 @@ const projectId = computed(() => Number(route.params.id))
 useHead({ title: 'Projet' })
 
 const projectService = useProjectService()
+const clientService = useClientService()
 const taskService = useTaskService()
 const statusService = useTaskStatusService()
 const effortService = useTaskEffortService()
@@ -163,6 +182,7 @@ const priorities = ref<TaskPriority[]>([])
 const tags = ref<TaskTag[]>([])
 const groups = ref<TaskGroup[]>([])
 const users = ref<UserData[]>([])
+const clients = ref<Client[]>([])
 const isLoading = ref(true)
 
 const selectedGroupId = ref<number | null>(null)
@@ -172,6 +192,7 @@ const selectedStatusId = ref<number | null>(null)
 const dragOverStatusId = ref<number | null>(null)
 const dragCounter = ref(0)
 const taskDrawerOpen = ref(false)
+const projectDrawerOpen = ref(false)
 const selectedTask = ref<Task | null>(null)
 
 const groupFilterOptions = computed(() =>
@@ -218,7 +239,7 @@ const backlogTasks = computed(() =>
 async function loadData() {
     isLoading.value = true
     try {
-        const [p, t, s, e, pr, ty, g, u] = await Promise.all([
+        const [p, t, s, e, pr, ty, g, u, c] = await Promise.all([
             projectService.getById(projectId.value),
             taskService.getByProject(projectId.value),
             statusService.getAll(),
@@ -227,6 +248,7 @@ async function loadData() {
             tagService.getAll(),
             groupService.getByProject(projectId.value),
             userService.getAll(),
+            clientService.getAll(),
         ])
         project.value = p
         tasks.value = t
@@ -236,6 +258,7 @@ async function loadData() {
         tags.value = ty
         groups.value = g
         users.value = u
+        clients.value = c
     } finally {
         isLoading.value = false
     }
@@ -290,6 +313,10 @@ async function onSaved() {
     await loadData()
 }
 
+async function onProjectSaved() {
+    await loadData()
+}
+
 onMounted(() => {
     loadData()
 })

frontend/pages/time-tracking.vue

@@ -70,6 +70,8 @@
                         text-value="text-sm"
                     />
                 </div>
+
+                <DateFilter v-model="selectedDateFilter" />
             </div>
         </div>
 
@@ -136,6 +138,7 @@ const startDate = ref(getMonday(new Date()))
 const selectedUserId = ref<number | null>(authStore.user?.id ?? null)
 const selectedTagId = ref<number | null>(null)
 const selectedProjectId = ref<number | null>(null)
+const selectedDateFilter = ref<Date | [Date, Date] | null>(null)
 
 const entries = ref<TimeEntry[]>([])
 const users = ref<UserData[]>([])
@@ -189,6 +192,28 @@ const filteredEntries = computed(() => {
     if (selectedTagId.value) {
         result = result.filter((e) => e.tags.some((t) => t.id === selectedTagId.value))
     }
+    if (selectedDateFilter.value) {
+        if (Array.isArray(selectedDateFilter.value)) {
+            const [start, end] = selectedDateFilter.value
+            const startDay = new Date(start)
+            startDay.setHours(0, 0, 0, 0)
+            const endDay = new Date(end)
+            endDay.setHours(23, 59, 59, 999)
+            result = result.filter((e) => {
+                const entryDate = new Date(e.startedAt)
+                return entryDate >= startDay && entryDate <= endDay
+            })
+        } else {
+            const day = new Date(selectedDateFilter.value)
+            day.setHours(0, 0, 0, 0)
+            const nextDay = new Date(day)
+            nextDay.setDate(nextDay.getDate() + 1)
+            result = result.filter((e) => {
+                const entryDate = new Date(e.startedAt)
+                return entryDate >= day && entryDate < nextDay
+            })
+        }
+    }
     return result
 })