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/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)