refactor(frontend) : extract reusable DataTable component from repeated table markup

Replace inline table HTML in 8 files with a shared DataTable component
supporting columns definition, scoped slots for custom cells, and
built-in delete action.

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

frontend/components/ProjectGroupTab.vue

@@ -10,50 +10,25 @@
             </button>
         </div>
 
-        <div class="mt-6 overflow-x-auto rounded-lg border border-neutral-200">
-            <table class="w-full text-left text-sm">
-                <thead class="border-b border-neutral-200 bg-neutral-50">
-                    <tr>
-                        <th class="px-4 py-3 font-semibold text-neutral-700">Titre</th>
-                        <th class="px-4 py-3 font-semibold text-neutral-700">Couleur</th>
-                        <th class="px-4 py-3 font-semibold text-neutral-700">Description</th>
-                        <th class="px-4 py-3 font-semibold text-neutral-700">Actions</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr
-                        v-for="item in items"
-                        :key="item.id"
-                        class="cursor-pointer border-b border-neutral-100 hover:bg-neutral-50"
-                        @click="openEdit(item)"
-                    >
-                        <td class="px-4 py-3 font-semibold text-primary-500">{{ item.title }}</td>
-                        <td class="px-4 py-3">
-                            <span
-                                class="inline-block h-6 w-6 rounded-full"
-                                :style="{ backgroundColor: item.color }"
-                            />
-                        </td>
-                        <td class="max-w-xs truncate px-4 py-3 text-neutral-700">
-                            {{ item.description ?? '—' }}
-                        </td>
-                        <td class="px-4 py-3">
-                            <button
-                                class="text-red-500 hover:text-red-700"
-                                @click.stop="handleDelete(item.id)"
-                            >
-                                <Icon name="mdi:delete-outline" size="20" />
-                            </button>
-                        </td>
-                    </tr>
-                    <tr v-if="items.length === 0 && !isLoading">
-                        <td colspan="4" class="px-4 py-8 text-center text-neutral-400">
-                            Aucun groupe trouvé.
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
+        <DataTable
+            :columns="columns"
+            :items="items"
+            :loading="isLoading"
+            empty-message="Aucun groupe trouvé."
+            deletable
+            @row-click="openEdit"
+            @delete="(item) => handleDelete(item.id)"
+        >
+            <template #cell-color="{ item }">
+                <span
+                    class="inline-block h-6 w-6 rounded-full"
+                    :style="{ backgroundColor: item.color }"
+                />
+            </template>
+            <template #cell-description="{ item }">
+                {{ item.description ?? '—' }}
+            </template>
+        </DataTable>
 
         <TaskGroupDrawer
             v-model="drawerOpen"
@@ -76,6 +51,14 @@ const emit = defineEmits<{
     (e: 'updated'): void
 }>()
 
+import type { DataTableColumn } from '~/components/DataTable.vue'
+
+const columns: DataTableColumn[] = [
+    { key: 'title', label: 'Titre', primary: true },
+    { key: 'color', label: 'Couleur' },
+    { key: 'description', label: 'Description', class: 'max-w-xs truncate text-neutral-700' },
+]
+
 const { getByProject, remove } = useTaskGroupService()
 const items = ref<TaskGroup[]>([])
 const isLoading = ref(true)