feat: enrich piece assignment labels and document previews

2025-10-23 09:01:38 +02:00
parent 553600c34b
commit 417b34b45e
11 changed files with 364 additions and 51 deletions
--- 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 || []
--- 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';
 };

--- 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 [];
--- a/app/components/StructureNodeEditor.vue
+++ b/app/components/StructureNodeEditor.vue
@@ -495,6 +495,8 @@ const addPiece = () => {
    typePieceId: '',
    typePieceLabel: '',
    reference: '',
+    familyCode: '',
+    role: '',
  })
 }

--- 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}`)
  }
--- 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}`)
  }
--- 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
--- 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
--- 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 ?? '',
  }))
 }

--- 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 } : {}),
  }
 }

--- 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 || ''