From 7210a0d96fe58020d54a5c243b02112432749e33 Mon Sep 17 00:00:00 2001
From: matthieu <matthieu@yuno.malio.fr>
Date: Sun, 15 Mar 2026 19:42:46 +0100
Subject: [PATCH] feat(kanban) : show client ticket icon on task cards,
 my-tasks, and task modal

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/components/task/TaskCard.vue  | 10 +++++++++-
 frontend/components/task/TaskModal.vue | 27 ++++++++++++++++++++++++++
 frontend/pages/my-tasks.vue            | 20 +++++++++++++------
 3 files changed, 50 insertions(+), 7 deletions(-)

diff --git a/frontend/components/task/TaskCard.vue b/frontend/components/task/TaskCard.vue
index 4dbdd9e..de1df03 100644
--- a/frontend/components/task/TaskCard.vue
+++ b/frontend/components/task/TaskCard.vue
@@ -8,7 +8,15 @@
     >
         <div class="flex items-start justify-between gap-2">
             <div class="min-w-0">
-                <span v-if="task.project && task.number" class="text-xs font-medium text-neutral-400">{{ task.project.code }}{{ task.number }}</span>
+                <div class="flex items-center gap-1">
+                    <span v-if="task.project && task.number" class="text-xs font-medium text-neutral-400">{{ task.project.code }}{{ task.number }}</span>
+                    <Icon
+                        v-if="task.clientTicket"
+                        name="heroicons:user-circle"
+                        class="h-4 w-4 text-blue-400"
+                        :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>
             </div>
             <button
diff --git a/frontend/components/task/TaskModal.vue b/frontend/components/task/TaskModal.vue
index dbbccc9..eabaec3 100644
--- a/frontend/components/task/TaskModal.vue
+++ b/frontend/components/task/TaskModal.vue
@@ -35,6 +35,23 @@
                                 <Icon name="mdi:close" size="20" />
                             </button>
                         </div>
+
+                        <!-- Client ticket link -->
+                        <div
+                            v-if="isEditing && task?.clientTicket"
+                            class="mt-2 flex items-center gap-2 rounded-lg bg-blue-50 px-3 py-2"
+                        >
+                            <Icon name="heroicons:user-circle" class="h-5 w-5 text-blue-500" />
+                            <span class="text-sm font-medium text-blue-700">
+                                {{ $t('clientTicket.linkedTooltip', { number: 'CT-' + String(task.clientTicket.number).padStart(3, '0') }) }}
+                            </span>
+                            <span
+                                class="ml-auto rounded-full px-2 py-0.5 text-xs font-semibold"
+                                :class="ticketStatusClass(task.clientTicket.status)"
+                            >
+                                {{ $t(`clientTicket.status.${task.clientTicket.status}`) }}
+                            </span>
+                        </div>
                     </div>
 
                     <!-- Body -->
@@ -388,6 +405,16 @@ const { t } = useI18n()
 const authStore = useAuthStore()
 const isAdmin = computed(() => authStore.user?.roles?.includes('ROLE_ADMIN') ?? false)
 
+function ticketStatusClass(status: string): string {
+    switch (status) {
+        case 'new': return 'bg-blue-100 text-blue-700'
+        case 'in_progress': return 'bg-yellow-100 text-yellow-700'
+        case 'done': return 'bg-green-100 text-green-700'
+        case 'rejected': return 'bg-red-100 text-red-700'
+        default: return 'bg-neutral-100 text-neutral-700'
+    }
+}
+
 const localDocuments = ref<TaskDocument[]>([])
 const documents = computed(() => localDocuments.value)
 const previewDoc = ref<TaskDocument | null>(null)
diff --git a/frontend/pages/my-tasks.vue b/frontend/pages/my-tasks.vue
index e24de7f..9eafed6 100644
--- a/frontend/pages/my-tasks.vue
+++ b/frontend/pages/my-tasks.vue
@@ -411,12 +411,20 @@ onMounted(() => {
                     >
                         <Icon :name="isTimerOnTask(task) ? 'mdi:stop-circle-outline' : 'mdi:play-circle-outline'" size="20" />
                     </button>
-                    <span
-                        v-if="task.project && task.number"
-                        class="text-sm font-medium text-primary-500"
-                    >
-                        {{ task.project.code }}-{{ task.number }}
-                    </span>
+                    <div class="flex items-center gap-1.5">
+                        <Icon
+                            v-if="task.clientTicket"
+                            name="heroicons:user-circle"
+                            class="h-4 w-4 text-blue-400"
+                            :title="$t('clientTicket.linkedTooltip', { number: 'CT-' + String(task.clientTicket.number).padStart(3, '0') })"
+                        />
+                        <span
+                            v-if="task.project && task.number"
+                            class="text-sm font-medium text-primary-500"
+                        >
+                            {{ task.project.code }}-{{ task.number }}
+                        </span>
+                    </div>
                 </div>
             </div>
             <p