refactor(time-tracking) : use MalioSelect for filters and drawer, improve calendar cards

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/components/TimeEntryBlock.vue

@@ -18,27 +18,29 @@
         </div>
 
         <div class="px-1.5 py-0.5 h-full overflow-hidden">
-            <!-- Full display: title + project + types + duration -->
+            <!-- Full display: title + project + type dot + duration -->
             <template v-if="sizeLevel >= 3">
-                <div class="font-semibold truncate">{{ entry.title || 'Sans titre' }}</div>
+                <div class="flex items-center gap-1">
+                    <div class="font-semibold truncate">{{ entry.title || 'Sans titre' }}</div>
+                    <span class="ml-auto shrink-0 text-[10px] tabular-nums opacity-80">{{ duration }}</span>
+                </div>
                 <div v-if="entry.project" class="truncate text-[10px] opacity-80">{{ entry.project.name }}</div>
-                <div class="mt-0.5 flex items-center gap-1">
+                <div v-if="entry.types.length" class="mt-0.5 flex items-center gap-1 overflow-hidden">
                     <span
                         v-for="type in entry.types"
                         :key="type.id"
-                        class="rounded-full px-1.5 py-0.5 text-[9px] font-semibold"
-                        :style="{ backgroundColor: type.color }"
+                        class="inline-flex items-center gap-0.5 truncate text-[9px] opacity-90"
                     >
+                        <span class="inline-block h-1.5 w-1.5 shrink-0 rounded-full" :style="{ backgroundColor: type.color }" />
                         {{ type.label }}
                     </span>
-                    <span class="ml-auto text-[10px] opacity-80">{{ duration }}</span>
                 </div>
             </template>
 
             <!-- Medium: title + duration -->
             <template v-else-if="sizeLevel === 2">
                 <div class="font-semibold truncate">{{ entry.title || 'Sans titre' }}</div>
-                <div class="text-[10px] opacity-80">{{ duration }}</div>
+                <div class="text-[10px] tabular-nums opacity-80">{{ duration }}</div>
             </template>
 
             <!-- Small: title only -->
@@ -88,13 +90,11 @@ const resizeTopDeltaMinutes = ref(0)
 const resizeBottomDeltaMinutes = ref(0)
 
 const duration = computed(() => {
-    const startMs = startDate.value.getTime() + resizeTopDeltaMinutes.value * 60000
-    const endMs = endDate.value.getTime() + resizeBottomDeltaMinutes.value * 60000
-    const diff = endMs - startMs
-    const h = Math.floor(diff / 3600000)
-    const m = Math.floor((diff % 3600000) / 60000)
-    const s = Math.floor((diff % 60000) / 1000)
-    return [h, m, s].map((v) => String(v).padStart(2, '0')).join(' : ')
+    const mins = Math.floor((endDate.value.getTime() + resizeBottomDeltaMinutes.value * 60000
+        - startDate.value.getTime() - resizeTopDeltaMinutes.value * 60000) / 60000)
+    const h = Math.floor(mins / 60)
+    const m = mins % 60
+    return m > 0 ? `${h}h${String(m).padStart(2, '0')}` : `${h}h`
 })
 
 const heightPx = computed(() => {

frontend/components/TimeEntryDrawer.vue

@@ -57,37 +57,28 @@
                 {{ durationLabel }}
             </div>
 
-            <div>
-                <label class="mb-1 block text-sm font-semibold text-neutral-700">Utilisateur</label>
-                <select
-                    v-model="form.userId"
-                    class="w-full rounded-md border border-neutral-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none"
-                >
-                    <option v-for="u in users" :key="u.id" :value="u.id">{{ u.username }}</option>
-                </select>
-            </div>
+            <MalioSelect
+                v-model="form.userId"
+                :options="userOptions"
+                label="Utilisateur"
+                min-width="w-full"
+            />
 
-            <div>
-                <label class="mb-1 block text-sm font-semibold text-neutral-700">Projet</label>
-                <select
-                    v-model="form.projectId"
-                    class="w-full rounded-md border border-neutral-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none"
-                >
-                    <option :value="null">— Aucun —</option>
-                    <option v-for="p in projects" :key="p.id" :value="p.id">{{ p.name }}</option>
-                </select>
-            </div>
+            <MalioSelect
+                v-model="form.projectId"
+                :options="projectOptions"
+                label="Projet"
+                empty-option-label="— Aucun —"
+                min-width="w-full"
+            />
 
-            <div>
-                <label class="mb-1 block text-sm font-semibold text-neutral-700">Type</label>
-                <select
-                    v-model="form.typeId"
-                    class="w-full rounded-md border border-neutral-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none"
-                >
-                    <option :value="null">— Aucun —</option>
-                    <option v-for="t in types" :key="t.id" :value="t.id">{{ t.label }}</option>
-                </select>
-            </div>
+            <MalioSelect
+                v-model="form.typeId"
+                :options="typeOptions"
+                label="Type"
+                empty-option-label="— Aucun —"
+                min-width="w-full"
+            />
 
             <div class="flex items-center" :class="isEditing ? 'justify-between' : 'justify-end'">
                 <button
@@ -150,6 +141,18 @@ const form = reactive({
     typeId: null as number | null,
 })
 
+const userOptions = computed(() =>
+    props.users.map(u => ({ label: u.username, value: u.id }))
+)
+
+const projectOptions = computed(() =>
+    props.projects.map(p => ({ label: p.name, value: p.id }))
+)
+
+const typeOptions = computed(() =>
+    props.types.map(t => ({ label: t.label, value: t.id }))
+)
+
 const durationLabel = computed(() => {
     if (!form.startTime || !form.endTime) return ''
     const [sh, sm] = form.startTime.split(':').map(Number) as [number, number]

frontend/pages/time-tracking.vue

@@ -10,7 +10,7 @@
             </button>
         </div>
 
-        <div class="mt-4 flex items-center gap-4">
+        <div class="relative z-30 mt-4 flex items-center gap-4">
             <h2 class="text-lg font-bold text-orange-500">
                 {{ currentMonthLabel }}
             </h2>
@@ -33,29 +33,35 @@
                 </button>
             </div>
 
-            <select
+            <MalioSelect
                 v-model="selectedUserId"
-                class="rounded-md border border-neutral-200 px-3 py-1.5 text-sm"
-                @change="loadEntries"
-            >
-                <option v-for="u in users" :key="u.id" :value="u.id">{{ u.username }}</option>
-            </select>
+                :options="userOptions"
+                min-width="!w-40"
+                text-field="text-sm"
+                text-value="text-sm"
+                label="User"
+                empty-option-label="User"
+            />
 
-            <select
+            <MalioSelect
                 v-model="selectedProjectId"
-                class="rounded-md border border-neutral-200 px-3 py-1.5 text-sm"
-            >
-                <option :value="null">Projet</option>
-                <option v-for="p in projects" :key="p.id" :value="p.id">{{ p.name }}</option>
-            </select>
+                :options="projectOptions"
+                empty-option-label="Tous"
+                label="Projet"
+                min-width="!w-40"
+                text-field="text-sm"
+                text-value="text-sm"
+            />
 
-            <select
+            <MalioSelect
                 v-model="selectedTypeId"
-                class="rounded-md border border-neutral-200 px-3 py-1.5 text-sm"
-            >
-                <option :value="null">Type</option>
-                <option v-for="t in types" :key="t.id" :value="t.id">{{ t.label }}</option>
-            </select>
+                :options="typeOptions"
+                empty-option-label="Tous"
+                label="Type"
+                min-width="!w-40"
+                text-field="text-sm"
+                text-value="text-sm"
+            />
         </div>
 
         <div class="mt-4">
@@ -145,6 +151,18 @@ const currentMonthLabel = computed(() => {
     return `${months[d.getMonth()]} ${d.getFullYear()}`
 })
 
+const userOptions = computed(() =>
+    users.value.map(u => ({ label: u.username, value: u.id }))
+)
+
+const projectOptions = computed(() =>
+    projects.value.map(p => ({ label: p.name, value: p.id }))
+)
+
+const typeOptions = computed(() =>
+    types.value.map(t => ({ label: t.label, value: t.id }))
+)
+
 const filteredEntries = computed(() => {
     let result = entries.value
     if (selectedProjectId.value) {
@@ -284,4 +302,8 @@ watch(viewMode, () => {
     startDate.value = viewMode.value === 'day' ? startDate.value : getMonday(startDate.value)
     loadEntries()
 })
+
+watch(selectedUserId, () => {
+    loadEntries()
+})
 </script>