data-primals-engine 1.0.11 → 1.1.0

package/client/src/KPIWidget.jsx

@@ -0,0 +1,139 @@
+import React from 'react';
+import { useQuery } from 'react-query';
+import * as FaIcons from 'react-icons/fa'; // Importer toutes les icônes Fa
+import * as Fa6Icons from 'react-icons/fa6'; // Importer Fa6
+import { FaInfo, FaTimes } from 'react-icons/fa';
+import { isLightColor } from "data-primals-engine/core"; // Pour le bouton supprimer
+import { Tooltip } from 'react-tooltip';
+
+// Fonction pour récupérer la valeur calculée d'un KPI (MODIFIÉE)
+const fetchKpiValue = async (kpiId) => {
+    if (!kpiId) return null;
+    const response = await fetch(`/api/kpis/calculate/${kpiId}`);
+    if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        throw new Error(errorData.error || `Network response was not ok (${response.status})`);
+    }
+    const data = await response.json();
+    if (!data.success) {
+        throw new Error(data.error || 'Failed to calculate KPI value');
+    }
+    // Retourner l'objet complet { value, totalCount }
+    return { value: data.value, totalCount: data.totalCount };
+};
+
+// Fonction pour obtenir le composant icône par son nom
+const getIconComponent = (iconName) => {
+    if (!iconName) return null;
+    const IconComponent = FaIcons[iconName] || Fa6Icons[iconName];
+    return IconComponent ? <IconComponent /> : null; // Retourne l'élément React ou null
+};
+
+
+const KPIWidget = ({ kpiDefinition, onRemove }) => {
+    // Destructurer les nouvelles propriétés de kpiDefinition
+    const {
+        _id,
+        name,
+        unit,
+        description,
+        icon: iconName,
+        color,
+        showTotal,        // Nouveau
+        showPercentTotal  // Nouveau
+    } = kpiDefinition;
+
+    // Utiliser useQuery pour récupérer l'objet { value, totalCount }
+    const { data: kpiData, isLoading, error } = useQuery(
+        ['kpiValue', _id], // Clé de requête unique par ID de KPI
+        () => fetchKpiValue(_id),
+        {
+            staleTime: 5 * 60 * 1000, // Garder la valeur fraîche pendant 5 minutes
+            refetchInterval: 5 * 60 * 1000, // Rafraîchir toutes les 5 minutes
+            enabled: !!_id, // N'exécuter que si _id est défini
+            refetchOnWindowFocus: false
+        }
+    );
+
+    let displayValue = '...';
+    if (isLoading) {
+        displayValue = <span className="kpi-loading">Chargement...</span>;
+    } else if (error) {
+        displayValue = <span className="kpi-error" title={error.message}>Erreur</span>; // Ajout title pour debug
+        console.error(`KPI Error (${name || _id}):`, error);
+    } else if (kpiData !== undefined && kpiData !== null) {
+        const value = kpiData.value;
+        const totalCount = kpiData.totalCount;
+        const valueExists = value !== undefined && value !== null;
+        const totalExists = totalCount !== undefined && totalCount !== null;
+
+        // Formatage de la valeur principale (si elle existe)
+        const formattedValue = valueExists
+            ? (typeof value === 'number' ? value.toLocaleString() : value)
+            : '-';
+
+        // 1. Priorité au pourcentage si demandé et possible
+        if (showTotal && valueExists && totalExists) {
+            const formattedTotal = typeof totalCount === 'number' ? totalCount.toLocaleString() : totalCount;
+            displayValue = (
+                <span className="kpi-value-with-total">
+                    <span className="kpi-main-value">{formattedValue}</span>
+                    <span className="kpi-separator"> / </span>
+                    <span className="kpi-total-value">{formattedTotal}</span>
+                    {/* On peut ajouter l'unitci si pertinent */}
+                    {unit ? <span className="kpi-unit-suffix"> {unit}</span> : ''}
+                    {showPercentTotal && totalCount !== 0 && (<span className="kpi-percentage">&nbsp;
+                        ({((value / totalCount) * 100).toFixed(1)}%)
+                    </span>)}
+                </span>
+            );
+        } else if (valueExists) {
+            displayValue = (
+                <span className="kpi-value-simple">
+                    <span className="kpi-value-number">{formattedValue}</span>
+                    {unit ? <span className="kpi-unit-suffix"> {unit}</span> : ''}
+                    {showPercentTotal && totalCount !== 0 && (<span className="kpi-percentage">&nbsp;
+                        ({((value / totalCount) * 100).toFixed(1)}%)
+                    </span>)}
+                </span>
+            );
+            // 4. Cas où la valeur n'existe pas (mais pas d'erreur/chargement)
+        } else {
+            displayValue = <span className="kpi-value-nodata">-</span>;
+        }
+
+    } else {
+        displayValue = <span className="kpi-value-nodata">-</span>; // Cas où kpiData est null/undefined
+    }
+
+
+    const IconComponent = getIconComponent(iconName);
+
+    // Style pour la couleur de fond
+    const widgetStyle = color ? { backgroundColor: color, color: isLightColor(color) ? 'black' : 'white' } : {};
+
+    return (
+        <div className={`kpi-widget ${isLoading ? 'loading' : ''} ${error ? 'error' : ''}`} style={widgetStyle}>
+            <button className="kpi-remove-button" onClick={onRemove} title="Retirer ce KPI">
+                <FaTimes />
+            </button>
+
+            {IconComponent && <div className="kpi-icon">{IconComponent}</div>}
+            <div className="kpi-content">
+                <div className="kpi-title">
+                    <div className={"kpi-name"}>{name.value || 'KPI Title'}</div>
+                    {description && ( // Condition pour afficher l'icône info seulement si description existe
+                        <div className="kpi-info" data-tooltip-id={`tooltip-desc-${_id}`} data-tooltip-content={description.value}>
+                            <FaInfo />
+                        </div>
+                    )}
+                </div>
+                <div className="kpi-value">{displayValue}</div>
+            </div>
+            {/* Le Tooltip doit être unique par widget si plusieurs descriptions existent */}
+            {description && <Tooltip id={`tooltip-desc-${_id}`} />}
+        </div>
+    );
+};
+
+export default KPIWidget;

package/client/src/KanbanCard.jsx

@@ -0,0 +1,92 @@
+// client/src/KanbanCard.jsx
+
+import React from 'react';
+import {useTranslation} from "react-i18next";
+import {useModelContext} from "./contexts/ModelContext.jsx";
+import {getDataAsString} from "data-primals-engine/data";
+
+
+const KanbanCard = ({ card, model, subItemsField }) => {
+
+    const {models} = useModelContext()
+    const subItems = subItemsField && card[subItemsField] ? card[subItemsField] : [];
+    const tr = useTranslation();
+    // Logique du Drag & Drop natif pour la carte
+
+    const lang = (tr.i18n.resolvedLanguage || tr.i18n.language).split(/[-_]/)?.[0];
+
+    const getfield = (model, data) => {
+        const v = getDataAsString(model, data, tr, models);
+        if(!v){
+            return model.fields.map((field) => {
+                    if( field.type === 'array' && field.itemsType === 'file'){
+                        return card[field.name].map(it => {
+                            const r = `
+                            <strong>filename</strong> : ${it.filename}<br />
+                            <strong>guid</strong> : ${it.guid}<br />
+                            <strong>type</strong> : ${it.mimeType}<br />
+                            <strong>size</strong> : ${it.size} bytes<br />
+                            <strong>timestamp</strong> : ${it.timestamp ? new Date(it.timestamp).toLocaleString(lang) : ''}
+                        `;
+                            return <a key={it.guid} href={`/resources/${it.guid}`} target="_blank"
+                                      data-tooltip-id={"tooltipFile"} data-tooltip-html={r}
+                                      rel="noopener noreferrer" onClick={(e) => click(e, i)}><img
+                                className="image" src={`/resources/${it.guid}`}
+                                alt={`${it.name} (${it.guid})`}/></a>
+                        });
+                    } else if(field.type === 'file'){
+                        const it = card[field.name];
+                        const r = `
+                            <strong>filename</strong> : ${it.filename}<br />
+                            <strong>guid</strong> : ${it.guid}<br />
+                            <strong>type</strong> : ${it.mimeType}<br />
+                            <strong>size</strong> : ${it.size} bytes<br />
+                            <strong>timestamp</strong> : ${it.timestamp ? new Date(it.timestamp).toLocaleString(lang) : ''}
+                        `;
+                        return <a key={it.guid} href={`/resources/${it.guid}`} target="_blank"
+                                  data-tooltip-id={"tooltipFile"} data-tooltip-html={r}
+                                  rel="noopener noreferrer" onClick={(e) => click(e, i)}><img
+                            className="image" src={`/resources/${it.guid}`}
+                            alt={`${it.name} (${it.guid})`}/></a>
+                    }
+                    return '';
+            }).filter(Boolean)[0];
+        }
+        return v;
+    }
+
+    return (
+        <div
+            className="kanban-card"
+        >
+            <div className="kanban-card-title">
+                {getfield(model, card)}
+            </div>
+            {subItems.length > 0 && (
+                <div className="kanban-card-subitems">
+                    {subItems.map((subItem, index) => {
+                        const it = subItem;
+                        const v = getDataAsString(model, subItem, tr, models);
+                        if (!v) {
+                            const r = `
+                            <strong>filename</strong> : ${it.filename}<br />
+                            <strong>guid</strong> : ${it.guid}<br />
+                            <strong>type</strong> : ${it.mimeType}<br />
+                            <strong>size</strong> : ${it.size} bytes<br />
+                            <strong>timestamp</strong> : ${it.timestamp ? new Date(it.timestamp).toLocaleString(lang) : ''}
+                        `;
+                            return <a key={it.guid} href={`/resources/${it.guid}`} target="_blank"
+                                      data-tooltip-id={"tooltipFile"} data-tooltip-html={r}
+                                      rel="noopener noreferrer" onClick={(e) => click(e, i)}><img
+                                className="image" src={`/resources/${it.guid}`}
+                                alt={`${it.name} (${it.guid})`}/></a>
+                        }
+                        return '';
+                    })}
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default KanbanCard;

package/client/src/KanbanColumn.jsx

@@ -0,0 +1,29 @@
+// client/src/KanbanColumn.jsx
+
+import React, { useState } from 'react';
+import KanbanCard from './KanbanCard.jsx';
+
+const KanbanColumn = ({ columnId, column, model, subItemsField, handleDrop }) => {
+
+    return (
+        <div className="kanban-column">
+            <h3 className="kanban-column-title">
+                {column.title} ({column.items.length})
+            </h3>
+            <div
+                className={`kanban-column-content`}
+            >
+                {column.items.map((item, index) => (
+                    <KanbanCard
+                        key={item._id}
+                        card={item}
+                        model={model}
+                        subItemsField={subItemsField}
+                    />
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default KanbanColumn;

package/client/src/KanbanConfigModal.jsx

@@ -0,0 +1,115 @@
+// client/src/KanbanConfigModal.jsx
+
+import React, { useState, useMemo, useEffect } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { Dialog } from './Dialog.jsx';
+import Button from './Button.jsx';
+import { SelectField } from './Field.jsx';
+
+const KanbanConfigModal = ({ isOpen, onClose, onSave, model, initialSettings }) => {
+    const { t } = useTranslation();
+
+    // --- MODIFICATION 1 : Simplifier l'initialisation de l'--
+    // On initialise les états à vide. Le useEffect s'occupera de tout.
+    const [groupByField, setGroupByField] = useState('');
+    const [subItemsField, setSubItemsField] = useState('');
+
+    const modelFields = model?.fields || [];
+
+    const groupableFields = useMemo(() => {
+        // ... (pas de changement ici)
+        return modelFields
+            .filter(field => ['select', 'string', 'string_t'].includes(field.type))
+            .map(field => ({
+                label: t(`field_${model.name}_${field.name}`, field.name),
+                value: field.name,
+            }));
+    }, [modelFields, t]);
+
+    const subItemFields = useMemo(() => {
+        // ... (pas de changement ici)
+        return modelFields
+            .filter(field => field.type === 'relation' && field.multiple)
+            .map(field => ({
+                label: t(`field_${field.name}`, { defaultValue: field.name }),
+                value: field.name,
+            }));
+    }, [modelFields, t]);
+
+
+    // --- MODIFICATION 2 : La logique d'initialisation est centralisée ici ---
+    useEffect(() => {
+        // Cet effet s'exécute chaque fois que la modale est ouverte.
+        if (isOpen) {
+            // S'il y a une configuration initiale (mode édition), on charge ses valeurs.
+            if (initialSettings && initialSettings.groupByField) {
+                setGroupByField(initialSettings.groupByField);
+                setSubItemsField(initialSettings.subItemsField || '');
+            } else {
+                // Sinon (nouvelle configuration), on initialise avec les valeurs par défaut.
+                // Cela corrige aussi le bug du premier chargement.
+                setGroupByField(groupableFields[0]?.value || '');
+                setSubItemsField('');
+            }
+        }
+    }, [isOpen, initialSettings, groupableFields]); // On ajoute groupableFields aux dépendances
+
+
+    const handleSave = () => {
+        if (!groupByField) {
+            alert(t('kanban.config.groupByRequired', 'Le champ de regroupement est obligatoire.'));
+            return;
+        }
+        // Pour être sûr de ne pas envoyer une valeur vide si isClearable a été utilisé
+        onSave({ groupByField, subItemsField: subItemsField || '' });
+    };
+
+    // --- MODIFICATION 3 : Supprimer le useEffect fautif ---
+    // useEffect(() => {
+    //     setGroupByField(groupableFields[0]?.value || '');
+    // }, []); // <--- CE BLOC EST SUPPRIMÉ
+
+    if (!isOpen) return null;
+
+    return (
+        <Dialog isModal={true} isClosable={true} onClose={onClose}>
+            <div className="kanban-config-modal p-4">
+                <h2><Trans i18nKey="kanban.config.title">Configurer la vue Kanban</Trans></h2>
+                <p><Trans i18nKey="kanban.config.description">Choisissez le champ qui servira à créer les colonnes du tableau Kanban.</Trans></p>
+
+                <div className="my-4">
+                    <label htmlFor="groupByField" className="block text-sm font-medium text-gray-700"><Trans i18nKey="kanban.config.groupByLabel">Regrouper par</Trans></label>
+                    <SelectField
+                        id="groupByField"
+                        name="groupByField"
+                        value={groupByField}
+                        onChange={e => setGroupByField(e?.value || '')} // Gérer le cas où on efface la sélection
+                        items={groupableFields}
+                        placeholder={t('kanban.config.selectField', 'Sélectionner un champ...')}
+                    />
+                </div>
+
+                <div className="my-4">
+                    <label htmlFor="subItemsField" className="block text-sm font-medium text-gray-700"><Trans i18nKey="kanban.config.subItemsLabel">Champ des sous-éléments (optionnel)</Trans></label>
+                    <SelectField
+                        id="subItemsField"
+                        name="subItemsField"
+                        isClearable={true}
+                        value={subItemsField}
+                        onChange={e => setSubItemsField(e?.value || '')} // Gérer le cas où on efface la sélection
+                        items={subItemFields}
+                        placeholder={t('kanban.config.selectSubItemsField', 'Sélectionner un champ...')}
+                    />
+                    <p className="text-xs text-gray-500 mt-1"><Trans i18nKey="kanban.config.subItemsHint">Sélectionnez un champ de type relation multiple pour afficher des sous-éléments dans les cartes.</Trans></p>
+                </div>
+
+                <div className="flex justify-end gap-2 mt-6">
+                    <Button onClick={onClose} className="btn-secondary"><Trans i18nKey="btns.cancel">Annuler</Trans></Button>
+                    <Button onClick={handleSave} className="btn-primary"><Trans i18nKey="btns.save">Enregistrer</Trans></Button>
+                </div>
+            </div>
+        </Dialog>
+    );
+};
+
+export default KanbanConfigModal;

package/client/src/KanbanView.jsx

@@ -0,0 +1,113 @@
+// client/src/KanbanView.jsx
+
+import React, { useState, useEffect } from 'react';
+import { useQuery, useMutation, useQueryClient } from 'react-query';
+import KanbanColumn from './KanbanColumn.jsx';
+import { useNotificationContext } from "./NotificationProvider.jsx";
+import "./KanbanView.scss";
+import {useAuthContext} from "./contexts/AuthContext.jsx"; // Assurez-vous d'importer le style
+
+/**
+ * Traite les données brutes pour les structurer pour le tableau Kanban.
+ * @param {Array<Object>} data - La liste des éléments du modèle.
+ * @param {string} groupByField - Le nom du champ utilisé pour grouper en colonnes.
+ * @param {Object} model - Le modèle de données complet pour accéder aux options des champs.
+ * @returns {Object} Un objet où les clés sont les valeurs du champ de regroupement.
+ */
+const processDataForKanban = (data, groupByField, model) => {
+    if (!data || !groupByField || !model) {
+        return {};
+    }
+
+    // 1. Grouper les items existants
+    const grouped = data.reduce((acc, item) => {
+        const columnKey = item[groupByField]?.value || item[groupByField] || 'Non classé';
+
+        if (!acc[columnKey]) {
+            acc[columnKey] = {
+                title: columnKey,
+                items: []
+            };
+        }
+        acc[columnKey].items.push(item);
+        return acc;
+    }, {});
+
+    // 2. S'assurer que toutes les colonnes possibles existent, même si elles sont vides.
+    const fieldSchema = model.fields.find(f => f.name === groupByField);
+    if (fieldSchema && fieldSchema.type === 'select' && Array.isArray(fieldSchema.options)) {
+        fieldSchema.options.forEach(option => {
+            const optionValue = typeof option === 'object' ? option.value : option;
+            if (!grouped[optionValue]) {
+                grouped[optionValue] = { title: optionValue, items: [] };
+            }
+        });
+    }
+
+    if (!grouped['Non classé']) {
+        grouped['Non classé'] = { title: 'Non classé', items: [] };
+    }
+
+    return grouped;
+};
+
+const KanbanView = ({ settings, model }) => {
+    const queryClient = useQueryClient();
+    const { addNotification } = useNotificationContext();
+    const { me } = useAuthContext();
+    const [columns, setColumns] = useState({});
+
+    // Requête pour récupérer toutes les données du modèle nécessaires pour le Kanban
+    const { data: kanbanData, isLoading, isError } = useQuery(
+        ['kanbanData', model.name], // Clé de requête unique pour ce modèle
+        () => fetch(`/api/data/search?_user=${me.username}&depth=2`, { // La fonction qui appelle l'API
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            // On demande toutes les données pour le modèle spécifié (limit: 0 pour "tout")
+            body: JSON.stringify({ model: model.name, page: 1 })
+        }).then(res => res.json()),
+        {
+            // N'exécuter la requête que si le modèle et le champ de regroupement sont définis
+            enabled: !!model?.name && !!settings.groupByField,
+            // Extraire le tableau de données de la réponse de l'API
+            select: (data) => data.data || [],
+        }
+    );
+
+    useEffect(() => {
+        if (kanbanData) {
+            const processedColumns = processDataForKanban(kanbanData, settings.groupByField, model);
+            setColumns(processedColumns);
+        }
+    }, [kanbanData, settings.groupByField, model]);
+
+    // Helper pour trouver la carte et sa colonne d'origine dans notre état local
+    const findCardAndSourceColumn = (cardId) => {
+        for (const [columnId, column] of Object.entries(columns)) {
+            const card = column.items.find(item => item._id.toString() === cardId);
+            if (card) {
+                return { card, sourceColumnId: columnId };
+            }
+        }
+        return { card: null, sourceColumnId: null };
+    };
+
+    if (isLoading) return <div>Chargement du Kanban...</div>;
+    if (isError) return <div>Erreur lors du chargement des données.</div>;
+
+    return (
+        <div className="kanban-board">
+            {Object.entries(columns).map(([columnId, column]) => (
+                <KanbanColumn
+                    key={columnId}
+                    columnId={columnId}
+                    column={column}
+                    model={model}
+                    subItemsField={settings.subItemsField}
+                />
+            ))}
+        </div>
+    );
+};
+
+export default KanbanView;

package/client/src/KanbanView.scss

@@ -0,0 +1,107 @@
+// C:/Dev/hackersonline-engine/client/src/KanbanView.scss
+
+// --- Variables pour une personnalisation facile ---
+$board-bg: #f4f5f7;       // Fond gris clair pour le tableau
+$column-bg: #ebecf0;      // Fond légèrement plus foncé pour les colonnes
+$card-bg: #ffffff;        // Fond blanc pour les cartes
+$subitems-bg: #f9f9f9;    // Fond très clair pour la liste des sous-éléments
+$text-color-dark: #172b4d;  // Couleur de texte principale
+$text-color-light: #5e6c84; // Couleur de texte secondaire
+$border-color: #dcdfe4;   // Couleur de bordure subtile
+$primary-color: #007bff;     // Couleur d'accentuation (pour le survol)
+$border-radius: 5px;
+$column-width: 300px;
+$spacing-unit: 8px;
+
+// --- Styles globaux du tableau Kanban ---
+.kanban-board {
+  display: flex;
+  align-items: flex-start; // Aligne les colonnes en haut
+  gap: $spacing-unit * 2;
+  padding: $spacing-unit * 2;
+  background-color: $board-bg;
+  height: calc(100vh - 100px); // Ajustez cette valeur selon la hauteur de votre barre de navigation
+  overflow-x: auto; // Permet le défilement horizontal si les colonnes débordent
+  overflow-y: hidden;
+}
+
+// --- Style pour une Colonne ---
+.kanban-column {
+  flex: 0 0 $column-width; // Empêche la colonne de s'étirer/rétrécir
+  width: $column-width;
+  max-height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: $column-bg;
+  border-radius: $border-radius;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+
+  .kanban-column-title {
+    padding: $spacing-unit * 1.5;
+    font-size: 1rem;
+    font-weight: 600;
+    color: $text-color-dark;
+    border-bottom: 1px solid $border-color;
+  }
+
+  .kanban-column-content {
+    padding: $spacing-unit;
+    overflow-y: auto; // Défilement vertical pour les cartes
+    flex-grow: 1;
+
+    // Stylisation de la barre de défilement
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+    &::-webkit-scrollbar-thumb {
+      background-color: #c4c9d2;
+      border-radius: 3px;
+    }
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+  }
+}
+
+// --- Style pour une Carte ---
+.kanban-card {
+  background-color: $card-bg;
+  border-radius: $border-radius;
+  box-shadow: 0 1px 3px rgba(9, 30, 66, 0.15), 0 0 1px rgba(9, 30, 66, 0.2);
+  padding: $spacing-unit * 1.5;
+  margin-bottom: $spacing-unit;
+  color: $text-color-dark;
+  font-size: 0.9rem;
+  border-left: 4px solid transparent; // Pour une future indication de couleur/priorité
+  transition: box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
+
+  &:hover {
+    box-shadow: 0 4px 8px rgba(9, 30, 66, 0.2), 0 0 1px rgba(9, 30, 66, 0.25);
+    border-left-color: $primary-color; // Couleur bleue au survol
+  }
+
+  .kanban-card-title {
+    font-weight: 500;
+    line-height: 1.3;
+  }
+
+  // --- Style pour la liste des Sous-Cartes ---
+  .kanban-card-subitems {
+    margin-top: $spacing-unit * 1.5;
+    padding: $spacing-unit;
+    background-color: $subitems-bg;
+    border: 1px solid #e9e9e9;
+    border-radius: $border-radius;
+
+    .kanban-card-subitem {
+      padding: $spacing-unit / 2;
+      font-size: 0.85rem;
+      color: $text-color-light;
+      border-bottom: 1px solid #e9e9e9;
+
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+  }
+}

package/client/src/MessageRotator.jsx

@@ -0,0 +1,77 @@
+// src/components/MessageRotator.jsx
+import React from 'react';
+import PropTypes from 'prop-types';
+import './MessageRotator.scss'; // Nous allons créer ce fichier CSS pour l'effet de fondu
+
+/**
+ * Affiche une série de messages les uns après les autres avec un effet de fondu.
+ *
+ * @param {object[]} messages - Tableau d'objets messages. Chaque objet peut contenir:
+ *   - text: (string) Le texte du message.
+ *   - duration: (number, optionnel) Durée d'affichage en millisecondes pour ce message spécifique.
+ * @param {number} defaultDelay - Délai d'affichage par défaut en millisecondes si `duration` n'est pas spécifié pour un message.
+ * @param {number} fadeDuration - Durée de l'effet de fondu en millisecondes.
+ * @param {string} className - Classe CSS optionnelle pour le conteneur principal.
+ */
+const MessageRotator = ({ messages, defaultDelay = 3000, fadeDuration = 500, className = '' }) => {
+    const [currentIndex, setCurrentIndex] = React.useState(0);
+    const [isVisible, setIsVisible] = React.useState(true);
+
+    React.useEffect(() => {
+        if (!messages || messages.length === 0) {
+            return;
+        }
+
+        // Déclenche le fondu entrant
+        setIsVisible(true);
+
+        const currentMessage = messages[currentIndex];
+        const displayDuration = currentMessage.duration || defaultDelay;
+
+        // Timer pour le fondu sortant
+        const fadeOutTimer = setTimeout(() => {
+            setIsVisible(false);
+        }, displayDuration);
+
+        // Timer pour passer au message suivant (après la durée du fondu sortant)
+        const nextMessageTimer = setTimeout(() => {
+            setCurrentIndex((prevIndex) => (prevIndex + 1) % messages.length);
+        }, displayDuration + fadeDuration);
+
+        return () => {
+            clearTimeout(fadeOutTimer);
+            clearTimeout(nextMessageTimer);
+        };
+    }, [currentIndex, messages, defaultDelay, fadeDuration]);
+
+    if (!messages || messages.length === 0) {
+        return null; // Ne rien afficher si pas de messages
+    }
+
+    const messageStyle = {
+        transition: `opacity ${fadeDuration}ms ease-in-out`,
+        opacity: isVisible ? 1 : 0,
+    };
+
+    return (
+        <div className={`message-rotator-container ${className}`}>
+            <div style={messageStyle} className="message-rotator-text">
+                {messages[currentIndex].text}
+            </div>
+        </div>
+    );
+};
+
+MessageRotator.propTypes = {
+    messages: PropTypes.arrayOf(
+        PropTypes.shape({
+            text: PropTypes.string.isRequired,
+            duration: PropTypes.number,
+        })
+    ).isRequired,
+    defaultDelay: PropTypes.number,
+    fadeDuration: PropTypes.number,
+    className: PropTypes.string,
+};
+
+export default MessageRotator;