From fa0adfde888d44067dc2b051cd0f7eb84b5a5b8b Mon Sep 17 00:00:00 2001
From: matthieu <matthieu@yuno.malio.fr>
Date: Tue, 10 Mar 2026 22:19:25 +0100
Subject: [PATCH] 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/AdminEffortTab.vue   | 48 +++++----------
 frontend/components/AdminPriorityTab.vue | 63 +++++++------------
 frontend/components/AdminStatusTab.vue   | 66 ++++++++------------
 frontend/components/AdminTypeTab.vue     | 63 +++++++------------
 frontend/components/AdminUserTab.vue     | 69 ++++++++-------------
 frontend/components/DataTable.vue        | 77 ++++++++++++++++++++++++
 frontend/components/ProjectGroupTab.vue  | 71 +++++++++-------------
 frontend/components/ProjectStatusTab.vue | 66 ++++++++------------
 frontend/pages/clients.vue               | 67 +++++++++------------
 9 files changed, 267 insertions(+), 323 deletions(-)
 create mode 100644 frontend/components/DataTable.vue

diff --git a/frontend/components/AdminEffortTab.vue b/frontend/components/AdminEffortTab.vue
index 140c885..ecd0e67 100644
--- a/frontend/components/AdminEffortTab.vue
+++ b/frontend/components/AdminEffortTab.vue
@@ -10,39 +10,15 @@
             </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">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">
-                            <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="2" class="px-4 py-8 text-center text-neutral-400">
-                            Aucun effort trouvé.
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
+        <DataTable
+            :columns="columns"
+            :items="items"
+            :loading="isLoading"
+            empty-message="Aucun effort trouvé."
+            deletable
+            @row-click="openEdit"
+            @delete="(item) => handleDelete(item.id)"
+        />
 
         <TaskEffortDrawer
             v-model="drawerOpen"
@@ -56,6 +32,12 @@
 import type { TaskEffort } from '~/services/dto/task-effort'
 import { useTaskEffortService } from '~/services/task-efforts'
 
+import type { DataTableColumn } from '~/components/DataTable.vue'
+
+const columns: DataTableColumn[] = [
+    { key: 'label', label: 'Libellé', primary: true },
+]
+
 const { getAll, remove } = useTaskEffortService()
 const items = ref<TaskEffort[]>([])
 const isLoading = ref(true)
diff --git a/frontend/components/AdminPriorityTab.vue b/frontend/components/AdminPriorityTab.vue
index 1e87bcb..65d78cd 100644
--- a/frontend/components/AdminPriorityTab.vue
+++ b/frontend/components/AdminPriorityTab.vue
@@ -10,46 +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">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">
-                            <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="3" class="px-4 py-8 text-center text-neutral-400">
-                            Aucune priorité trouvée.
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
+        <DataTable
+            :columns="columns"
+            :items="items"
+            :loading="isLoading"
+            empty-message="Aucune priorité trouvée."
+            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>
 
         <TaskPriorityDrawer
             v-model="drawerOpen"
@@ -63,6 +39,13 @@
 import type { TaskPriority } from '~/services/dto/task-priority'
 import { useTaskPriorityService } from '~/services/task-priorities'
 
+import type { DataTableColumn } from '~/components/DataTable.vue'
+
+const columns: DataTableColumn[] = [
+    { key: 'label', label: 'Libellé', primary: true },
+    { key: 'color', label: 'Couleur' },
+]
+
 const { getAll, remove } = useTaskPriorityService()
 const items = ref<TaskPriority[]>([])
 const isLoading = ref(true)
diff --git a/frontend/components/AdminStatusTab.vue b/frontend/components/AdminStatusTab.vue
index 93c106b..7ce33a1 100644
--- a/frontend/components/AdminStatusTab.vue
+++ b/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)
diff --git a/frontend/components/AdminTypeTab.vue b/frontend/components/AdminTypeTab.vue
index 17ae000..e786acf 100644
--- a/frontend/components/AdminTypeTab.vue
+++ b/frontend/components/AdminTypeTab.vue
@@ -10,46 +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">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">
-                            <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="3" class="px-4 py-8 text-center text-neutral-400">
-                            Aucun type trouvé.
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
+        <DataTable
+            :columns="columns"
+            :items="items"
+            :loading="isLoading"
+            empty-message="Aucun type 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>
 
         <TaskTypeDrawer
             v-model="drawerOpen"
@@ -63,6 +39,13 @@
 import type { TaskType } from '~/services/dto/task-type'
 import { useTaskTypeService } from '~/services/task-types'
 
+import type { DataTableColumn } from '~/components/DataTable.vue'
+
+const columns: DataTableColumn[] = [
+    { key: 'label', label: 'Libellé', primary: true },
+    { key: 'color', label: 'Couleur' },
+]
+
 const { getAll, remove } = useTaskTypeService()
 const items = ref<TaskType[]>([])
 const isLoading = ref(true)
diff --git a/frontend/components/AdminUserTab.vue b/frontend/components/AdminUserTab.vue
index 8c537d6..861a1e5 100644
--- a/frontend/components/AdminUserTab.vue
+++ b/frontend/components/AdminUserTab.vue
@@ -10,49 +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">Nom d'utilisateur</th>
-                        <th class="px-4 py-3 font-semibold text-neutral-700">Rôles</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.username }}</td>
-                        <td class="px-4 py-3">
-                            <span
-                                v-for="role in item.roles"
-                                :key="role"
-                                class="mr-1 rounded-full bg-neutral-200 px-2 py-0.5 text-xs font-semibold text-neutral-700"
-                            >
-                                {{ role }}
-                            </span>
-                        </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="3" class="px-4 py-8 text-center text-neutral-400">
-                            Aucun utilisateur trouvé.
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
+        <DataTable
+            :columns="columns"
+            :items="items"
+            :loading="isLoading"
+            empty-message="Aucun utilisateur trouvé."
+            deletable
+            @row-click="openEdit"
+            @delete="(item) => handleDelete(item.id)"
+        >
+            <template #cell-roles="{ item }">
+                <span
+                    v-for="role in item.roles"
+                    :key="role"
+                    class="mr-1 rounded-full bg-neutral-200 px-2 py-0.5 text-xs font-semibold text-neutral-700"
+                >
+                    {{ role }}
+                </span>
+            </template>
+        </DataTable>
 
         <UserDrawer
             v-model="drawerOpen"
@@ -66,6 +42,13 @@
 import type { UserData } from '~/services/dto/user-data'
 import { useUserService } from '~/services/users'
 
+import type { DataTableColumn } from '~/components/DataTable.vue'
+
+const columns: DataTableColumn[] = [
+    { key: 'username', label: "Nom d'utilisateur", primary: true },
+    { key: 'roles', label: 'Rôles' },
+]
+
 const { getAll, remove } = useUserService()
 const items = ref<UserData[]>([])
 const isLoading = ref(true)
diff --git a/frontend/components/DataTable.vue b/frontend/components/DataTable.vue
new file mode 100644
index 0000000..b430277
--- /dev/null
+++ b/frontend/components/DataTable.vue
@@ -0,0 +1,77 @@
+<template>
+    <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
+                        v-for="col in columns"
+                        :key="col.key"
+                        class="px-4 py-3 font-semibold text-neutral-700"
+                    >
+                        {{ col.label }}
+                    </th>
+                    <th v-if="deletable" 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="$emit('row-click', item)"
+                >
+                    <td
+                        v-for="col in columns"
+                        :key="col.key"
+                        class="px-4 py-3"
+                        :class="[col.class, { 'font-semibold text-primary-500': col.primary }]"
+                    >
+                        <slot :name="`cell-${col.key}`" :item="item" :value="item[col.key]">
+                            {{ item[col.key] }}
+                        </slot>
+                    </td>
+                    <td v-if="deletable" class="px-4 py-3">
+                        <button
+                            class="text-red-500 hover:text-red-700"
+                            @click.stop="$emit('delete', item)"
+                        >
+                            <Icon name="mdi:delete-outline" size="20" />
+                        </button>
+                    </td>
+                </tr>
+                <tr v-if="items.length === 0 && !loading">
+                    <td
+                        :colspan="columns.length + (deletable ? 1 : 0)"
+                        class="px-4 py-8 text-center text-neutral-400"
+                    >
+                        {{ emptyMessage }}
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+
+<script setup lang="ts">
+export interface DataTableColumn {
+    key: string
+    label: string
+    primary?: boolean
+    class?: string
+}
+
+defineProps<{
+    columns: DataTableColumn[]
+    items: Record<string, any>[]
+    loading?: boolean
+    emptyMessage?: string
+    deletable?: boolean
+}>()
+
+defineEmits<{
+    (e: 'row-click', item: any): void
+    (e: 'delete', item: any): void
+}>()
+</script>
diff --git a/frontend/components/ProjectGroupTab.vue b/frontend/components/ProjectGroupTab.vue
index 44e85c6..457ea8d 100644
--- a/frontend/components/ProjectGroupTab.vue
+++ b/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)
diff --git a/frontend/components/ProjectStatusTab.vue b/frontend/components/ProjectStatusTab.vue
index 40e752a..71804c4 100644
--- a/frontend/components/ProjectStatusTab.vue
+++ b/frontend/components/ProjectStatusTab.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="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.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="requestDelete(item)"
-                            >
-                                <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="requestDelete"
+        >
+            <template #cell-color="{ item }">
+                <span
+                    class="inline-block h-6 w-6 rounded-full"
+                    :style="{ backgroundColor: item.color }"
+                />
+            </template>
+        </DataTable>
 
         <TaskStatusDrawer
             v-model="drawerOpen"
@@ -80,6 +54,14 @@ const props = defineProps<{
     projectId: number
 }>()
 
+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 statusService = useTaskStatusService()
 const taskService = useTaskService()
 
diff --git a/frontend/pages/clients.vue b/frontend/pages/clients.vue
index f16a9fb..cce2a4a 100644
--- a/frontend/pages/clients.vue
+++ b/frontend/pages/clients.vue
@@ -10,45 +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">Nom</th>
-                        <th class="px-4 py-3 font-semibold text-neutral-700">Email</th>
-                        <th class="px-4 py-3 font-semibold text-neutral-700">Adresse</th>
-                        <th class="px-4 py-3 font-semibold text-neutral-700">Téléphone</th>
-                        <th class="px-4 py-3 font-semibold text-neutral-700"></th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr
-                        v-for="client in clients"
-                        :key="client.id"
-                        class="border-b border-neutral-100 hover:bg-neutral-50 cursor-pointer"
-                        @click="openEdit(client)"
-                    >
-                        <td class="px-4 py-3 font-semibold text-primary-500">{{ client.name }}</td>
-                        <td class="px-4 py-3 text-primary-500">{{ client.email ?? '-' }}</td>
-                        <td class="px-4 py-3 text-neutral-700">{{ formatAddress(client) }}</td>
-                        <td class="px-4 py-3 text-primary-500">{{ client.phone ?? '-' }}</td>
-                        <td class="px-4 py-3 text-right">
-                            <button
-                                class="text-red-500 hover:text-red-700"
-                                @click.stop="handleDelete(client.id)"
-                            >
-                                <Icon name="mdi:delete-outline" size="20" />
-                            </button>
-                        </td>
-                    </tr>
-                    <tr v-if="clients.length === 0 && !isLoading">
-                        <td colspan="4" class="px-4 py-8 text-center text-neutral-400">
-                            Aucun client trouvé.
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
+        <DataTable
+            :columns="columns"
+            :items="clients"
+            :loading="isLoading"
+            empty-message="Aucun client trouvé."
+            deletable
+            @row-click="openEdit"
+            @delete="(item) => handleDelete(item.id)"
+        >
+            <template #cell-email="{ item }">
+                {{ item.email ?? '-' }}
+            </template>
+            <template #cell-address="{ item }">
+                {{ formatAddress(item) }}
+            </template>
+            <template #cell-phone="{ item }">
+                {{ item.phone ?? '-' }}
+            </template>
+        </DataTable>
 
         <ClientDrawer
             v-model="drawerOpen"
@@ -64,6 +44,15 @@ import { useClientService } from '~/services/clients'
 
 useHead({ title: 'Clients' })
 
+import type { DataTableColumn } from '~/components/DataTable.vue'
+
+const columns: DataTableColumn[] = [
+    { key: 'name', label: 'Nom', primary: true },
+    { key: 'email', label: 'Email', class: 'text-primary-500' },
+    { key: 'address', label: 'Adresse', class: 'text-neutral-700' },
+    { key: 'phone', label: 'Téléphone', class: 'text-primary-500' },
+]
+
 const { getAll, remove } = useClientService()
 const clients = ref<Client[]>([])
 const isLoading = ref(true)