feat(ui) : refonte cartes dépliantes structure machine + DataTable parc machines + fix activity-log

- Parc Machines transformé en DataTable avec filtres (site, date création, recherche)
- Vue d'ensemble : ajout filtre par plage de dates de création
- Activity-log : correction des liens entités (routes singulier sans /edit, ajout machine/document/model_type)
- ComponentItem & PieceItem : refonte complète des cartes dépliantes (design industriel raffiné)
  - Header compact avec tags colorés contrastés (référence, réf. auto, prix, produit, champs machine)
  - Panneau déplié structuré en sections avec mini-headers
  - Bordure gauche primary pour hiérarchie visuelle
- Ajout referenceAuto dans header et infos pour composants et pièces
- Suppression double encadrement ComponentHierarchy

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/app/pages/activity-log.vue

@@ -44,6 +44,7 @@
                 <option value="piece">Pièce</option>
                 <option value="product">Produit</option>
                 <option value="composant">Composant</option>
+                <option value="machine">Machine</option>
               </select>
             </div>
 
@@ -89,13 +90,16 @@
 
           <template #cell-entity="{ row }">
             <NuxtLink
-              v-if="row.action !== 'delete'"
+              v-if="row.action !== 'delete' && entityEditLink(row) !== '#'"
               :to="entityEditLink(row)"
               class="link link-hover link-primary"
             >
               {{ row.entityName || 'Sans nom' }}
             </NuxtLink>
-            <span v-else class="text-base-content/50 line-through">
+            <span v-else-if="row.action === 'delete'" class="text-base-content/50 line-through">
+              {{ row.entityName || 'Sans nom' }}
+            </span>
+            <span v-else>
               {{ row.entityName || 'Sans nom' }}
             </span>
             <span
@@ -195,19 +199,23 @@ const ENTITY_TYPE_LABELS: Record<string, string> = {
   piece: 'Pièce',
   product: 'Produit',
   composant: 'Composant',
+  machine: 'Machine',
+  document: 'Document',
+  model_type: 'Modèle',
 }
 
 const entityTypeLabel = (type: string) => ENTITY_TYPE_LABELS[type] ?? type
 
-const ENTITY_EDIT_ROUTES: Record<string, string> = {
-  piece: '/pieces',
+const ENTITY_ROUTES: Record<string, string> = {
+  piece: '/piece',
   product: '/product',
   composant: '/component',
+  machine: '/machine',
 }
 
 const entityEditLink = (entry: ActivityLogEntry) => {
-  const base = ENTITY_EDIT_ROUTES[entry.entityType] ?? ''
-  return base ? `${base}/${entry.entityId}/edit` : '#'
+  const base = ENTITY_ROUTES[entry.entityType] ?? ''
+  return base ? `${base}/${entry.entityId}` : '#'
 }
 
 const actionBadgeClass = (action: string) => {

frontend/app/pages/index.vue

@@ -41,7 +41,7 @@
                 >
               </div>
             </div>
-            <div class="form-control md:w-64">
+            <div class="form-control md:w-48">
               <label class="label">
                 <span class="label-text text-xs font-semibold uppercase tracking-wide text-base-content/50">Site</span>
               </label>
@@ -58,6 +58,24 @@
                 </option>
               </select>
             </div>
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text text-xs font-semibold uppercase tracking-wide text-base-content/50">Date de création</span>
+              </label>
+              <div class="flex items-center gap-2">
+                <input
+                  v-model="dateFrom"
+                  type="date"
+                  class="input input-bordered input-sm"
+                >
+                <span class="text-xs text-base-content/50">à</span>
+                <input
+                  v-model="dateTo"
+                  type="date"
+                  class="input input-bordered input-sm"
+                >
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -277,6 +295,8 @@ const showAddSiteModal = ref(false)
 const showAddMachineModal = ref(false)
 const searchTerm = ref('')
 const selectedSiteFilter = ref('')
+const dateFrom = ref('')
+const dateTo = ref('')
 const collapsedSites = ref([])
 const preselectedSiteId = ref('')
 
@@ -327,6 +347,25 @@ const filteredSites = computed(() => {
     filtered = filtered.filter(site => site.id === selectedSiteFilter.value)
   }
 
+  // Filtrer les machines par date de création
+  if (dateFrom.value || dateTo.value) {
+    const from = dateFrom.value ? new Date(dateFrom.value) : null
+    const to = dateTo.value ? new Date(dateTo.value) : null
+    if (from) from.setHours(0, 0, 0, 0)
+    if (to) to.setHours(23, 59, 59, 999)
+
+    filtered = filtered.map((site) => {
+      const filteredMachines = (site.machines || []).filter((machine) => {
+        if (!machine.createdAt) return false
+        const created = new Date(machine.createdAt)
+        if (from && created < from) return false
+        if (to && created > to) return false
+        return true
+      })
+      return { ...site, machines: filteredMachines }
+    }).filter(site => site.machines.length > 0)
+  }
+
   // Filtrer par terme de recherche
   if (searchTerm.value) {
     filtered = filtered.filter((site) => {

frontend/app/pages/machines/index.vue

@@ -5,108 +5,93 @@
         <h2 class="text-2xl font-bold">
           Parc Machines
         </h2>
-        <NuxtLink to="/machines/new" class="btn btn-primary">
+        <NuxtLink v-if="canEdit" to="/machines/new" class="btn btn-primary">
           <IconLucidePlus class="w-5 h-5 mr-2" aria-hidden="true" />
           Ajouter une machine
         </NuxtLink>
       </div>
 
-      <div class="card bg-base-100 shadow-sm mb-6">
-        <div class="card-body">
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div class="form-control">
-              <label class="label">
-                <span class="label-text">Sites</span>
-              </label>
-              <div class="flex flex-wrap gap-3">
-                <label
-                  v-for="site in sites"
-                  :key="site.id"
-                  class="flex items-center gap-2 cursor-pointer"
+      <div class="card bg-base-100 shadow-sm">
+        <div class="card-body space-y-4">
+          <DataTable
+            :columns="columns"
+            :rows="filteredMachines"
+            :loading="loading"
+            :sort="currentSort"
+            :show-counter="true"
+            empty-message="Aucune machine trouvée."
+            no-results-message="Aucune machine ne correspond à vos filtres."
+            @sort="handleSort"
+          >
+            <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="searchQuery"
+                  type="search"
+                  class="input input-bordered input-sm w-full mt-1"
+                  placeholder="Nom ou référence..."
                 >
-                  <input
-                    type="checkbox"
-                    class="checkbox checkbox-sm"
-                    :checked="selectedSites.has(site.id)"
-                    @change="selectedSites.has(site.id) ? selectedSites.delete(site.id) : selectedSites.add(site.id)"
-                  >
-                  <span class="text-sm">{{ site.name }}</span>
-                </label>
-              </div>
-            </div>
-            <div class="form-control">
-              <label class="label">
-                <span class="label-text">Recherche</span>
               </label>
-              <input
-                v-model="searchQuery"
-                type="text"
-                placeholder="Rechercher par nom ou référence..."
-                class="input input-bordered"
+
+              <div class="flex flex-col">
+                <span class="text-xs font-semibold uppercase tracking-wide text-base-content/70">Site</span>
+                <select v-model="selectedSiteId" class="select select-bordered select-sm mt-1">
+                  <option value="">Tous les sites</option>
+                  <option v-for="site in sites" :key="site.id" :value="site.id">
+                    {{ site.name }}
+                  </option>
+                </select>
+              </div>
+
+              <div class="flex flex-col">
+                <span class="text-xs font-semibold uppercase tracking-wide text-base-content/70">Date de création</span>
+                <div class="flex items-center gap-2 mt-1">
+                  <input
+                    v-model="dateFrom"
+                    type="date"
+                    class="input input-bordered input-sm"
+                  >
+                  <span class="text-xs text-base-content/50">à</span>
+                  <input
+                    v-model="dateTo"
+                    type="date"
+                    class="input input-bordered input-sm"
+                  >
+                </div>
+              </div>
+            </template>
+
+            <template #cell-site="{ row }">
+              <span
+                v-if="row.site"
+                class="badge badge-sm font-bold"
+                :style="row.site.color ? { backgroundColor: row.site.color + '30', color: row.site.color, borderColor: row.site.color + '50' } : {}"
+                :class="!row.site.color ? 'badge-ghost' : ''"
               >
-            </div>
-          </div>
-        </div>
-      </div>
+                {{ row.site.name }}
+              </span>
+              <span v-else class="text-base-content/30">—</span>
+            </template>
 
-      <div v-if="loading" class="flex justify-center items-center py-12">
-        <span class="loading loading-spinner loading-lg" />
-      </div>
+            <template #cell-createdAt="{ row }">
+              <span class="whitespace-nowrap">{{ formatDate(row.createdAt) }}</span>
+            </template>
 
-      <EmptyState
-        v-else-if="filteredMachines.length === 0"
-        :icon="IconLucideFactory"
-        title="Aucune machine trouvée"
-        description="Commencez par ajouter votre première machine."
-        action-label="Ajouter une machine"
-        action-to="/machines/new"
-      />
-
-      <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        <div
-          v-for="machine in filteredMachines"
-          :key="machine.id"
-          class="card site-card shadow-md hover:shadow-xl transition-shadow cursor-pointer overflow-hidden"
-          :style="{
-            borderTop: machine.site?.color ? `4px solid ${machine.site.color}` : '4px solid transparent',
-            background: machine.site?.color ? `linear-gradient(160deg, ${machine.site.color}30 0%, ${machine.site.color}08 40%, var(--color-base-100) 100%)` : undefined,
-          }"
-          @click="viewMachineDetails(machine)"
-        >
-          <div class="card-body flex flex-col">
-            <div class="flex items-center justify-between mb-2">
-              <h3 class="card-title text-lg">
-                {{ machine.name }}
-              </h3>
-            </div>
-
-            <div class="space-y-2 text-sm">
-              <div class="flex items-center gap-2">
-                <IconLucideMapPin class="w-4 h-4" :style="{ color: machine.site?.color || '#3b82f6' }" aria-hidden="true" />
-                <span
-                  class="font-bold text-sm px-2.5 py-1 rounded-lg text-base-content"
-                  :style="machine.site?.color ? { backgroundColor: machine.site.color + '30', border: `1px solid ${machine.site.color}40` } : {}"
-                >{{ machine.site?.name || 'Site inconnu' }}</span>
+            <template #cell-actions="{ row }">
+              <div class="flex items-center justify-end gap-2">
+                <button v-if="canEdit" class="btn btn-ghost btn-xs" @click="editMachine(row)">
+                  Modifier
+                </button>
+                <button v-if="canEdit" class="btn btn-ghost btn-xs text-error" @click="confirmDeleteMachine(row)">
+                  Supprimer
+                </button>
+                <NuxtLink :to="`/machine/${row.id}`" class="btn btn-primary btn-xs">
+                  Détails
+                </NuxtLink>
               </div>
-
-              <div v-if="machine.reference" class="flex items-center gap-2">
-                <IconLucideTag class="w-4 h-4 text-orange-500" aria-hidden="true" />
-                <span class="text-gray-600">{{ machine.reference }}</span>
-              </div>
-            </div>
-
-            <div class="mt-auto pt-3 flex items-center justify-end gap-2">
-              <button v-if="canEdit" class="btn btn-ghost btn-sm" @click.stop="editMachine(machine)">
-                Modifier
-              </button>
-              <button v-if="canEdit" class="btn btn-ghost btn-sm text-error" @click.stop="confirmDeleteMachine(machine)">
-                Supprimer
-              </button>
-              <NuxtLink :to="`/machine/${machine.id}`" class="btn btn-primary btn-sm">
-                Détails
-              </NuxtLink>
-            </div>
-          </div>
+            </template>
+          </DataTable>
         </div>
       </div>
     </div>
@@ -114,16 +99,16 @@
 </template>
 
 <script setup>
-import { ref, reactive, computed, onMounted, watch } from 'vue'
+import { ref, computed, onMounted } from 'vue'
+import DataTable from '~/components/common/DataTable.vue'
 import { useMachines } from '~/composables/useMachines'
 import { useSites } from '~/composables/useSites'
 import { useToast } from '~/composables/useToast'
 import { humanizeError } from '~/shared/utils/errorMessages'
 import { useUrlState } from '~/composables/useUrlState'
+import { usePersistedValue } from '~/composables/usePersistedValue'
+import { formatFrenchDate } from '~/utils/date'
 import IconLucidePlus from '~icons/lucide/plus'
-import IconLucideFactory from '~icons/lucide/factory'
-import IconLucideMapPin from '~icons/lucide/map-pin'
-import IconLucideTag from '~icons/lucide/tag'
 
 const { canEdit } = usePermissions()
 const { machines, loading, loadMachines, deleteMachine } = useMachines()
@@ -132,34 +117,46 @@ const toast = useToast()
 
 const urlState = useUrlState({
   q: { default: '', debounce: 300 },
-  sites: { default: '' },
+  site: { default: '' },
+  from: { default: '' },
+  to: { default: '' },
 })
 
 const searchQuery = urlState.q
-const selectedSites = reactive(new Set())
+const selectedSiteId = urlState.site
+const dateFrom = urlState.from
+const dateTo = urlState.to
 
-// Sync URL → selectedSites on load and back/forward
-watch(urlState.sites, (val) => {
-  selectedSites.clear()
-  if (val) {
-    for (const id of String(val).split(',')) {
-      if (id) selectedSites.add(id)
-    }
-  }
-}, { immediate: true })
+const sortKey = usePersistedValue('machines-sort', 'name')
+const sortDir = ref('asc')
 
-// Sync selectedSites → URL
-watch(() => [...selectedSites], (ids) => {
-  urlState.sites.value = ids.join(',')
-})
+const currentSort = computed(() => ({
+  field: sortKey.value,
+  direction: sortDir.value,
+}))
+
+const handleSort = (sort) => {
+  sortKey.value = sort.field
+  sortDir.value = sort.direction
+}
+
+const columns = [
+  { key: 'name', label: 'Nom', sortable: true },
+  { key: 'reference', label: 'Référence', sortable: true },
+  { key: 'site', label: 'Site', sortable: true, sortKey: 'siteName' },
+  { key: 'createdAt', label: 'Date de création', sortable: true },
+  { key: 'actions', label: 'Actions', align: 'right' },
+]
+
+const formatDate = formatFrenchDate
 
-// Enrichir les machines avec les objets site complets
 const enrichedMachines = computed(() => {
   return machines.value.map((machine) => {
     const site = sites.value.find(s => s.id === machine.siteId)
     return {
       ...machine,
       site: site || null,
+      siteName: site?.name || '',
     }
   })
 })
@@ -167,29 +164,44 @@ const enrichedMachines = computed(() => {
 const filteredMachines = computed(() => {
   let filtered = enrichedMachines.value
 
-  if (selectedSites.size > 0) {
-    filtered = filtered.filter(machine => selectedSites.has(machine.siteId))
+  if (selectedSiteId.value) {
+    filtered = filtered.filter(m => m.siteId === selectedSiteId.value)
   }
 
   if (searchQuery.value.trim()) {
     const term = searchQuery.value.trim().toLowerCase()
-    filtered = filtered.filter(machine =>
-      machine.name?.toLowerCase().includes(term)
-      || machine.reference?.toLowerCase().includes(term),
+    filtered = filtered.filter(m =>
+      m.name?.toLowerCase().includes(term)
+      || m.reference?.toLowerCase().includes(term),
     )
   }
 
-  filtered = [...filtered].sort((a, b) =>
-    (a.name || '').localeCompare(b.name || '', 'fr')
-  )
+  if (dateFrom.value) {
+    const from = new Date(dateFrom.value)
+    from.setHours(0, 0, 0, 0)
+    filtered = filtered.filter(m => m.createdAt && new Date(m.createdAt) >= from)
+  }
+
+  if (dateTo.value) {
+    const to = new Date(dateTo.value)
+    to.setHours(23, 59, 59, 999)
+    filtered = filtered.filter(m => m.createdAt && new Date(m.createdAt) <= to)
+  }
+
+  const key = sortKey.value
+  const dir = sortDir.value === 'desc' ? -1 : 1
+  filtered = [...filtered].sort((a, b) => {
+    if (key === 'createdAt') {
+      return dir * (new Date(a[key] || 0).getTime() - new Date(b[key] || 0).getTime())
+    }
+    const valA = (key === 'siteName' ? a.siteName : a[key]) || ''
+    const valB = (key === 'siteName' ? b.siteName : b[key]) || ''
+    return dir * String(valA).localeCompare(String(valB), 'fr')
+  })
 
   return filtered
 })
 
-const viewMachineDetails = (machine) => {
-  navigateTo(`/machine/${machine.id}`)
-}
-
 const editMachine = (machine) => {
   navigateTo(`/machine/${machine.id}?edit=true`)
 }