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

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

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>