data-primals-engine 1.1.1 → 1.1.2

package/client/src/FlexBuilderControls.jsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import { FaTrash, FaBox, FaExpandArrowsAlt, FaObjectGroup, FaEdit, FaFileAlt } from 'react-icons/fa';
-import { CodeField, NumberField, SelectField } from './Field.jsx';
+import {FaTrash, FaBox, FaExpandArrowsAlt, FaObjectGroup, FaEdit, FaFileAlt, FaPlay} from 'react-icons/fa';
+import {CodeField, NumberField, SelectField, TextField} from './Field.jsx';
 import ConditionBuilder from "./ConditionBuilder.jsx";
+import {useQuery} from "react-query";
 
 const FlexBuilderControls = ({
                                  flexStructure,
@@ -24,6 +25,60 @@ const FlexBuilderControls = ({
                              }) => {
     const { t } = useTranslation();
 
+    // 1. Récupérer la liste des endpoints GET disponibles pour les lier au bouton
+    const { data: availableEndpoints } = useQuery(
+        ['endpoints', 'GET'], // Clé de requête
+        () => fetch('/api/data/search', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                model: 'endpoint',
+                filter: { method: 'GET', isActive: true }
+            })
+        }).then(res => res.json()),
+        {
+            select: (response) => response.data || [], // On ne garde que le tableau de données
+        }
+    );
+
+    // 2. Fonction pour ajouter un nouveau nœud de type CTA
+    const handleAddCtaNode = () => {
+        const newNode = {
+            id: `cta-${Date.now()}`, // ID unique
+            type: 'cta',
+            label: 'Exécuter', // Label par défaut
+            endpointPath: '', // Chemin à configurer
+            // Ajoutez d'autres propriétés de style si nécessaire
+        };
+        // Logique pour ajouter ce nœud à la structure flex...
+        // onChange(updatedStructure);
+    };
+
+    // 3. Dans le panneau de configuration (quand un nœud CTA est sélectionné)
+    const renderCtaNodeEditor = (selectedNode) => {
+        return (
+            <div>
+                <h4>Configurer le Bouton d'Action</h4>
+                <TextField
+                    label="Texte du bouton"
+                    value={selectedNode.label}
+                    onChange={(e) => updateNode(selectedNode.id, { label: e.target.value })}
+                />
+                <SelectField
+                    label="Endpoint à appeler"
+                    value={selectedNode.endpointPath}
+                    onChange={(e) => updateNode(selectedNode.id, { endpointPath: e.target.value })}
+                >
+                    <option value="">-- Sélectionner un endpoint --</option>
+                    {(availableEndpoints || []).map(ep => (
+                        <option key={ep._id} value={ep.path}>
+                            {ep.name} (/api/actions/{ep.path})
+                        </option>
+                    ))}
+                </SelectField>
+            </div>
+        );
+    };
     const handleDataLimitChange = (e) => {
         let value = parseInt(e.target.value, 10);
         if (isNaN(value) || value < 1) value = 1;
@@ -45,7 +100,10 @@ const FlexBuilderControls = ({
                     id="selectedModel"
                     value={flexStructure.selectedModelName}
                     onChange={(selected) => onModelChange(selected.value)}
-                    items={[{ value: null, label: t('flexBuilder.selectAModel', 'Sélectionner un modèle...') }, ...modelOptions]}
+                    items={[{
+                        value: null,
+                        label: t('flexBuilder.selectAModel', 'Sélectionner un modèle...')
+                    }, ...modelOptions]}
                 />
             </div>
             {flexStructure.selectedModelName && (
@@ -83,30 +141,119 @@ const FlexBuilderControls = ({
                 </>
             )}
 
+
+
             {/* Section des paramètres du nœud sélectionné */}
             {selectedNode && (
                 <div className="selected-node-controls">
                     <h4>
                         {t('flexBuilder.selectedNodeSettings', 'Paramètres')}: {t(selectedNode.type)} ({selectedNode.id.substring(0, 8)})
                         {selectedNode.id !== flexStructure.id &&
-                            <button onClick={onDeleteNode} className="btn-delete-node" title={t('flexBuilder.deleteThisNode', 'Supprimer cet élément')}><FaTrash /></button>
+                            <button onClick={onDeleteNode} className="btn-delete-node"
+                                    title={t('flexBuilder.deleteThisNode', 'Supprimer cet élément')}><FaTrash/></button>
                         }
                     </h4>
+                    {selectedNode.type === 'cta' && (
+                        <>
+                            <p>{t('flexBuilder.ctaControlsTitle', 'Propriétés du Bouton d\'Action:')}</p>
+                            <TextField
+                                label={t('flexBuilder.ctaLabel', 'Texte du bouton')}
+                                value={selectedNode.label || ''}
+                                onChange={(e) => onUpdateNode(selectedNode.id, 'label', e.target.value)}
+                            />
+                            <SelectField
+                                label={t('flexBuilder.ctaEndpoint', 'Endpoint à appeler')}
+                                value={selectedNode.endpointPath || ''}
+                                onChange={(sel) => onUpdateNode(selectedNode.id, 'endpointPath', sel.value)}
+                                items={[
+                                    {value: '', label: t('flexBuilder.selectAnEndpoint', 'Select an endpoint')},
+                                    ...availableEndpoints.map(ep => ({
+                                        value: ep.path,
+                                        label: `${ep.name} (/api/actions/${ep.path})`
+                                    }))
+                                ]}
+                            />
+                            <hr className="my-4 border-gray-600"/>
+                            <p>{t('flexBuilder.ctaRequestConfig', 'Configuration de la requête')}</p>
+                            <SelectField
+                                label={t('flexBuilder.httpMethod', 'Méthode HTTP')}
+                                value={selectedNode.httpMethod || 'GET'}
+                                onChange={(sel) => onUpdateNode(selectedNode.id, 'httpMethod', sel.value)}
+                                items={['GET', 'POST', 'PUT', 'PATCH', 'DELETE'].map(m => ({value: m, label: m}))}
+                            />
 
+                            {/* Affiche l'éditeur de corps de requête pour les méthodes appropriées */}
+                            {(selectedNode.httpMethod === 'POST' || selectedNode.httpMethod === 'PUT' || selectedNode.httpMethod === 'PATCH') && (
+                                <div className="form-group">
+                                    <label>{t('flexBuilder.requestBody', 'Corps de la requête (JSON)')}</label>
+                                    <CodeField
+                                        language="json"
+                                        value={selectedNode.requestBodyTemplate || ''}
+                                        onChange={(e) => onUpdateNode(selectedNode.id, 'requestBodyTemplate', e.value)}
+                                        placeholder={`{\n  "productId": "{{_id}}",\n  "name": "{{name}}"\n}`}
+                                        rows={5}
+                                    />
+                                </div>
+                            )}
+                            <div className="form-group">
+                                <label>{t('flexBuilder.requestQuery', 'Paramètres de requête (JSON)')}</label>
+                                <CodeField
+                                    language="json"
+                                    value={selectedNode.requestQueryTemplate || ''}
+                                    onChange={(e) => onUpdateNode(selectedNode.id, 'requestQueryTemplate', e.value)}
+                                    placeholder={`{\n  "source": "dashboard",\n  "userId": "{{user._id}}"\n}`}
+                                    rows={4}
+                                />
+                            </div>
+                            <small
+                                className="block my-2 text-xs text-gray-500">{t('flexBuilder.usePlaceholders', 'Utilisez "{{fieldName}}" pour insérer des données de l\'élément courant. Le champ doit être une chaîne de caractères.')}</small>
+
+                        </>
+                    )}
                     {/* Contrôles pour un conteneur */}
                     {selectedNode.type === 'container' && (
                         <>
                             <p>{t('flexBuilder.containerControlsTitle', 'Propriétés du conteneur Flex:')}</p>
                             <div className="control-group actions">
-                                <button onClick={() => onAddChildNode(selectedNode.id, 'item')}><FaBox /> {t('flexBuilder.addItem', 'Ajouter une case')}</button>
-                                <button onClick={() => onAddChildNode(selectedNode.id, 'container')}><FaExpandArrowsAlt /> {t('flexBuilder.addNestedContainer', 'Ajouter un conteneur')}</button>
+                                <button onClick={() => onAddChildNode(selectedNode.id, 'item')}>
+                                    <FaBox/> {t('flexBuilder.addItem', 'Ajouter une case')}</button>
+                                <button onClick={() => onAddChildNode(selectedNode.id, 'container')}>
+                                    <FaExpandArrowsAlt/> {t('flexBuilder.addNestedContainer', 'Ajouter un conteneur')}
+                                </button>
+                                <button onClick={() => onAddChildNode(selectedNode.id, 'cta')}>
+                                    <FaPlay/> {t('flexBuilder.addCtaButton', 'Ajouter un Bouton CTA')}
+                                </button>
+                            </div>
+                            <div className="control-group"><label>{t('flexDirection')}:</label><SelectField
+                                items={flexOptions.flexDirection.map(o => ({label: t(o, o), value: o}))}
+                                value={selectedNode.containerStyle.flexDirection}
+                                onChange={sel => onUpdateNode(selectedNode.id, 'containerStyle.flexDirection', sel.value)}/>
+                            </div>
+                            <div className="control-group"><label>{t('flexWrap')}:</label><SelectField
+                                items={flexOptions.flexWrap.map(o => ({label: t(o, o), value: o}))}
+                                value={selectedNode.containerStyle.flexWrap}
+                                onChange={sel => onUpdateNode(selectedNode.id, 'containerStyle.flexWrap', sel.value)}/>
+                            </div>
+                            <div className="control-group"><label>{t('justifyContent')}:</label><SelectField
+                                items={flexOptions.justifyContent.map(o => ({label: t(o, o), value: o}))}
+                                value={selectedNode.containerStyle.justifyContent}
+                                onChange={sel => onUpdateNode(selectedNode.id, 'containerStyle.justifyContent', sel.value)}/>
+                            </div>
+                            <div className="control-group"><label>{t('alignItems')}:</label><SelectField
+                                items={flexOptions.alignItems.map(o => ({label: t(o, o), value: o}))}
+                                value={selectedNode.containerStyle.alignItems}
+                                onChange={sel => onUpdateNode(selectedNode.id, 'containerStyle.alignItems', sel.value)}/>
                             </div>
-                            <div className="control-group"><label>{t('flexDirection')}:</label><SelectField items={flexOptions.flexDirection.map(o => ({ label: t(o, o), value: o }))} value={selectedNode.containerStyle.flexDirection} onChange={sel => onUpdateNode(selectedNode.id, 'containerStyle.flexDirection', sel.value)} /></div>
-                            <div className="control-group"><label>{t('flexWrap')}:</label><SelectField items={flexOptions.flexWrap.map(o => ({ label: t(o, o), value: o }))} value={selectedNode.containerStyle.flexWrap} onChange={sel => onUpdateNode(selectedNode.id, 'containerStyle.flexWrap', sel.value)} /></div>
-                            <div className="control-group"><label>{t('justifyContent')}:</label><SelectField items={flexOptions.justifyContent.map(o => ({ label: t(o, o), value: o }))} value={selectedNode.containerStyle.justifyContent} onChange={sel => onUpdateNode(selectedNode.id, 'containerStyle.justifyContent', sel.value)} /></div>
-                            <div className="control-group"><label>{t('alignItems')}:</label><SelectField items={flexOptions.alignItems.map(o => ({ label: t(o, o), value: o }))} value={selectedNode.containerStyle.alignItems} onChange={sel => onUpdateNode(selectedNode.id, 'containerStyle.alignItems', sel.value)} /></div>
-                            <div className="control-group"><label>{t('gap')}:</label><input type="text" value={selectedNode.containerStyle.gap || ''} onChange={e => onUpdateNode(selectedNode.id, 'containerStyle.gap', e.target.value)} placeholder="ex: 10px" /></div>
-                            <div className="form-group"><CodeField id="customCss" name="customCss" language="css" value={selectedNode.containerStyle.customCss || ''} onChange={(e) => onUpdateNode(selectedNode.id, 'containerStyle.customCss', e.value)} placeholder={t('flexBuilder.customCssPlaceholder', 'Ex: background-color: red;')} rows={4} /></div>
+                            <div className="control-group"><label>{t('gap')}:</label><input type="text"
+                                                                                            value={selectedNode.containerStyle.gap || ''}
+                                                                                            onChange={e => onUpdateNode(selectedNode.id, 'containerStyle.gap', e.target.value)}
+                                                                                            placeholder="ex: 10px"/>
+                            </div>
+                            <div className="form-group"><CodeField id="customCss" name="customCss" language="css"
+                                                                   value={selectedNode.containerStyle.customCss || ''}
+                                                                   onChange={(e) => onUpdateNode(selectedNode.id, 'containerStyle.customCss', e.value)}
+                                                                   placeholder={t('flexBuilder.customCssPlaceholder', 'Ex: background-color: red;')}
+                                                                   rows={4}/></div>
                         </>
                     )}
 
@@ -117,27 +264,59 @@ const FlexBuilderControls = ({
                             <div className="control-group actions">
                                 {flexStructure.selectedModelName && (
                                     <button onClick={() => onSetIsFieldSelectorOpen(true)}>
-                                        <FaEdit /> {selectedNode.content.type === 'dataField' ? t('flexBuilder.editDataMapping', 'Modifier le champ lié') : t('flexBuilder.mapDataField', 'Lier un champ de données')}
+                                        <FaEdit/> {selectedNode.content.type === 'dataField' ? t('flexBuilder.editDataMapping', 'Modifier le champ lié') : t('flexBuilder.mapDataField', 'Lier un champ de données')}
                                     </button>
                                 )}
                                 <button onClick={(e) => {
-                                    onSetEditingHtmlInfo({ nodeId: selectedNode.id, initialContent: selectedNode.content.html || '' });
+                                    onSetEditingHtmlInfo({
+                                        nodeId: selectedNode.id,
+                                        initialContent: selectedNode.content.html || ''
+                                    });
                                     e.stopPropagation()
                                 }}>
-                                    <FaFileAlt /> {t('flexBuilder.editHTML', 'Éditer le contenu')}
+                                    <FaFileAlt/> {t('flexBuilder.editHTML', 'Éditer le contenu')}
                                 </button>
                                 {selectedNode.content.type !== 'nestedContainer' && (
                                     <button onClick={() => onMakeItemNestedContainer(selectedNode.id)}>
-                                        <FaObjectGroup /> {t('flexBuilder.makeNestedContainer', 'Transformer en conteneur')}
+                                        <FaObjectGroup/> {t('flexBuilder.makeNestedContainer', 'Transformer en conteneur')}
                                     </button>
                                 )}
                             </div>
-                            <div className="control-group"><label>{t('itemWidth')}:</label><input type="text" value={selectedNode.itemStyle.width || ''} onChange={e => onUpdateNode(selectedNode.id, 'itemStyle.width', e.target.value)} placeholder="ex: 100px, 20%" /></div>
-                            <div className="control-group"><label>{t('itemHeight')}:</label><input type="text" value={selectedNode.itemStyle.height || ''} onChange={e => onUpdateNode(selectedNode.id, 'itemStyle.height', e.target.value)} placeholder="ex: 50px, auto" /></div>
-                            <div className="control-group"><label>{t('flexBuilder.itemFlexGrow', 'Flex Grow')}:</label><input type="number" value={selectedNode.itemStyle.flexGrow || 0} onChange={e => onUpdateNode(selectedNode.id, 'itemStyle.flexGrow', parseFloat(e.target.value) || 0)} min="0" step="0.1" /></div>
-                            <div className="control-group"><label>{t('flexBuilder.itemFlexShrink', 'Flex Shrink')}:</label><input type="number" value={selectedNode.itemStyle.flexShrink === undefined ? 1 : selectedNode.itemStyle.flexShrink} onChange={e => onUpdateNode(selectedNode.id, 'itemStyle.flexShrink', parseFloat(e.target.value))} min="0" step="0.1" /></div>
-                            <div className="control-group"><label>{t('flexBuilder.itemFlexBasis', 'Flex Basis')}:</label><input type="text" value={selectedNode.itemStyle.flexBasis || 'auto'} onChange={e => onUpdateNode(selectedNode.id, 'itemStyle.flexBasis', e.target.value)} placeholder="auto, 100px, 20%" /></div>
-                            <div className="form-group"><CodeField id="customCssItem" name="customCssItem" language="css" value={selectedNode.itemStyle.customCss || ''} onChange={(e) => onUpdateNode(selectedNode.id, 'itemStyle.customCss', e.value)} placeholder={t('flexBuilder.customCssPlaceholder', 'Ex: background-color: blue;')} rows={4} /></div>
+                            <div className="control-group"><label>{t('itemWidth')}:</label><input type="text"
+                                                                                                  value={selectedNode.itemStyle.width || ''}
+                                                                                                  onChange={e => onUpdateNode(selectedNode.id, 'itemStyle.width', e.target.value)}
+                                                                                                  placeholder="ex: 100px, 20%"/>
+                            </div>
+                            <div className="control-group"><label>{t('itemHeight')}:</label><input type="text"
+                                                                                                   value={selectedNode.itemStyle.height || ''}
+                                                                                                   onChange={e => onUpdateNode(selectedNode.id, 'itemStyle.height', e.target.value)}
+                                                                                                   placeholder="ex: 50px, auto"/>
+                            </div>
+                            <div className="control-group">
+                                <label>{t('flexBuilder.itemFlexGrow', 'Flex Grow')}:</label><input type="number"
+                                                                                                   value={selectedNode.itemStyle.flexGrow || 0}
+                                                                                                   onChange={e => onUpdateNode(selectedNode.id, 'itemStyle.flexGrow', parseFloat(e.target.value) || 0)}
+                                                                                                   min="0" step="0.1"/>
+                            </div>
+                            <div className="control-group">
+                                <label>{t('flexBuilder.itemFlexShrink', 'Flex Shrink')}:</label><input type="number"
+                                                                                                       value={selectedNode.itemStyle.flexShrink === undefined ? 1 : selectedNode.itemStyle.flexShrink}
+                                                                                                       onChange={e => onUpdateNode(selectedNode.id, 'itemStyle.flexShrink', parseFloat(e.target.value))}
+                                                                                                       min="0"
+                                                                                                       step="0.1"/>
+                            </div>
+                            <div className="control-group">
+                                <label>{t('flexBuilder.itemFlexBasis', 'Flex Basis')}:</label><input type="text"
+                                                                                                     value={selectedNode.itemStyle.flexBasis || 'auto'}
+                                                                                                     onChange={e => onUpdateNode(selectedNode.id, 'itemStyle.flexBasis', e.target.value)}
+                                                                                                     placeholder="auto, 100px, 20%"/>
+                            </div>
+                            <div className="form-group"><CodeField id="customCssItem" name="customCssItem"
+                                                                   language="css"
+                                                                   value={selectedNode.itemStyle.customCss || ''}
+                                                                   onChange={(e) => onUpdateNode(selectedNode.id, 'itemStyle.customCss', e.value)}
+                                                                   placeholder={t('flexBuilder.customCssPlaceholder', 'Ex: background-color: blue;')}
+                                                                   rows={4}/></div>
                         </>
                     )}
                 </div>

package/client/src/FlexBuilderPreview.jsx

@@ -1,7 +1,8 @@
-import React from 'react';
+import React, {useState} from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { FlexNodeRenderer } from "./FlexNode.jsx";
+import {Dialog, DialogProvider} from "./Dialog.jsx";
 
 const FlexBuilderPreview = ({
                                 flexStructure,
@@ -14,10 +15,50 @@ const FlexBuilderPreview = ({
                                 onMoveNode
                             }) => {
     const { t } = useTranslation();
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [modalContent, setModalContent] = useState(null);
+    const handleCtaClick = async (node) => {
+        if (!node.endpointPath) {
+            alert("Cet endpoint n'est pas configuré.");
+            return;
+        }
+
+        // On prépare le contenu du modal avant même l'appel
+        setModalContent({ isLoading: true, path: node.endpointPath });
+        setIsModalOpen(true);
+
+        try {
+            const response = await fetch(`/api/actions/${node.endpointPath}`, { method: 'GET' });
+            const data = await response.json();
+            setModalContent({ path: node.endpointPath, status: response.status, data });
+        } catch (error) {
+            setModalContent({ path: node.endpointPath, error: error.message });
+        }
+    };
 
     return (
         <div className="flex-builder-preview-area">
             <h3>{t('preview', 'Aperçu')}</h3>
+            <DialogProvider>
+            {isModalOpen && (
+                <Dialog
+                    isOpen={isModalOpen}
+                    onClose={() => setIsModalOpen(false)}
+                    title={`Résultat de /api/actions/${modalContent?.path}`}
+                >
+                    <div className="p-4 bg-gray-900 text-white rounded-md">
+                        <pre>
+                            <code>
+                                {modalContent?.isLoading
+                                    ? 'Chargement...'
+                                    : JSON.stringify(modalContent, null, 2)
+                                }
+                            </code>
+                        </pre>
+                    </div>
+                </Dialog>
+            )}
+            </DialogProvider>
             <FlexNodeRenderer
                 node={flexStructure}
                 path={[]}
@@ -29,6 +70,7 @@ const FlexBuilderPreview = ({
                 modelFields={modelFields}
                 dnd={dnd}
                 onMoveNode={onMoveNode}
+                onCtaClick={handleCtaClick}
             />
         </div>
     );

package/client/src/FlexNode.jsx

@@ -1,7 +1,17 @@
 // C:/Dev/hackersonline-engine/client/src/FlexNode.jsx
-import React, { useEffect, useRef } from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import PropTypes from 'prop-types';
-import { FaPlus, FaTrash, FaEdit, FaRegSquare, FaRegCheckSquare, FaBox, FaExpandArrowsAlt, FaObjectGroup } from 'react-icons/fa';
+import {
+    FaPlus,
+    FaTrash,
+    FaEdit,
+    FaRegSquare,
+    FaRegCheckSquare,
+    FaBox,
+    FaExpandArrowsAlt,
+    FaObjectGroup,
+    FaPlay
+} from 'react-icons/fa';
 // Remove Droppable, Draggable from '@hello-pangea/dnd' if no longer used
 import { useTranslation } from 'react-i18next';
 // Supprimer l'import de useDragAndDrop s'il n'est plus utilisé localement
@@ -55,11 +65,45 @@ FieldSelectorModal.propTypes = {
 };
 
 export const FlexNodeRenderer = React.forwardRef((props, ref) => {
+
     const {
-        node, path, onSelectNode, selectedNodeId, data, dataIndexRef, modelFields, t, onMoveNode,
-        dnd, // Recevoir l'objet dnd en tant que prop
+        node,
+        path,
+        onSelectNode,
+        selectedNodeId,
+        data,
+        dataIndexRef,
+        modelFields,
+        t,
+        onMoveNode,
+        dnd,
+        onCtaClick, // <-- On récupère la fonction du parent
     } = props;
 
+    const [isLoading, setIsLoading] = useState(false);
+    const [result, setResult] = useState(null);
+
+    // --- NOUVELLE FONCTION POUR EXÉCUTER LE CTA ---
+    const handleCtaClick = async (endpointPath) => {
+        if (!endpointPath) {
+            alert("Cet endpoint n'est pas configuré.");
+            return;
+        }
+        setIsLoading(true);
+        setResult(null);
+
+        try {
+            const response = await fetch(`/api/actions/${endpointPath}`, { method: 'GET' });
+            const data = await response.json();
+            setResult({ status: response.status, data });
+        } catch (error) {
+            setResult({ error: error.message });
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+
     // Déstructurer les valeurs et gestionnaires du prop dnd
     const {
         isDragging, draggedItemRef, dragOverContainerId,
@@ -141,7 +185,29 @@ export const FlexNodeRenderer = React.forwardRef((props, ref) => {
     //     console.log(`FlexNode (${node.id} - ${node.type}): onMoveNode type:`, typeof onMoveNode);
     // }, [onMoveNode, node.id, node.type]);
 
-
+    if (node.type === 'cta') {
+        return (
+            <div
+                ref={ref} // Important pour le D&D
+                className={`flex-node-wrapper ${dnd.isDragging && dnd.draggedItemRef.current === node.id ? 'is-dragging-dnd' : ''}`}
+                draggable
+                onDragStart={(e) => dnd.handleNodeDragStart(node.id)}
+                onDragEnd={dnd.handleItemDragEnd}
+                onClick={(e) => { e.stopPropagation(); props.onSelectNode(node.id); }}
+            >
+                <div className={`flex-node flex-node-cta ${props.selectedNodeId === node.id ? 'is-selected' : ''}`}>
+                    <button
+                        className="btn btn-primary btn-sm"
+                        // On appelle la fonction du parent
+                        onClick={(e) => { e.stopPropagation(); onCtaClick(node); }}
+                    >
+                        <FaPlay className="mr-2" />
+                        {node.label || 'Execute'}
+                    </button>
+                </div>
+            </div>
+        );
+    }
     if (node.type === 'container' || (node.type === 'item' && node.content?.type === 'nestedContainer')) {
         const containerNode = node.type === 'container' ? node : node.content.nestedContainer;
         const children = containerNode.children || [];
@@ -181,6 +247,7 @@ export const FlexNodeRenderer = React.forwardRef((props, ref) => {
                             key={childNode.id}
                             node={childNode}
                             path={[...path, index]}
+                            onCtaClick={onCtaClick}
                             onSelectNode={onSelectNode}
                             selectedNodeId={selectedNodeId}
                             data={data}
@@ -194,6 +261,25 @@ export const FlexNodeRenderer = React.forwardRef((props, ref) => {
                 </div>
             </div>
         );
+    } else if (node.type === 'cta') {
+        return (
+            <div className="flex-node flex-node-cta">
+                <button
+                    className="btn btn-primary btn-sm" // Utilisez vos classes de bouton
+                    onClick={() => handleCtaClick(node.endpointPath)}
+                    disabled={isLoading}
+                >
+                    {isLoading ? (
+                        <span className="loading loading-spinner loading-xs"></span>
+                    ) : (
+                        <>
+                            <FaPlay className="mr-2" />
+                            {node.label || 'Execute'}
+                        </>
+                    )}
+                </button>
+            </div>
+        );
     } else if (node.type === 'item') {
         const itemStyleWithDefaults = {
             display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'grab', ...node.itemStyle,
@@ -283,8 +369,10 @@ FlexNodeRenderer.propTypes = {
     modelFields: PropTypes.array,
     t: PropTypes.func.isRequired,
     onMoveNode: PropTypes.func,
+
     dnd: PropTypes.object.isRequired, // dnd est maintenant requis
 };
 FlexNodeRenderer.defaultProps = {
+    onCtaClick: () => {},
     data: [], modelFields: [], onMoveNode: null,
 };

package/client/src/FlexTreeUtils.js

@@ -3,27 +3,50 @@ import { v4 as uuidv4 } from 'uuid';
 /**
  * Crée un nouveau nœud de type 'container' ou 'item'.
  */
+
 export const createNewNode = (type) => {
-    const baseStyle = { border: '1px solid #ddd', padding: '5px' };
-    if (type === 'container') {
+    const baseNode = { id: `${type}-${Date.now()}-${Math.random().toString(36).substring(2, 7)}` };
+
+    switch (type) {
+    case 'container':
+        return {
+            ...baseNode,
+            type: 'container',
+            containerStyle: { /* ... styles ... */ },
+            children: []
+        };
+
+        // --- AJOUTER CE BLOC ---
+    case 'cta':
+        return {
+            ...baseNode,
+            type: 'cta',
+            label: 'Mon Bouton',
+            endpointPath: '',
+            itemStyle: { width: 'auto', height: 'auto' },
+            // --- AJOUTS POUR LA CONFIGURATION DE LA REQUÊTE ---
+            httpMethod: 'GET',
+            requestBodyTemplate: '',
+            requestQueryTemplate: ''
+        };
+        // --- FIN DE L'AJOUT ---
+
+    case 'item':
+    default: // Le 'cta' tombait ici, créant un 'item' par défaut
         return {
-            id: uuidv4(), type: 'container',
-            containerStyle: { ...baseStyle, display: 'flex', flexDirection: 'row', flexWrap: 'wrap', gap: '5px', minHeight: '50px'},
-            children: [],
+            ...baseNode,
+            type: 'item',
+            itemStyle: { width: '100px', height: '50px' },
+            content: { type: 'placeholder' }
         };
     }
-    return {
-        id: uuidv4(), type: 'item',
-        itemStyle: { ...baseStyle, width: '', height: '', display: 'flex', alignItems: 'center', justifyContent: 'center' },
-        content: { type: 'placeholder' },
-    };
 };
 
 /**
  * Nettoie un nœud pour la sauvegarde.
  */
 export const cleanNodeForOutput = (node) => {
-    const { id, type, children, content, containerStyle, itemStyle } = node;
+    const { id, type, children, content, containerStyle, itemStyle, label, endpointPath, httpMethod, requestBodyTemplate, requestQueryTemplate } = node;
     const outputNode = { id, type };
 
     if (type === 'container') {
@@ -43,6 +66,14 @@ export const cleanNodeForOutput = (node) => {
         } else {
             outputNode.content = { type: 'placeholder' };
         }
+    } else if (type === 'cta') {
+        // On sauvegarde les propriétés spécifiques au CTA
+        outputNode.label = label || 'Execute';
+        outputNode.itemStyle = node.itemStyle || { width: 'auto', height: 'auto' };
+        outputNode.httpMethod = httpMethod || 'GET';
+        outputNode.requestBodyTemplate = requestBodyTemplate || '';
+        outputNode.requestQueryTemplate = requestQueryTemplate || '';
+        outputNode.endpointPath = endpointPath || '';
     }
     return outputNode;
 };

package/client/src/ModelList.jsx

@@ -47,28 +47,41 @@ export function ModelList({ onModelSelect, onCreateModel, onImportModel, onEditM
         }
     };
 
-    const importModelsMutation = useMutation((profile) => {
-        return fetch('/api/models/import', { method: 'POST', headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({ install: true, models: ['request', ...profiles[profile]] })
-        })
+    const demoInitMutation = useMutation((profile) => {
+        return fetch('/api/demo/initialize', {
+            method: 'POST',
+            headers: { "Content-Type": "application/json"},
+            body: JSON.stringify({profile: profile}),
+        });
     });
+
     const handleProfile = (profile) => {
-       importModelsMutation.mutateAsync(profile).then(e => {
-           setCurrentProfile(profile);
-           gtag('event', 'profile ' + profile);
-           queryClient.invalidateQueries('api/models');
-
-           const profileSteps = allTourSteps[profile];
-           if (profileSteps) {
-               setCurrentTourSteps(profileSteps);
-               setTourStepIndex(0);
-               setIsTourOpen(true); // Start the tour
-           } else {
-               console.warn(`No tour steps defined for profile: ${profile}`);
-           }
-       });
+        // --- CHANGEMENT ICI : On appelle la nouvelle mutation sans argument ---
+        demoInitMutation.mutateAsync(profile).then(response => {
+            // On vérifie que la réponse est OK avant de continuer
+            if (!response.ok) {
+                // Gérer l'erreur si l'initialisation échoue
+                console.error("L'initialisation de la démo a échoué.");
+                // Vous pourriez afficher une notification à l'utilisateur ici.
+                return;
+            }
+
+            // Le reste de la logique est parfait et ne change pas
+            setCurrentProfile(profile);
+            gtag('event', 'profile ' + profile);
+            queryClient.invalidateQueries('api/models');
+
+            const profileSteps = allTourSteps[profile];
+            if (profileSteps) {
+                setCurrentTourSteps(profileSteps);
+                setTourStepIndex(0);
+                setIsTourOpen(true); // Start the tour
+            } else {
+                console.warn(`No tour steps defined for profile: ${profile}`);
+            }
+        }).catch(error => {
+            console.error("Erreur critique lors de l'appel d'initialisation de la démo:", error);
+        });
     };
 
     const [mods, setMods] = useState([]);