data-primals-engine 1.5.0 → 1.5.1

package/client/src/DashboardView.jsx

@@ -1,570 +1,655 @@
-import React, {useEffect, useState, useMemo, useRef, useCallback} from 'react';
-import { Trans, useTranslation } from 'react-i18next';
-import KPIWidget from "./KPIWidget.jsx";
-import { FaPencilAlt, FaPlus, FaSpinner, FaTrash } from "react-icons/fa";
-import KPIDialog from "./KPIDialog.jsx";
-import ChartConfigModal from "./ChartConfigModal.jsx";
-import DashboardChart from "./DashboardChart.jsx";
-import AddWidgetTypeModal from './AddWidgetTypeModal.jsx';
-import FlexBuilderModal from './FlexBuilderModal.jsx';
-
-import "./Dashboard.scss"
-import { useQuery, useQueryClient, useMutation } from "react-query";
-import { useAuthContext } from "./contexts/AuthContext.jsx";
-import { DialogProvider } from "./Dialog.jsx";
-import {useModelContext} from "./contexts/ModelContext.jsx";
-import {DashboardFlexViewItem} from "./DashboardFlexViewItem.jsx";
-
-// --- updateDashboardLayout (fonction utilitaire, peut rester ici ou être externalisée) ---
-async function updateDashboardLayout(dashboard, newLayoutData, username, t) {
-    if (!dashboard || !username) {
-        console.error("Dashboard and username are required to update layout.");
-        throw new Error(t('dashboards.error.missingId', "ID du tableau de bord ou nom d'utilisateur manquant."));
-    }
-
-    try {
-        const response = await fetch(`/api/data/${dashboard._id}?_user=${username}`, {
-            method: 'PUT',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-                model: 'dashboard',
-                data: {
-                    ...dashboard,
-                    _id: undefined,
-                    layout: newLayoutData.map(section => ({
-                        ...section,
-                        kpis: section.kpis, // Assure la cohérence
-                        kpiIds: undefined // Supprime l'ancien champ si présent
-                    }))
-                }
-            })
-        });
-
-        if (!response.ok) {
-            let errorMsg = t('dashboards.error.updateLayoutGeneric', "Erreur lors de la mise à jour de la disposition.");
-            try {
-                const errorData = await response.json();
-                errorMsg = errorData.error || errorMsg;
-            } catch (e) { /* Ignore */ }
-            throw new Error(errorMsg);
-        }
-        return await response.json();
-    } catch (error) {
-        console.error("Failed to update dashboard layout:", error);
-        throw error;
-    }
-}
-
-
-
-// --- DashboardView ---
-export function DashboardView({ dashboard }) {
-    const { t, i18n } = useTranslation();
-    const lang = (i18n.resolvedLanguage || i18n.language).split(/[-_]/)?.[0];
-    const { me } = useAuthContext();
-    const queryClient = useQueryClient();
-    const { models } = useModelContext();
-
-    const [layoutState, setLayoutState] = useState([]);
-    const [editingSectionIndex, setEditingSectionIndex] = useState(null);
-    const [originalSectionName, setOriginalSectionName] = useState('');
-
-    const [isAddWidgetTypeModalOpen, setIsAddWidgetTypeModalOpen] = useState(false);
-    const [isAddKpiDialogOpen, setIsAddKpiDialogOpen] = useState(false);
-    const [isChartModalOpen, setIsChartModalOpen] = useState(false);
-    const [isFlexBuilderModalOpen, setIsFlexBuilderModalOpen] = useState(false);
-    const [addingToSectionIndex, setAddingToSectionIndex] = useState(null);
-    const [editingChartConfig, setEditingChartConfig] = useState(null);
-    const [editingFlexViewConfig, setEditingFlexViewConfig] = useState(null);
-
-    const mutation = useMutation(
-        (newLayout) => updateDashboardLayout(dashboard, newLayout, me.username, t),
-        {
-            onMutate: async (newLayout) => {
-                const previousLayout = layoutState;
-                setLayoutState(newLayout);
-                return { previousLayout };
-            },
-            onSettled: () => {
-                queryClient.invalidateQueries(['userDashboards', me?.username]);
-            },
-            onError: (err, newLayout, context) => {
-                console.error("Mutation failed:", err);
-                if (context?.previousLayout) {
-                    console.log("Rolling back to:", context.previousLayout);
-                    setLayoutState(context.previousLayout);
-                }
-            },
-            onSuccess: (result) => {
-                console.log("Mutation succeeded, server response:", result);
-            }
-        }
-    );
-    const processedDashboardId = useRef(null);
-
-    useEffect(() => {
-        if (!dashboard) return;
-        if (dashboard._id === processedDashboardId.current) return;
-
-        let parsedLayout = [];
-
-        if (dashboard?.layout) {
-            try {
-                parsedLayout = dashboard.layout.map(section => ({
-                    ...section,
-                    kpis: section.kpis || section.kpiIds || [], // Normalisation cohérente
-                    chartConfigs: section.chartConfigs || [],
-                    flexViews: section.flexViews || []
-                }));
-            } catch (e) {
-                console.error("Failed to parse layout", e);
-                parsedLayout = [{
-                    name: t('dashboards.defaultSectionName'),
-                    kpis: [],
-                    chartConfigs: [],
-                    flexViews: []
-                }];
-            }
-        } else {
-            parsedLayout = [{
-                name: t('dashboards.defaultSectionName'),
-                kpis: [],
-                chartConfigs: [],
-                flexViews: []
-            }];
-        }
-
-        setLayoutState(parsedLayout);
-        processedDashboardId.current = dashboard._id;
-    }, [dashboard, t]);
-
-    // Gère le rafraîchissement automatique des données du dashboard.
-    useEffect(() => {
-        // S'assure qu'on a un intervalle de rafraîchissement valide (nombre de secondes > 0)
-        if (dashboard?.refreshInterval && dashboard.refreshInterval > 0) {
-            const intervalInMs = dashboard.refreshInterval * 1000;
-
-            const intervalId = setInterval(() => {
-                console.log(`Refreshing dashboard data for ${dashboard.name.value}...`);
-                // Invalide les requêtes liées aux données des KPIs, graphiques, et contenus Flex.
-                // Cela suppose que les composants enfants (KPIWidget, etc.) utilisent des clés de requête
-                // qui peuvent être invalidées par un préfixe commun, par exemple 'kpiData'.
-                queryClient.invalidateQueries('kpiData');
-            }, intervalInMs);
-
-            return () => clearInterval(intervalId); // Nettoie l'intervalle lors du démontage ou changement de dashboard
-        }
-    }, [dashboard?._id, dashboard?.refreshInterval, queryClient]);
-
-    const { data: availableKpis, isLoading: isLoadingKpiDefs, error: errorKpiDefs } = useQuery(
-        ['kpiDefinitions', me?.username, lang],
-        async () => {
-            if (!me?.username) return [];
-            const response = await fetch(
-                `/api/data/search?model=kpi&lang=${lang}&_user=${me.username}`, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' }
-                });
-            if (!response.ok) {
-                const res = await response.json();
-                throw new Error(res.error || t('dashboards.errorDefs', 'Erreur chargement définitions KPI'));
-            }
-            const data = await response.json();
-            return data.data;
-        },
-        {
-            enabled: !!me?.username,
-            refetchOnWindowFocus: false,
-            staleTime: 5 * 60 * 1000 // Les définitions de KPI ne changent pas souvent
-        }
-    );
-
-    const allKpiIdsInLayout = useMemo(() => layoutState.flatMap(section => section.kpis), [layoutState]);
-
-    const handleOpenAddWidgetTypeModal = (sectionIndex) => {
-        setAddingToSectionIndex(sectionIndex);
-        setIsAddWidgetTypeModalOpen(true);
-    };
-
-    const handleSelectWidgetType = (type) => {
-        setIsAddWidgetTypeModalOpen(false);
-        setEditingChartConfig(null);
-        setEditingFlexViewConfig(null); // Réinitialiser aussi la config FlexView en édition
-
-        if (type === 'KPI') {
-            setIsAddKpiDialogOpen(true);
-        } else if (type === 'Chart') {
-            setIsChartModalOpen(true);
-        } else if (type === 'FlexView') { // Gérer le type FlexView
-            setIsFlexBuilderModalOpen(true);
-        }
-    };
-
-
-    const handleAddKpi = (kpiDefinition) => {
-        if (addingToSectionIndex === null || !layoutState[addingToSectionIndex]) return;
-        const newLayoutState = JSON.parse(JSON.stringify(layoutState));
-        if (!newLayoutState[addingToSectionIndex].kpis.includes(t(kpiDefinition.name.value)) && !newLayoutState[addingToSectionIndex].kpis.includes(kpiDefinition.name.value)) {
-            newLayoutState[addingToSectionIndex].kpis.push(kpiDefinition.name.value);
-            mutation.mutate(newLayoutState);
-            // gtag('event', 'add_kpi_to_section');
-        }
-        setIsAddKpiDialogOpen(false);
-        setAddingToSectionIndex(null);
-    };
-
-    const handleRemoveKpi = (kpiDefinition, sectionIndex) => {
-        const newLayoutState = JSON.parse(JSON.stringify(layoutState));
-        if (newLayoutState[sectionIndex]) {
-            newLayoutState[sectionIndex].kpis = newLayoutState[sectionIndex].kpis.filter(id => id !== kpiDefinition.name.value);
-            mutation.mutate(newLayoutState);
-            // gtag('event', 'remove_kpi_from_section');
-        }
-    };
-
-    const handleOpenEditChartModal = (chartToEdit, sectionIndex) => {
-        setEditingChartConfig(chartToEdit);
-        setAddingToSectionIndex(sectionIndex);
-        setIsChartModalOpen(true);
-    };
-
-    const handleCloseChartModal = () => {
-        setIsChartModalOpen(false);
-        setAddingToSectionIndex(null);
-        setEditingChartConfig(null);
-    };
-
-    const handleSaveChartConfig = (config) => {
-        if (addingToSectionIndex === null) return;
-        const newLayoutState = JSON.parse(JSON.stringify(layoutState));
-        const targetSection = newLayoutState[addingToSectionIndex];
-        if (!targetSection) return;
-        if (!Array.isArray(targetSection.chartConfigs)) targetSection.chartConfigs = [];
-
-        if (config.id) { // Edition
-            const chartIndex = targetSection.chartConfigs.findIndex(chart => chart.id === config.id);
-            if (chartIndex !== -1) {
-                targetSection.chartConfigs[chartIndex] = config;
-                mutation.mutate(newLayoutState);
-                // gtag('event', 'edit_chart_in_section');
-            }
-        } else { // Ajout
-            targetSection.chartConfigs.push({
-                ...config,
-                id: `chart-${Date.now()}-${Math.random().toString(16).slice(2)}`
-            });
-            mutation.mutate(newLayoutState);
-            // gtag('event', 'add_chart_to_section');
-        }
-        handleCloseChartModal();
-    };
-
-    const handleRemoveChart = (chartId, sectionIndex) => {
-        const newLayoutState = JSON.parse(JSON.stringify(layoutState));
-        if (newLayoutState[sectionIndex]?.chartConfigs) {
-            newLayoutState[sectionIndex].chartConfigs = newLayoutState[sectionIndex].chartConfigs.filter(chart => chart.id !== chartId);
-            mutation.mutate(newLayoutState);
-            // gtag('event', 'remove_chart_from_section');
-        }
-    };
-
-    // --- Fonctions pour FlexView ---
-    const handleOpenEditFlexViewModal = (flexViewToEdit, sectionIndex) => {
-        setEditingFlexViewConfig(flexViewToEdit);
-        setAddingToSectionIndex(sectionIndex);
-        setIsFlexBuilderModalOpen(true);
-    };
-
-    const handleCloseFlexBuilderModal = () => {
-        setIsFlexBuilderModalOpen(false);
-        setAddingToSectionIndex(null);
-        setEditingFlexViewConfig(null);
-    };
-
-    const handleSaveFlexViewConfig = (config) => { // config vient de FlexBuilderModal
-        if (addingToSectionIndex === null) return;
-        const newLayoutState = JSON.parse(JSON.stringify(layoutState));
-        const targetSection = newLayoutState[addingToSectionIndex];
-        if (!targetSection) return;
-        if (!Array.isArray(targetSection.flexViews)) targetSection.flexViews = [];
-
-        // MODIFICATION: S'assurer que dataLimit est valide (1-8) et a une valeur par défaut
-        const newFlexViewData = {
-            ...config,
-            dataLimit: Math.max(1, Math.min(config.dataLimit || 1, 8)), // Valeur par défaut 1, max 8
-        };
-
-        if (config.id) { // Edition
-            const flexViewIndex = targetSection.flexViews.findIndex(fv => fv.id === config.id);
-            if (flexViewIndex !== -1) {
-                targetSection.flexViews[flexViewIndex] = { ...newFlexViewData, id: config.id }; // Conserver l'ID existant
-                mutation.mutate(newLayoutState);
-                // gtag('event', 'edit_flexview_in_section');
-            }
-        } else { // Ajout
-            targetSection.flexViews.push({
-                ...newFlexViewData,
-                id: `flex-${Date.now()}-${Math.random().toString(16).slice(2)}`
-            });
-            mutation.mutate(newLayoutState);
-            // gtag('event', 'add_flexview_to_section');
-        }
-        handleCloseFlexBuilderModal();
-    };
-
-    const handleRemoveFlexView = (flexViewId, sectionIndex) => {
-        const newLayoutState = JSON.parse(JSON.stringify(layoutState));
-        if (newLayoutState[sectionIndex]?.flexViews) {
-            newLayoutState[sectionIndex].flexViews = newLayoutState[sectionIndex].flexViews.filter(fv => fv.id !== flexViewId);
-            mutation.mutate(newLayoutState);
-            // gtag('event', 'remove_flexview_from_section');
-        }
-    };
-
-
-    const handleAddSection = () => {
-        const newLayoutState = [...layoutState, {
-            name: t('dashboards.defaultSectionName', 'Nouvelle Section'),
-            kpis: [], // Utiliser kpis au lieu de kpiIds
-            chartConfigs: [],
-            flexViews: []
-        }];
-        mutation.mutate(newLayoutState);
-    };
-
-    const handleRemoveSection = (sectionIndex) => {
-        if (layoutState.length <= 1) return; // Empêcher la suppression de la dernière section
-        const newLayoutState = layoutState.filter((_, index) => index !== sectionIndex);
-        mutation.mutate(newLayoutState);
-        // gtag('event', 'remove_dashboard_section');
-    };
-
-    const handleUpdateSectionName = (sectionIndex, newName) => {
-        const trimmedName = newName.trim();
-        if (!trimmedName || trimmedName === layoutState[sectionIndex].name) {
-            setEditingSectionIndex(null); // Quitter le mode édition si pas de changement ou nom vide
-            return;
-        }
-        const newLayoutState = JSON.parse(JSON.stringify(layoutState));
-        newLayoutState[sectionIndex].name = trimmedName;
-        mutation.mutate(newLayoutState);
-        setEditingSectionIndex(null);
-        // gtag('event', 'rename_dashboard_section');
-    };
-
-    const handleSectionNameBlur = (e, sectionIndex) => {
-        handleUpdateSectionName(sectionIndex, e.target.innerText);
-    };
-
-    const handleSectionNameKeyDown = (e, sectionIndex) => {
-        if (e.key === 'Enter') {
-            e.preventDefault();
-            handleUpdateSectionName(sectionIndex, e.target.innerText);
-        } else if (e.key === 'Escape') {
-            e.preventDefault();
-            e.target.innerText = originalSectionName; // Restaurer le nom original
-            setEditingSectionIndex(null);
-        }
-    };
-
-    const startEditingSectionName = (index, currentName) => {
-        setOriginalSectionName(currentName);
-        setEditingSectionIndex(index);
-        // Focus et sélection du contenu après un court délai pour permettre au DOM de se mettre à jour
-        setTimeout(() => {
-            const element = document.querySelector(`.dashboard-section:nth-child(${index + 1}) .section-title`);
-            if (element) {
-                element.focus();
-                const range = document.createRange();
-                const sel = window.getSelection();
-                range.selectNodeContents(element);
-                range.collapse(false); // Place le curseur à la fin
-                sel.removeAllRanges();
-                sel.addRange(range);
-            }
-        }, 0);
-    };
-
-    const sectionsWithItems = useMemo(() => {
-        return layoutState.map(section => {
-            return {
-                name: section.name, // On garde le nom
-
-                kpis: (section.kpis || [])
-                    .map(id => availableKpis?.find(kpi => kpi.name.value === id))
-                    .filter(Boolean), // On retire les KPIs qui n'auraient pas été trouvés
-
-                chartConfigs: section.chartConfigs || [],
-
-                flexViews: section.flexViews || [],
-            };
-        });
-    }, [layoutState, availableKpis]);
-
-    if (layoutState === null && !dashboard) {
-        return <p><Trans i18nKey="dashboards.noDashboardSelected">Aucun tableau de bord sélectionné.</Trans></p>;
-    }
-    if (layoutState === null && dashboard) { // Devrait être gaSpinner className="spin" /> <Trans i18nKey="dashboards.loadingLayout">Chargement de la disposition...</Trans></p>;
-    }
-    if (isLoadingKpiDefs) return <p><FaSpinner className="spin" /> <Trans i18nKey="dashboards.loadingDefs">Chargement des définitions de KPI...</Trans></p>;
-    if (errorKpiDefs) return <p className="error">{errorKpiDefs.message}</p>;
-
-
-    return (
-        <div className="dashboard-view">
-            <DialogProvider> {/* Assurez-vous que DialogProvider englobe bien tous les modaux */}
-                {isAddWidgetTypeModalOpen && (<AddWidgetTypeModal
-                    onClose={() => setIsAddWidgetTypeModalOpen(false)}
-                    onSelectType={handleSelectWidgetType}
-                />)}
-
-                {isAddKpiDialogOpen && (
-                    <KPIDialog
-                        availableKpis={(availableKpis||[]).filter(kpi => !allKpiIdsInLayout.includes(kpi.name.value) && !allKpiIdsInLayout.includes(kpi.name.value))}
-                        onAddKpi={handleAddKpi}
-                        onClose={() => {
-                            setIsAddKpiDialogOpen(false);
-                            setAddingToSectionIndex(null); // Réinitialiser l'index de section
-                        }}
-                    />
-                )}
-                {isChartModalOpen && (
-                    <ChartConfigModal
-                        isOpen={isChartModalOpen}
-                        onClose={handleCloseChartModal}
-                        onSave={handleSaveChartConfig}
-                        initialConfig={editingChartConfig}
-                        models={models} // Passer les modèles pour la configuration du graphique
-                    />
-                )}
-            </DialogProvider>
-
-            {isFlexBuilderModalOpen && (
-                <FlexBuilderModal
-                    isOpen={isFlexBuilderModalOpen}
-                    onClose={handleCloseFlexBuilderModal}
-                    onSave={handleSaveFlexViewConfig} // Utiliser le handler pour FlexView
-                    models={models} // Passer les modèles
-                    initialConfig={editingFlexViewConfig} // Passer la config en édition
-                    // data prop for FlexBuilder is for its internal preview,
-                    // not for the data displayed on the dashboard itself.
-                />
-            )}
-            {dashboard && (
-                <>
-                    <h2>{dashboard.name.value}</h2>
-                    {dashboard.description && <p className="dashboard-description">{dashboard.description}</p>}
-
-                    <div className="dashboard-sections">
-
-                        {sectionsWithItems.map((sectionData, sectionIndex) => (
-                            <div key={`section-${sectionIndex}-${dashboard._id}`} className="dashboard-section">
-                                <div className="section-header">
-                                    <h4
-                                        className={`section-title ${editingSectionIndex === sectionIndex ? 'editing' : ''}`}
-                                        contentEditable={editingSectionIndex === sectionIndex}
-                                        suppressContentEditableWarning={true}
-                                        onClick={() => {
-                                            if (editingSectionIndex !== sectionIndex) startEditingSectionName(sectionIndex, sectionData.name);
-                                        }}
-                                        onBlur={(e) => handleSectionNameBlur(e, sectionIndex)}
-                                        onKeyDown={(e) => handleSectionNameKeyDown(e, sectionIndex)}
-                                    >
-                                        {sectionData.name}
-                                    </h4>
-                                    {/* Bouton d'édition de nom de section (optionnel, car le titre est cliquable) */}
-                                </div>
-
-                                <div
-                                    className="items-grid flex"> {/* Assurez-vous que cette classe est bien stylée pour flex/grid */}
-                                    {sectionData.kpis.map(kpiDef => (
-                                        <KPIWidget
-                                            key={kpiDef._id}
-                                            kpiDefinition={kpiDef}
-                                            onRemove={() => handleRemoveKpi(kpiDef, sectionIndex)}
-                                            disabled={mutation.isLoading}
-                                        />
-                                    ))}
-                                    {sectionData.chartConfigs.map(chartConfig => (
-                                        <div key={chartConfig.id} className="dashboard-item-wrapper chart-wrapper">
-                                            <DashboardChart config={chartConfig}/>
-                                            <div className="item-actions">
-                                                <button className="edit-item-button"
-                                                        onClick={() => handleOpenEditChartModal(chartConfig, sectionIndex)}
-                                                        title={t('dashboards.editChartTitle', 'Modifier ce graphique')}
-                                                        disabled={mutation.isLoading}><FaPencilAlt/></button>
-                                                <button className="remove-item-button"
-                                                        onClick={() => handleRemoveChart(chartConfig.id, sectionIndex)}
-                                                        title={t('dashboards.removeChartTitle', 'Supprimer ce graphique')}
-                                                        disabled={mutation.isLoading}><FaTrash/></button>
-                                            </div>
-                                        </div>
-                                    ))}
-                                    {/* Affichage des FlexViews */}
-                                    {sectionData.flexViews?.map(flexViewConfig => (
-
-                                            <div key={flexViewConfig.id}
-                                                 className="dashboard-item-wrapper flex-view-wrapper">
-                                                <DashboardFlexViewItem
-                                                    flexViewConfig={flexViewConfig}
-                                                    allModels={models} // Passer tous les modisponibles
-                                                />
-                                                <div className="item-actions">
-                                                    <button className="edit-item-button"
-                                                            onClick={() => handleOpenEditFlexViewModal(flexViewConfig, sectionIndex)}
-                                                            title={t('dashboards.editFlexViewTitle', 'Modifier cette vue Flex')}
-                                                            disabled={mutation.isLoading}><FaPencilAlt/></button>
-                                                    <button className="remove-item-button"
-                                                            onClick={() => handleRemoveFlexView(flexViewConfig.id, sectionIndex)}
-                                                            title={t('dashboards.removeFlexViewTitle', 'Supprimer cette vue Flex')}
-                                                            disabled={mutation.isLoading}><FaTrash/></button>
-                                                </div>
-                                            </div>
-                                    ))}
-
-                                    {/* Message si la section est vide */}
-                                    {sectionData.kpis.length === 0 && sectionData.chartConfigs.length === 0 && (sectionData.flexViews === undefined || sectionData.flexViews.length === 0) && (
-                                        <p className="empty-section-message"><Trans
-                                            i18nKey="dashboards.emptySectionClickPlus">Section vide. Cliquez sur le
-                                            bouton '+' ci-dessous pour ajouter des éléments.</Trans></p>
-                                    )}
-                                </div>
-                                <div className="add-buttons-inline">
-                                    <button
-                                        className="add-kpi-button add-kpi-button-inline" /* Renommer la classe si elle est générique */
-                                        onClick={() => handleOpenAddWidgetTypeModal(sectionIndex)}
-                                        title={t('dashboards.addWidgetToSectionTitle', 'Ajouter un élément à cette section')}
-                                        disabled={mutation.isLoading}>
-                                        <FaPlus/>
-                                    </button>
-                                    {layoutState.length > 1 && (
-                                        <button
-                                            className="remove-section-button"
-                                            onClick={() => handleRemoveSection(sectionIndex)}
-                                            title={t('dashboards.removeSectionTitle', 'Supprimer cette section')}
-                                            disabled={mutation.isLoading}
-                                        >
-                                            <FaTrash/>
-                                        </button>
-                                    )}
-                                </div>
-                            </div>
-                        ))}
-
-                        {sectionsWithItems.length > 0 && (<div className="flex actions left">
-                            <button onClick={handleAddSection} className="add-section-button"
-                                    disabled={mutation.isLoading}>
-                                <FaPlus/> <Trans i18nKey="dashboards.addSection">Ajouter une section</Trans>
-                            </button>
-                        </div>)}
-
-                        {layoutState.length === 0 && !isLoadingKpiDefs && (
-                            <p><Trans i18nKey="dashboards.noSections">Ce tableau de bord n'a pas encore de
-                                sections.</Trans></p>
-                        )}
-                    </div>
-                </>
-            )}
-        </div>
-    );
+import React, {useEffect, useState, useMemo, useRef, useCallback} from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import KPIWidget from "./KPIWidget.jsx";
+import { FaPencilAlt, FaPlus, FaSpinner, FaTrash } from "react-icons/fa";
+import KPIDialog from "./KPIDialog.jsx";
+import ChartConfigModal from "./ChartConfigModal.jsx";
+import DashboardChart from "./DashboardChart.jsx";
+import AddWidgetTypeModal from './AddWidgetTypeModal.jsx';
+import FlexBuilderModal from './FlexBuilderModal.jsx';
+
+import "./Dashboard.scss"
+import { useQuery, useQueryClient, useMutation } from "react-query";
+import { useAuthContext } from "./contexts/AuthContext.jsx";
+import { DialogProvider } from "./Dialog.jsx";
+import {useModelContext} from "./contexts/ModelContext.jsx";
+import {DashboardFlexViewItem} from "./DashboardFlexViewItem.jsx";
+import DashboardHtmlViewItem from "./DashboardHtmlViewItem.jsx";
+import HtmlViewBuilderModal from "./HtmlViewBuilderModal.jsx";
+
+// --- updateDashboardLayout (fonction utilitaire, peut rester ici ou être externalisée) ---
+async function updateDashboardLayout(dashboard, newLayoutData, username, t) {
+    if (!dashboard || !username) {
+        console.error("Dashboard and username are required to update layout.");
+        throw new Error(t('dashboards.error.missingId', "ID du tableau de bord ou nom d'utilisateur manquant."));
+    }
+
+    try {
+        const response = await fetch(`/api/data/${dashboard._id}?_user=${username}`, {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                model: 'dashboard',
+                data: {
+                    ...dashboard,
+                    _id: undefined,
+                    layout: newLayoutData.map(section => ({
+                        ...section,
+                        kpis: section.kpis, // Assure la cohérence
+                        kpiIds: undefined // Supprime l'ancien champ si présent
+                    }))
+                }
+            })
+        });
+
+        if (!response.ok) {
+            let errorMsg = t('dashboards.error.updateLayoutGeneric', "Erreur lors de la mise à jour de la disposition.");
+            try {
+                const errorData = await response.json();
+                errorMsg = errorData.error || errorMsg;
+            } catch (e) { /* Ignore */ }
+            throw new Error(errorMsg);
+        }
+        return await response.json();
+    } catch (error) {
+        console.error("Failed to update dashboard layout:", error);
+        throw error;
+    }
+}
+
+
+
+// --- DashboardView ---
+export function DashboardView({ dashboard }) {
+    const { t, i18n } = useTranslation();
+    const lang = (i18n.resolvedLanguage || i18n.language).split(/[-_]/)?.[0];
+    const { me } = useAuthContext();
+    const queryClient = useQueryClient();
+    const { models } = useModelContext();
+
+    const [editingHtmlViewConfig, setEditingHtmlViewConfig] = useState(null);
+    const [isHtmlViewBuilderModalOpen, setIsHtmlViewBuilderModalOpen] = useState(false);
+    const [layoutState, setLayoutState] = useState([]);
+    const [editingSectionIndex, setEditingSectionIndex] = useState(null);
+    const [originalSectionName, setOriginalSectionName] = useState('');
+
+    const [isAddWidgetTypeModalOpen, setIsAddWidgetTypeModalOpen] = useState(false);
+    const [isAddKpiDialogOpen, setIsAddKpiDialogOpen] = useState(false);
+    const [isChartModalOpen, setIsChartModalOpen] = useState(false);
+    const [isFlexBuilderModalOpen, setIsFlexBuilderModalOpen] = useState(false);
+    const [addingToSectionIndex, setAddingToSectionIndex] = useState(null);
+    const [editingChartConfig, setEditingChartConfig] = useState(null);
+    const [editingFlexViewConfig, setEditingFlexViewConfig] = useState(null);
+
+    const mutation = useMutation(
+        (newLayout) => updateDashboardLayout(dashboard, newLayout, me.username, t),
+        {
+            onMutate: async (newLayout) => {
+                const previousLayout = layoutState;
+                setLayoutState(newLayout);
+                return { previousLayout };
+            },
+            onSettled: () => {
+                queryClient.invalidateQueries(['userDashboards', me?.username]);
+            },
+            onError: (err, newLayout, context) => {
+                console.error("Mutation failed:", err);
+                if (context?.previousLayout) {
+                    console.log("Rolling back to:", context.previousLayout);
+                    setLayoutState(context.previousLayout);
+                }
+            },
+            onSuccess: (result) => {
+                console.log("Mutation succeeded, server response:", result);
+            }
+        }
+    );
+    const processedDashboardId = useRef(null);
+    const processedLayoutRef = useRef(null); // Pour comparer le contenu du layout
+
+    useEffect(() => {
+        if (!dashboard) return;
+
+        const layoutString = JSON.stringify(dashboard.layout);
+        // On ne met à jour que si l'ID du dashboard ou le contenu de son layout a changé.
+        if (dashboard._id === processedDashboardId.current && layoutString === processedLayoutRef.current) return;
+
+        let parsedLayout = [];
+
+        // The layout from the DB can be an object (old default) or an array of sections (new format).
+        // We need to handle both cases to avoid crashes.
+        if (dashboard?.layout && Array.isArray(dashboard.layout)) {
+             try {
+                 parsedLayout = dashboard.layout.map(section => ({
+                     ...section,
+                     kpis: section.kpis || section.kpiIds || [], // Normalisation cohérente
+                     chartConfigs: section.chartConfigs || [],
+                     flexViews: section.flexViews || [],
+                     htmlViews: section.htmlViews || []
+                 }));
+             } catch (e) {
+                 console.error("Failed to parse layout array", e);
+                 // Fallback to a default section if mapping fails for some reason
+                 parsedLayout = [{
+                     name: t('dashboards.defaultSectionName'),
+                     kpis: [],
+                     chartConfigs: [],
+                     flexViews: [],
+                     htmlViews: []
+                 }];
+             }
+        } else {
+            parsedLayout = [{
+                name: t('dashboards.defaultSectionName'),
+                kpis: [],
+                chartConfigs: [],
+                flexViews: [],
+                htmlViews: []
+            }];
+        }
+
+        setLayoutState(parsedLayout);
+        processedDashboardId.current = dashboard._id;
+        processedLayoutRef.current = layoutString;
+    }, [dashboard, t]);
+
+    // Gère le rafraîchissement automatique des données du dashboard.
+    useEffect(() => {
+        // S'assure qu'on a un intervalle de rafraîchissement valide (nombre de secondes > 0)
+        if (dashboard?.refreshInterval && dashboard.refreshInterval > 0) {
+            const intervalInMs = dashboard.refreshInterval * 1000;
+
+            const intervalId = setInterval(() => {
+                console.log(`Refreshing dashboard data for ${dashboard.name.value}...`);
+                // Invalide les requêtes liées aux données des KPIs, graphiques, et contenus Flex.
+                // Cela suppose que les composants enfants (KPIWidget, etc.) utilisent des clés de requête
+                // qui peuvent être invalidées par un préfixe commun, par exemple 'kpiData'.
+                queryClient.invalidateQueries('kpiData');
+            }, intervalInMs);
+
+            return () => clearInterval(intervalId); // Nettoie l'intervalle lors du démontage ou changement de dashboard
+        }
+    }, [dashboard?._id, dashboard?.refreshInterval, queryClient]);
+
+    const { data: availableKpis, isLoading: isLoadingKpiDefs, error: errorKpiDefs } = useQuery(
+        ['kpiDefinitions', me?.username, lang],
+        async () => {
+            if (!me?.username) return [];
+            const response = await fetch(
+                `/api/data/search?model=kpi&lang=${lang}&_user=${me.username}`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' }
+                });
+            if (!response.ok) {
+                const res = await response.json();
+                throw new Error(res.error || t('dashboards.errorDefs', 'Erreur chargement définitions KPI'));
+            }
+            const data = await response.json();
+            return data.data;
+        },
+        {
+            enabled: !!me?.username,
+            refetchOnWindowFocus: false,
+            staleTime: 5 * 60 * 1000 // Les définitions de KPI ne changent pas souvent
+        }
+    );
+
+    const allKpiIdsInLayout = useMemo(() => layoutState.flatMap(section => section.kpis), [layoutState]);
+
+    const handleOpenAddWidgetTypeModal = (sectionIndex) => {
+        setAddingToSectionIndex(sectionIndex);
+        setIsAddWidgetTypeModalOpen(true);
+    };
+
+    const handleSelectWidgetType = (type) => {
+        setIsAddWidgetTypeModalOpen(false);
+        setEditingChartConfig(null);
+        setEditingFlexViewConfig(null); // Réinitialiser aussi la config FlexView en édition
+
+        if (type === 'KPI') {
+            setIsAddKpiDialogOpen(true);
+        } else if (type === 'Chart') {
+            setIsChartModalOpen(true);
+        } else if (type === 'FlexView') { // Gérer le type FlexView
+            setIsFlexBuilderModalOpen(true);
+        } else if (type === 'HtmlView') {
+            setIsHtmlViewBuilderModalOpen(true); // On peut réutiliser le même modal pour l'instant
+        }
+    };
+
+    const handleOpenEditHtmlViewModal = (htmlViewToEdit, sectionIndex) => {
+        setEditingHtmlViewConfig(htmlViewToEdit);
+        setAddingToSectionIndex(sectionIndex);
+        setIsHtmlViewBuilderModalOpen(true);
+    };
+
+    const handleSaveHtmlViewConfig = (config) => {
+        if (addingToSectionIndex === null) return;
+        const newLayoutState = JSON.parse(JSON.stringify(layoutState));
+        const targetSection = newLayoutState[addingToSectionIndex];
+        if (!targetSection) return;
+        if (!Array.isArray(targetSection.htmlViews)) targetSection.htmlViews = [];
+
+        if (config.id) { // Edition
+            const index = targetSection.htmlViews.findIndex(v => v.id === config.id);
+            if (index !== -1) targetSection.htmlViews[index] = config;
+        } else { // Ajout
+            targetSection.htmlViews.push({ ...config, id: `html-${Date.now()}` });
+        }
+        mutation.mutate(newLayoutState);
+        handleCloseFlexBuilderModal();
+        setIsHtmlViewBuilderModalOpen(false);
+        setEditingHtmlViewConfig(null);
+    };
+
+    const handleRemoveHtmlView = (htmlViewId, sectionIndex) => {
+        const newLayoutState = JSON.parse(JSON.stringify(layoutState));
+        if (newLayoutState[sectionIndex]?.htmlViews) {
+            newLayoutState[sectionIndex].htmlViews = newLayoutState[sectionIndex].htmlViews.filter(hv => hv.id !== htmlViewId);
+            mutation.mutate(newLayoutState);
+        }
+    };
+
+
+
+    const handleAddKpi = (kpiDefinition) => {
+        if (addingToSectionIndex === null || !layoutState[addingToSectionIndex]) return;
+        const newLayoutState = JSON.parse(JSON.stringify(layoutState));
+        if (!newLayoutState[addingToSectionIndex].kpis.includes(t(kpiDefinition.name.value)) && !newLayoutState[addingToSectionIndex].kpis.includes(kpiDefinition.name.value)) {
+            newLayoutState[addingToSectionIndex].kpis.push(kpiDefinition.name.value);
+            mutation.mutate(newLayoutState);
+            // gtag('event', 'add_kpi_to_section');
+        }
+        setIsAddKpiDialogOpen(false);
+        setAddingToSectionIndex(null);
+    };
+
+    const handleRemoveKpi = (kpiDefinition, sectionIndex) => {
+        const newLayoutState = JSON.parse(JSON.stringify(layoutState));
+        if (newLayoutState[sectionIndex]) {
+            newLayoutState[sectionIndex].kpis = newLayoutState[sectionIndex].kpis.filter(id => id !== kpiDefinition.name.value);
+            mutation.mutate(newLayoutState);
+            // gtag('event', 'remove_kpi_from_section');
+        }
+    };
+
+    const handleOpenEditChartModal = (chartToEdit, sectionIndex) => {
+        setEditingChartConfig(chartToEdit);
+        setAddingToSectionIndex(sectionIndex);
+        setIsChartModalOpen(true);
+    };
+
+    const handleCloseChartModal = () => {
+        setIsChartModalOpen(false);
+        setAddingToSectionIndex(null);
+        setEditingChartConfig(null);
+    };
+
+    const handleSaveChartConfig = (config) => {
+        if (addingToSectionIndex === null) return;
+        const newLayoutState = JSON.parse(JSON.stringify(layoutState));
+        const targetSection = newLayoutState[addingToSectionIndex];
+        if (!targetSection) return;
+        if (!Array.isArray(targetSection.chartConfigs)) targetSection.chartConfigs = [];
+
+        if (config.id) { // Edition
+            const chartIndex = targetSection.chartConfigs.findIndex(chart => chart.id === config.id);
+            if (chartIndex !== -1) {
+                targetSection.chartConfigs[chartIndex] = config;
+                mutation.mutate(newLayoutState);
+                // gtag('event', 'edit_chart_in_section');
+            }
+        } else { // Ajout
+            targetSection.chartConfigs.push({
+                ...config,
+                id: `chart-${Date.now()}-${Math.random().toString(16).slice(2)}`
+            });
+            mutation.mutate(newLayoutState);
+            // gtag('event', 'add_chart_to_section');
+        }
+        handleCloseChartModal();
+    };
+
+    const handleRemoveChart = (chartId, sectionIndex) => {
+        const newLayoutState = JSON.parse(JSON.stringify(layoutState));
+        if (newLayoutState[sectionIndex]?.chartConfigs) {
+            newLayoutState[sectionIndex].chartConfigs = newLayoutState[sectionIndex].chartConfigs.filter(chart => chart.id !== chartId);
+            mutation.mutate(newLayoutState);
+            // gtag('event', 'remove_chart_from_section');
+        }
+    };
+
+    // --- Fonctions pour FlexView ---
+    const handleOpenEditFlexViewModal = (flexViewToEdit, sectionIndex) => {
+        setEditingFlexViewConfig(flexViewToEdit);
+        setAddingToSectionIndex(sectionIndex);
+        setIsFlexBuilderModalOpen(true);
+    };
+
+    const handleCloseFlexBuilderModal = () => {
+        setIsFlexBuilderModalOpen(false);
+        setAddingToSectionIndex(null);
+        setEditingFlexViewConfig(null);
+    };
+
+    const handleSaveFlexViewConfig = (config) => { // config vient de FlexBuilderModal
+        if (addingToSectionIndex === null) return;
+        const newLayoutState = JSON.parse(JSON.stringify(layoutState));
+        const targetSection = newLayoutState[addingToSectionIndex];
+        if (!targetSection) return;
+        if (!Array.isArray(targetSection.flexViews)) targetSection.flexViews = [];
+
+        // MODIFICATION: S'assurer que dataLimit est valide (1-8) et a une valeur par défaut
+        const newFlexViewData = {
+            ...config,
+            dataLimit: Math.max(1, Math.min(config.dataLimit || 1, 8)), // Valeur par défaut 1, max 8
+        };
+
+        if (config.id) { // Edition
+            const flexViewIndex = targetSection.flexViews.findIndex(fv => fv.id === config.id);
+            if (flexViewIndex !== -1) {
+                targetSection.flexViews[flexViewIndex] = { ...newFlexViewData, id: config.id }; // Conserver l'ID existant
+                mutation.mutate(newLayoutState);
+                // gtag('event', 'edit_flexview_in_section');
+            }
+        } else { // Ajout
+            targetSection.flexViews.push({
+                ...newFlexViewData,
+                id: `flex-${Date.now()}-${Math.random().toString(16).slice(2)}`
+            });
+            mutation.mutate(newLayoutState);
+            // gtag('event', 'add_flexview_to_section');
+        }
+        handleCloseFlexBuilderModal();
+    };
+
+    const handleRemoveFlexView = (flexViewId, sectionIndex) => {
+        const newLayoutState = JSON.parse(JSON.stringify(layoutState));
+        if (newLayoutState[sectionIndex]?.flexViews) {
+            newLayoutState[sectionIndex].flexViews = newLayoutState[sectionIndex].flexViews.filter(fv => fv.id !== flexViewId);
+            mutation.mutate(newLayoutState);
+            // gtag('event', 'remove_flexview_from_section');
+        }
+    };
+
+
+    const handleAddSection = () => {
+        const newLayoutState = [...layoutState, {
+            name: t('dashboards.defaultSectionName', 'Nouvelle Section'),
+            kpis: [], // Utiliser kpis au lieu de kpiIds
+            chartConfigs: [],
+            flexViews: []
+        }];
+        mutation.mutate(newLayoutState);
+    };
+
+    const handleRemoveSection = (sectionIndex) => {
+        if (layoutState.length <= 1) return; // Empêcher la suppression de la dernière section
+        const newLayoutState = layoutState.filter((_, index) => index !== sectionIndex);
+        mutation.mutate(newLayoutState);
+        // gtag('event', 'remove_dashboard_section');
+    };
+
+    const handleUpdateSectionName = (sectionIndex, newName) => {
+        const trimmedName = newName.trim();
+        if (!trimmedName || trimmedName === layoutState[sectionIndex].name) {
+            setEditingSectionIndex(null); // Quitter le mode édition si pas de changement ou nom vide
+            return;
+        }
+        const newLayoutState = JSON.parse(JSON.stringify(layoutState));
+        newLayoutState[sectionIndex].name = trimmedName;
+        mutation.mutate(newLayoutState);
+        setEditingSectionIndex(null);
+        // gtag('event', 'rename_dashboard_section');
+    };
+
+    const handleSectionNameBlur = (e, sectionIndex) => {
+        handleUpdateSectionName(sectionIndex, e.target.innerText);
+    };
+
+    const handleSectionNameKeyDown = (e, sectionIndex) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            handleUpdateSectionName(sectionIndex, e.target.innerText);
+        } else if (e.key === 'Escape') {
+            e.preventDefault();
+            e.target.innerText = originalSectionName; // Restaurer le nom original
+            setEditingSectionIndex(null);
+        }
+    };
+
+    const startEditingSectionName = (index, currentName) => {
+        setOriginalSectionName(currentName);
+        setEditingSectionIndex(index);
+        // Focus et sélection du contenu après un court délai pour permettre au DOM de se mettre à jour
+        setTimeout(() => {
+            const element = document.querySelector(`.dashboard-section:nth-child(${index + 1}) .section-title`);
+            if (element) {
+                element.focus();
+                const range = document.createRange();
+                const sel = window.getSelection();
+                range.selectNodeContents(element);
+                range.collapse(false); // Place le curseur à la fin
+                sel.removeAllRanges();
+                sel.addRange(range);
+            }
+        }, 0);
+    };
+
+    const sectionsWithItems = useMemo(() => {
+        return layoutState.map(section => {
+            return {
+                name: section.name, // On garde le nom
+
+                kpis: (section.kpis || [])
+                    .map(id => availableKpis?.find(kpi => kpi.name.value === id))
+                    .filter(Boolean), // On retire les KPIs qui n'auraient pas été trouvés
+
+                chartConfigs: section.chartConfigs || [],
+
+                htmlViews: section.htmlViews || [],
+
+                flexViews: section.flexViews || [],
+            };
+        });
+    }, [layoutState, availableKpis]);
+
+    if (layoutState === null && !dashboard) {
+        return <p><Trans i18nKey="dashboards.noDashboardSelected">Aucun tableau de bord sélectionné.</Trans></p>;
+    }
+    if (layoutState === null && dashboard) { // Devrait être gaSpinner className="spin" /> <Trans i18nKey="dashboards.loadingLayout">Chargement de la disposition...</Trans></p>;
+    }
+    if (isLoadingKpiDefs) return <p><FaSpinner className="spin" /> <Trans i18nKey="dashboards.loadingDefs">Chargement des définitions de KPI...</Trans></p>;
+    if (errorKpiDefs) return <p className="error">{errorKpiDefs.message}</p>;
+
+
+    return (
+        <div className="dashboard-view">
+            <DialogProvider> {/* Assurez-vous que DialogProvider englobe bien tous les modaux */}
+                {isAddWidgetTypeModalOpen && (<AddWidgetTypeModal
+                    onClose={() => setIsAddWidgetTypeModalOpen(false)}
+                    onSelectType={handleSelectWidgetType}
+                />)}
+
+                {isAddKpiDialogOpen && (
+                    <KPIDialog
+                        availableKpis={(availableKpis||[]).filter(kpi => !allKpiIdsInLayout.includes(kpi.name.value) && !allKpiIdsInLayout.includes(kpi.name.value))}
+                        onAddKpi={handleAddKpi}
+                        onClose={() => {
+                            setIsAddKpiDialogOpen(false);
+                            setAddingToSectionIndex(null); // Réinitialiser l'index de section
+                        }}
+                    />
+                )}
+                {isChartModalOpen && (
+                    <ChartConfigModal
+                        isOpen={isChartModalOpen}
+                        onClose={handleCloseChartModal}
+                        onSave={handleSaveChartConfig}
+                        initialConfig={editingChartConfig}
+                        models={models} // Passer les modèles pour la configuration du graphique
+                    />
+                )}
+                {isHtmlViewBuilderModalOpen && (
+                    <HtmlViewBuilderModal
+                        isOpen={isHtmlViewBuilderModalOpen}
+                        onClose={() => {
+                            setIsHtmlViewBuilderModalOpen(false);
+                            setEditingHtmlViewConfig(null);
+                        }}
+                        onSave={handleSaveHtmlViewConfig}
+                        models={models}
+                        initialConfig={editingHtmlViewConfig}
+                    />
+                )}
+            </DialogProvider>
+
+            {isFlexBuilderModalOpen && (
+                <FlexBuilderModal
+                    isOpen={isFlexBuilderModalOpen}
+                    onClose={handleCloseFlexBuilderModal}
+                    onSave={handleSaveFlexViewConfig} // Utiliser le handler pour FlexView
+                    models={models} // Passer les modèles
+                    initialConfig={editingFlexViewConfig} // Passer la config en édition
+                    // data prop for FlexBuilder is for its internal preview,
+                    // not for the data displayed on the dashboard itself.
+                />
+            )}
+
+            {dashboard && (
+                <>
+                    <h2>{dashboard.name.value}</h2>
+                    {dashboard.description && <p className="dashboard-description">{dashboard.description}</p>}
+
+                    <div className="dashboard-sections">
+
+                        {sectionsWithItems.map((sectionData, sectionIndex) => (
+                            <div key={`section-${sectionIndex}-${dashboard._id}`} className="dashboard-section">
+                                <div className="section-header">
+                                    <h4
+                                        className={`section-title ${editingSectionIndex === sectionIndex ? 'editing' : ''}`}
+                                        contentEditable={editingSectionIndex === sectionIndex}
+                                        suppressContentEditableWarning={true}
+                                        onClick={() => {
+                                            if (editingSectionIndex !== sectionIndex) startEditingSectionName(sectionIndex, sectionData.name);
+                                        }}
+                                        onBlur={(e) => handleSectionNameBlur(e, sectionIndex)}
+                                        onKeyDown={(e) => handleSectionNameKeyDown(e, sectionIndex)}
+                                    >
+                                        {sectionData.name}
+                                    </h4>
+                                    {/* Bouton d'édition de nom de section (optionnel, car le titre est cliquable) */}
+                                </div>
+
+                                <div
+                                    className="items-grid flex"> {/* Assurez-vous que cette classe est bien stylée pour flex/grid */}
+                                    {sectionData.kpis.map(kpiDef => (
+                                        <KPIWidget
+                                            key={kpiDef._id}
+                                            kpiDefinition={kpiDef}
+                                            onRemove={() => handleRemoveKpi(kpiDef, sectionIndex)}
+                                            disabled={mutation.isLoading}
+                                        />
+                                    ))}
+                                    {sectionData.chartConfigs.map(chartConfig => (
+                                        <div key={chartConfig.id} className="dashboard-item-wrapper chart-wrapper">
+                                            <DashboardChart config={chartConfig}/>
+                                            <div className="item-actions">
+                                                <button className="edit-item-button"
+                                                        onClick={() => handleOpenEditChartModal(chartConfig, sectionIndex)}
+                                                        title={t('dashboards.editChartTitle', 'Modifier ce graphique')}
+                                                        disabled={mutation.isLoading}><FaPencilAlt/></button>
+                                                <button className="remove-item-button"
+                                                        onClick={() => handleRemoveChart(chartConfig.id, sectionIndex)}
+                                                        title={t('dashboards.removeChartTitle', 'Supprimer ce graphique')}
+                                                        disabled={mutation.isLoading}><FaTrash/></button>
+                                            </div>
+                                        </div>
+                                    ))}
+
+                                    {/* NOUVEAU: Affichage des vues HTML */}
+                                    {sectionData.htmlViews?.map(htmlConfig => (
+                                        <div key={htmlConfig.id} className="dashboard-item-wrapper html-view-wrapper">
+                                            <DashboardHtmlViewItem config={htmlConfig} />
+                                            <div className="item-actions">
+                                                {/* TODO: Add edit button for HTML views */}
+                                                {/* <button ...><FaPencilAlt /></button> */}
+                                                <button className="edit-item-button"
+                                                        onClick={() => handleOpenEditHtmlViewModal(htmlConfig, sectionIndex)}
+                                                        title={t('dashboards.editHtmlViewTitle', 'Modifier cette vue HTML')}
+                                                        disabled={mutation.isLoading}><FaPencilAlt/></button>
+                                                <button className="remove-item-button"
+                                                        onClick={() => handleRemoveHtmlView(htmlConfig.id, sectionIndex)}
+                                                        title={t('dashboards.removeHtmlViewTitle', 'Supprimer cette vue HTML')}
+                                                        disabled={mutation.isLoading}><FaTrash/></button>
+                                            </div>
+                                        </div>
+                                    ))}
+                                    {/* Affichage des FlexViews */}
+                                    {sectionData.flexViews?.map(flexViewConfig => (
+
+                                            <div key={flexViewConfig.id}
+                                                 className="dashboard-item-wrapper flex-view-wrapper">
+                                                <DashboardFlexViewItem
+                                                    flexViewConfig={flexViewConfig}
+                                                    allModels={models} // Passer tous les modisponibles
+                                                />
+                                                <div className="item-actions">
+                                                    <button className="edit-item-button"
+                                                            onClick={() => handleOpenEditFlexViewModal(flexViewConfig, sectionIndex)}
+                                                            title={t('dashboards.editFlexViewTitle', 'Modifier cette vue Flex')}
+                                                            disabled={mutation.isLoading}><FaPencilAlt/></button>
+                                                    <button className="remove-item-button"
+                                                            onClick={() => handleRemoveFlexView(flexViewConfig.id, sectionIndex)}
+                                                            title={t('dashboards.removeFlexViewTitle', 'Supprimer cette vue Flex')}
+                                                            disabled={mutation.isLoading}><FaTrash/></button>
+                                                </div>
+                                            </div>
+                                    ))}
+
+                                    {/* Message si la section est vide */}
+                                    {sectionData.kpis.length === 0 && sectionData.chartConfigs.length === 0 && (sectionData.flexViews === undefined || sectionData.flexViews.length === 0) && (
+                                        <p className="empty-section-message"><Trans
+                                            i18nKey="dashboards.emptySectionClickPlus">Section vide. Cliquez sur le
+                                            bouton '+' ci-dessous pour ajouter des éléments.</Trans></p>
+                                    )}
+                                </div>
+                                <div className="add-buttons-inline">
+                                    <button
+                                        className="add-kpi-button add-kpi-button-inline" /* Renommer la classe si elle est générique */
+                                        onClick={() => handleOpenAddWidgetTypeModal(sectionIndex)}
+                                        title={t('dashboards.addWidgetToSectionTitle', 'Ajouter un élément à cette section')}
+                                        disabled={mutation.isLoading}>
+                                        <FaPlus/>
+                                    </button>
+                                    {layoutState.length > 1 && (
+                                        <button
+                                            className="remove-section-button"
+                                            onClick={() => handleRemoveSection(sectionIndex)}
+                                            title={t('dashboards.removeSectionTitle', 'Supprimer cette section')}
+                                            disabled={mutation.isLoading}
+                                        >
+                                            <FaTrash/>
+                                        </button>
+                                    )}
+                                </div>
+                            </div>
+                        ))}
+
+                        {sectionsWithItems.length > 0 && (<div className="flex actions left">
+                            <button onClick={handleAddSection} className="add-section-button"
+                                    disabled={mutation.isLoading}>
+                                <FaPlus/> <Trans i18nKey="dashboards.addSection">Ajouter une section</Trans>
+                            </button>
+                        </div>)}
+
+                        {layoutState.length === 0 && !isLoadingKpiDefs && (
+                            <p><Trans i18nKey="dashboards.noSections">Ce tableau de bord n'a pas encore de
+                                sections.</Trans></p>
+                        )}
+                    </div>
+                </>
+            )}
+        </div>
+    );
 }