data-primals-engine 1.4.3 → 1.5.1

package/client/src/Field.jsx

@@ -1,6 +1,7 @@
 import React, {
     forwardRef, useCallback,
     useEffect,
+    useMemo,
     useImperativeHandle,
     useRef,
     useState,
@@ -14,13 +15,15 @@ import { CodeiumEditor } from "@codeium/react-code-editor";
 import {debounce, escapeRegExp, isGUID, isLightColor} from "../../src/core.js";
 import {mainFieldsTypes, maxFileSize} from "../../src/constants.js";
 import {useModelContext} from "./contexts/ModelContext.jsx";
+import { SketchPicker } from 'react-color'; // Importer le sélecteur
 import {useQueryClient} from "react-query";
-import {
+import tinycolor from 'tinycolor2';
+import { 
     FaArrowDown,
-    FaArrowUp, FaAt, FaEye, FaEyeSlash,
+    FaArrowUp, FaAt, FaCheckCircle, FaEye, FaEyeSlash, FaExclamationCircle,
     FaCalendar, FaCalendarWeek, FaCode, FaFile,
     FaHashtag, FaIcons,
-    FaImage,
+    FaImage, FaSpinner,
     FaLink, FaListOl, FaListUl,
     FaLock, FaMinus,
     FaPallet, FaPhone, FaSitemap,
@@ -28,13 +31,12 @@ import {
 } from "react-icons/fa";
  import * as Fa6Icons from 'react-icons/fa6'; // Importer Fa6
 import {FaCalendarDays, FaCodeCompare, FaPencil, FaT, FaTableColumns} from "react-icons/fa6";
-import { CodeBlock, tomorrowNightBright } from 'react-code-blocks';
 import SyntaxHighlighter from 'react-syntax-highlighter';
-import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 
 import { PhoneInput } from 'react-international-phone';
 import 'react-international-phone/style.css';
 import {useAuthContext} from "./contexts/AuthContext.jsx";
+import {useRealtimeValidation} from "./hooks/useValidation.js";
 import Switch from "react-switch";
 export const Form = ({
   name,
@@ -78,167 +80,292 @@ export const Form = ({
 };
 
 const TextField = forwardRef(function TextField(
-  {
-    name,
-    label,
-    placeholder,
-    help,
-    editable,
-    value,
-    required,
-    readOnly,
-    onChange,
-    multiline,
-    minlength,
-    maxlength,
-    searchable,
-      labelProps,
-      showErrors=false,
-      before,
-      after,
-    ...rest
-  },
-  ref,
+    {
+        name,
+        label,
+        placeholder,
+        help,
+        editable,
+        value,
+        required,
+        readOnly,
+        onChange,
+        multiline,
+        minlength,
+        maxlength,
+        searchable,
+        labelProps,
+        showErrors = false,
+        before,
+        after,
+        validation,
+        showTooltipErrors = false,
+        mask,
+        replacement,
+        ...rest
+    },
+    ref,
 ) {
-  const [id, setId] = useState("textfield-" + uniqid());
-  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
-  const [errors, setErrors] = useState([]);
-  const inputRef = useRef();
-
-  const { type, ...otherRest } = rest;
-  const isPasswordField = type === 'password';
-
-  const mult = typeof multiline !== 'undefined' ? multiline : maxlength > 255;
-  const validate = () => {
-    const errs = [];
-    if (required && (!value || value.trim() === "")) {
-      errs.push("Field required");
-    }
-    if (
-      minlength > 0 &&
-      typeof value == "string" &&
-      value.trim().length < minlength
-    ) {
-      errs.push("Value length must be >= to " + minlength);
-    }
-    if (
-      maxlength !== undefined && maxlength > 0 &&
-      typeof value == "string" &&
-      value.trim().length > maxlength
-    ) {
-      errs.push("Value length must be <= to " + maxlength);
-    }
-    if( showErrors )
-        setErrors(errs);
-    return !errs.length;
-  };
-  useImperativeHandle(ref, () => ({
-    ref: inputRef.current,
-    validate,
-    getValue: () => value,
-  }));
-  const handleChange = (e) => {
-    if (onChange) {
-      onChange(e);
+    const [id, setId] = useState("textfield-" + uniqid());
+    const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+    const [errors, setErrors] = useState([]);
+    const inputRef = useRef();
+
+    const parsedReplacement = useMemo(() => {
+        if (!replacement || typeof replacement !== 'object') return null;
+        const newRep = {};
+        try {
+            for (const key in replacement) {
+                // La valeur du modèle est une chaîne (ex: "\\d"), on crée un RegExp
+                newRep[key] = new RegExp(replacement[key]);
+            }
+            return newRep;
+        } catch (e) {
+            console.error("Invalid regex pattern in mask replacement:", e);
+            return null; // Configuration de remplacement invalide
+        }
+    }, [replacement]);
+
+    // --- Real-time validation logic ---
+    const {
+        validate: realtimeValidate,
+        validationState
+    } = useRealtimeValidation(
+        validation?.modelName,
+        validation?.docId
+    );
+    const isRealtimeValidationEnabled = !!validation?.modelName;
+    const fieldValidationState = validationState[name] || { status: 'idle' };
+
+    const { type, ...otherRest } = rest;
+    const isPasswordField = type === 'password';
+
+    const mult = typeof multiline !== 'undefined' ? multiline : maxlength > 255;
+
+    const validate = () => {
+        const errs = [];
+        if (required && (!value || String(value).trim() === "")) {
+            errs.push("Field required");
+        }
+        if (
+            minlength > 0 &&
+            typeof value == "string" &&
+            value.trim().length < minlength
+        ) {
+            errs.push("Value length must be >= to " + minlength);
+        }
+        if (
+            maxlength !== undefined && maxlength > 0 &&
+            typeof value == "string" &&
+            value.trim().length > maxlength
+        ) {
+            errs.push("Value length must be <= to " + maxlength);
+        }
+        if (isRealtimeValidationEnabled && fieldValidationState.status === 'invalid') {
+            errs.push(fieldValidationState.error);
+        }
+
+        if (showErrors) {
+            setErrors(errs);
+        }
+        return !errs.length && fieldValidationState.status !== 'invalid';
+    };
+
+    useImperativeHandle(ref, () => ({
+        ref: inputRef.current,
+        validate,
+        getValue: () => value,
+    }));
+
+    const handleMaskedChange = (e) => {
+        const inputValue = e.target.value;
+        let newValue = '';
+        let rawIndex = 0;
+
+        // Appliquer le masque
+        for (let i = 0; i < mask.length; i++) {
+            const maskChar = mask[i];
+
+            // Si nous avons dépassé la longueur de la valeur d'entrée, sortir de la boucle
+            if (rawIndex >= inputValue.length) break;
+
+            // Si le caractère du masque est un placeholder (défini dans replacement)
+            if (parsedReplacement && parsedReplacement[maskChar]) {
+                const pattern = parsedReplacement[maskChar];
+                const inputChar = inputValue[rawIndex];
+
+                // Vérifier si le caractère correspond au motif
+                if (pattern.test(inputChar)) {
+                    newValue += inputChar;
+                    rawIndex++;
+                } else {
+                    // Ignorer les caractères qui ne correspondent pas au motif
+                    rawIndex++;
+                    i--; // Réessayer avec le même caractère de masque
+                }
+            } else {
+                // Si c'est un caractère littéral du masque, l'ajouter
+                newValue += maskChar;
+
+                // Si le caractère d'entrée correspond au caractère littéral, avancer
+                if (inputValue[rawIndex] === maskChar) {
+                    rawIndex++;
+                }
+            }
+        }
+
+        // Appeler le onChange parent avec la nouvelle valeur masquée
+        const syntheticEvent = {
+            ...e,
+            target: {
+                ...e.target,
+                value: newValue
+            }
+        };
+
+        if (onChange) {
+            onChange(syntheticEvent);
+        }
+    };
+
+    const handleChange = (e) => {
+        if (mask && parsedReplacement) {
+            handleMaskedChange(e);
+        } else if (onChange) {
+            onChange(e);
+        }
+
+        if (isRealtimeValidationEnabled) {
+            realtimeValidate(name, e.target.value);
+        }
+    };
+
+    const togglePasswordVisibility = () => {
+        setIsPasswordVisible(prevState => !prevState);
+    };
+
+    useEffect(() => {
+        if (value !== null && !isRealtimeValidationEnabled) validate();
+    }, [value]);
+
+    const combinedErrors = [...errors];
+    if (isRealtimeValidationEnabled && fieldValidationState.status === 'invalid' && fieldValidationState.error && !combinedErrors.includes(fieldValidationState.error)) {
+        combinedErrors.push(fieldValidationState.error);
     }
-  };
+    const hasErrors = combinedErrors.length > 0;
+    // Sanitize errors for HTML attribute to prevent XSS
+    const errorsHtml = hasErrors ? `<ul>${combinedErrors.map(e => `<li>${String(e).replace(/</g, '&lt;').replace(/>/g, '&gt;')}</li>`).join('')}</ul>` : '';
+
+    const renderValidationIcon = () => {
+        if (!isRealtimeValidationEnabled) return null;
+        const { status, error } = fieldValidationState;
+        switch (status) {
+            case 'validating': return <FaSpinner className="spin-icon validation-icon validating" title="Validating..." />;
+            case 'valid': return <FaCheckCircle className="validation-icon valid" title="Valid" />;
+            case 'invalid': return <FaExclamationCircle className="validation-icon invalid" title={error} />;
+            default: return null;
+        }
+    };
 
-  const togglePasswordVisibility = () => {
-      setIsPasswordVisible(prevState => !prevState);
-  };
-  useEffect(() => {
-    if (value !== null) validate();
-  }, [value]);
-  return (
-    <>
-        <div
-            className={cn({
-                field: true,
-                flex: true,
-                "field-text": !mult,
-                "field-multiline": mult,
-            })}
-        >
-            {label && (
-                <label
-                    contentEditable={editable}
-                    className={cn({help: !!help, 'flex-1': true})}
-                    htmlFor={id}
-                    {...labelProps}
-                >
-                    {label}
-                    {required ? (
-                        <span className="mandatory" contentEditable={false}>
+    return (
+        <>
+            <div
+                className={cn({
+                    field: true,
+                    flex: true,
+                    "field-text": !mult,
+                    "field-multiline": mult,
+                    'is-validating': fieldValidationState.status === 'validating',
+                    'is-valid': fieldValidationState.status === 'valid',
+                    'is-invalid': hasErrors && fieldValidationState.status === 'invalid',
+                })}
+                {...(showTooltipErrors && hasErrors && {
+                    'data-tooltip-id': "tooltipField",
+                    'data-tooltip-html': errorsHtml
+                })}
+            >
+                {label && (
+                    <label
+                        contentEditable={editable}
+                        className={cn({ help: !!help, 'flex-1': true })}
+                        htmlFor={id}
+                        {...labelProps}
+                    >
+                        {label}
+                        {required ? (
+                            <span className="mandatory" contentEditable={false}>
                 *
               </span>
-                    ) : (
-                        ""
-                    )}
-                </label>
-            )}
-
-            {help &&<div className="flex help">{help}</div>}
+                        ) : (
+                            ""
+                        )}
+                    </label>
+                )}
 
-            {mult && (
-                <textarea
-                    ref={inputRef}
-                    aria-required={required}
-                    aria-readonly={readOnly}
-                    readOnly={readOnly}
-                    placeholder={placeholder}
-                    id={id}
-                    name={name}
-                    value={value || ""}
-                    rows={8}
-                    onChange={handleChange}
-                    minLength={minlength}
-                    maxLength={maxlength}
-                    {...rest}
-                ></textarea>
-            )}
+                {help && <div className="flex help">{help}</div>}
 
-            {before}
-            <div className={"flex flex-1 flex-no-gap flex-start"} style={{ position: 'relative' }}>
-                {!mult && (
-                    <input
+                {mult && (
+                    <textarea
                         ref={inputRef}
                         aria-required={required}
                         aria-readonly={readOnly}
                         readOnly={readOnly}
-                        type={isPasswordField ? (isPasswordVisible ? 'text' : 'password') : (searchable ? "search" : (type || "text"))}
                         placeholder={placeholder}
-                        title={placeholder}
-                        alt={placeholder}
                         id={id}
                         name={name}
                         value={value || ""}
+                        rows={8}
                         onChange={handleChange}
                         minLength={minlength}
                         maxLength={maxlength}
-                        required={required}
-                        style={isPasswordField ? { paddingRight: '40px' } : {}}
-                        {...otherRest}
-                    />
-                )}
-                {isPasswordField && !mult && (
-                    <button type="button" onClick={togglePasswordVisibility} className="password-toggle-icon" style={{position: 'absolute', right: '10px', top: '50%', transform: 'translateY(-50%)', display: 'flex', alignItems: 'center'}}>
-                        {isPasswordVisible ? <FaEyeSlash /> : <FaEye />}
-                    </button>
+                        {...rest}
+                    ></textarea>
                 )}
-                {after}
+
+                {before}
+                <div className={"flex flex-1 flex-no-gap flex-start"} style={{ position: 'relative' }}>
+                    {!mult && (
+                        <input
+                            ref={inputRef}
+                            aria-required={required}
+                            aria-readonly={readOnly}
+                            readOnly={readOnly}
+                            type={isPasswordField ? (isPasswordVisible ? 'text' : 'password') : (searchable ? "search" : (type || "text"))}
+                            placeholder={placeholder}
+                            title={placeholder}
+                            alt={placeholder}
+                            id={id}
+                            name={name}
+                            value={value || ""}
+                            onChange={handleChange}
+                            minLength={minlength}
+                            maxLength={maxlength}
+                            required={required}
+                            {...otherRest}
+                        />
+                    )}
+                    <div className="field-icons-wrapper" style={{ position: 'absolute', right: '10px', top: '50%', transform: 'translateY(-50%)', display: 'flex', alignItems: 'center', gap: '5px' }}>
+                        {renderValidationIcon()}
+                        {isPasswordField && !mult && (
+                            <button type="button" onClick={togglePasswordVisibility} className="password-toggle-icon">
+                                {isPasswordVisible ? <FaEyeSlash /> : <FaEye />}
+                            </button>
+                        )}
+                    </div>
+                    {after}
+                </div>
             </div>
-        </div>
-        {errors.length > 0 && (
-            <ul className="error">
-          {errors.map((e, key) => (
-            <li key={key} aria-live="assertive" role="alert">
-              {e}
-            </li>
-          ))}
-        </ul>
-      )}
-    </>
-  );
+            {!showTooltipErrors && hasErrors && (
+                <ul className="error">
+                    {combinedErrors.map((e, key) => (
+                        <li key={key} aria-live="assertive" role="alert">
+                            {e}
+                        </li>
+                    ))}
+                </ul>
+            )}
+        </>
+    );
 });
 
 TextField.displayName = "TextField";
@@ -252,56 +379,103 @@ const EmailField = forwardRef(
       placeholder,
       help,
       editable,
-      defaultValue,
+      value, // Changed from defaultValue to be a controlled component
       required,
       readOnly,
       onChange,
       minlength,
       maxlength,
-      fieldValidated,
+      validation,
+      showErrors = true,
+      showTooltipErrors = false,
     },
     ref,
   ) => {
     const id = "emailfield-" + uniqid();
     const [errors, setErrors] = useState([]);
-    const [value, setValue] = useState(defaultValue || null);
+    const inputRef = useRef();
+
+    // --- Real-time validation logic ---
+    const {
+        validate: realtimeValidate,
+        validationState
+    } = useRealtimeValidation(
+        validation?.modelName,
+        validation?.docId
+    );
+    const isRealtimeValidationEnabled = !!validation?.modelName;
+    const fieldValidationState = validationState[name] || { status: 'idle' };
+
     const validate = () => {
       const errs = [];
-      if (required && (!value || value.trim() === "")) {
+      if (required && (!value || String(value).trim() === "")) {
         errs.push("Field required");
       }
-      if (minlength !== undefined && minlength > 0 && value && value.trim().length < minlength) {
+      if (minlength !== undefined && minlength > 0 && value && String(value).trim().length < minlength) {
         errs.push("Value length must be >= to " + minlength);
       }
-      if (maxlength !== undefined && maxlength > 0 && value && value.trim().length > maxlength) {
+      if (maxlength !== undefined && maxlength > 0 && value && String(value).trim().length > maxlength) {
         errs.push("Value length must be <= to " + maxlength);
       }
-
-    if (value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
-        errs.push("Invalid email");
+      if (value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
+          errs.push("Invalid email");
       }
-      setErrors(errs);
-      return !errs.length;
+      if (isRealtimeValidationEnabled && fieldValidationState.status === 'invalid') {
+          errs.push(fieldValidationState.error);
+      }
+      if (showErrors) setErrors(errs);
+      return !errs.length && fieldValidationState.status !== 'invalid';
     };
+
     useEffect(() => {
-      if (value !== null) validate();
+      if (value !== null && !isRealtimeValidationEnabled) validate();
     }, [value]);
-    useEffect(() => {
-      if (fieldValidated) validate();
-    }, [fieldValidated]);
+
+    const combinedErrors = [...errors];
+    if (isRealtimeValidationEnabled && fieldValidationState.status === 'invalid' && fieldValidationState.error && !combinedErrors.includes(fieldValidationState.error)) {
+        combinedErrors.push(fieldValidationState.error);
+    }
+    const hasErrors = combinedErrors.length > 0;
+    const errorsHtml = hasErrors ? `<ul>${combinedErrors.map(e => `<li>${String(e).replace(/</g, '&lt;').replace(/>/g, '&gt;')}</li>`).join('')}</ul>` : '';
+
     useImperativeHandle(ref, () => ({
+      ref: inputRef.current,
       validate,
       getValue: () => value,
     }));
+
     const handleChange = (e) => {
-      setValue(e.target.value);
       if (onChange) {
         onChange(e);
       }
+      if (isRealtimeValidationEnabled) {
+          realtimeValidate(name, e.target.value);
+      }
     };
+
+    const renderValidationIcon = () => {
+        if (!isRealtimeValidationEnabled) return null;
+        const { status, error } = fieldValidationState;
+        switch (status) {
+            case 'validating': return <FaSpinner className="spin-icon validation-icon validating" title="Validating..." />;
+            case 'valid': return <FaCheckCircle className="validation-icon valid" title="Valid" />;
+            case 'invalid': return <FaExclamationCircle className="validation-icon invalid" title={error} />;
+            default: return null;
+        }
+    };
+
     return (
       <>
-        <div className={cn({ field: true, "field-email": true })}>
+        <div className={cn({ field: true, "flex": true, "field-email": true,
+            'is-validating': fieldValidationState.status === 'validating',
+            'is-valid': fieldValidationState.status === 'valid',
+            'is-invalid': hasErrors && fieldValidationState.status === 'invalid',
+        })}
+             {...(showTooltipErrors && hasErrors && {
+                 'data-tooltip-id': "tooltipField",
+                 'data-tooltip-html': errorsHtml
+             })}
+        >
           <label
             contentEditable={editable}
             className={cn({ help: !!help })}
@@ -317,27 +491,33 @@ const EmailField = forwardRef(
               ""
             )}
           </label>
-          <input
-            aria-required={required}
-            aria-readonly={readOnly}
-            readOnly={readOnly}
-            type="email"
-            placeholder={placeholder}
-            id={id}
-            name={name}
-            value={value || ""}
-            onChange={handleChange}
-            minLength={minlength}
-            maxLength={maxlength}
-          />
+            <div className={"flex flex-1 flex-no-gap flex-start"} style={{ position: 'relative' }}>
+              <input
+                ref={inputRef}
+                aria-required={required}
+                aria-readonly={readOnly}
+                readOnly={readOnly}
+                type="email"
+                placeholder={placeholder}
+                id={id}
+                name={name}
+                value={value || ""}
+                onChange={handleChange}
+                minLength={minlength}
+                maxLength={maxlength}
+              />
+                <div className="field-icons-wrapper" style={{position: 'absolute', right: '10px', top: '50%', transform: 'translateY(-50%)', display: 'flex', alignItems: 'center', gap: '5px'}}>
+                    {renderValidationIcon()}
+                </div>
+            </div>
         </div>
-        {errors.length > 0 && (
+        {!showTooltipErrors && hasErrors && (
           <ul className="error">
-            {errors.map((e, key) => (
-              <li key={key} aria-live="assertive" role="alert">
-                {e}
-              </li>
-            ))}
+              {combinedErrors.map((e, key) => (
+                  <li key={key} aria-live="assertive" role="alert">
+                      {e}
+                  </li>
+              ))}
           </ul>
         )}
       </>
@@ -365,6 +545,9 @@ const NumberField = forwardRef(
       max,
       step,
         unit,
+        validation,
+        showErrors = true,
+        showTooltipErrors = false,
         ...rest
     },
     ref,
@@ -372,6 +555,14 @@ const NumberField = forwardRef(
     const id = "numberfield-" + uniqid();
     const [errors, setErrors] = useState([]);
     const inputRef = useRef();
+
+      const {
+          validate: realtimeValidate,
+          validationState
+      } = useRealtimeValidation(validation?.modelName, validation?.docId);
+      const isRealtimeValidationEnabled = !!validation?.modelName;
+      const fieldValidationState = validationState[name] || { status: 'idle' };
+
     const validate = () => {
       const errs = [];
       if (required && value === undefined) {
@@ -389,25 +580,62 @@ const NumberField = forwardRef(
       if ((max || max === 0) && (value || value === 0) && max < value) {
         errs.push("Value > to " + max);
       }
-      setErrors(errs);
-      return !errs.length;
+        if (isRealtimeValidationEnabled && fieldValidationState.status === 'invalid') {
+            errs.push(fieldValidationState.error);
+        }
+      if(showErrors) setErrors(errs);
+      return !errs.length && fieldValidationState.status !== 'invalid';
     };
+
     useEffect(() => {
-      if (value !== null) validate();
+      if (value !== null && !isRealtimeValidationEnabled) validate();
     }, [value]);
+
+    const combinedErrors = [...errors];
+    if (isRealtimeValidationEnabled && fieldValidationState.status === 'invalid' && fieldValidationState.error && !combinedErrors.includes(fieldValidationState.error)) {
+        combinedErrors.push(fieldValidationState.error);
+    }
+    const hasErrors = combinedErrors.length > 0;
+    const errorsHtml = hasErrors ? `<ul>${combinedErrors.map(e => `<li>${String(e).replace(/</g, '&lt;').replace(/>/g, '&gt;')}</li>`).join('')}</ul>` : '';
+
     useImperativeHandle(ref, () => ({
       ref: inputRef.current,
       validate,
       getValue: () => value,
     }));
+
     const handleChange = (e) => {
       if (onChange) {
         onChange(e);
       }
+        if (isRealtimeValidationEnabled) {
+            realtimeValidate(name, e.target.value);
+        }
     };
+
+      const renderValidationIcon = () => {
+          if (!isRealtimeValidationEnabled) return null;
+          const { status, error } = fieldValidationState;
+          switch (status) {
+              case 'validating': return <FaSpinner className="spin-icon validation-icon validating" title="Validating..." />;
+              case 'valid': return <FaCheckCircle className="validation-icon valid" title="Valid" />;
+              case 'invalid': return <FaExclamationCircle className="validation-icon invalid" title={error} />;
+              default: return null;
+          }
+      };
+
     return (
       <>
-        <div className={cn({ field: true, "field-number": true })}>
+        <div className={cn({ field: true, "field-number": true,
+            'is-validating': fieldValidationState.status === 'validating',
+            'is-valid': fieldValidationState.status === 'valid',
+            'is-invalid': hasErrors && fieldValidationState.status === 'invalid',
+        })}
+             {...(showTooltipErrors && hasErrors && {
+                 'data-tooltip-id': "tooltipField",
+                 'data-tooltip-html': errorsHtml
+             })}
+        >
 
             <div className="flex flex-1">
                 {label && (
@@ -428,36 +656,39 @@ const NumberField = forwardRef(
                     </label>
                 )}
                 {help && <div className="flex help">{help}</div>}
-                <div className={"flex flex-1 flex-no-wrap flex-mini-gap"}>
-          <input
-            ref={inputRef}
-            aria-required={required}
-            aria-readonly={readOnly}
-            readOnly={readOnly}
-            type="number"
-            placeholder={placeholder}
-            id={id}
-            name={name}
-            value={value || ""}
-            onChange={handleChange}
-            minLength={minlength}
-            maxLength={maxlength}
-            min={min}
-            max={max}
-            step={step}
-            {...rest}
-          />
-            {unit && <span className="unit">{unit}</span>}
+                <div className={"flex flex-1 flex-no-wrap flex-mini-gap flex-end"} style={{ position: 'relative' }}>
+                  <input
+                    ref={inputRef}
+                    aria-required={required}
+                    aria-readonly={readOnly}
+                    readOnly={readOnly}
+                    type="number"
+                    placeholder={placeholder}
+                    id={id}
+                    name={name}
+                    value={value ?? ""}
+                    onChange={handleChange}
+                    minLength={minlength}
+                    maxLength={maxlength}
+                    min={min}
+                    max={max}
+                    step={step}
+                    {...rest}
+                  />
+                    <div className="field-icons-wrapper" style={{position: 'absolute', right: unit ? '40px' : '10px', top: '50%', transform: 'translateY(-50%)', display: 'flex', alignItems: 'center', gap: '5px'}}>
+                        {renderValidationIcon()}
+                    </div>
+                    {unit && <span className="unit">{unit}</span>}
                 </div>
         </div>
         </div>
-        {errors.length > 0 && (
+        {!showTooltipErrors && hasErrors && (
           <ul className="error">
-            {errors.map((e, key) => (
-              <li key={key} aria-live="assertive" role="alert">
-                {e}
-              </li>
-            ))}
+              {combinedErrors.map((e, key) => (
+                  <li key={key} aria-live="assertive" role="alert">
+                      {e}
+                  </li>
+              ))}
           </ul>
         )}
       </>
@@ -1178,7 +1409,7 @@ export const FilterStringField = ({ field, onChangeFilterValue, filterValues, se
 
             if (currentValue === '') {
                 // No need to call setFilterValues here as it's done immediately in handleChange
-                onChangeFilterValue(field, field.multiple ? [] : undefined, true);
+                onChangeFilterValue(field, field.multiple ? [] : {}, true);
                 return;
             }
 
@@ -1363,7 +1594,7 @@ export const FilterField = ({advanced,model, reversed, field, active, onChangeFi
         }
         return <FaPencil />
     }
-    return <th key={field.name} className={`form filter-field`} style={{backgroundColor: field.color, color: !field.color ||isLightColor(field.color) ? 'black': "white"}}>
+    return <th key={`filter_${field.name}`} className={`form filter-field`} style={{backgroundColor: field.color, color: !field.color ||isLightColor(field.color) ? 'black': "white"}}>
         <div className="flex flex-centered flex-mini-gap flex-row">
             <div className="flex flex-1 flex-mini-gap flex-no-wrap">
                 {renderIconFromType(field)}
@@ -1424,101 +1655,136 @@ export const PhoneField = ({name, value, onChange}) => {
     );
 }
 
-export const ModelField = ({field, disableable=false, showModel=true, value, fieldValue, fields=false, onChange}) => {
+export const ModelField = ({field, formData, disableable=false, showModel=true, value, fields=false, onChange, ...rest}) => {
     const {models} = useModelContext();
     const {me} = useAuthContext();
-    const {t} = useTranslation()
+    const {t} = useTranslation();
     const [checked, setChecked] = useState(true);
 
-    // Trouver le modèle correspondant à la valeur
-    const selectedModel = models.find(m => m.name === value && m._user === me?.username);
+    // --- LOGIQUE AMÉLIORÉE POUR DÉTERMINER LE MODÈLE CIBLE ET LES VALEURS ---
+    const hasTargetModel = !!field?.targetModel;
+    let modelValue, fieldValue, targetModelName;
+
+    if (hasTargetModel) {
+        // Le modèle est déterminé par un autre champ. La valeur de ce champ est juste le nom du champ (string).
+        if (typeof field.targetModel === 'string' && field.targetModel.startsWith('$')) {
+            const dynamicFieldName = field.targetModel.substring(1);
+            targetModelName = formData?.[dynamicFieldName] || null;
+        } else {
+            targetModelName = field.targetModel;
+        }
+        modelValue = targetModelName;
+        fieldValue = value;
+    } else {
+        // La valeur de ce champ contient le modèle et/ou le champ.
+        if (fields) { // fields=true: on sélectionne un modèle ET un champ. La valeur est un objet.
+            targetModelName = value?.model;
+            modelValue = value?.model;
+            fieldValue = value?.field;
+        } else { // fields=false: on sélectionne seulement un modèle. La valeur est une chaîne.
+            targetModelName = value;
+            modelValue = value;
+            fieldValue = undefined;
+        }
+    }
+
+    const selectedModel = models.find(m => m.name === targetModelName); // Note: Removed user check for broader compatibility with system models
 
     // Préparer les options pour les champs du modèle
     const fieldOptions = selectedModel?.fields.map(f => ({
-        label: t(`field_${f.name}`, f.name),
+        label: t(`field_${selectedModel.name}_${f.name}`, f.name),
         value: f.name
     })) || [];
 
-    // Gestion du changement de modèle
+    // Effet pour réinitialiser le champ si le modèle cible change et que le champ actuel n'est plus valide
+    useEffect(() => {
+        if (hasTargetModel) {
+            const isValid = fieldOptions.some(opt => opt.value === fieldValue);
+            if (!isValid) {
+                const newValue = fieldOptions.length > 0 ? fieldOptions[0].value : null;
+                if (fieldValue !== newValue) {
+                    onChange({ name: field.name, value: newValue });
+                }
+            }
+        }
+    }, [targetModelName]); // Se déclenche quand le nom du modèle cible change
+
+    // Gestion du changement de modèle (uniquement si pas de targetModel)
     const handleModelChange = (e) => {
-        const newModel = e.value;
-        const firstField = fieldOptions[0]?.value || null;
+        const newModelName = e.value;
+        const newModel = models.find(m => m.name === newModelName);
+        const firstField = newModel?.fields[0]?.name || null;
 
         if (fields) {
-            onChange({name: field?.name, value: { model: newModel, field: firstField }});
+            onChange({name: field?.name, value: { model: newModelName, field: firstField }});
         } else {
-            onChange({name: field?.name, value: newModel});
+            onChange({name: field?.name, value: newModelName});
         }
     };
 
     // Gestion du changement de champ
     const handleFieldChange = (e) => {
-        onChange({name: field?.name, value: { model: value, field: e.value }});
+        const newFieldName = e.value;
+        if (hasTargetModel) {
+            onChange({ name: field.name, value: newFieldName });
+        } else {
+            onChange({name: field?.name, value: { model: modelValue, field: newFieldName }});
+        }
     };
 
-    const dis = disableable ? (
-        <CheckboxField
-            checked={checked}
-            onChange={e => {
-                setChecked(e);
-                if (!e) {
-                    onChange({name: field?.name, value: null});
-                }
-            }}
-        />
-    ) : null;
+    const dis = disableable ? (<CheckboxField
+        checked={checked}
+        onChange={e => {
+            setChecked(e);
+            if (!e) {
+                onChange({name: field?.name, value: null});
+            }
+        }}
+    />) : null;
 
     if (!fields) {
-        return (
-            <div className="flex flex-1">
-                {dis}
-                {checked && (
-                    <SelectField
-                        className="flex-1"
-                        value={value}
-                        onChange={handleModelChange}
-                        items={models
-                            .filter(m => m._user === me?.username)
-                            .map(m => ({
-                                label: t(`model_${m.name}`, m.name),
-                                value: m.name
-                            }))
-                        }
-                    />
-                )}
-            </div>
-        );
+        return (<div className="flex flex-1">
+            {dis}
+            {checked && (<SelectField
+                className="flex-1"
+                value={modelValue}
+                onChange={handleModelChange}
+                items={models
+                    .filter(m => m._user === me?.username) // Keep user filter for selection
+                    .map(m => ({
+                        label: t(`model_${m.name}`, m.name),
+                        value: m.name
+                    }))}
+                {...rest}
+            />)}
+        </div>);
     }
 
-    return (
-        <div className="flex flex-1">
-            {dis}
-            {checked && (
-                <div className="flex flex-stretch" key={field?.name ?? 'def'}>
-                    {showModel && (
-                        <SelectField
-                            className="flex-1"
-                            value={value}
-                            onChange={handleModelChange}
-                            items={models
-                                .filter(m => m._user === me?.username)
-                                .map(m => ({
-                                    label: t(`model_${m.name}`, m.name),
-                                    value: m.name
-                                }))
-                            }
-                        />
-                    )}
-                    <SelectField
-                        className="flex-1"
-                        value={fieldValue || (fieldOptions[0]?.value || null)}
-                        onChange={handleFieldChange}
-                        items={fieldOptions}
-                    />
-                </div>
-            )}
-        </div>
-    );
+    return (<div className="flex flex-1">
+        {dis}
+        {checked && (<div className="flex flex-stretch" key={field?.name ?? 'def'}>
+            {showModel && (<SelectField
+                className="flex-1"
+                value={modelValue}
+                onChange={handleModelChange}
+                items={models
+                    .filter(m => m._user === me?.username) // Keep user filter for selection
+                    .map(m => ({
+                        label: t(`model_${m.name}`, m.name),
+                        value: m.name
+                    }))}
+                disabled={hasTargetModel} // Le sélecteur de modèle est désactivé si le modèle est piloté par un autre champ
+            />)}
+            <SelectField
+                className="flex-1"
+                value={fieldValue}
+                onChange={handleFieldChange}
+                items={fieldOptions}
+                disabled={!targetModelName}
+                {...rest}
+            />
+        </div>)}
+    </div>);
 };
 
 // Fonction pour obtenir le composant icône par son nom
@@ -1589,47 +1855,49 @@ export const IconField = ({name, label, value, disabled, onChange, className, ..
         )}
     </div>
 };
-export const ColorField = ({name, label, value, disabled, onChange, className, ...rest}) => {
-    // 1. État interne pour une réactivité immédiate de l'interface.
-    const [internalValue, setInternalValue] = useState(value);
-
-    // 2. On mémoïze le gestionnaire d'événements avec debounce pour éviter de le recréer à chaque rendu.
-    const debouncedOnChange = useCallback(
-        debounce((newValue) => {
-            // On notifie le parent du changement après un court délai.
-            onChange?.({ name, value: newValue });
-        }, 200), // Un délai de 200ms est confortable pour un sélecteur de couleur.
-        [onChange, name] // Dépendances de useCallback
-    );
 
-    // 3. Effet pour synchroniser l'état interne si la prop `value` du parent change.
-    useEffect(() => {
-        if (value !== internalValue) {
-            setInternalValue(value);
+export const ColorField = ({ name, label, value, disabled, onChange, className, ...rest }) => {
+    const [displayColorPicker, setDisplayColorPicker] = useState(false);
+
+    const handleClick = () => {
+        if (!disabled) {
+            setDisplayColorPicker(!displayColorPicker);
         }
-    }, [value]);
+    };
 
-    const handleChange = (e) => {
-        const newValue = e.target.value;
-        // Met à jour l'état interne instantanément pour que l'input soit réactif.
-        setInternalValue(newValue);
-        // Appelle la fonction "debounced" pour notifier le parent.
-        debouncedOnChange(newValue);
+    const handleClose = () => {
+        setDisplayColorPicker(false);
+    };
+
+    const handleChange = (color) => {
+        // react-color nous donne un objet avec tous les formats.
+        // On utilise tinycolor pour le convertir au format canonique attendu par le backend (#RRGGBBAA).
+        const newColor = tinycolor(color.rgb); // color.rgb contient {r, g, b, a}
+        onChange?.({ name, value: newColor.toHex8String().toUpperCase() });
+    };
+
+    const color = tinycolor(value || '#FFFFFFFF');
+    const swatchStyle = {
+        background: color.toRgbString(),
+        width: '100%',
+        minWidth: '52px',
+        height: '36px',
+        borderRadius: '2px',
+        border: '1px solid #ccc',
+        cursor: disabled ? 'not-allowed' : 'pointer',
     };
 
     return (
-        <div className={`flex flex-1  flex-no-wrap ${className || ''}`}>
-            {label && (<label className="flex-1">{label}</label>)}
-            <div className="flex flex-1 flex-no-wrap"><input
-                disabled={disabled}
-                type="color"
-                // L'input est maintenant contrôlé par notre état interne.
-                value={internalValue || '#FFFFFF'}
-                onChange={handleChange}
-                {...rest}
-            />
-            <span className="color-value">{internalValue || '#FFFFFF'}</span>
-            </div>
+        <div className={`flex flex-1 flex-no-wrap ${className || ''}`}>
+            {label && (<label className="flex-1 mb-1">{label}</label>)}
+            <div style={swatchStyle} onClick={handleClick}>&nbsp;</div>
+            <div className={"flex-1"}>{value}</div>
+            {displayColorPicker ? (
+                <div style={{ position: 'absolute', zIndex: '2' }}>
+                    <div style={{ position: 'fixed', top: '0px', right: '0px', bottom: '0px', left: '0px' }} onClick={handleClose} />
+                    <SketchPicker color={value || '#FFFFFFFF'} onChange={handleChange} />
+                </div>
+            ) : null}
         </div>
     );
 };
@@ -1717,7 +1985,7 @@ export const DurationField = forwardRef(({ value, onChange, name, label, help, r
 });
 DurationField.displayName = "DurationField";
 
-export const CodeField = ({name, label, language, value, disabled, onChange}) => {
+export const CodeField = ({name, label, language, defaultValue, value, disabled, onChange}) => {
     const u = name || uniqid();
     const [currentEditor, setEditor] = useState(null);
 
@@ -1735,12 +2003,13 @@ export const CodeField = ({name, label, language, value, disabled, onChange}) =>
                         onChange({name, value: code});
                     } catch (e) {
                     }
-                } else
+                } else {
                     onChange({name, value: e});
+                }
             }}
             height="300px"
         /></div> : <div className="code"><SyntaxHighlighter
-            language={language || "javascript"} theme={docco}>{value}</SyntaxHighlighter></div>
+            language={language || "javascript"}>{value}</SyntaxHighlighter></div>
         }</>
 }