refactor(machine): decompose create page into composable + 5 components (F1.2)

Extract useMachineCreatePage composable and 5 preview/selector components
from machines/new.vue, reducing it from 1231 to 196 LOC.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/components/machine/create/MachineCreatePreview.vue

@@ -0,0 +1,205 @@
+<template>
+  <div v-if="preview" class="space-y-4">
+    <div class="border border-base-200 rounded-lg bg-base-100/80">
+      <div class="p-4 space-y-4">
+        <div class="flex items-center justify-between gap-3">
+          <div class="flex items-center gap-2 text-sm font-semibold text-gray-700">
+            <IconLucideEye class="w-4 h-4" aria-hidden="true" />
+            <span>Prévisualisation avant création</span>
+          </div>
+          <span class="badge" :class="getStatusBadgeClass(preview.status)">
+            {{ preview.status === 'ready' ? 'Prête à créer' : preview.status === 'warning' ? 'À compléter' : 'Bloquante' }}
+          </span>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
+          <div
+            v-for="field in preview.base.fields"
+            :key="field.key"
+            class="flex flex-col gap-1"
+          >
+            <span class="text-[11px] uppercase tracking-wide text-gray-500">{{ field.label }}</span>
+            <span
+              class="text-sm font-medium"
+              :class="field.status === 'missing'
+                ? 'text-error'
+                : field.status === 'optional'
+                  ? 'text-gray-500 italic'
+                  : 'text-gray-900'"
+            >
+              {{ field.display }}
+            </span>
+          </div>
+        </div>
+
+        <div class="flex flex-wrap gap-2 text-xs text-gray-500">
+          <span class="badge badge-ghost badge-sm">Type : {{ preview.type.name }}</span>
+          <span v-if="preview.type.category" class="badge badge-ghost badge-sm">Catégorie : {{ preview.type.category }}</span>
+          <span class="badge badge-ghost badge-sm">Structure JSON : {{ preview.type.hasStructuredDefinition ? 'Oui' : 'Legacy' }}</span>
+        </div>
+
+        <!-- Base issues -->
+        <div v-if="preview.base.issues.length" class="rounded-md bg-warning/10 border border-warning/30 p-3 text-xs text-warning">
+          <p class="font-medium mb-1">
+            Informations générales incomplètes :
+          </p>
+          <ul class="space-y-1">
+            <li v-for="issue in preview.base.issues" :key="issue.message">
+              <button
+                type="button"
+                class="flex w-full items-start gap-2 text-left hover:underline"
+                @click="handleIssueClick(issue)"
+              >
+                <span class="mt-0.5 text-[8px] leading-none">&bull;</span>
+                <span>{{ issue.message }}</span>
+              </button>
+            </li>
+          </ul>
+        </div>
+
+        <!-- Component groups -->
+        <div v-if="preview.componentGroups.length" class="space-y-3">
+          <h5 class="text-xs font-semibold uppercase tracking-wide text-gray-500">
+            Composants hérités
+          </h5>
+          <PreviewRequirementGroup
+            v-for="group in preview.componentGroups"
+            :key="group.id"
+            :group="group"
+          />
+        </div>
+        <div v-else class="text-xs text-gray-500">
+          Aucun composant n'est requis pour ce type de machine.
+        </div>
+
+        <!-- Piece groups -->
+        <div v-if="preview.pieceGroups.length" class="space-y-3">
+          <h5 class="text-xs font-semibold uppercase tracking-wide text-gray-500">
+            Pièces associées
+          </h5>
+          <PreviewRequirementGroup
+            v-for="group in preview.pieceGroups"
+            :key="group.id"
+            :group="group"
+          />
+        </div>
+        <div v-else class="text-xs text-gray-500">
+          Aucun groupe de pièces à configurer pour ce type.
+        </div>
+
+        <!-- Product groups -->
+        <div v-if="preview.productGroups.length" class="space-y-3">
+          <h5 class="text-xs font-semibold uppercase tracking-wide text-gray-500">
+            Produits requis
+          </h5>
+          <div
+            v-for="group in preview.productGroups"
+            :key="group.id"
+            :id="`product-group-${group.id}`"
+            class="border border-base-200 rounded-md p-3 space-y-3"
+          >
+            <div class="flex flex-wrap items-start justify-between gap-2">
+              <div>
+                <p class="text-sm font-semibold">
+                  {{ group.label }}
+                </p>
+                <p class="text-xs text-gray-500">
+                  Catégorie : {{ group.typeName }} · Min {{ group.min }} ·
+                  {{ group.max !== null ? `Max ${group.max}` : 'Max ∞' }}
+                </p>
+              </div>
+              <div class="flex flex-wrap items-center gap-2">
+                <span class="badge badge-sm" :class="getStatusBadgeClass(group.status)">
+                  Couverture : {{ group.count }}
+                </span>
+                <span class="badge badge-ghost badge-sm">
+                  Direct {{ group.completed }} / {{ group.total || 0 }}
+                </span>
+              </div>
+            </div>
+
+            <div v-if="group.issues.length" class="rounded bg-warning/10 border border-warning/30 p-2 text-[11px] text-warning">
+              <ul class="list-disc pl-4 space-y-1">
+                <li v-for="issue in group.issues" :key="issue.message">
+                  {{ issue.message }}
+                </li>
+              </ul>
+            </div>
+
+            <ul v-if="group.entries?.length" class="space-y-2">
+              <li
+                v-for="entry in group.entries"
+                :key="entry.key"
+                class="flex items-start gap-3"
+              >
+                <component
+                  :is="entry.status === 'complete' ? IconLucideCheckCircle2 : IconLucideCircle"
+                  class="w-4 h-4 mt-0.5"
+                  :class="entry.status === 'complete' ? 'text-success' : 'text-gray-400'"
+                  aria-hidden="true"
+                />
+                <div class="flex-1">
+                  <p class="text-sm font-medium" :class="entry.status === 'complete' ? 'text-gray-900' : 'text-gray-500'">
+                    {{ entry.title }}
+                  </p>
+                  <p v-if="entry.subtitle" class="text-xs text-gray-500">
+                    {{ entry.subtitle }}
+                  </p>
+                </div>
+              </li>
+            </ul>
+
+            <p v-else class="text-xs text-gray-500">
+              Couverture assurée via composants ou pièces liés.
+            </p>
+          </div>
+        </div>
+
+        <!-- Global issues -->
+        <div
+          v-if="preview.issues.length && preview.status !== 'ready'"
+          class="rounded-md border border-warning/30 bg-warning/10 p-3 text-xs text-warning"
+        >
+          <div class="flex items-start gap-2">
+            <IconLucideAlertTriangle class="w-4 h-4 mt-0.5" aria-hidden="true" />
+            <div class="space-y-1">
+              <p class="font-medium">
+                Points à vérifier avant la création :
+              </p>
+              <ul class="space-y-1">
+                <li v-for="issue in preview.issues" :key="`${issue.scope}-${issue.message}`">
+                  <button
+                    type="button"
+                    class="flex w-full items-start gap-2 text-left hover:underline"
+                    @click="handleIssueClick(issue)"
+                  >
+                    <span class="mt-0.5 text-[8px] leading-none">&bull;</span>
+                    <span>
+                      <span class="font-medium">{{ issue.scope }} :</span> {{ issue.message }}
+                    </span>
+                  </button>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  getStatusBadgeClass,
+  handleIssueClick,
+} from '~/composables/useMachineCreatePreview'
+import PreviewRequirementGroup from './PreviewRequirementGroup.vue'
+import IconLucideEye from '~icons/lucide/eye'
+import IconLucideAlertTriangle from '~icons/lucide/alert-triangle'
+import IconLucideCheckCircle2 from '~icons/lucide/check-circle-2'
+import IconLucideCircle from '~icons/lucide/circle'
+
+defineProps<{
+  preview: any
+}>()
+</script>

app/components/machine/create/PreviewRequirementGroup.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="border border-base-200 rounded-md p-3 space-y-3">
+    <div class="flex flex-wrap items-start justify-between gap-2">
+      <div>
+        <p class="text-sm font-semibold">
+          {{ group.label }}
+        </p>
+        <p class="text-xs text-gray-500">
+          Type : {{ group.typeName }} · Min {{ group.min }} ·
+          {{ group.max !== null ? `Max ${group.max}` : 'Max ∞' }}
+        </p>
+      </div>
+      <span class="badge badge-sm" :class="getStatusBadgeClass(group.status)">
+        {{ group.completed }} / {{ group.total || 0 }} complétée(s)
+      </span>
+    </div>
+
+    <div v-if="group.issues.length" class="rounded bg-warning/10 border border-warning/30 p-2 text-[11px] text-warning">
+      <ul class="list-disc pl-4 space-y-1">
+        <li v-for="issue in group.issues" :key="issue.message">
+          {{ issue.message }}
+        </li>
+      </ul>
+    </div>
+
+    <ul class="space-y-2">
+      <li
+        v-for="entry in group.entries"
+        :key="entry.key"
+        class="flex items-start gap-3"
+      >
+        <component
+          :is="entry.status === 'complete' ? IconLucideCheckCircle2 : IconLucideCircle"
+          class="w-4 h-4 mt-0.5"
+          :class="entry.status === 'complete' ? 'text-success' : 'text-gray-400'"
+          aria-hidden="true"
+        />
+        <div class="flex-1">
+          <p class="text-sm font-medium" :class="entry.status === 'complete' ? 'text-gray-900' : 'text-gray-500'">
+            {{ entry.title }}
+          </p>
+          <p v-if="entry.subtitle" class="text-xs text-gray-500">
+            {{ entry.subtitle }}
+          </p>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getStatusBadgeClass } from '~/composables/useMachineCreatePreview'
+import IconLucideCheckCircle2 from '~icons/lucide/check-circle-2'
+import IconLucideCircle from '~icons/lucide/circle'
+
+defineProps<{
+  group: any
+}>()
+</script>

app/components/machine/create/RequirementComponentSelector.vue

@@ -0,0 +1,126 @@
+<template>
+  <div v-if="requirements?.length" class="space-y-4">
+    <h4 class="text-sm font-semibold">
+      Sélection des composants
+    </h4>
+
+    <div
+      v-for="requirement in requirements"
+      :id="`component-group-${requirement.id}`"
+      :key="requirement.id"
+      class="border border-base-200 rounded-lg p-4 space-y-3"
+    >
+      <div class="flex flex-wrap items-start justify-between gap-3">
+        <div>
+          <h5 class="font-medium text-sm">
+            {{ requirement.label || requirement.typeComposant?.name || 'Famille de composants' }}
+          </h5>
+          <p class="text-xs text-gray-500">
+            Type : {{ requirement.typeComposant?.name || 'Non défini' }} · Min : {{ requirement.minCount ?? (requirement.required ? 1 : 0) }}
+            · Max : {{ requirement.maxCount ?? '∞' }}
+          </p>
+        </div>
+
+        <button
+          type="button"
+          class="btn btn-sm btn-outline"
+          :disabled="requirement.maxCount !== null && getEntries(requirement.id).length >= requirement.maxCount"
+          @click="$emit('add-entry', requirement)"
+        >
+          <IconLucidePlus class="w-4 h-4 mr-2" aria-hidden="true" />
+          Ajouter
+        </button>
+      </div>
+
+      <div v-if="getEntries(requirement.id).length === 0" class="text-xs text-gray-500">
+        Aucun composant sélectionné pour ce groupe.
+      </div>
+
+      <div
+        v-for="(entry, entryIndex) in getEntries(requirement.id)"
+        :key="`${requirement.id}-${entryIndex}`"
+        class="bg-base-200/60 rounded-md p-3 space-y-4"
+      >
+        <div class="flex flex-wrap items-center justify-between gap-2 text-xs text-gray-500">
+          <span>
+            Type appliqué :
+            {{ resolveTypeLabel(requirement, entry) }}
+          </span>
+          <button
+            type="button"
+            class="btn btn-square btn-xs btn-error"
+            @click="$emit('remove-entry', requirement.id, entryIndex)"
+          >
+            <IconLucideX class="w-4 h-4" aria-hidden="true" />
+          </button>
+        </div>
+
+        <div class="grid grid-cols-1 gap-3">
+          <div class="space-y-2">
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text text-xs">Composant existant</span>
+              </label>
+              <SearchSelect
+                :model-value="entry.composantId || ''"
+                :options="getOptions(requirement, entry)"
+                :loading="loading"
+                size="sm"
+                placeholder="Rechercher un composant…"
+                empty-text="Aucun composant disponible"
+                :option-label="optionLabel"
+                :option-description="optionDescription"
+                @update:modelValue="$emit('set-component', requirement, entryIndex, $event || '')"
+              />
+            </div>
+            <p
+              v-if="getOptions(requirement, entry).length === 0"
+              class="text-xs text-error"
+            >
+              Aucun composant disponible pour cette famille.
+            </p>
+          </div>
+
+          <div
+            v-if="entry.composantId"
+            class="bg-base-300/60 rounded-md p-3 text-xs text-gray-600 space-y-1"
+          >
+            <div class="font-medium">
+              {{ findById(entry.composantId)?.name || "Composant" }}
+            </div>
+            <div>
+              Référence : {{ findById(entry.composantId)?.reference || "—" }}
+            </div>
+            <div>
+              Fournisseur :
+              {{ findById(entry.composantId)?.constructeur?.name || findById(entry.composantId)?.constructeurName || "—" }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import SearchSelect from '~/components/common/SearchSelect.vue'
+import IconLucidePlus from '~icons/lucide/plus'
+import IconLucideX from '~icons/lucide/x'
+
+defineProps<{
+  requirements: any[]
+  loading: boolean
+  getEntries: (requirementId: string) => any[]
+  getOptions: (requirement: any, entry: any) => any[]
+  resolveTypeLabel: (requirement: any, entry: any) => string
+  findById: (id: string) => any
+  optionLabel: (item: any) => string
+  optionDescription: (item: any) => string
+}>()
+
+defineEmits<{
+  'add-entry': [requirement: any]
+  'remove-entry': [requirementId: string, entryIndex: number]
+  'set-component': [requirement: any, entryIndex: number, componentId: string]
+}>()
+</script>

app/components/machine/create/RequirementPieceSelector.vue

@@ -0,0 +1,130 @@
+<template>
+  <div v-if="requirements?.length" class="space-y-4">
+    <h4 class="text-sm font-semibold">
+      Sélection des pièces principales
+    </h4>
+
+    <div
+      v-for="requirement in requirements"
+      :id="`piece-group-${requirement.id}`"
+      :key="requirement.id"
+      class="border border-base-200 rounded-lg p-4 space-y-3"
+    >
+      <div class="flex flex-wrap items-start justify-between gap-3">
+        <div>
+          <h5 class="font-medium text-sm">
+            {{ requirement.label || requirement.typePiece?.name || 'Groupe de pièces' }}
+          </h5>
+          <p class="text-xs text-gray-500">
+            Type : {{ requirement.typePiece?.name || 'Non défini' }} · Min : {{ requirement.minCount ?? (requirement.required ? 1 : 0) }}
+            · Max : {{ requirement.maxCount ?? '∞' }}
+          </p>
+        </div>
+
+        <button
+          type="button"
+          class="btn btn-sm btn-outline"
+          :disabled="requirement.maxCount !== null && getEntries(requirement.id).length >= requirement.maxCount"
+          @click="$emit('add-entry', requirement)"
+        >
+          <IconLucidePlus class="w-4 h-4 mr-2" aria-hidden="true" />
+          Ajouter
+        </button>
+      </div>
+
+      <div v-if="getEntries(requirement.id).length === 0" class="text-xs text-gray-500">
+        Aucune pièce sélectionnée pour ce groupe.
+      </div>
+
+      <div
+        v-for="(entry, entryIndex) in getEntries(requirement.id)"
+        :key="`${requirement.id}-piece-${entryIndex}`"
+        class="bg-base-200/60 rounded-md p-3 space-y-4"
+      >
+        <div class="flex flex-wrap items-center justify-between gap-2 text-xs text-gray-500">
+          <span>
+            Type appliqué :
+            {{ resolveTypeLabel(requirement, entry) }}
+          </span>
+          <button
+            type="button"
+            class="btn btn-square btn-xs btn-error"
+            @click="$emit('remove-entry', requirement.id, entryIndex)"
+          >
+            <IconLucideX class="w-4 h-4" aria-hidden="true" />
+          </button>
+        </div>
+
+        <div class="grid grid-cols-1 gap-3">
+          <div class="space-y-2">
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text text-xs">Pièce existante</span>
+              </label>
+              <SearchSelect
+                :model-value="entry.pieceId || ''"
+                :options="getOptions(requirement, entry, entryIndex)"
+                :loading="loading || pieceLoadingByKey[getPieceKey(requirement, entryIndex)]"
+                size="sm"
+                placeholder="Rechercher une pièce…"
+                empty-text="Aucune pièce disponible"
+                :option-label="optionLabel"
+                :option-description="optionDescription"
+                @search="(term: string) => $emit('search', requirement, entryIndex, term)"
+                @update:modelValue="$emit('set-piece', requirement, entryIndex, $event || '')"
+              />
+            </div>
+            <p
+              v-if="getOptions(requirement, entry, entryIndex).length === 0"
+              class="text-xs text-error"
+            >
+              Aucune pièce disponible pour cette famille.
+            </p>
+          </div>
+
+          <div
+            v-if="entry.pieceId"
+            class="bg-base-300/60 rounded-md p-3 text-xs text-gray-600 space-y-1"
+          >
+            <div class="font-medium">
+              {{ findById(entry.pieceId)?.name || "Pièce" }}
+            </div>
+            <div>
+              Référence : {{ findById(entry.pieceId)?.reference || "—" }}
+            </div>
+            <div>
+              Fournisseur :
+              {{ findById(entry.pieceId)?.constructeur?.name || findById(entry.pieceId)?.constructeurName || "—" }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import SearchSelect from '~/components/common/SearchSelect.vue'
+import IconLucidePlus from '~icons/lucide/plus'
+import IconLucideX from '~icons/lucide/x'
+
+defineProps<{
+  requirements: any[]
+  loading: boolean
+  pieceLoadingByKey: Record<string, boolean>
+  getEntries: (requirementId: string) => any[]
+  getOptions: (requirement: any, entry: any, entryIndex: number) => any[]
+  getPieceKey: (requirement: any, entryIndex: number) => string
+  resolveTypeLabel: (requirement: any, entry: any) => string
+  findById: (id: string) => any
+  optionLabel: (item: any) => string
+  optionDescription: (item: any) => string
+}>()
+
+defineEmits<{
+  'add-entry': [requirement: any]
+  'remove-entry': [requirementId: string, entryIndex: number]
+  'set-piece': [requirement: any, entryIndex: number, pieceId: string]
+  'search': [requirement: any, entryIndex: number, term: string]
+}>()
+</script>

app/components/machine/create/RequirementProductSelector.vue

@@ -0,0 +1,142 @@
+<template>
+  <div v-if="requirements?.length" class="space-y-4">
+    <h4 class="text-sm font-semibold">
+      Produits catalogue requis
+    </h4>
+
+    <div
+      v-for="requirement in requirements"
+      :id="`product-group-${requirement.id}`"
+      :key="requirement.id"
+      class="border border-base-200 rounded-lg p-4 space-y-3"
+    >
+      <div class="flex flex-wrap items-start justify-between gap-3">
+        <div class="space-y-1">
+          <h5 class="font-medium text-sm">
+            {{ requirement.label || requirement.typeProduct?.name || 'Groupe de produits' }}
+          </h5>
+          <p class="text-xs text-gray-500">
+            Catégorie : {{ requirement.typeProduct?.name || 'Non définie' }} · Min : {{ requirement.minCount ?? (requirement.required ? 1 : 0) }}
+            · Max : {{ requirement.maxCount ?? '∞' }}
+          </p>
+          <p
+            v-if="(requirement.allowNewModels ?? true) === false"
+            class="text-xs text-error"
+          >
+            Sélection de produits existants uniquement.
+          </p>
+        </div>
+
+        <button
+          type="button"
+          class="btn btn-sm btn-outline"
+          :disabled="requirement.maxCount !== null && getEntries(requirement.id).length >= requirement.maxCount"
+          @click="$emit('add-entry', requirement)"
+        >
+          <IconLucidePlus class="w-4 h-4 mr-2" aria-hidden="true" />
+          Ajouter
+        </button>
+      </div>
+
+      <div v-if="getEntries(requirement.id).length === 0" class="text-xs text-gray-500">
+        Aucun produit sélectionné pour ce groupe.
+      </div>
+
+      <div
+        v-for="(entry, entryIndex) in getEntries(requirement.id)"
+        :key="`${requirement.id}-product-${entryIndex}`"
+        class="bg-base-200/60 rounded-md p-3 space-y-4"
+      >
+        <div class="flex flex-wrap items-center justify-between gap-2 text-xs text-gray-500">
+          <span>
+            Catégorie appliquée :
+            {{ requirement.typeProduct?.name || 'Non définie' }}
+          </span>
+          <button
+            type="button"
+            class="btn btn-square btn-xs btn-error"
+            @click="$emit('remove-entry', requirement.id, entryIndex)"
+          >
+            <IconLucideX class="w-4 h-4" aria-hidden="true" />
+          </button>
+        </div>
+
+        <div class="grid grid-cols-1 gap-3">
+          <div class="space-y-2">
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text text-xs">Produit existant</span>
+              </label>
+              <ProductSelect
+                :model-value="entry.productId || ''"
+                :type-product-id="requirement.typeProductId || requirement.typeProduct?.id || null"
+                :placeholder="productsLoading ? 'Chargement…' : 'Sélectionner un produit…'"
+                empty-text="Aucun produit disponible pour cette catégorie"
+                :disabled="productsLoading"
+                @update:modelValue="$emit('set-product', requirement, entryIndex, $event || '')"
+              />
+            </div>
+            <p
+              v-if="!productsLoading && getProductOptions(requirement).length === 0"
+              class="text-xs text-error"
+            >
+              Aucun produit existant pour cette catégorie. Créez-en un depuis le catalogue.
+            </p>
+          </div>
+
+          <div
+            v-if="entry.productId"
+            class="bg-base-300/60 rounded-md p-3 text-xs text-gray-600 space-y-1"
+          >
+            <div class="font-medium">
+              {{ findById(entry.productId)?.name || 'Produit' }}
+            </div>
+            <div>
+              Référence : {{ findById(entry.productId)?.reference || "—" }}
+            </div>
+            <div>
+              Prix indicatif :
+              <span
+                v-if="findById(entry.productId)?.supplierPrice !== undefined && findById(entry.productId)?.supplierPrice !== null"
+              >
+                {{ Number(findById(entry.productId)?.supplierPrice).toFixed(2) }} €
+              </span>
+              <span v-else>
+                —
+              </span>
+            </div>
+            <div>
+              Fournisseurs :
+              <span v-if="findById(entry.productId)?.constructeurs?.length">
+                {{ findById(entry.productId)?.constructeurs.map((constructeur: any) => constructeur?.name).filter(Boolean).join(', ') }}
+              </span>
+              <span v-else>
+                —
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ProductSelect from '~/components/ProductSelect.vue'
+import IconLucidePlus from '~icons/lucide/plus'
+import IconLucideX from '~icons/lucide/x'
+
+defineProps<{
+  requirements: any[]
+  productsLoading: boolean
+  getEntries: (requirementId: string) => any[]
+  getProductOptions: (requirement: any) => any[]
+  findById: (id: string) => any
+}>()
+
+defineEmits<{
+  'add-entry': [requirement: any]
+  'remove-entry': [requirementId: string, entryIndex: number]
+  'set-product': [requirement: any, entryIndex: number, productId: string]
+}>()
+</script>