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/pieces-catalog.vue

@@ -16,6 +16,7 @@
         </NuxtLink>
       </div>
     </header>
+
     <section class="card border border-base-200 bg-base-100 shadow-sm">
       <div class="card-body space-y-4">
         <header class="flex flex-col gap-2">
@@ -25,197 +26,130 @@
           </p>
         </header>
 
-        <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="pieceRows"
+          :loading="loadingPieces"
+          :sort="table.sort.value"
+          :pagination="paginationState"
+          :column-filters="table.columnFilters.value"
+          :show-per-page="true"
+          empty-message="Aucune pièce n'a encore été créée."
+          no-results-message="Aucune pièce ne correspond à votre recherche."
+          @sort="table.handleSort"
+          @update:current-page="table.handlePageChange"
+          @update:per-page="table.handlePerPageChange"
+          @update:column-filters="table.handleColumnFiltersChange"
+        >
+          <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 ou référence…"
-                @input="debouncedSearch"
+                @input="table.debouncedSearch"
               />
             </label>
-            <div class="flex items-center gap-2">
-              <label
-                class="text-xs font-semibold uppercase tracking-wide text-base-content/70"
-                for="piece-catalog-sort"
-              >
-                Trier par
-              </label>
-              <select
-                id="piece-catalog-sort"
-                v-model="sortField"
-                class="select select-bordered select-sm"
-                @change="handleSortChange"
-              >
-                <option value="name">Nom</option>
-                <option value="createdAt">Date de création</option>
-              </select>
+          </template>
+
+          <template #cell-preview="{ row }">
+            <DocumentThumbnail
+              :document="resolvePrimaryDocument(row.piece)"
+              :alt="resolvePreviewAlt(row.piece)"
+            />
+          </template>
+
+          <template #cell-name="{ row }">
+            {{ row.piece.name || 'Pièce sans nom' }}
+          </template>
+
+          <template #cell-reference="{ row }">
+            {{ row.piece.reference || '—' }}
+          </template>
+
+          <template #cell-description="{ row }">
+            <div v-if="row.piece.description" class="group relative">
+              <span class="block cursor-help truncate">{{ row.piece.description }}</span>
+              <div class="pointer-events-none invisible absolute left-0 top-full z-50 mt-1 max-w-sm overflow-hidden rounded-lg border border-base-300 bg-base-100 p-3 text-sm shadow-lg group-hover:pointer-events-auto group-hover:visible">
+                <p class="break-words whitespace-pre-wrap">{{ row.piece.description }}</p>
+              </div>
             </div>
-            <div class="flex items-center gap-2">
-              <label
-                class="text-xs font-semibold uppercase tracking-wide text-base-content/70"
-                for="piece-catalog-dir"
+            <span v-else>—</span>
+          </template>
+
+          <template #cell-suppliers="{ row }">
+            <div
+              v-if="row.suppliers.visible.length"
+              class="flex max-w-[14rem] flex-wrap items-center gap-1"
+              :title="row.suppliers.tooltip"
+            >
+              <span
+                v-for="supplier in row.suppliers.visible"
+                :key="supplier"
+                class="badge badge-ghost badge-sm whitespace-nowrap"
               >
-                Ordre
-              </label>
-              <select
-                id="piece-catalog-dir"
-                v-model="sortDirection"
-                class="select select-bordered select-sm"
-                @change="handleSortChange"
+                {{ supplier }}
+              </span>
+              <span
+                v-if="row.suppliers.overflow"
+                class="badge badge-outline badge-sm"
               >
-                <option value="asc">Ascendant</option>
-                <option value="desc">Descendant</option>
-              </select>
+                +{{ row.suppliers.overflow }}
+              </span>
             </div>
+            <span v-else>—</span>
+          </template>
+
+          <template #cell-typePiece="{ row }">
+            <NuxtLink
+              v-if="row.piece.typePiece?.id"
+              :to="`/piece-category/${row.piece.typePiece.id}/edit`"
+              class="link link-hover link-primary"
+            >
+              {{ resolvePieceType(row.piece) }}
+            </NuxtLink>
+            <span v-else>{{ resolvePieceType(row.piece) }}</span>
+          </template>
+
+          <template #cell-createdAt="{ row }">
+            <span class="whitespace-nowrap">{{ formatDate(row.piece.createdAt) }}</span>
+          </template>
+
+          <template #cell-actions="{ row }">
             <div class="flex items-center gap-2">
-              <label
-                class="text-xs font-semibold uppercase tracking-wide text-base-content/70"
-                for="piece-catalog-per-page"
+              <NuxtLink
+                :to="`/pieces/${row.piece.id}/edit`"
+                class="btn btn-ghost btn-xs"
               >
-                Par page
-              </label>
-              <select
-                id="piece-catalog-per-page"
-                v-model.number="itemsPerPage"
-                class="select select-bordered select-sm"
-                @change="handlePerPageChange"
+                Modifier
+              </NuxtLink>
+              <button
+                v-if="canEdit"
+                type="button"
+                class="btn btn-error btn-xs"
+                :disabled="loadingPieces"
+                @click="handleDeletePiece(row.piece)"
               >
-                <option :value="20">20</option>
-                <option :value="50">50</option>
-                <option :value="100">100</option>
-              </select>
+                Supprimer
+              </button>
             </div>
-          </div>
-          <p class="text-xs text-base-content/50 lg:text-right">
-            {{ piecesOnPage }} / {{ piecesTotal }} résultat{{ piecesTotal > 1 ? 's' : '' }}
-          </p>
-        </div>
-
-        <div v-if="loadingPieces" class="flex justify-center py-8">
-          <span class="loading loading-spinner" aria-hidden="true" />
-        </div>
-
-        <p v-else-if="!piecesTotal" class="text-sm text-base-content/70">
-          Aucune pièce n'a encore été créée.
-        </p>
-
-        <p v-else-if="!piecesList.length" class="text-sm text-base-content/70">
-          Aucune pièce ne correspond à votre recherche.
-        </p>
-
-        <template v-else>
-          <div class="overflow-x-auto">
-            <table class="table table-sm md:table-md">
-              <thead>
-                <tr>
-                  <th class="w-24">Aperçu</th>
-                  <th>Nom</th>
-                  <th>Référence</th>
-                  <th>Description</th>
-                  <th>Fournisseurs</th>
-                  <th>Type de pièce</th>
-                  <th>Actions</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr v-for="row in pieceRows" :key="row.piece.id">
-                  <td class="align-middle">
-                    <DocumentThumbnail
-                      :document="resolvePrimaryDocument(row.piece)"
-                      :alt="resolvePreviewAlt(row.piece)"
-                    />
-                  </td>
-                  <td>{{ row.piece.name || 'Pièce sans nom' }}</td>
-                  <td>{{ row.piece.reference || '—' }}</td>
-                  <td class="max-w-xs">
-                    <div v-if="row.piece.description" class="group relative">
-                      <span class="block cursor-help truncate">{{ row.piece.description }}</span>
-                      <div class="pointer-events-none invisible absolute left-0 top-full z-50 mt-1 max-w-sm overflow-hidden rounded-lg border border-base-300 bg-base-100 p-3 text-sm shadow-lg group-hover:pointer-events-auto group-hover:visible">
-                        <p class="break-words whitespace-pre-wrap">{{ row.piece.description }}</p>
-                      </div>
-                    </div>
-                    <span v-else>—</span>
-                  </td>
-                  <td>
-                    <div
-                      v-if="row.suppliers.visible.length"
-                      class="flex max-w-[14rem] flex-wrap items-center gap-1"
-                      :title="row.suppliers.tooltip"
-                    >
-                      <span
-                        v-for="supplier in row.suppliers.visible"
-                        :key="supplier"
-                        class="badge badge-ghost badge-sm whitespace-nowrap"
-                      >
-                        {{ supplier }}
-                      </span>
-                      <span
-                        v-if="row.suppliers.overflow"
-                        class="badge badge-outline badge-sm"
-                      >
-                        +{{ row.suppliers.overflow }}
-                      </span>
-                    </div>
-                    <span v-else>—</span>
-                  </td>
-                  <td>
-                    <NuxtLink
-                      v-if="row.piece.typePiece?.id"
-                      :to="`/piece-category/${row.piece.typePiece.id}/edit`"
-                      class="link link-hover link-primary"
-                    >
-                      {{ resolvePieceType(row.piece) }}
-                    </NuxtLink>
-                    <span v-else>{{ resolvePieceType(row.piece) }}</span>
-                  </td>
-                  <td>
-                    <div class="flex items-center gap-2">
-                      <NuxtLink
-                        :to="`/pieces/${row.piece.id}/edit`"
-                        class="btn btn-ghost btn-xs"
-                      >
-                        Modifier
-                      </NuxtLink>
-                      <button
-                        v-if="canEdit"
-                        type="button"
-                        class="btn btn-error btn-xs"
-                        :disabled="loadingPieces"
-                        @click="handleDeletePiece(row.piece)"
-                      >
-                        Supprimer
-                      </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 } from 'vue'
+import DataTable from '~/components/common/DataTable.vue'
 import { usePieces } from '~/composables/usePieces'
 import { usePieceTypes } from '~/composables/usePieceTypes'
 import { useToast } from '~/composables/useToast'
-import { useUrlState } from '~/composables/useUrlState'
+import { useDataTable } from '~/composables/useDataTable'
 import DocumentThumbnail from '~/components/DocumentThumbnail.vue'
-import Pagination from '~/components/common/Pagination.vue'
 import { isImageDocument, isPdfDocument } from '~/utils/documentPreview'
 
 const { canEdit } = usePermissions()
@@ -224,114 +158,73 @@ const { pieces, total, loadPieces, loading: loadingPiecesRef, deletePiece } = us
 const { pieceTypes, loadPieceTypes } = usePieceTypes()
 const loadingPieces = computed(() => loadingPiecesRef.value)
 
-// State synced with URL query params (preserved on back/forward navigation)
-const {
-  page: currentPage,
-  perPage: itemsPerPage,
-  q: searchTerm,
-  sort: sortField,
-  dir: sortDirection,
-} = useUrlState({
-  page: { default: 1, type: 'number' },
-  perPage: { default: 20, type: 'number' },
-  q: { default: '', debounce: 300 },
-  sort: { default: 'name' },
-  dir: { default: 'asc' },
-}, {
-  onRestore: () => fetchPieces(),
-})
+const table = useDataTable(
+  { fetchData: fetchPieces },
+  { defaultSort: 'name', defaultDirection: 'asc', defaultPerPage: 20, persistToUrl: true },
+)
 
-const piecesTotal = computed(() => total.value)
-const piecesOnPage = computed(() => pieces.value.length)
-const totalPages = computed(() => Math.ceil(piecesTotal.value / itemsPerPage.value) || 1)
+const columns = [
+  { key: 'preview', label: 'Aperçu', width: 'w-24' },
+  { key: 'name', label: 'Nom', sortable: true },
+  { key: 'reference', label: 'Référence' },
+  { key: 'description', label: 'Description' },
+  { key: 'suppliers', label: 'Fournisseurs' },
+  { key: 'typePiece', label: 'Type de pièce', filterable: true, filterPlaceholder: 'Filtrer…' },
+  { key: 'createdAt', label: 'Date', sortable: true },
+  { key: 'actions', label: 'Actions' },
+]
 
-// Search debounce for API calls
-let searchTimeout: ReturnType<typeof setTimeout> | null = null
+const piecesOnPage = computed(() => pieceRows.value.length)
+const paginationState = table.pagination(total, piecesOnPage)
 
-const debouncedSearch = () => {
-  if (searchTimeout) {
-    clearTimeout(searchTimeout)
-  }
-  searchTimeout = setTimeout(() => {
-    currentPage.value = 1
-    fetchPieces()
-  }, 300)
-}
-
-// Enrichir les pièces avec les types de pièces complets
+// Enrich pieces with full type data
 const piecesList = computed(() => {
   return (pieces.value || []).map((piece) => {
     const typePiece = pieceTypes.value.find(t => t.id === piece.typePieceId)
-    return {
-      ...piece,
-      typePiece: typePiece || piece.typePiece || null
-    }
+    return { ...piece, typePiece: typePiece || piece.typePiece || null }
   })
 })
 
-const fetchPieces = async () => {
+const pieceRows = computed(() =>
+  piecesList.value.map(piece => ({
+    id: piece.id,
+    piece,
+    suppliers: buildPieceSuppliersDisplay(piece),
+  })),
+)
+
+async function fetchPieces() {
   await loadPieces({
-    search: searchTerm.value,
-    page: currentPage.value,
-    itemsPerPage: itemsPerPage.value,
-    orderBy: sortField.value,
-    orderDir: sortDirection.value as 'asc' | 'desc',
-    force: true
+    search: table.searchTerm.value,
+    page: table.currentPage.value,
+    itemsPerPage: table.itemsPerPage.value,
+    orderBy: table.sortField.value,
+    orderDir: table.sortDirection.value as 'asc' | 'desc',
+    typeName: table.columnFilters.value.typePiece || undefined,
+    force: true,
   })
 }
 
-const handlePageChange = (page: number) => {
-  currentPage.value = page
-  fetchPieces()
-}
-
-const handleSortChange = () => {
-  currentPage.value = 1
-  fetchPieces()
-}
-
-const handlePerPageChange = () => {
-  currentPage.value = 1
-  fetchPieces()
-}
-
 const resolvePrimaryDocument = (piece: Record<string, any>) => {
   const documents = Array.isArray(piece?.documents) ? piece.documents : []
-  if (!documents.length) {
-    return null
-  }
-  const normalized = documents.filter((doc) => doc && typeof doc === 'object')
-  const withPath = normalized.filter((doc) => doc?.fileUrl || doc?.path)
-
-  const pdf = withPath.find((doc) => isPdfDocument(doc))
-  if (pdf) {
-    return pdf
-  }
-
-  const image = withPath.find((doc) => isImageDocument(doc))
-  if (image) {
-    return image
-  }
-
+  if (!documents.length) return null
+  const normalized = documents.filter((doc: any) => doc && typeof doc === 'object')
+  const withPath = normalized.filter((doc: any) => doc?.fileUrl || doc?.path)
+  const pdf = withPath.find((doc: any) => isPdfDocument(doc))
+  if (pdf) return pdf
+  const image = withPath.find((doc: any) => isImageDocument(doc))
+  if (image) return image
   return withPath[0] ?? normalized[0] ?? null
 }
 
 const resolvePreviewAlt = (piece: Record<string, any>) => {
   const parts = [piece?.name, piece?.reference].filter(Boolean)
-  if (parts.length) {
-    return `Aperçu du document de ${parts.join(' – ')}`
-  }
-  return 'Aperçu du document'
+  return parts.length ? `Aperçu du document de ${parts.join(' – ')}` : 'Aperçu du document'
 }
 
 const resolvePieceType = (piece: Record<string, any>) => {
-  const type = piece?.typePiece
-  if (type?.name) {
-    return type.name
-  }
-  if (piece?.typePieceLabel) {
-    return piece.typePieceLabel
-  }
+  if (piece?.typePiece?.name) return piece.typePiece.name
+  if (piece?.typePieceLabel) return piece.typePieceLabel
   return '—'
 }
 
@@ -342,61 +235,36 @@ const resolvePieceSuppliers = (piece: Record<string, any>) => {
   const seen = new Set<string>()
 
   const pushName = (maybeName: unknown) => {
-    if (typeof maybeName !== 'string') {
-      return
-    }
+    if (typeof maybeName !== 'string') return
     const normalized = maybeName.trim().replace(/\s+/g, ' ')
-    if (!normalized.length) {
-      return
-    }
+    if (!normalized.length) return
     const key = normalized.toLowerCase()
-    if (seen.has(key)) {
-      return
-    }
+    if (seen.has(key)) return
     seen.add(key)
     names.push(normalized)
   }
 
   const collectConstructeurs = (value: unknown): void => {
-    if (!value) {
-      return
-    }
-    if (Array.isArray(value)) {
-      value.forEach(collectConstructeurs)
-      return
-    }
-    if (typeof value === 'string') {
-      pushName(value)
-      return
-    }
+    if (!value) return
+    if (Array.isArray(value)) { value.forEach(collectConstructeurs); return }
+    if (typeof value === 'string') { pushName(value); return }
     if (typeof value === 'object') {
       const record = value as Record<string, any>
       pushName(record?.name ?? record?.label ?? record?.companyName ?? record?.company ?? null)
-      if (record?.constructeur) {
-        collectConstructeurs(record.constructeur)
-      }
-      if (Array.isArray(record?.constructeurs)) {
-        collectConstructeurs(record.constructeurs)
-      }
+      if (record?.constructeur) collectConstructeurs(record.constructeur)
+      if (Array.isArray(record?.constructeurs)) collectConstructeurs(record.constructeurs)
     }
   }
 
   const collectFromLabel = (value: unknown): void => {
-    if (typeof value !== 'string') {
-      return
-    }
-    value
-      .split(/[,;\\/•·|]+/)
-      .map((part) => part.trim())
-      .filter(Boolean)
-      .forEach(pushName)
+    if (typeof value !== 'string') return
+    value.split(/[,;\\/•·|]+/).map(part => part.trim()).filter(Boolean).forEach(pushName)
   }
 
   collectConstructeurs(piece?.constructeurs)
   collectConstructeurs(piece?.constructeur)
   collectConstructeurs(piece?.product?.constructeurs)
   collectConstructeurs(piece?.product?.constructeur)
-
   collectFromLabel(piece?.constructeursLabel)
   collectFromLabel(piece?.supplierLabel)
   collectFromLabel(piece?.product?.constructeursLabel)
@@ -409,83 +277,45 @@ const buildPieceSuppliersDisplay = (piece: Record<string, any>) => {
   const suppliers = resolvePieceSuppliers(piece)
   const visible = suppliers.slice(0, MAX_VISIBLE_SUPPLIERS)
   const overflow = Math.max(suppliers.length - visible.length, 0)
-  return {
-    suppliers,
-    visible,
-    overflow,
-    tooltip: suppliers.length ? suppliers.join(', ') : '',
-  }
+  return { suppliers, visible, overflow, tooltip: suppliers.length ? suppliers.join(', ') : '' }
 }
 
 const resolveDeleteGuard = (piece: Record<string, any>) => {
   const blockingReasons: string[] = []
-  const machineLinks = Array.isArray(piece?.machineLinks)
-    ? piece.machineLinks.length
-    : piece?.machineLinksCount ?? 0
-  const documents = Array.isArray(piece?.documents)
-    ? piece.documents.length
-    : piece?.documentsCount ?? 0
-  const customFields = Array.isArray(piece?.customFieldValues)
-    ? piece.customFieldValues.length
-    : piece?.customFieldValuesCount ?? 0
-
-  if (machineLinks > 0) {
-    blockingReasons.push(`${machineLinks} liaison${machineLinks > 1 ? 's' : ''} machine`)
-  }
-  if (documents > 0) {
-    blockingReasons.push(`${documents} document${documents > 1 ? 's' : ''}`)
-  }
-  return {
-    blockingReasons,
-    hasCustomFields: customFields > 0,
-  }
+  const machineLinks = Array.isArray(piece?.machineLinks) ? piece.machineLinks.length : piece?.machineLinksCount ?? 0
+  const documents = Array.isArray(piece?.documents) ? piece.documents.length : piece?.documentsCount ?? 0
+  const customFields = Array.isArray(piece?.customFieldValues) ? piece.customFieldValues.length : piece?.customFieldValuesCount ?? 0
+  if (machineLinks > 0) blockingReasons.push(`${machineLinks} liaison${machineLinks > 1 ? 's' : ''} machine`)
+  if (documents > 0) blockingReasons.push(`${documents} document${documents > 1 ? 's' : ''}`)
+  return { blockingReasons, hasCustomFields: customFields > 0 }
 }
 
-const pieceRows = computed(() =>
-  piecesList.value.map((piece) => ({
-    piece,
-    suppliers: buildPieceSuppliersDisplay(piece),
-  })),
-)
-
 const handleDeletePiece = async (piece: Record<string, any>) => {
   const { blockingReasons, hasCustomFields } = resolveDeleteGuard(piece)
-
   if (blockingReasons.length) {
-    showError(
-      `Impossible de supprimer cette pièce car elle possède encore: ${blockingReasons.join(
-        ', ',
-      )}. Supprimez ou détachez ces éléments avant de réessayer.`
-    )
+    showError(`Impossible de supprimer cette pièce car elle possède encore: ${blockingReasons.join(', ')}. Supprimez ou détachez ces éléments avant de réessayer.`)
     return
   }
-
   const pieceName = piece?.name || 'cette pièce'
-  const confirmLines = [
-    `Voulez-vous vraiment supprimer ${pieceName} ?`,
-  ]
-
+  const confirmLines = [`Voulez-vous vraiment supprimer ${pieceName} ?`]
   if (hasCustomFields) {
-    confirmLines.push(
-      'Les valeurs de champs personnalisés associées seront également supprimées.'
-    )
+    confirmLines.push('Les valeurs de champs personnalisés associées seront également supprimées.')
   }
-
   const { confirm } = useConfirm()
   const confirmed = await confirm({ message: confirmLines.join('\n\n') })
-  if (!confirmed) {
-    return
-  }
-
+  if (!confirmed) return
   await deletePiece(piece.id)
-  // Reload current page after deletion
   fetchPieces()
 }
 
+const formatDate = (dateStr: string) => {
+  if (!dateStr) return '—'
+  const date = new Date(dateStr)
+  if (Number.isNaN(date.getTime())) return '—'
+  return new Intl.DateTimeFormat('fr-FR', { day: '2-digit', month: '2-digit', year: 'numeric' }).format(date)
+}
+
 onMounted(async () => {
-  await Promise.all([
-    fetchPieces(),
-    loadPieceTypes()
-  ])
+  await Promise.all([fetchPieces(), loadPieceTypes()])
 })
 </script>