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/AdminStatusTab.vue

@@ -10,48 +10,22 @@
             </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">Libellé</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">Position</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="border-b border-neutral-100 hover:bg-neutral-50 cursor-pointer"
-                        @click="openEdit(item)"
-                    >
-                        <td class="px-4 py-3 font-semibold text-primary-500">{{ item.label }}</td>
-                        <td class="px-4 py-3">
-                            <span
-                                class="inline-block h-6 w-6 rounded-full"
-                                :style="{ backgroundColor: item.color }"
-                            />
-                        </td>
-                        <td class="px-4 py-3 text-neutral-700">{{ item.position }}</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 statut trouvé.
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
+        <DataTable
+            :columns="columns"
+            :items="items"
+            :loading="isLoading"
+            empty-message="Aucun statut 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>
+        </DataTable>
 
         <TaskStatusDrawer
             v-model="drawerOpen"
@@ -65,6 +39,14 @@
 import type { TaskStatus } from '~/services/dto/task-status'
 import { useTaskStatusService } from '~/services/task-statuses'
 
+import type { DataTableColumn } from '~/components/DataTable.vue'
+
+const columns: DataTableColumn[] = [
+    { key: 'label', label: 'Libellé', primary: true },
+    { key: 'color', label: 'Couleur' },
+    { key: 'position', label: 'Position', class: 'text-neutral-700' },
+]
+
 const { getAll, remove } = useTaskStatusService()
 const items = ref<TaskStatus[]>([])
 const isLoading = ref(true)