From 6a8e406cc5d94ac8e10f270e42fa50299b2fcebd Mon Sep 17 00:00:00 2001
From: Matthieu <mtholot19@gmail.com>
Date: Thu, 19 Mar 2026 10:33:50 +0100
Subject: [PATCH] feat(ui) : add deadline badges and calendar/recurrence icons
 to task cards and list items

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/components/task/TaskCard.vue     | 41 +++++++++++++++++++--
 frontend/components/task/TaskListItem.vue | 43 ++++++++++++++++++++---
 2 files changed, 77 insertions(+), 7 deletions(-)

diff --git a/frontend/components/task/TaskCard.vue b/frontend/components/task/TaskCard.vue
index 7f11c3b..5b91178 100644
--- a/frontend/components/task/TaskCard.vue
+++ b/frontend/components/task/TaskCard.vue
@@ -1,6 +1,6 @@
 <template>
     <div
-        class="cursor-pointer rounded-lg border border-neutral-200 bg-white p-3 shadow-sm transition hover:shadow-md"
+        class="cursor-pointer rounded-lg border border-neutral-200 bg-white p-3 shadow-sm transition hover:shadow-md dark:border-dark-border dark:bg-dark-card"
         draggable="true"
         @dragstart="onDragStart"
         @dragend="onDragEnd"
@@ -27,7 +27,7 @@
                         :title="$t('clientTicket.linkedTooltip', { number: 'CT-' + String(task.clientTicket.number).padStart(3, '0') })"
                     />
                 </div>
-                <h4 class="text-sm font-semibold text-neutral-900">{{ task.title }}</h4>
+                <h4 class="text-sm font-semibold text-neutral-900 dark:text-neutral-100">{{ task.title }}</h4>
             </div>
             <button
                 class="shrink-0 transition-colors"
@@ -54,6 +54,29 @@
             >
                 {{ tag.label }}
             </span>
+            <!-- Deadline badge -->
+            <span
+                v-if="task.deadline"
+                class="rounded-full px-2 py-0.5 text-xs font-semibold text-white"
+                :style="{ backgroundColor: deadlineColor }"
+                :title="task.deadline"
+            >
+                {{ formatDeadline(task.deadline) }}
+            </span>
+            <!-- Calendar sync icon -->
+            <Icon
+                v-if="task.syncToCalendar"
+                :name="task.calendarSyncError ? 'mdi:alert-circle' : 'mdi:calendar-check'"
+                :class="task.calendarSyncError ? 'text-red-500' : 'text-green-500'"
+                size="14"
+            />
+            <!-- Recurrence icon -->
+            <Icon
+                v-if="task.recurrence"
+                name="mdi:repeat"
+                class="text-blue-500"
+                size="14"
+            />
             <UserAvatar
                 v-if="task.assignee"
                 :user="task.assignee"
@@ -62,7 +85,7 @@
             />
             <span
                 v-else
-                class="ml-auto flex h-5 w-5 items-center justify-center rounded-full bg-neutral-200 text-neutral-400"
+                class="ml-auto flex h-5 w-5 items-center justify-center rounded-full bg-neutral-200 text-neutral-400 dark:bg-dark-hover dark:text-neutral-400"
             >
                 <Icon name="mdi:account-outline" size="14" />
             </span>
@@ -100,6 +123,18 @@ function onPlay() {
     timerStore.startFromTask(props.task)
 }
 
+const deadlineColor = computed(() => {
+    if (!props.task.deadline) return ''
+    const daysLeft = (new Date(props.task.deadline).getTime() - Date.now()) / 86400000
+    if (daysLeft < 0) return '#DC2626'
+    if (daysLeft < 2) return '#F59E0B'
+    return '#9CA3AF'
+})
+
+function formatDeadline(d: string): string {
+    return new Date(d).toLocaleDateString('fr-FR', { month: 'short', day: 'numeric' })
+}
+
 function onDragStart(event: DragEvent) {
     event.dataTransfer!.effectAllowed = 'move'
     event.dataTransfer!.setData('text/plain', String(props.task.id))
diff --git a/frontend/components/task/TaskListItem.vue b/frontend/components/task/TaskListItem.vue
index 95a0e19..a4e77fd 100644
--- a/frontend/components/task/TaskListItem.vue
+++ b/frontend/components/task/TaskListItem.vue
@@ -1,6 +1,6 @@
 <template>
     <div
-        class="flex cursor-pointer items-stretch gap-3 rounded-[10px] bg-white px-3 py-2.5 transition-colors hover:shadow-sm sm:px-4"
+        class="flex cursor-pointer items-stretch gap-3 rounded-[10px] bg-white px-3 py-2.5 transition-colors hover:shadow-sm sm:px-4 dark:bg-dark-card"
         :class="selected ? 'ring-2 ring-primary-500' : ''"
         @click="emit('click')"
     >
@@ -30,8 +30,8 @@
                 />
             </div>
             <!-- Row 2: title -->
-            <h4 class="mt-1 text-sm font-semibold text-neutral-900">{{ task.title }}</h4>
-            <!-- Row 3: tags + status -->
+            <h4 class="mt-1 text-sm font-semibold text-neutral-900 dark:text-neutral-100">{{ task.title }}</h4>
+            <!-- Row 3: tags + status + deadline/calendar/recurrence -->
             <div class="mt-2 flex flex-wrap items-center gap-1.5">
                 <span
                     v-for="tag in task.tags"
@@ -50,6 +50,29 @@
                 <span v-else class="text-xs font-semibold uppercase text-neutral-300">
                     Backlog
                 </span>
+                <!-- Deadline badge -->
+                <span
+                    v-if="task.deadline"
+                    class="rounded-full px-2 py-0.5 text-[10px] font-semibold text-white"
+                    :style="{ backgroundColor: deadlineColor }"
+                    :title="task.deadline"
+                >
+                    {{ formatDeadline(task.deadline) }}
+                </span>
+                <!-- Calendar sync icon -->
+                <Icon
+                    v-if="task.syncToCalendar"
+                    :name="task.calendarSyncError ? 'mdi:alert-circle' : 'mdi:calendar-check'"
+                    :class="task.calendarSyncError ? 'text-red-500' : 'text-green-500'"
+                    size="13"
+                />
+                <!-- Recurrence icon -->
+                <Icon
+                    v-if="task.recurrence"
+                    name="mdi:repeat"
+                    class="text-blue-500"
+                    size="13"
+                />
             </div>
         </div>
 
@@ -69,7 +92,7 @@
             />
             <span
                 v-else
-                class="flex h-5 w-5 items-center justify-center rounded-full bg-neutral-200 text-neutral-400"
+                class="flex h-5 w-5 items-center justify-center rounded-full bg-neutral-200 text-neutral-400 dark:bg-dark-hover"
             >
                 <Icon name="mdi:account-outline" size="14" />
             </span>
@@ -96,6 +119,18 @@ const emit = defineEmits<{
 
 const timerStore = useTimerStore()
 
+const deadlineColor = computed(() => {
+    if (!props.task.deadline) return ''
+    const daysLeft = (new Date(props.task.deadline).getTime() - Date.now()) / 86400000
+    if (daysLeft < 0) return '#DC2626'
+    if (daysLeft < 2) return '#F59E0B'
+    return '#9CA3AF'
+})
+
+function formatDeadline(d: string): string {
+    return new Date(d).toLocaleDateString('fr-FR', { month: 'short', day: 'numeric' })
+}
+
 const isTimerOnTask = computed(() => {
     const entry = timerStore.activeEntry
     if (!entry?.task) return false