From 1aa72c3b569aeded49bd5046f136915e54c6c65a Mon Sep 17 00:00:00 2001
From: Matthieu <mtholot19@gmail.com>
Date: Thu, 19 Mar 2026 10:33:54 +0100
Subject: [PATCH] =?UTF-8?q?feat(ui)=20:=20add=20deadline/scheduled=20colum?=
 =?UTF-8?q?ns=20and=20sort=20options=20to=20Mes=20t=C3=A2ches=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/i18n/locales/fr.json |  6 +++++-
 frontend/pages/my-tasks.vue   | 34 +++++++++++++++++++++++++++-------
 2 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/frontend/i18n/locales/fr.json b/frontend/i18n/locales/fr.json
index d332bcf..b66166c 100644
--- a/frontend/i18n/locales/fr.json
+++ b/frontend/i18n/locales/fr.json
@@ -186,7 +186,11 @@
         "allAssignees": "Tous",
         "noTasks": "Aucune tâche",
         "backlog": "Backlog",
-        "createTask": "Créer une tâche"
+        "createTask": "Créer une tâche",
+        "sortBy": "Trier par",
+        "sortDefault": "Par défaut",
+        "sortDeadline": "Échéance",
+        "sortScheduledStart": "Date planifiée"
     },
     "dashboard": {
         "title": "Tableau de bord",
diff --git a/frontend/pages/my-tasks.vue b/frontend/pages/my-tasks.vue
index 46d5ae6..86873c5 100644
--- a/frontend/pages/my-tasks.vue
+++ b/frontend/pages/my-tasks.vue
@@ -50,6 +50,10 @@ const selectedPriorityId = ref<number | null>(null)
 const selectedEffortId = ref<number | null>(null)
 const selectedAssigneeId = ref<number | null>(auth.user?.id ?? null)
 
+// Sort
+type SortOption = 'default' | 'deadline' | 'scheduledStart'
+const sortBy = ref<SortOption>('default')
+
 // View toggle
 const viewMode = ref<'kanban' | 'list'>('kanban')
 
@@ -157,6 +161,11 @@ async function loadTasks() {
     if (selectedTagId.value) {
         params['tags[]'] = `/api/task_tags/${selectedTagId.value}`
     }
+    if (sortBy.value === 'deadline') {
+        params['order[deadline]'] = 'asc'
+    } else if (sortBy.value === 'scheduledStart') {
+        params['order[scheduledStart]'] = 'asc'
+    }
     tasks.value = await taskService.getFiltered(params)
 }
 
@@ -169,9 +178,9 @@ async function loadAll() {
     }
 }
 
-// Watch filters to reload tasks
+// Watch filters and sort to reload tasks
 watch(
-    [selectedProjectId, selectedGroupId, selectedTagId, selectedPriorityId, selectedEffortId, selectedAssigneeId],
+    [selectedProjectId, selectedGroupId, selectedTagId, selectedPriorityId, selectedEffortId, selectedAssigneeId, sortBy],
     () => { loadTasks() },
 )
 
@@ -311,7 +320,7 @@ onMounted(async () => {
 <template>
     <div class="min-w-0">
         <!-- Header + Filters -->
-        <div class="sticky top-8 z-20 bg-white pb-4 sm:top-12">
+        <div class="sticky top-8 z-20 bg-white pb-4 sm:top-12 dark:bg-dark-base">
             <div class="flex items-center justify-between gap-3">
                 <h1 class="text-xl font-bold text-primary-500 sm:text-2xl">{{ $t('myTasks.title') }}</h1>
                 <div class="flex items-center gap-2">
@@ -390,6 +399,17 @@ onMounted(async () => {
                     text-field="text-sm"
                     text-value="text-sm"
                 />
+                <div class="flex flex-col gap-0.5">
+                    <span class="text-xs font-semibold text-neutral-500">{{ $t('myTasks.sortBy') }}</span>
+                    <select
+                        v-model="sortBy"
+                        class="rounded-lg border border-neutral-300 bg-white px-2 py-1.5 text-sm text-neutral-700 focus:outline-none focus:ring-2 focus:ring-primary-500"
+                    >
+                        <option value="default">{{ $t('myTasks.sortDefault') }}</option>
+                        <option value="deadline">{{ $t('myTasks.sortDeadline') }}</option>
+                        <option value="scheduledStart">{{ $t('myTasks.sortScheduledStart') }}</option>
+                    </select>
+                </div>
             </div>
         </div>
 
@@ -400,7 +420,7 @@ onMounted(async () => {
                     v-for="status in sortedStatuses"
                     :key="status.id"
                     class="flex min-w-36 flex-1 flex-col rounded-lg transition-colors"
-                    :class="dragOverStatusId === status.id ? 'bg-neutral-200' : 'bg-neutral-50'"
+                    :class="dragOverStatusId === status.id ? 'bg-neutral-200 dark:bg-dark-hover' : 'bg-neutral-50 dark:bg-dark-surface/50'"
                     @dragover.prevent
                     @dragenter.prevent="onDragEnter(status.id)"
                     @dragleave="onDragLeave"
@@ -435,13 +455,13 @@ onMounted(async () => {
             <!-- Backlog below kanban -->
             <div
                 class="mt-8 rounded-lg p-4 transition-colors"
-                :class="dragOverStatusId === 0 ? 'bg-neutral-200' : 'bg-neutral-50'"
+                :class="dragOverStatusId === 0 ? 'bg-neutral-200 dark:bg-dark-hover' : 'bg-neutral-50 dark:bg-dark-surface'"
                 @dragover.prevent
                 @dragenter.prevent="onDragEnter(0)"
                 @dragleave="onDragLeave"
                 @drop.prevent="onDropBacklog($event)"
             >
-                <h2 class="text-lg font-bold text-neutral-900">{{ $t('myTasks.backlog') }} ({{ backlogTasks.length }})</h2>
+                <h2 class="text-lg font-bold text-neutral-900 dark:text-neutral-100">{{ $t('myTasks.backlog') }} ({{ backlogTasks.length }})</h2>
                 <div class="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
                     <TaskCard
                         v-for="task in backlogTasks"
@@ -461,7 +481,7 @@ onMounted(async () => {
         </div>
 
         <!-- List View -->
-        <div v-if="viewMode === 'list'" class="mt-6 flex flex-col gap-2.5 rounded-[10px] bg-tertiary-500 p-2.5">
+        <div v-if="viewMode === 'list'" class="mt-6 flex flex-col gap-2.5 rounded-[10px] bg-tertiary-500 p-2.5 dark:bg-dark-surface">
             <TaskBulkActions
                 :selected-count="selectedTaskIds.size"
                 :total-count="tasks.length"