refacto(tables) : composant DataTable global + migration de toutes les tables

- Nouveau composant DataTable réutilisable avec tri par en-têtes, pagination, filtres colonnes
- Nouveau composable useDataTable (sort/page/search/perPage/columnFilters + persistance URL)
- Migration des 9 tables : constructeurs, comments, admin, pieces-catalog, component-catalog, product-catalog, documents, activity-log, ManagementView (catégories)
- Filtres "Type de" server-side (ipartial) pour pièces, composants, produits

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

app/pages/documents.vue

@@ -3,22 +3,34 @@
     <DocumentPreviewModal
       :document="previewDocument"
       :visible="previewVisible"
-      :documents="documents"
+      :documents="documentRows"
       @close="closePreview"
     />
 
     <section class="card bg-base-100 shadow-lg">
       <div class="card-body space-y-6">
-        <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
-          <div class="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center">
+        <DataTable
+          :columns="columns"
+          :rows="documentRows"
+          :loading="loading"
+          :sort="table.sort.value"
+          :pagination="paginationState"
+          :show-per-page="true"
+          empty-message="Aucun document n'a encore été ajouté."
+          no-results-message="Aucun document ne correspond à votre recherche."
+          @sort="table.handleSort"
+          @update:current-page="table.handlePageChange"
+          @update:per-page="table.handlePerPageChange"
+        >
+          <template #toolbar>
             <label class="w-full sm:w-72">
               <span class="text-xs font-semibold uppercase tracking-wide text-base-content/70">Recherche</span>
               <input
-                v-model="searchTerm"
+                v-model="table.searchTerm.value"
                 type="text"
                 class="input input-bordered input-sm w-full mt-1"
                 placeholder="Nom du document..."
-                @input="debouncedSearch"
+                @input="table.debouncedSearch"
               />
             </label>
 
@@ -33,7 +45,7 @@
                 id="doc-filter"
                 v-model="attachmentFilter"
                 class="select select-bordered select-sm"
-                @change="handleFilterChange"
+                @change="table.handleFilterChange"
               >
                 <option value="all">Tous</option>
                 <option value="site">Sites</option>
@@ -43,242 +55,124 @@
                 <option value="product">Produits</option>
               </select>
             </div>
+          </template>
 
-            <div class="flex items-center gap-2">
-              <label
-                class="text-xs font-semibold uppercase tracking-wide text-base-content/70"
-                for="doc-sort"
-              >
-                Trier par
-              </label>
-              <select
-                id="doc-sort"
-                v-model="sortField"
-                class="select select-bordered select-sm"
-                @change="handleSortChange"
-              >
-                <option value="createdAt">Date</option>
-                <option value="name">Nom</option>
-                <option value="size">Taille</option>
-              </select>
+          <template #cell-name="{ row }">
+            <div class="flex items-center gap-3">
+              <span class="text-xl" :class="documentIcon(row).colorClass">
+                <component
+                  :is="documentIcon(row).component"
+                  class="h-6 w-6"
+                  aria-hidden="true"
+                />
+              </span>
+              <div>
+                <div class="font-semibold">{{ row.name }}</div>
+                <div class="text-xs text-gray-500">{{ row.filename }}</div>
+              </div>
             </div>
+          </template>
 
-            <div class="flex items-center gap-2">
-              <label
-                class="text-xs font-semibold uppercase tracking-wide text-base-content/70"
-                for="doc-dir"
-              >
-                Ordre
-              </label>
-              <select
-                id="doc-dir"
-                v-model="sortDirection"
-                class="select select-bordered select-sm"
-                @change="handleSortChange"
-              >
-                <option value="asc">Ascendant</option>
-                <option value="desc">Descendant</option>
-              </select>
+          <template #cell-mimeType="{ row }">
+            {{ row.mimeType || 'Inconnu' }}
+          </template>
+
+          <template #cell-size="{ row }">
+            {{ formatSize(row.size) }}
+          </template>
+
+          <template #cell-attachment="{ row }">
+            <div class="flex flex-col text-xs">
+              <span v-if="row.site">Site &middot; {{ row.site.name }}</span>
+              <span v-else-if="row.machine">Machine &middot; {{ row.machine.name }}</span>
+              <span v-else-if="row.composant">Composant &middot; {{ row.composant.name }}</span>
+              <span v-else-if="row.piece">Pi&egrave;ce &middot; {{ row.piece.name }}</span>
+              <span v-else-if="row.product">Produit &middot; {{ row.product.name }}</span>
+              <span v-else class="text-gray-400">Non d&eacute;fini</span>
             </div>
+          </template>
 
-            <div class="flex items-center gap-2">
-              <label
-                class="text-xs font-semibold uppercase tracking-wide text-base-content/70"
-                for="doc-per-page"
+          <template #cell-createdAt="{ row }">
+            {{ formatFrenchDate(row.createdAt) }}
+          </template>
+
+          <template #cell-actions="{ row }">
+            <div class="flex justify-end gap-2">
+              <button
+                class="btn btn-ghost btn-xs"
+                type="button"
+                :disabled="!canPreviewDocument(row)"
+                :title="canPreviewDocument(row) ? 'Consulter le document' : 'Aucun aper\u00E7u disponible pour ce type'"
+                @click="openPreview(row)"
               >
-                Par page
-              </label>
-              <select
-                id="doc-per-page"
-                v-model.number="itemsPerPage"
-                class="select select-bordered select-sm"
-                @change="handlePerPageChange"
-              >
-                <option :value="20">20</option>
-                <option :value="50">50</option>
-                <option :value="100">100</option>
-              </select>
+                Consulter
+              </button>
+              <button class="btn btn-ghost btn-xs" type="button" @click="downloadDocument(row)">
+                T&eacute;l&eacute;charger
+              </button>
             </div>
-          </div>
-
-          <p class="text-xs text-base-content/50 lg:text-right">
-            {{ documentsOnPage }} / {{ documentsTotal }} r&eacute;sultat{{ documentsTotal > 1 ? 's' : '' }}
-          </p>
-        </div>
-
-        <div class="divider my-0" />
-
-        <div v-if="loading" class="flex flex-col items-center justify-center py-16 text-sm text-gray-500">
-          <span class="loading loading-spinner loading-lg mb-3" />
-          Chargement des documents...
-        </div>
-
-        <div v-else-if="!documentsTotal" class="text-center py-16 text-sm text-gray-500">
-          <IconLucideFileSearch class="mx-auto mb-4 h-14 w-14 text-gray-400" aria-hidden="true" />
-          Aucun document n'a encore &eacute;t&eacute; ajout&eacute;.
-        </div>
-
-        <div v-else-if="!documents.length" class="text-center py-16 text-sm text-gray-500">
-          <IconLucideFileSearch class="mx-auto mb-4 h-14 w-14 text-gray-400" aria-hidden="true" />
-          Aucun document ne correspond &agrave; votre recherche.
-        </div>
-
-        <template v-else>
-          <div class="overflow-x-auto">
-            <table class="table">
-              <thead>
-                <tr class="text-xs uppercase">
-                  <th>Nom</th>
-                  <th>Type</th>
-                  <th>Taille</th>
-                  <th>Rattach&eacute; &agrave;</th>
-                  <th>Date</th>
-                  <th class="text-right">Actions</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr v-for="doc in documents" :key="doc.id" class="text-sm">
-                  <td>
-                    <div class="flex items-center gap-3">
-                      <span class="text-xl" :class="documentIcon(doc).colorClass">
-                        <component
-                          :is="documentIcon(doc).component"
-                          class="h-6 w-6"
-                          aria-hidden="true"
-                        />
-                      </span>
-                      <div>
-                        <div class="font-semibold">{{ doc.name }}</div>
-                        <div class="text-xs text-gray-500">{{ doc.filename }}</div>
-                      </div>
-                    </div>
-                  </td>
-                  <td>{{ doc.mimeType || 'Inconnu' }}</td>
-                  <td>{{ formatSize(doc.size) }}</td>
-                  <td>
-                    <div class="flex flex-col text-xs">
-                      <span v-if="doc.site">Site &middot; {{ doc.site.name }}</span>
-                      <span v-else-if="doc.machine">Machine &middot; {{ doc.machine.name }}</span>
-                      <span v-else-if="doc.composant">Composant &middot; {{ doc.composant.name }}</span>
-                      <span v-else-if="doc.piece">Pi&egrave;ce &middot; {{ doc.piece.name }}</span>
-                      <span v-else-if="doc.product">Produit &middot; {{ doc.product.name }}</span>
-                      <span v-else class="text-gray-400">Non d&eacute;fini</span>
-                    </div>
-                  </td>
-                  <td>{{ formatFrenchDate(doc.createdAt) }}</td>
-                  <td class="text-right">
-                    <div class="flex justify-end gap-2">
-                      <button
-                        class="btn btn-ghost btn-xs"
-                        type="button"
-                        :disabled="!canPreviewDocument(doc)"
-                        :title="canPreviewDocument(doc) ? 'Consulter le document' : 'Aucun aper\u00E7u disponible pour ce type'"
-                        @click="openPreview(doc)"
-                      >
-                        Consulter
-                      </button>
-                      <button class="btn btn-ghost btn-xs" type="button" @click="downloadDocument(doc)">
-                        T&eacute;l&eacute;charger
-                      </button>
-                    </div>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-
-          <Pagination
-            :current-page="currentPage"
-            :total-pages="totalPages"
-            @update:current-page="handlePageChange"
-          />
-        </template>
+          </template>
+        </DataTable>
       </div>
     </section>
   </main>
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref, type Ref } from 'vue'
+import DataTable from '~/components/common/DataTable.vue'
 import { useDocuments } from '~/composables/useDocuments'
-import { useUrlState } from '~/composables/useUrlState'
+import { useDataTable } from '~/composables/useDataTable'
 import { getFileIcon } from '~/utils/fileIcons'
 import { canPreviewDocument } from '~/utils/documentPreview'
 import { formatFrenchDate } from '~/utils/date'
 import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'
-import Pagination from '~/components/common/Pagination.vue'
-import IconLucideFileSearch from '~icons/lucide/file-search'
 
 const { documents, total, loading, loadDocuments } = useDocuments()
 
-const {
-  page: currentPage,
-  perPage: itemsPerPage,
-  q: searchTerm,
-  filter: attachmentFilter,
-  sort: sortField,
-  dir: sortDirection,
-} = useUrlState({
-  page: { default: 1, type: 'number' },
-  perPage: { default: 30, type: 'number' },
-  q: { default: '', debounce: 300 },
-  filter: { default: 'all' },
-  sort: { default: 'createdAt' },
-  dir: { default: 'desc' },
-}, {
-  onRestore: () => fetchDocuments(),
-})
+const table = useDataTable(
+  { fetchData: fetchDocuments },
+  {
+    defaultSort: 'createdAt',
+    defaultDirection: 'desc',
+    defaultPerPage: 30,
+    persistToUrl: true,
+    extraParams: {
+      filter: { default: 'all' },
+    },
+  },
+)
+
+const attachmentFilter = table.filters.filter as Ref<string>
 
 const previewDocument = ref<any>(null)
 const previewVisible = ref(false)
 
-const documentsTotal = computed(() => total.value)
+const documentRows = computed(() => documents.value)
 const documentsOnPage = computed(() => documents.value.length)
-const totalPages = computed(() => Math.ceil(documentsTotal.value / itemsPerPage.value) || 1)
+const paginationState = table.pagination(total, documentsOnPage)
 
-const fetchDocuments = async () => {
+const columns = [
+  { key: 'name', label: 'Nom', sortable: true, sortKey: 'name' },
+  { key: 'mimeType', label: 'Type' },
+  { key: 'size', label: 'Taille', sortable: true, sortKey: 'size' },
+  { key: 'attachment', label: 'Rattaché à' },
+  { key: 'createdAt', label: 'Date', sortable: true, sortKey: 'createdAt' },
+  { key: 'actions', label: 'Actions', align: 'right' as const },
+]
+
+async function fetchDocuments() {
   await loadDocuments({
-    search: searchTerm.value,
-    page: currentPage.value,
-    itemsPerPage: itemsPerPage.value,
-    orderBy: sortField.value,
-    orderDir: sortDirection.value as 'asc' | 'desc',
+    search: table.searchTerm.value,
+    page: table.currentPage.value,
+    itemsPerPage: table.itemsPerPage.value,
+    orderBy: table.sortField.value,
+    orderDir: table.sortDirection.value as 'asc' | 'desc',
     attachmentFilter: attachmentFilter.value,
     force: true,
   })
 }
 
-// Search debounce
-let searchTimeout: ReturnType<typeof setTimeout> | null = null
-
-const debouncedSearch = () => {
-  if (searchTimeout) clearTimeout(searchTimeout)
-  searchTimeout = setTimeout(() => {
-    currentPage.value = 1
-    fetchDocuments()
-  }, 300)
-}
-
-const handlePageChange = (page: number) => {
-  currentPage.value = page
-  fetchDocuments()
-}
-
-const handleSortChange = () => {
-  currentPage.value = 1
-  fetchDocuments()
-}
-
-const handleFilterChange = () => {
-  currentPage.value = 1
-  fetchDocuments()
-}
-
-const handlePerPageChange = () => {
-  currentPage.value = 1
-  fetchDocuments()
-}
-
 const formatSize = (size: number | undefined | null) => {
   if (size === undefined || size === null) return '\u2014'
   if (size === 0) return '0 B'
@@ -291,9 +185,7 @@ const formatSize = (size: number | undefined | null) => {
 const documentIcon = (doc: any) => getFileIcon({ name: doc.filename || doc.name, mime: doc.mimeType })
 
 const downloadDocument = (doc: any) => {
-  if (doc?.downloadUrl) {
-    window.open(doc.downloadUrl, '_blank')
-  }
+  if (doc?.downloadUrl) window.open(doc.downloadUrl, '_blank')
 }
 
 const openPreview = (doc: any) => {