feat(fournisseurs) : categories (M2M) + telephones (1-N) + import customer.json

- Nouvelles entites ConstructeurCategorie (referentiel M2M) et ConstructeurTelephone (1-N)
- Constructeur : retrait colonne phone, ajout collections telephones/categories, groupes de serialisation constructeur:read/write
- Migration : cree les 3 tables, migre la colonne phone existante vers constructeur_telephone, drop phone
- Commande app:import-fournisseurs (dry-run par defaut, --force) : non destructive, find-or-create par nom, ne touche jamais un ID existant, ajout-seulement pour telephones/categories
- MAJ MCP tools / MachineStructureController / audit subscriber / tests
- Frontend : page constructeurs avec telephones multiples + categories (tableau, filtre, formulaire), composable useConstructeurCategories, composant ConstructeurCategorieSelect

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

frontend/app/pages/constructeurs.vue

@@ -6,7 +6,7 @@
           Fournisseurs
         </h1>
         <p class="text-sm text-gray-500">
-          Gérez les fournisseurs et leurs coordonnées.
+          Gérez les fournisseurs, leurs coordonnées et leurs catégories.
         </p>
       </div>
       <button v-if="canEdit" class="btn btn-primary" @click="openCreateModal">
@@ -28,20 +28,56 @@
           @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="searchTerm"
-                type="search"
-                class="input input-bordered input-sm w-full mt-1"
-                placeholder="Nom, email ou téléphone"
-                @input="debouncedSearch"
-              />
-            </label>
+            <div class="flex flex-col sm:flex-row gap-3 w-full">
+              <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="searchTerm"
+                  type="search"
+                  class="input input-bordered input-sm w-full mt-1"
+                  placeholder="Nom, email ou téléphone"
+                  @input="debouncedSearch"
+                >
+              </label>
+              <label class="w-full sm:w-64">
+                <span class="text-xs font-semibold uppercase tracking-wide text-base-content/70">Catégorie</span>
+                <select
+                  v-model="selectedCategoryId"
+                  class="select select-bordered select-sm w-full mt-1"
+                >
+                  <option value="">
+                    Toutes les catégories
+                  </option>
+                  <option v-for="cat in allCategories" :key="cat.id" :value="cat.id">
+                    {{ cat.name }}
+                  </option>
+                </select>
+              </label>
+            </div>
           </template>
 
-          <template #cell-phone="{ row }">
-            {{ formatPhoneDisplay(row.phone) }}
+          <template #cell-telephones="{ row }">
+            <div v-if="rowPhones(row).length" class="flex flex-col gap-0.5">
+              <span v-for="(tel, idx) in rowPhones(row)" :key="idx" class="whitespace-nowrap text-sm">
+                {{ formatPhoneDisplay(tel.numero) }}
+                <span v-if="tel.label" class="text-xs text-base-content/50">({{ tel.label }})</span>
+              </span>
+            </div>
+            <span v-else class="text-base-content/30">—</span>
+          </template>
+
+          <template #cell-categories="{ row }">
+            <div v-if="row.categories && row.categories.length" class="flex flex-wrap gap-1">
+              <span
+                v-for="cat in row.categories"
+                :key="cat.id"
+                class="badge badge-ghost badge-sm cursor-pointer hover:badge-primary transition-colors"
+                @click="selectedCategoryId = cat.id"
+              >
+                {{ cat.name }}
+              </span>
+            </div>
+            <span v-else class="text-base-content/30">—</span>
           </template>
 
           <template #cell-createdAt="{ row }">
@@ -96,7 +132,7 @@
     </div>
 
     <dialog class="modal" :class="{ 'modal-open': modalOpen }">
-      <div class="modal-box">
+      <div class="modal-box max-w-2xl">
         <h3 class="font-bold text-lg mb-4">
           {{ editingConstructeur ? (canEdit ? 'Modifier' : 'Détails du') : 'Nouveau' }} fournisseur
         </h3>
@@ -105,10 +141,53 @@
             <label class="label"><span class="label-text">Nom</span></label>
             <input v-model="form.name" type="text" class="input input-bordered" :disabled="!canEdit" required>
           </div>
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <FieldEmail v-model="form.email" label="Email" :disabled="!canEdit" />
-            <FieldPhone v-model="form.phone" label="Téléphone" :disabled="!canEdit" />
+
+          <FieldEmail v-model="form.email" label="Email" :disabled="!canEdit" />
+
+          <div class="form-control">
+            <div class="flex items-center justify-between mb-1">
+              <span class="label-text">Téléphones</span>
+              <button
+                v-if="canEdit"
+                type="button"
+                class="btn btn-ghost btn-xs"
+                @click="addTelephoneRow"
+              >
+                <IconLucidePlus class="w-3 h-3 mr-1" aria-hidden="true" />
+                Ajouter
+              </button>
+            </div>
+            <p v-if="!form.telephones.length" class="text-sm text-base-content/50">
+              Aucun téléphone.
+            </p>
+            <div v-for="(tel, idx) in form.telephones" :key="idx" class="flex items-end gap-2 mb-2">
+              <div class="flex-1">
+                <FieldPhone v-model="tel.numero" label="" :disabled="!canEdit" placeholder="Ex: 05 49 00 00 00" />
+              </div>
+              <input
+                v-model="tel.label"
+                type="text"
+                class="input input-bordered input-sm md:input-md w-40"
+                placeholder="Libellé (optionnel)"
+                :disabled="!canEdit"
+              >
+              <button
+                v-if="canEdit"
+                type="button"
+                class="btn btn-ghost btn-sm text-error"
+                aria-label="Supprimer ce téléphone"
+                @click="removeTelephoneRow(idx)"
+              >
+                <IconLucideX class="w-4 h-4" aria-hidden="true" />
+              </button>
+            </div>
           </div>
+
+          <div class="form-control">
+            <label class="label"><span class="label-text">Catégories</span></label>
+            <ConstructeurCategorieSelect v-model="form.categories" :disabled="!canEdit" />
+          </div>
+
           <div class="modal-action">
             <button type="button" class="btn" @click="closeModal">
               Annuler
@@ -129,22 +208,36 @@ import { ref, computed, onMounted } from 'vue'
 import DataTable from '~/components/common/DataTable.vue'
 import FieldEmail from '~/components/form/FieldEmail.vue'
 import FieldPhone from '~/components/form/FieldPhone.vue'
+import ConstructeurCategorieSelect from '~/components/form/ConstructeurCategorieSelect.vue'
 import { useConstructeurs } from '~/composables/useConstructeurs'
+import { useConstructeurCategories, type ConstructeurCategorie } from '~/composables/useConstructeurCategories'
 import { useToast } from '~/composables/useToast'
 import { usePersistedValue } from '~/composables/usePersistedValue'
+import { constructeurPhones } from '~/shared/constructeurUtils'
 import { formatPhone } from '~/utils/formatters/phone'
 import { formatFrenchDate } from '~/utils/date'
 import IconLucidePlus from '~icons/lucide/plus'
+import IconLucideX from '~icons/lucide/x'
+
+interface TelephoneFormRow { '@id'?: string, numero: string, label: string }
+interface ConstructeurFormState {
+  name: string
+  email: string
+  telephones: TelephoneFormRow[]
+  categories: ConstructeurCategorie[]
+}
 
 const api = useApi()
 const { canEdit } = usePermissions()
 const { constructeurs, loading, searchConstructeurs, createConstructeur, updateConstructeur, deleteConstructeur, loadConstructeurs } = useConstructeurs()
+const { categories: allCategories, loadCategories } = useConstructeurCategories()
 const { showError } = useToast()
 
 const columns = [
   { key: 'name', label: 'Nom', sortable: true },
   { key: 'email', label: 'Email', sortable: true },
-  { key: 'phone', label: 'Téléphone', sortable: true },
+  { key: 'telephones', label: 'Téléphones' },
+  { key: 'categories', label: 'Catégories' },
   { key: 'createdAt', label: 'Date de création', sortable: true },
   { key: 'composantCount', label: 'Composants', align: 'center' },
   { key: 'pieceCount', label: 'Pièces', align: 'center' },
@@ -153,9 +246,10 @@ const columns = [
 ]
 
 const searchTerm = ref('')
+const selectedCategoryId = ref('')
 const sortKey = usePersistedValue('constructeurs-sort', 'name')
 const sortDir = ref('asc')
-const stats = ref({})
+const stats = ref<Record<string, { composantCount?: number, pieceCount?: number, machineCount?: number }>>({})
 
 const currentSort = computed(() => ({
   field: sortKey.value,
@@ -169,23 +263,29 @@ const handleSort = (sort) => {
 
 const modalOpen = ref(false)
 const saving = ref(false)
-const editingConstructeur = ref(null)
-const form = ref({ name: '', email: '', phone: '' })
+const editingConstructeur = ref<Record<string, any> | null>(null)
+const form = ref<ConstructeurFormState>({ name: '', email: '', telephones: [], categories: [] })
+
+const rowPhones = constructeurPhones
 
 const filteredConstructeurs = computed(() => {
   const key = sortKey.value
   const dir = sortDir.value === 'desc' ? -1 : 1
-  const sorted = [...constructeurs.value].sort((a, b) => {
+  let sorted = [...constructeurs.value].sort((a, b) => {
     if (key === 'createdAt') {
       return dir * (new Date(a[key] || 0).getTime() - new Date(b[key] || 0).getTime())
     }
     return dir * (a[key] || '').localeCompare(b[key] || '')
   })
+  if (selectedCategoryId.value) {
+    sorted = sorted.filter(item => (item.categories || []).some(cat => cat.id === selectedCategoryId.value))
+  }
   if (!searchTerm.value) { return sorted }
   const term = searchTerm.value.toLowerCase()
-  return sorted.filter(item =>
-    [item.name, item.email, item.phone].some(value => value && value.toLowerCase().includes(term)),
-  )
+  return sorted.filter((item) => {
+    const haystack = [item.name, item.email, ...rowPhones(item).map(t => t.numero)]
+    return haystack.some(value => value && String(value).toLowerCase().includes(term))
+  })
 })
 
 const debouncedSearch = debounce(async () => {
@@ -194,13 +294,7 @@ const debouncedSearch = debounce(async () => {
 
 const formatDate = formatFrenchDate
 
-const formatPhoneDisplay = (value) => {
-  const formatted = formatPhone(value)
-  if (formatted) {
-    return formatted
-  }
-  return value || '—'
-}
+const formatPhoneDisplay = value => formatPhone(value) || value || '—'
 
 function debounce(fn, delay) {
   let timeout
@@ -211,7 +305,7 @@ function debounce(fn, delay) {
 }
 
 const resetForm = () => {
-  form.value = { name: '', email: '', phone: '' }
+  form.value = { name: '', email: '', telephones: [], categories: [] }
   editingConstructeur.value = null
 }
 
@@ -225,7 +319,12 @@ const openEditModal = (constructeur) => {
   form.value = {
     name: constructeur.name,
     email: constructeur.email || '',
-    phone: constructeur.phone || '',
+    telephones: (constructeur.telephones || []).map(t => ({
+      '@id': t['@id'],
+      numero: t.numero || '',
+      label: t.label || '',
+    })),
+    categories: (constructeur.categories || []).map(c => ({ ...c })),
   }
   modalOpen.value = true
 }
@@ -235,8 +334,20 @@ const closeModal = () => {
   resetForm()
 }
 
+const addTelephoneRow = () => {
+  form.value.telephones.push({ numero: '', label: '' })
+}
+
+const removeTelephoneRow = (idx) => {
+  form.value.telephones.splice(idx, 1)
+}
+
 const saveConstructeur = async () => {
   const trimmedName = form.value.name.trim()
+  if (!trimmedName) {
+    showError('Le nom est obligatoire.')
+    return
+  }
   const duplicate = constructeurs.value.find(
     c => c.name.toLowerCase() === trimmedName.toLowerCase()
       && c.id !== editingConstructeur.value?.id,
@@ -247,9 +358,24 @@ const saveConstructeur = async () => {
   }
 
   saving.value = true
-  const payload = { ...form.value, name: trimmedName }
-  if (!payload.email) { delete payload.email }
-  if (!payload.phone) { delete payload.phone }
+  const payload = {
+    name: trimmedName,
+    email: form.value.email?.trim() || null,
+    telephones: form.value.telephones
+      .filter(t => t.numero && t.numero.trim())
+      .map((t) => {
+        const entry: { numero: string, label: string | null, '@id'?: string } = {
+          numero: t.numero.trim(),
+          label: t.label?.trim() || null,
+        }
+        if (t['@id']) { entry['@id'] = t['@id'] }
+        return entry
+      }),
+    categories: form.value.categories
+      .map(c => c['@id'] || (c.id ? `/api/constructeur_categories/${c.id}` : null))
+      .filter((iri): iri is string => Boolean(iri)),
+  }
+
   let result
   if (editingConstructeur.value) {
     result = await updateConstructeur(editingConstructeur.value.id, payload)
@@ -283,6 +409,7 @@ const loadStats = async () => {
 
 onMounted(() => {
   loadConstructeurs()
+  loadCategories()
   loadStats()
 })
 </script>