From 417b34b45e564c10ef34cc62cf17ac316b32afcb Mon Sep 17 00:00:00 2001
From: Matthieu <mtholot19@gmail.com>
Date: Thu, 23 Oct 2025 09:01:38 +0200
Subject: [PATCH] feat: enrich piece assignment labels and document previews

---
 app/components/ComponentItem.vue              |  81 ++++++++++----
 .../ComponentStructureAssignmentNode.vue      |  44 ++++++--
 app/components/PieceItem.vue                  |  47 +++++++-
 app/components/StructureNodeEditor.vue        |   2 +
 app/pages/component/[id]/edit.vue             |  51 ++++++++-
 app/pages/component/create.vue                |   5 +-
 app/pages/machine/[id].vue                    | 104 +++++++++++++++---
 app/pages/pieces/[id]/edit.vue                |  47 +++++++-
 app/shared/modelUtils.ts                      |  22 +++-
 app/shared/types/inventory.ts                 |  10 +-
 app/utils/documentPreview.js                  |   2 +
 11 files changed, 364 insertions(+), 51 deletions(-)

diff --git a/app/components/ComponentItem.vue b/app/components/ComponentItem.vue
index 9c552cb..af727e9 100644
--- a/app/components/ComponentItem.vue
+++ b/app/components/ComponentItem.vue
@@ -208,24 +208,33 @@
         />
 
         <div v-if="componentDocuments.length" class="space-y-2">
-          <div
-            v-for="document in componentDocuments"
-            :key="document.id"
-            class="flex items-center justify-between rounded border border-base-200 bg-base-100 px-3 py-2"
-          >
-            <div class="flex items-center gap-3 text-sm">
-              <div class="h-14 w-14 flex-shrink-0 overflow-hidden rounded-md border border-base-200 bg-base-200/70 flex items-center justify-center">
-                <img
-                  v-if="isImageDocument(document) && document.path"
-                  :src="document.path"
-                  class="h-full w-full object-cover"
-                  :alt="`Aperçu de ${document.name}`"
-                >
-                <component
-                  v-else
-                  :is="documentIcon(document).component"
-                  class="h-6 w-6"
-                  :class="documentIcon(document).colorClass"
+        <div
+          v-for="document in componentDocuments"
+          :key="document.id"
+          class="flex items-center justify-between rounded border border-base-200 bg-base-100 px-3 py-2"
+        >
+          <div class="flex items-center gap-3 text-sm">
+            <div
+              class="flex-shrink-0 overflow-hidden rounded-md border border-base-200 bg-base-200/70 flex items-center justify-center"
+              :class="documentThumbnailClass(document)"
+            >
+              <img
+                v-if="isImageDocument(document) && document.path"
+                :src="document.path"
+                class="h-full w-full object-cover"
+                :alt="`Aperçu de ${document.name}`"
+              >
+              <iframe
+                v-else-if="shouldInlinePdf(document)"
+                :src="documentPreviewSrc(document)"
+                class="h-full w-full border-0 bg-white"
+                title="Aperçu PDF"
+              />
+              <component
+                v-else
+                :is="documentIcon(document).component"
+                class="h-6 w-6"
+                :class="documentIcon(document).colorClass"
                   aria-hidden="true"
                 />
               </div>
@@ -317,7 +326,7 @@ import DocumentUpload from './DocumentUpload.vue'
 import ConstructeurSelect from './ConstructeurSelect.vue'
 import { useDocuments } from '~/composables/useDocuments'
 import { getFileIcon } from '~/utils/fileIcons'
-import { canPreviewDocument, isImageDocument } from '~/utils/documentPreview'
+import { canPreviewDocument, isImageDocument, isPdfDocument } from '~/utils/documentPreview'
 import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'
 import IconLucideChevronRight from '~icons/lucide/chevron-right'
 import { useCustomFields } from '~/composables/useCustomFields'
@@ -357,6 +366,40 @@ const componentDocuments = computed(() => props.component.documents || [])
 const documentIcon = doc => getFileIcon({ name: doc.filename || doc.name, mime: doc.mimeType })
 const previewDocument = ref(null)
 const previewVisible = ref(false)
+const PDF_PREVIEW_MAX_BYTES = 5 * 1024 * 1024
+const shouldInlinePdf = (document) => {
+  if (!document || !isPdfDocument(document) || !document.path) {
+    return false
+  }
+  if (typeof document.size === 'number' && document.size > PDF_PREVIEW_MAX_BYTES) {
+    return false
+  }
+  return true
+}
+const appendPdfViewerParams = (src) => {
+  if (!src || src.startsWith('data:')) {
+    return src || ''
+  }
+  if (src.includes('#')) {
+    return `${src}&toolbar=0&navpanes=0`
+  }
+  return `${src}#toolbar=0&navpanes=0`
+}
+const documentPreviewSrc = (document) => {
+  if (!document?.path) {
+    return ''
+  }
+  if (isPdfDocument(document)) {
+    return appendPdfViewerParams(document.path)
+  }
+  return document.path
+}
+const documentThumbnailClass = (document) => {
+  if (shouldInlinePdf(document) || (isImageDocument(document) && document?.path)) {
+    return 'h-24 w-20'
+  }
+  return 'h-16 w-16'
+}
 
 const childComponents = computed(() => {
   const list = props.component.subcomponents || props.component.subComponents || []
diff --git a/app/components/ComponentStructureAssignmentNode.vue b/app/components/ComponentStructureAssignmentNode.vue
index fa9ed1d..15c3aab 100644
--- a/app/components/ComponentStructureAssignmentNode.vue
+++ b/app/components/ComponentStructureAssignmentNode.vue
@@ -228,16 +228,44 @@ watch(
 
 const describePieceRequirement = (definition: ComponentModelPiece) => {
   const parts: string[] = [];
-  if (definition.role) {
-    parts.push(definition.role);
+  const addPart = (value?: string | null) => {
+    const trimmed = typeof value === 'string' ? value.trim() : '';
+    if (trimmed && !parts.includes(trimmed)) {
+      parts.push(trimmed);
+    }
+  };
+
+  const options = getPieceOptions(definition);
+  const fallbackPiece = options[0] || null;
+  const fallbackType = fallbackPiece?.typePiece || null;
+
+  addPart(definition.role);
+  addPart(
+    definition.typePieceLabel ||
+      (definition as any).typePiece?.name ||
+      fallbackType?.name,
+  );
+
+  const family =
+    definition.familyCode ||
+    (definition as any).typePiece?.code ||
+    fallbackType?.code ||
+    null;
+  if (family) {
+    addPart(`Famille ${family}`);
   }
-  if (definition.typePieceLabel) {
-    parts.push(definition.typePieceLabel);
-  } else if ((definition as any).typePiece?.name) {
-    parts.push((definition as any).typePiece.name);
-  } else if (definition.familyCode) {
-    parts.push(definition.familyCode);
+
+  if (parts.length === 0) {
+    addPart(fallbackType?.name);
+    if (fallbackType?.code) {
+      addPart(`Famille ${fallbackType.code}`);
+    }
   }
+
+  if (parts.length === 0 && definition.typePieceId) {
+    addPart(`#${definition.typePieceId}`);
+  }
+
   return parts.length ? parts.join(' • ') : 'Pièce du squelette';
 };
 
diff --git a/app/components/PieceItem.vue b/app/components/PieceItem.vue
index f212b4f..9c709f5 100644
--- a/app/components/PieceItem.vue
+++ b/app/components/PieceItem.vue
@@ -276,13 +276,22 @@
           class="flex items-center justify-between rounded border border-base-200 bg-base-100 px-3 py-2"
         >
           <div class="flex items-center gap-3 text-sm">
-            <div class="h-14 w-14 flex-shrink-0 overflow-hidden rounded-md border border-base-200 bg-base-200/70 flex items-center justify-center">
+            <div
+              class="flex-shrink-0 overflow-hidden rounded-md border border-base-200 bg-base-200/70 flex items-center justify-center"
+              :class="documentThumbnailClass(document)"
+            >
               <img
                 v-if="isImageDocument(document) && document.path"
                 :src="document.path"
                 class="h-full w-full object-cover"
                 :alt="`Aperçu de ${document.name}`"
               >
+              <iframe
+                v-else-if="shouldInlinePdf(document)"
+                :src="documentPreviewSrc(document)"
+                class="h-full w-full border-0 bg-white"
+                title="Aperçu PDF"
+              />
               <component
                 v-else
                 :is="documentIcon(document).component"
@@ -348,7 +357,7 @@ import { useCustomFields } from "~/composables/useCustomFields";
 import { useToast } from "~/composables/useToast";
 import { useDocuments } from "~/composables/useDocuments";
 import { getFileIcon } from "~/utils/fileIcons";
-import { canPreviewDocument, isImageDocument } from "~/utils/documentPreview";
+import { canPreviewDocument, isImageDocument, isPdfDocument } from "~/utils/documentPreview";
 import DocumentUpload from "~/components/DocumentUpload.vue";
 import DocumentPreviewModal from "~/components/DocumentPreviewModal.vue";
 import IconLucidePackage from "~icons/lucide/package";
@@ -388,6 +397,40 @@ const documentIcon = (doc) =>
   getFileIcon({ name: doc.filename || doc.name, mime: doc.mimeType });
 const previewDocument = ref(null);
 const previewVisible = ref(false);
+const PDF_PREVIEW_MAX_BYTES = 5 * 1024 * 1024;
+const shouldInlinePdf = (document) => {
+  if (!document || !isPdfDocument(document) || !document.path) {
+    return false;
+  }
+  if (typeof document.size === "number" && document.size > PDF_PREVIEW_MAX_BYTES) {
+    return false;
+  }
+  return true;
+};
+const appendPdfViewerParams = (src) => {
+  if (!src || src.startsWith("data:")) {
+    return src || "";
+  }
+  if (src.includes("#")) {
+    return `${src}&toolbar=0&navpanes=0`;
+  }
+  return `${src}#toolbar=0&navpanes=0`;
+};
+const documentPreviewSrc = (document) => {
+  if (!document?.path) {
+    return "";
+  }
+  if (isPdfDocument(document)) {
+    return appendPdfViewerParams(document.path);
+  }
+  return document.path;
+};
+const documentThumbnailClass = (document) => {
+  if (shouldInlinePdf(document) || (isImageDocument(document) && document?.path)) {
+    return "h-24 w-20";
+  }
+  return "h-16 w-16";
+};
 const extractStructureCustomFields = (structure) => {
   if (!structure || typeof structure !== "object") {
     return [];
diff --git a/app/components/StructureNodeEditor.vue b/app/components/StructureNodeEditor.vue
index 05433f7..1f15c9c 100644
--- a/app/components/StructureNodeEditor.vue
+++ b/app/components/StructureNodeEditor.vue
@@ -495,6 +495,8 @@ const addPiece = () => {
     typePieceId: '',
     typePieceLabel: '',
     reference: '',
+    familyCode: '',
+    role: '',
   })
 }
 
diff --git a/app/pages/component/[id]/edit.vue b/app/pages/component/[id]/edit.vue
index b4ec582..e76a742 100644
--- a/app/pages/component/[id]/edit.vue
+++ b/app/pages/component/[id]/edit.vue
@@ -311,13 +311,22 @@
               class="flex items-center justify-between rounded border border-base-200 bg-base-100 px-3 py-2"
             >
               <div class="flex items-center gap-3 text-sm">
-                <div class="h-14 w-14 flex-shrink-0 overflow-hidden rounded-md border border-base-200 bg-base-200/70 flex items-center justify-center">
+                <div
+                  class="flex-shrink-0 overflow-hidden rounded-md border border-base-200 bg-base-200/70 flex items-center justify-center"
+                  :class="documentThumbnailClass(document)"
+                >
                   <img
                     v-if="isImageDocument(document) && document.path"
                     :src="document.path"
                     class="h-full w-full object-cover"
                     :alt="`Aperçu de ${document.name}`"
                   >
+                  <iframe
+                    v-else-if="shouldInlinePdf(document)"
+                    :src="documentPreviewSrc(document)"
+                    class="h-full w-full border-0 bg-white"
+                    title="Aperçu PDF"
+                  />
                   <component
                     v-else
                     :is="documentIcon(document).component"
@@ -398,7 +407,7 @@ import { formatStructurePreview, normalizeStructureForEditor } from '~/shared/mo
 import type { ComponentModelStructure } from '~/shared/types/inventory'
 import type { ModelType } from '~/services/modelTypes'
 import { getFileIcon } from '~/utils/fileIcons'
-import { canPreviewDocument, isImageDocument } from '~/utils/documentPreview'
+import { canPreviewDocument, isImageDocument, isPdfDocument } from '~/utils/documentPreview'
 
 interface ComponentCatalogType extends ModelType {
   structure: ComponentModelStructure | null
@@ -458,6 +467,40 @@ const formatSize = (size: number | null | undefined) => {
   const formatted = size / Math.pow(1024, index)
   return `${formatted.toFixed(1)} ${units[index]}`
 }
+const PDF_PREVIEW_MAX_BYTES = 5 * 1024 * 1024
+const shouldInlinePdf = (document: any) => {
+  if (!document || !isPdfDocument(document) || !document.path) {
+    return false
+  }
+  if (typeof document.size === 'number' && document.size > PDF_PREVIEW_MAX_BYTES) {
+    return false
+  }
+  return true
+}
+const appendPdfViewerParams = (src: string) => {
+  if (!src || src.startsWith('data:')) {
+    return src || ''
+  }
+  if (src.includes('#')) {
+    return `${src}&toolbar=0&navpanes=0`
+  }
+  return `${src}#toolbar=0&navpanes=0`
+}
+const documentPreviewSrc = (document: any) => {
+  if (!document?.path) {
+    return ''
+  }
+  if (isPdfDocument(document)) {
+    return appendPdfViewerParams(document.path)
+  }
+  return document.path
+}
+const documentThumbnailClass = (document: any) => {
+  if (shouldInlinePdf(document) || (isImageDocument(document) && document?.path)) {
+    return 'h-24 w-20'
+  }
+  return 'h-16 w-16'
+}
 const openPreview = (doc: any) => {
   if (!doc || !canPreviewDocument(doc)) {
     return
@@ -944,8 +987,10 @@ const resolvePieceLabel = (piece: Record<string, any>) => {
     parts.push(piece.typePiece.name)
   } else if (piece.typePieceLabel) {
     parts.push(piece.typePieceLabel)
+  } else if (piece.typePiece?.code) {
+    parts.push(`Famille ${piece.typePiece.code}`)
   } else if (piece.familyCode) {
-    parts.push(piece.familyCode)
+    parts.push(`Famille ${piece.familyCode}`)
   } else if (piece.typePieceId) {
     parts.push(`#${piece.typePieceId}`)
   }
diff --git a/app/pages/component/create.vue b/app/pages/component/create.vue
index 12ad6e8..92068c9 100644
--- a/app/pages/component/create.vue
+++ b/app/pages/component/create.vue
@@ -584,6 +584,7 @@ const sanitizePieceDefinition = (definition: ComponentModelPiece) =>
     typePieceId: definition.typePieceId ?? null,
     typePieceLabel: definition.typePieceLabel ?? null,
     reference: definition.reference ?? null,
+    familyCode: (definition as any).familyCode ?? null,
   })
 
 const serializeStructureAssignments = (
@@ -697,8 +698,10 @@ const resolvePieceLabel = (piece: Record<string, any>) => {
     parts.push(piece.typePiece.name)
   } else if (piece.typePieceLabel) {
     parts.push(piece.typePieceLabel)
+  } else if (piece.typePiece?.code) {
+    parts.push(`Famille ${piece.typePiece.code}`)
   } else if (piece.familyCode) {
-    parts.push(piece.familyCode)
+    parts.push(`Famille ${piece.familyCode}`)
   } else if (piece.typePieceId) {
     parts.push(`#${piece.typePieceId}`)
   }
diff --git a/app/pages/machine/[id].vue b/app/pages/machine/[id].vue
index f242297..a014807 100644
--- a/app/pages/machine/[id].vue
+++ b/app/pages/machine/[id].vue
@@ -86,9 +86,15 @@
         rounded
       >
         <div class="flex justify-center gap-4">
-          <div class="badge badge-outline">{{ machine.typeMachine?.category || 'N/A' }}</div>
-          <div class="badge badge-outline">{{ machine.site?.name }}</div>
-          <div v-if="machine.reference" class="badge badge-outline">{{ machine.reference }}</div>
+          <div v-if="machine.typeMachine?.category" class="badge badge-outline">
+            {{ machine.typeMachine?.category }}
+          </div>
+          <div v-if="machine.site?.name" class="badge badge-outline">
+            {{ machine.site?.name }}
+          </div>
+          <div v-if="machine.reference" class="badge badge-outline">
+            {{ machine.reference }}
+          </div>
         </div>
       </PageHero>
 
@@ -113,7 +119,7 @@
                 {{ machineName }}
               </div>
             </div>
-            <div class="form-control">
+            <div v-if="isEditMode || machineReference" class="form-control">
               <label class="label">
                 <span class="label-text">Référence</span>
               </label>
@@ -126,10 +132,10 @@
                 @blur="updateMachineInfo"
               />
               <div v-else class="input input-bordered bg-base-200">
-                {{ machineReference || 'Non définie' }}
+                {{ machineReference }}
               </div>
             </div>
-            <div class="form-control">
+            <div v-if="isEditMode || hasMachineConstructeur" class="form-control">
               <label class="label">
                 <span class="label-text">Constructeur</span>
               </label>
@@ -143,9 +149,11 @@
               />
               <div v-else class="input input-bordered bg-base-200">
                 <div class="flex flex-col">
-                  <span class="font-medium">{{ machineConstructeurDisplay?.name || 'Non défini' }}</span>
-                  <span class="text-xs text-gray-500">
-                    {{ [machineConstructeurDisplay?.email, machineConstructeurDisplay?.phone].filter(Boolean).join(' • ') || '' }}
+                  <span class="font-medium">
+                    {{ machineConstructeurDisplay?.name || machineConstructeurContact }}
+                  </span>
+                  <span v-if="machineConstructeurContact" class="text-xs text-gray-500">
+                    {{ machineConstructeurContact }}
                   </span>
                 </div>
               </div>
@@ -153,11 +161,11 @@
           </div>
 
           <!-- Champs personnalisés -->
-          <div v-if="machineCustomFields.length" class="mt-6 pt-4 border-t border-gray-200">
+          <div v-if="visibleMachineCustomFields.length" class="mt-6 pt-4 border-t border-gray-200">
             <h4 class="font-semibold text-gray-700 mb-3">Champs personnalisés de la machine</h4>
             <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
               <div
-                v-for="field in machineCustomFields"
+                v-for="field in visibleMachineCustomFields"
                 :key="field.customFieldValueId || field.id || field.name"
                 class="form-control"
               >
@@ -265,13 +273,22 @@
               class="flex items-center justify-between rounded border border-base-200 bg-base-100 px-3 py-2"
             >
               <div class="flex items-center gap-3 text-sm">
-                <div class="h-14 w-14 flex-shrink-0 overflow-hidden rounded-md border border-base-200 bg-base-200/70 flex items-center justify-center">
+                <div
+                  class="flex-shrink-0 overflow-hidden rounded-md border border-base-200 bg-base-200/70 flex items-center justify-center"
+                  :class="documentThumbnailClass(document)"
+                >
                   <img
                     v-if="isImageDocument(document) && document.path"
                     :src="document.path"
                     class="h-full w-full object-cover"
                     :alt="`Aperçu de ${document.name}`"
                   >
+                  <iframe
+                    v-else-if="shouldInlinePdf(document)"
+                    :src="documentPreviewSrc(document)"
+                    class="h-full w-full border-0 bg-white"
+                    title="Aperçu PDF"
+                  />
                   <component
                     v-else
                     :is="documentIcon(document).component"
@@ -525,7 +542,7 @@ import { useToast } from '~/composables/useToast'
 import { useDocuments } from '~/composables/useDocuments'
 import { getFileIcon } from '~/utils/fileIcons'
 import { sanitizeDefinitionOverrides, normalizeStructureForEditor } from '~/shared/modelUtils'
-import { canPreviewDocument, isImageDocument } from '~/utils/documentPreview'
+import { canPreviewDocument, isImageDocument, isPdfDocument } from '~/utils/documentPreview'
 import ComponentHierarchy from '~/components/ComponentHierarchy.vue'
 import DocumentUpload from '~/components/DocumentUpload.vue'
 import ConstructeurSelect from '~/components/ConstructeurSelect.vue'
@@ -595,6 +612,20 @@ const machineConstructeurDisplay = computed(() => {
   if (!id) return machine.value?.constructeur || null
   return constructeurs.value.find(item => item.id === id) || machine.value?.constructeur || null
 })
+const machineConstructeurContact = computed(() => {
+  const constructeur = machineConstructeurDisplay.value
+  if (!constructeur) {
+    return ''
+  }
+  return [constructeur.email, constructeur.phone].filter(Boolean).join(' • ')
+})
+const hasMachineConstructeur = computed(() => {
+  const constructeur = machineConstructeurDisplay.value
+  if (!constructeur) {
+    return false
+  }
+  return Boolean(constructeur.name || machineConstructeurContact.value)
+})
 
 const machineDocumentFiles = ref([])
 const machineDocumentsUploading = ref(false)
@@ -1630,6 +1661,45 @@ const formatSize = (size) => {
   return `${formatted.toFixed(1)} ${units[index]}`
 }
 
+const PDF_PREVIEW_MAX_BYTES = 5 * 1024 * 1024
+
+const shouldInlinePdf = (document) => {
+  if (!document || !isPdfDocument(document) || !document.path) {
+    return false
+  }
+  if (typeof document.size === 'number' && document.size > PDF_PREVIEW_MAX_BYTES) {
+    return false
+  }
+  return true
+}
+
+const appendPdfViewerParams = (src) => {
+  if (!src || src.startsWith('data:')) {
+    return src || ''
+  }
+  if (src.includes('#')) {
+    return `${src}&toolbar=0&navpanes=0`
+  }
+  return `${src}#toolbar=0&navpanes=0`
+}
+
+const documentPreviewSrc = (document) => {
+  if (!document?.path) {
+    return ''
+  }
+  if (isPdfDocument(document)) {
+    return appendPdfViewerParams(document.path)
+  }
+  return document.path
+}
+
+const documentThumbnailClass = (document) => {
+  if (shouldInlinePdf(document) || (isImageDocument(document) && document?.path)) {
+    return 'h-24 w-20'
+  }
+  return 'h-16 w-16'
+}
+
 const formatCustomFieldValue = (field) => {
   if (!field) {
     return 'Non défini'
@@ -1674,6 +1744,14 @@ const shouldDisplayCustomField = (field) => {
   return true
 }
 
+const visibleMachineCustomFields = computed(() => {
+  const fields = Array.isArray(machineCustomFields.value) ? machineCustomFields.value : []
+  if (isEditMode.value) {
+    return fields
+  }
+  return fields.filter((field) => shouldDisplayCustomField(field))
+})
+
 const summarizeCustomFields = (fields = []) => {
   const seen = new Set()
   return fields
diff --git a/app/pages/pieces/[id]/edit.vue b/app/pages/pieces/[id]/edit.vue
index 4cf5b9e..efd7e8a 100644
--- a/app/pages/pieces/[id]/edit.vue
+++ b/app/pages/pieces/[id]/edit.vue
@@ -270,13 +270,22 @@
               class="flex items-center justify-between rounded border border-base-200 bg-base-100 px-3 py-2"
             >
               <div class="flex items-center gap-3 text-sm">
-                <div class="h-14 w-14 flex-shrink-0 overflow-hidden rounded-md border border-base-200 bg-base-200/70 flex items-center justify-center">
+                <div
+                  class="flex-shrink-0 overflow-hidden rounded-md border border-base-200 bg-base-200/70 flex items-center justify-center"
+                  :class="documentThumbnailClass(document)"
+                >
                   <img
                     v-if="isImageDocument(document) && document.path"
                     :src="document.path"
                     class="h-full w-full object-cover"
                     :alt="`Aperçu de ${document.name}`"
                   >
+                  <iframe
+                    v-else-if="shouldInlinePdf(document)"
+                    :src="documentPreviewSrc(document)"
+                    class="h-full w-full border-0 bg-white"
+                    title="Aperçu PDF"
+                  />
                   <component
                     v-else
                     :is="documentIcon(document).component"
@@ -354,7 +363,7 @@ import { useApi } from '~/composables/useApi'
 import { useToast } from '~/composables/useToast'
 import { useDocuments } from '~/composables/useDocuments'
 import { getFileIcon } from '~/utils/fileIcons'
-import { canPreviewDocument, isImageDocument } from '~/utils/documentPreview'
+import { canPreviewDocument, isImageDocument, isPdfDocument } from '~/utils/documentPreview'
 import { formatPieceStructurePreview } from '~/shared/modelUtils'
 import type { PieceModelStructure } from '~/shared/types/inventory'
 import type { ModelType } from '~/services/modelTypes'
@@ -417,6 +426,40 @@ const formatSize = (size: number | null | undefined) => {
   const formatted = size / Math.pow(1024, index)
   return `${formatted.toFixed(1)} ${units[index]}`
 }
+const PDF_PREVIEW_MAX_BYTES = 5 * 1024 * 1024
+const shouldInlinePdf = (document: any) => {
+  if (!document || !isPdfDocument(document) || !document.path) {
+    return false
+  }
+  if (typeof document.size === 'number' && document.size > PDF_PREVIEW_MAX_BYTES) {
+    return false
+  }
+  return true
+}
+const appendPdfViewerParams = (src: string) => {
+  if (!src || src.startsWith('data:')) {
+    return src || ''
+  }
+  if (src.includes('#')) {
+    return `${src}&toolbar=0&navpanes=0`
+  }
+  return `${src}#toolbar=0&navpanes=0`
+}
+const documentPreviewSrc = (document: any) => {
+  if (!document?.path) {
+    return ''
+  }
+  if (isPdfDocument(document)) {
+    return appendPdfViewerParams(document.path)
+  }
+  return document.path
+}
+const documentThumbnailClass = (document: any) => {
+  if (shouldInlinePdf(document) || (isImageDocument(document) && document?.path)) {
+    return 'h-24 w-20'
+  }
+  return 'h-16 w-16'
+}
 const openPreview = (doc: any) => {
   if (!doc || !canPreviewDocument(doc)) {
     return
diff --git a/app/shared/modelUtils.ts b/app/shared/modelUtils.ts
index beedec8..5a18788 100644
--- a/app/shared/modelUtils.ts
+++ b/app/shared/modelUtils.ts
@@ -202,11 +202,27 @@ const sanitizePieces = (pieces: any[]): ComponentModelPiece[] => {
         ? piece.reference.trim()
         : undefined
 
-      if (!typePieceId && !typePieceLabel && !reference) {
+      const rawFamilyCode = typeof piece?.familyCode === 'string'
+        ? piece.familyCode.trim()
+        : typeof piece?.typePiece?.code === 'string'
+          ? piece.typePiece.code.trim()
+          : ''
+      const familyCode = rawFamilyCode.length > 0 ? rawFamilyCode : undefined
+
+      const rawRole = typeof piece?.role === 'string' ? piece.role.trim() : ''
+      const role = rawRole.length > 0 ? rawRole : undefined
+
+      if (!typePieceId && !typePieceLabel && !reference && !familyCode) {
         return null
       }
 
       const result: ComponentModelPiece = {}
+      if (role) {
+        result.role = role
+      }
+      if (familyCode) {
+        result.familyCode = familyCode
+      }
       if (reference !== undefined) {
         result.reference = reference
       }
@@ -519,6 +535,8 @@ const hydratePieces = (pieces: any[]): ComponentModelPiece[] => {
     typePieceId: piece?.typePieceId ?? piece?.typePiece?.id ?? '',
     typePieceLabel: piece?.typePieceLabel ?? piece?.typePiece?.name ?? '',
     reference: piece?.reference ?? '',
+    familyCode: piece?.familyCode ?? piece?.typePiece?.code ?? '',
+    role: piece?.role ?? '',
   }))
 }
 
@@ -590,6 +608,8 @@ const mapComponentPieces = (pieces: any[]): ComponentModelPiece[] => {
     reference: piece?.reference ?? '',
     typePieceId: piece?.typePieceId ?? piece?.typePiece?.id ?? '',
     typePieceLabel: piece?.typePieceLabel ?? piece?.typePiece?.name ?? '',
+    familyCode: piece?.familyCode ?? piece?.typePiece?.code ?? '',
+    role: piece?.role ?? '',
   }))
 }
 
diff --git a/app/shared/types/inventory.ts b/app/shared/types/inventory.ts
index 2257c41..c09546e 100644
--- a/app/shared/types/inventory.ts
+++ b/app/shared/types/inventory.ts
@@ -15,6 +15,8 @@ export interface ComponentModelPiece {
   typePieceId?: string
   typePieceLabel?: string
   reference?: string
+  familyCode?: string
+  role?: string
 }
 
 export interface ComponentModelStructureNode {
@@ -119,9 +121,11 @@ const validatePiece = (
   const typePieceId = ensureString(value.typePieceId)
   const typePieceLabel = ensureString(value.typePieceLabel)
   const reference = ensureString(value.reference)
+  const familyCode = ensureString((value as any).familyCode)
+  const role = ensureString((value as any).role)
 
-  if (!typePieceId && !typePieceLabel && !reference) {
-    issues.push(`${path}: au moins un identifiant ou libellé de pièce est requis`)
+  if (!typePieceId && !typePieceLabel && !reference && !familyCode) {
+    issues.push(`${path}: au moins un identifiant, une famille ou une référence de pièce est requis`)
     return null
   }
 
@@ -129,6 +133,8 @@ const validatePiece = (
     ...(typePieceId ? { typePieceId } : {}),
     ...(typePieceLabel ? { typePieceLabel } : {}),
     ...(reference ? { reference } : {}),
+    ...(familyCode ? { familyCode } : {}),
+    ...(role ? { role } : {}),
   }
 }
 
diff --git a/app/utils/documentPreview.js b/app/utils/documentPreview.js
index 473bc4a..273cf8e 100644
--- a/app/utils/documentPreview.js
+++ b/app/utils/documentPreview.js
@@ -19,6 +19,8 @@ export const canPreviewDocument = (document = {}) => !!getPreviewType(document)
 
 export const isImageDocument = (document = {}) => getPreviewType(document) === 'image'
 
+export const isPdfDocument = (document = {}) => getPreviewType(document) === 'pdf'
+
 export const describeDocument = (document) => {
   if (!document) { return '' }
   const name = document.filename || document.name || ''