```

✨ feat(FormulesController): Gère l'ajout et la mise à jour des produits inclus.

Ajoute la logique pour ajouter et mettre à jour les produits inclus dans une formule, avec persistance en base de données. Affiche également les produits inclus existants.
✨ feat(admin.js): Enregistre le composant SearchProductFormule.

Enregistre le composant SearchProductFormule pour permettre son utilisation dans les templates.
✨ feat(config-pack.twig): Affiche et permet la gestion des produits inclus.

Affiche une liste des produits inclus dans une formule et permet leur ajout, modification et suppression via un formulaire.
✨ feat(SearchProductFormule.js): Crée un composant de recherche de produits.

Crée un composant web personnalisé pour rechercher et sélectionner des produits à ajouter à une formule.
```

assets/admin.js

@@ -8,6 +8,7 @@ import { CrmEditor } from "./libs/CrmEditor.js";
 import { initTomSelect } from "./libs/initTomSelect.js";
 import { SearchProduct,SearchOptions } from "./libs/SearchProduct.js";
 import { SearchProductDevis,SearchOptionsDevis } from "./libs/SearchProductDevis.js";
+import { SearchProductFormule } from "./libs/SearchProductFormule.js";
 // --- INITIALISATION SENTRY ---
 Sentry.init({
     dsn: "https://803814be6540031b1c37bf92ba9c0f79@sentry.esy-web.dev/24",
@@ -91,6 +92,9 @@ function initAdminLayout() {
     if (!customElements.get('search-product')) {
         customElements.define('search-product', SearchProduct, { extends: 'button' });
     }
+    if (!customElements.get('search-productformule')) {
+        customElements.define('search-productformule', SearchProductFormule, { extends: 'button' });
+    }
     if (!customElements.get('search-options')) {
         customElements.define('search-options', SearchOptions, { extends: 'button' });
     }

assets/libs/SearchProductFormule.js

@@ -0,0 +1,142 @@
+
+
+export class SearchProductFormule extends HTMLButtonElement {
+    constructor() {
+        super();
+        this.allProducts = []; // Stockage local pour la recherche
+    }
+
+    connectedCallback() {
+        this.addEventListener('click', () => this.openModal());
+    }
+
+    async openModal() {
+        let modal = document.getElementById('modal-search-product');
+        if (!modal) {
+            modal = this.createModalStructure();
+            document.body.appendChild(modal);
+            this.setupSearchEvent(modal);
+        }
+
+        modal.classList.remove('hidden');
+        const container = modal.querySelector('#results-container');
+        const searchInput = modal.querySelector('#modal-search-input');
+
+        searchInput.value = ''; // Reset recherche
+        container.innerHTML = '<div class="text-white p-8 text-center animate-pulse tracking-widest text-[10px] uppercase font-black">Synchronisation catalogue...</div>';
+
+        try {
+            const response = await fetch('/crm/products/json');
+            this.allProducts = await response.json();
+            this.renderProducts(this.allProducts, container, modal);
+            searchInput.focus();
+        } catch (error) {
+            container.innerHTML = '<div class="text-red-400 p-8 text-center">Erreur catalogue.</div>';
+        }
+    }
+
+    createModalStructure() {
+        const div = document.createElement('div');
+        div.id = 'modal-search-product';
+        div.className = 'fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-950/90 backdrop-blur-md hidden animate-in fade-in duration-300';
+        div.innerHTML = `
+            <div class="bg-slate-900 border border-white/10 w-full max-w-2xl max-h-[85vh] rounded-[3rem] shadow-2xl overflow-hidden flex flex-col scale-in-center">
+                <div class="p-8 border-b border-white/5 bg-white/5 space-y-6">
+                    <div class="flex justify-between items-center">
+                        <h3 class="text-white font-black uppercase tracking-[0.3em] text-[11px] flex items-center">
+                            <span class="w-2 h-2 bg-purple-500 rounded-full mr-3 animate-pulse"></span>
+                            Sélection Produit
+                        </h3>
+                        <button type="button" onclick="this.closest('#modal-search-product').classList.add('hidden')" class="p-2 text-slate-400 hover:text-white transition-colors">
+                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
+                        </button>
+                    </div>
+
+                    <div class="relative">
+                        <input type="text" id="modal-search-input" placeholder="RECHERCHER UN NOM, UNE RÉFÉRENCE..."
+                               class="w-full bg-slate-950/50 border border-white/10 rounded-2xl py-4 pl-12 pr-5 text-white text-xs font-black tracking-widest focus:ring-purple-500/20 focus:border-purple-500 transition-all uppercase placeholder:text-slate-600">
+                        <svg class="w-5 h-5 absolute left-4 top-3.5 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
+                        </svg>
+                    </div>
+                </div>
+
+                <div id="results-container" class="overflow-y-auto p-6 space-y-2 custom-scrollbar flex-grow min-h-[300px]"></div>
+
+                <div class="p-4 bg-white/5 text-center">
+                    <p class="text-[9px] text-slate-500 font-black uppercase tracking-widest line-clamp-1">Appuyez sur Échap pour fermer</p>
+                </div>
+            </div>
+        `;
+        return div;
+    }
+
+    setupSearchEvent(modal) {
+        const input = modal.querySelector('#modal-search-input');
+        const container = modal.querySelector('#results-container');
+
+        input.oninput = () => {
+            const query = input.value.toLowerCase().trim();
+            const filtered = this.allProducts.filter(p =>
+                p.name.toLowerCase().includes(query)
+            );
+            this.renderProducts(filtered, container, modal);
+        };
+
+        // Fermeture sur Echap
+        window.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') modal.classList.add('hidden');
+        });
+    }
+
+    renderProducts(products, container, modal) {
+        container.innerHTML = '';
+
+        if (products.length === 0) {
+            container.innerHTML = '<div class="text-slate-600 p-12 text-center text-[10px] font-black uppercase tracking-[0.2em]">Aucun produit trouvé</div>';
+            return;
+        }
+
+        products.forEach(product => {
+            const card = document.createElement('div');
+            card.className = 'flex items-center gap-5 p-4 bg-white/5 border border-white/5 rounded-2xl hover:bg-purple-500/10 hover:border-purple-500/40 transition-all cursor-pointer group animate-in fade-in slide-in-from-bottom-2';
+
+            const imgHtml = product.image
+                ? `<img src="${product.image}" class="w-14 h-14 rounded-xl object-cover shadow-lg group-hover:scale-110 transition-transform">`
+                : `<div class="w-14 h-14 bg-slate-950 rounded-xl flex items-center justify-center text-[8px] text-slate-700 font-black border border-white/5">IMG</div>`;
+
+            card.innerHTML = `
+                ${imgHtml}
+                <div class="flex-grow">
+                    <div class="text-white font-black text-xs uppercase tracking-wider mb-1">${product.name}</div>
+                    <div class="flex gap-4">
+                        <span class="text-purple-400 text-[10px] font-mono">1J: ${product.price1day}€</span>
+                        <span class="text-slate-500 text-[10px] font-mono">SUP: ${product.priceSup}€</span>
+                        <span class="text-amber-500/80 text-[10px] font-mono">CAUTION: ${product.caution}€</span>
+                    </div>
+                </div>
+                <div class="w-10 h-10 rounded-full bg-purple-500/0 group-hover:bg-purple-500/20 flex items-center justify-center text-purple-500 transition-all">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
+                </div>
+            `;
+
+            card.onclick = () => {
+                this.fillFormLine(product);
+                modal.classList.add('hidden');
+            };
+            container.appendChild(card);
+        });
+    }
+
+    fillFormLine(product) {
+        const row = this.closest('.form-repeater__row');
+        if (row) {
+            row.querySelector('input[name*="[product]"]').value = product.name;
+
+            const fieldset = row.querySelector('fieldset');
+            fieldset.classList.add('border-emerald-500/50', 'bg-emerald-500/5');
+            setTimeout(() => fieldset.classList.remove('border-emerald-500/50', 'bg-emerald-500/5'), 800);
+        }
+    }
+}
+

src/Controller/Dashboard/FormulesController.php

@@ -3,6 +3,7 @@
 namespace App\Controller\Dashboard;
 
 use App\Entity\Formules;
+use App\Entity\FormulesProductInclus;
 use App\Entity\Options;
 use App\Entity\Product;
 use App\Entity\ProductDoc;
@@ -11,6 +12,7 @@ use App\Form\OptionsType;
 use App\Form\ProductDocType;
 use App\Form\ProductType;
 use App\Logger\AppLogger;
+use App\Repository\FormulesProductInclusRepository;
 use App\Repository\FormulesRepository;
 use App\Repository\OptionsRepository;
 use App\Repository\ProductRepository;
@@ -99,7 +101,7 @@ class FormulesController extends AbstractController
     }
 
     #[Route(path: '/crm/formules/{id}', name: 'app_crm_formules_view', methods: ['GET', 'POST'])]
-    public function formulesView(?Formules $formules, Request $request, EntityManagerInterface $entityManager, AppLogger $appLogger): Response
+    public function formulesView(?Formules $formules,FormulesProductInclusRepository $formulesProductInclusRepository,ProductRepository $productRepository, Request $request, EntityManagerInterface $entityManager, AppLogger $appLogger): Response
     {
         if (!$formules instanceof Formules) {
             $this->addFlash('error', 'Formule introuvable.');
@@ -118,6 +120,26 @@ class FormulesController extends AbstractController
             return $this->redirectToRoute('app_crm_formules_view', ['id' => $formules->getId()]);
         }
 
+        if ($request->isMethod('POST') && $request->request->has('lines')) {
+            $lines = $request->request->all('lines');
+            foreach ($lines as $line) {
+                if(isset($line['id'])) {
+                    $productInclus = $entityManager->getRepository(FormulesProductInclus::class)->find($line['id']);
+                } else {
+                    $productInclus = new FormulesProductInclus();
+                    $productInclus->setFormules($formules);
+                    $productInclus->setConfig([]);
+                }
+                $productInclus->setPRODUCT($productRepository->findOneBy(['name'=>$line['product']]));
+                $entityManager->persist($productInclus);
+            }
+            $entityManager->flush();
+            $appLogger->record('UPDATE', 'Mise à jour des produit inclus dans la formule' . $formules->getName());
+            $this->addFlash('success', 'Produit mis à jour avec succès.');
+
+            return $this->redirectToRoute('app_crm_formules_view', ['id' => $formules->getId()]);
+        }
+
         // 2. GESTION DES PRIX (Formulaire Manuel price[])
         // On vérifie si le tableau 'price' existe dans la requête POST
         if ($request->isMethod('POST') && $request->request->has('price')) {
@@ -151,10 +173,20 @@ class FormulesController extends AbstractController
             return $this->redirectToRoute('app_crm_formules_view', ['id' => $formules->getId()]);
         }
 
+        $lines =[
+            [
+                'product' => '',
+            ]
+        ];
+        foreach ($formules->getFormulesProductIncluses() as $key=>$fc){
+            $lines[$key]['product'] = $fc->getProduct()->getName();
+            $lines[$key]['id'] = $fc->getId();
+        }
         return $this->render('dashboard/formules/view.twig', [
             'formule' => $formules,
             'form' => $form->createView(),
             'type' => $formules->getType(),
+            'lines' => $lines,
         ]);
     }
 

templates/dashboard/formules/config-pack.twig

@@ -1,4 +1,77 @@
-liste product inclus in packed
-list options inclus in packed
+{# Définitions de classes conservées #}
+{% set input_class = "w-full bg-slate-900/60 border border-white/10 rounded-2xl px-5 py-4 text-sm text-white outline-none focus:border-blue-500/50 focus:bg-slate-900/90 transition-all duration-300" %}
+{% set label_class = "block text-[10px] font-black text-slate-500 uppercase tracking-[0.2em] mb-3 ml-2" %}
+<form action="{{ path('app_crm_formules_view', {id: formule.id}) }}" method="POST"
+      class="w-full backdrop-blur-2xl bg-white/5 border border-white/10 rounded-[2.5rem] p-8 shadow-2xl relative overflow-hidden mt-6">
+    <div class="w-full form-repeater" data-component="repeater" is="repeat-line">
+        <div class="flex items-center justify-between mb-6 px-4">
+            <h4 class="text-sm font-black text-white uppercase tracking-widest">Détail des produits inclus</h4>
+        </div>
 
+        <ol class="form-repeater__rows space-y-4" data-ref="rows">
+            {% for key,line in lines %}
+                <li class="form-repeater__row group animate-in slide-in-from-right-5 duration-300">
+                    <fieldset class="backdrop-blur-md bg-white/5 border border-white/10 rounded-[2.5rem] p-8 hover:border-blue-500/30 transition-all shadow-xl">
+                        {% if line.id is defined %}
+                            <input type="hidden" name="lines[{{ key }}][id]" value="{{ line.id }}">
+                        {% endif %}
 
+                        <div class="grid grid-cols-1 lg:grid-cols-12 gap-5 items-start">
+                            {# 1. PRODUIT / WYSIWYG #}
+                            <div class="lg:col-span-11">
+                                <label class="text-[9px] font-black text-slate-500 uppercase tracking-widest ml-1 mb-2 block">
+                                    Produit / Prestation
+                                </label>
+                                <div class="relative flex items-center">
+                                    {# Utilisation de l'input texte standard sans l'attribut 'is' #}
+                                    <input
+                                        type="text"
+                                        name="lines[{{ key }}][product]"
+                                        value="{{ line.product }}"
+                                        required
+                                        class="w-full bg-slate-950/50 border border-white/5 rounded-2xl text-white focus:ring-purple-500/20 focus:border-purple-500 transition-all py-3 pl-5 pr-12 text-sm outline-none"
+                                    >
+
+                                    {# BOUTON RECHERCHER #}
+                                    <button
+                                        is="search-productformule"
+                                        type="button"
+                                        class="absolute right-2 p-2 bg-purple-500/10 hover:bg-purple-500 text-purple-400 hover:text-white rounded-xl transition-all duration-300 group/search"
+                                        title="Rechercher un produit"
+                                    >
+                                        {# Icône loupe pour un look plus compact #}
+                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
+                                        </svg>
+                                    </button>
+                                </div>
+                            </div>
+
+                            {# 6. SUPPRIMER #}
+                            <div class="lg:col-span-1 flex justify-center lg:pt-5">
+                                <button type="button" data-ref="removeButton" class="p-4 bg-red-500/10 hover:bg-red-500 text-red-500 hover:text-white rounded-2xl transition-all duration-300 shadow-lg hover:shadow-red-500/20">
+                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
+                                    </svg>
+                                </button>
+                            </div>
+                        </div>
+                    </fieldset>
+                </li>
+            {% endfor %}
+        </ol>
+
+        <div class="mt-6 px-4">
+            <button type="button" data-ref="addButton" class="w-full py-4 border-2 border-dashed border-white/10 hover:border-purple-500/50 bg-white/5 hover:bg-purple-500/10 rounded-3xl text-purple-400 text-[10px] font-black uppercase tracking-[0.4em] transition-all flex items-center justify-center space-x-3 group">
+                <span class="text-xl group-hover:rotate-90 transition-transform duration-300">+</span>
+                <span>Ajouter une prestation</span>
+            </button>
+        </div>
+        <button type="submit" class="mt-2 group w-full py-5 bg-blue-600 hover:bg-blue-500 text-white font-black text-[11px] uppercase tracking-[0.3em] rounded-2xl shadow-xl shadow-blue-600/20 transition-all hover:-translate-y-1 active:scale-[0.98] flex items-center justify-center">
+            <span>Sauvegarder les modifications</span>
+            <svg class="w-4 h-4 ml-3 transform group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
+            </svg>
+        </button>
+    </div>
+</form>