From 55739fe50f5857809a82e933e045fb76b99d260d Mon Sep 17 00:00:00 2001
From: Matthieu <mtholot19@gmail.com>
Date: Sun, 25 Jan 2026 09:46:11 +0100
Subject: [PATCH] Fix machines display on overview; disable inline PDF
 thumbnails

---
 app/components/DocumentThumbnail.vue | 19 ++-------
 app/pages/index.vue                  | 61 ++++++++++++++++++++++++----
 2 files changed, 57 insertions(+), 23 deletions(-)

diff --git a/app/components/DocumentThumbnail.vue b/app/components/DocumentThumbnail.vue
index d35516b..b26d27e 100644
--- a/app/components/DocumentThumbnail.vue
+++ b/app/components/DocumentThumbnail.vue
@@ -12,12 +12,6 @@
       loading="lazy"
       decoding="async"
     >
-    <iframe
-      v-else-if="canRenderPdf"
-      :src="previewSrc"
-      class="h-full w-full border-0 bg-white"
-      title="Aperçu PDF"
-    />
     <component
       v-else
       :is="icon.component"
@@ -54,8 +48,6 @@ const props = defineProps<{
   alt?: string;
 }>();
 
-const PDF_PREVIEW_MAX_BYTES = 5 * 1024 * 1024;
-
 const normalizedDocument = computed(() => props.document ?? null);
 
 const canRenderImage = computed(() => {
@@ -64,14 +56,9 @@ const canRenderImage = computed(() => {
 });
 
 const canRenderPdf = computed(() => {
-  const doc = normalizedDocument.value;
-  if (!doc || !isPdfDocument(doc) || !doc.path) {
-    return false;
-  }
-  if (typeof doc.size === 'number' && doc.size > PDF_PREVIEW_MAX_BYTES) {
-    return false;
-  }
-  return true;
+  // Rendering many PDF iframes in a list is very heavy for the browser.
+  // We intentionally disable inline PDF previews and fall back to an icon.
+  return false;
 });
 
 const appendPdfViewerParams = (src: string) => {
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 67711a3..8c1eae2 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -472,10 +472,11 @@ import IconLucideChevronDown from '~icons/lucide/chevron-down'
 import IconLucideSettings2 from '~icons/lucide/settings-2'
 import IconLucideTag from '~icons/lucide/tag'
 import { formatPhone } from '~/utils/formatters/phone'
+import { extractRelationId } from '~/shared/apiRelations'
 
 const { sites, loading, loadSites, createSite } = useSites()
 const { machineTypes, loadMachineTypes } = useMachineTypesApi()
-const { createMachineFromType, deleteMachine } = useMachines()
+const { machines, loadMachines, createMachineFromType, deleteMachine } = useMachines()
 
 // Data
 const showAddSiteModal = ref(false)
@@ -517,8 +518,50 @@ const categories = computed(() => {
   return Array.from(cats)
 })
 
+const machinesWithType = computed(() => {
+  return machines.value.map((machine) => {
+    const resolvedTypeMachineId = machine.typeMachineId || extractRelationId(machine.typeMachine)
+    const resolvedTypeMachine = resolvedTypeMachineId
+      ? machineTypes.value.find(type => type.id === resolvedTypeMachineId) || null
+      : null
+
+    return {
+      ...machine,
+      typeMachineId: resolvedTypeMachineId || machine.typeMachineId,
+      typeMachine:
+        machine.typeMachine && typeof machine.typeMachine === 'object'
+          ? machine.typeMachine
+          : resolvedTypeMachine
+    }
+  })
+})
+
+const machinesBySiteId = computed(() => {
+  const map = new Map()
+
+  machinesWithType.value.forEach((machine) => {
+    const siteId = machine.siteId || extractRelationId(machine.site)
+    if (!siteId) { return }
+
+    if (!map.has(siteId)) {
+      map.set(siteId, [])
+    }
+
+    map.get(siteId).push(machine)
+  })
+
+  return map
+})
+
+const sitesWithMachines = computed(() => {
+  return sites.value.map((site) => ({
+    ...site,
+    machines: machinesBySiteId.value.get(site.id) || []
+  }))
+})
+
 const totalMachines = computed(() => {
-  return sites.value.reduce((total, site) => {
+  return sitesWithMachines.value.reduce((total, site) => {
     return total + (site.machines?.length || 0)
   }, 0)
 })
@@ -532,7 +575,7 @@ const formatPhoneDisplay = (value) => {
 }
 
 const filteredSites = computed(() => {
-  let filtered = sites.value
+  let filtered = sitesWithMachines.value
 
   // Filtrer par terme de recherche
   if (searchTerm.value) {
@@ -551,9 +594,11 @@ const filteredSites = computed(() => {
       })
 
       const machineMatches = site.machines?.some(
-        machine =>
-          machine.name.toLowerCase().includes(lowerTerm) ||
-          machine.reference?.toLowerCase().includes(lowerTerm)
+        machine => {
+          const name = (machine.name || '').toLowerCase()
+          const reference = (machine.reference || '').toLowerCase()
+          return name.includes(lowerTerm) || reference.includes(lowerTerm)
+        }
       )
 
       return siteMatches || machineMatches
@@ -637,6 +682,7 @@ const handleCreateMachine = async () => {
     newMachine.typeMachineId = ''
     newMachine.reference = ''
     showAddMachineModal.value = false
+    await loadMachines()
   }
 }
 
@@ -671,6 +717,7 @@ const confirmDeleteMachine = async (machine) => {
       const result = await deleteMachine(machine.id)
       if (result.success) {
         showSuccess(`Machine "${machine.name}" supprimée avec succès`)
+        await loadMachines()
       } else {
         showError(`Erreur lors de la suppression: ${result.error}`)
       }
@@ -698,6 +745,6 @@ const getCategoryBadgeClass = (category) => {
 
 // Lifecycle
 onMounted(async () => {
-  await Promise.all([loadSites(), loadMachineTypes()])
+  await Promise.all([loadSites(), loadMachineTypes(), loadMachines()])
 })
 </script>