data-primals-engine 1.3.0 → 1.3.2

package/client/src/CalendarView.jsx

@@ -0,0 +1,107 @@
+import React, { useMemo } from 'react';
+import { useQuery } from 'react-query';
+import { Calendar, dateFnsLocalizer } from 'react-big-calendar';
+import { useTranslation } from 'react-i18next';
+import { format, parse, startOfWeek, getDay } from 'date-fns';
+// Importer les locales dont vous avez besoin
+
+import 'react-big-calendar/lib/css/react-big-calendar.css';
+import { useAuthContext } from "./contexts/AuthContext.jsx";
+import './CalendarView.scss';
+
+import { enUS, fr } from 'date-fns/locale';
+// Configurer le localizer en fournissant les fonctions de date-fns
+const locales = {
+    'en-US': enUS,
+    'en': enUS,
+    'fr': fr,
+};
+
+const localizer = dateFnsLocalizer({
+    format,
+    parse,
+    startOfWeek,
+    getDay,
+    locales,
+});
+
+/**
+ * Traite les données brutes pour les structurer pour le calendrier.
+ * @param {Array<Object>} data - La liste des éléments du modèle.
+ * @param {Object} settings - Les paramètres de la vue, contenant titleField, startField, endField.
+ * @returns {Array<Object>} Un tableau d'objets événement pour react-big-calendar.
+ */
+const processDataForCalendar = (data, settings) => {
+    if (!data || !settings.titleField || !settings.startField || !settings.endField) {
+        return [];
+    }
+
+    return data.map(item => {
+        const title = item[settings.titleField]?.value || item[settings.titleField] || 'Sans titre';
+        const start = item[settings.startField] ? new Date(item[settings.startField]) : null;
+        const end = item[settings.endField] ? new Date(item[settings.endField]) : null;
+
+        // S'assurer que les dates sont valides
+        if (!start || !end || isNaN(start.getTime()) || isNaN(end.getTime())) {
+            return null;
+        }
+
+        return {
+            title,
+            start,
+            end,
+            resource: item, // Garder l'objet original pour plus de détails au clic
+        };
+    }).filter(Boolean); // Filtrer les éléments qui n'ont pas pu être convertis
+};
+
+const CalendarView = ({ settings, model, onEditData }) => {
+    const { me } = useAuthContext();
+    const { i18n } = useTranslation();
+
+    // Récupérer toutes les données du modèle nécessaires pour le calendrier
+    const { data: calendarData, isLoading, isError } = useQuery(
+        ['calendarData', model.name],
+        () => fetch(`/api/data/search?_user=${me.username}&depth=1`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            // Note : Pour de très grands ensembles de données, vous pourriez vouloir implémenter une récupération par plage de dates.
+            body: JSON.stringify({ model: model.name, page: 1 })
+        }).then(res => res.json()),
+        {
+            enabled: !!model?.name && !!settings.titleField && !!settings.startField && !!settings.endField,
+            select: (data) => data.data || [],
+        }
+    );
+
+    const { events, culture } = useMemo(() => {
+        const processedEvents = calendarData ? processDataForCalendar(calendarData, settings) : [];
+        const lang = i18n.language.split(/[-_]/)[0];
+        const culture = Object.keys(locales).includes(lang) ? lang : 'en';
+        return { events: processedEvents, culture };
+    }, [calendarData, settings, i18n.language]);
+
+    if (isLoading) return <div>Chargement du calendrier...</div>;
+    if (isError) return <div>Erreur lors du chargement des données.</div>;
+    if (!settings.titleField || !settings.startField || !settings.endField) {
+        return <div>La vue calendrier n'est pas configurée. Veuillez définir les champs pour le titre, la date de début et la date de fin dans les paramètres de la vue.</div>
+    }
+
+    return (
+        <div className="calendar-view-container">
+            <Calendar
+                localizer={localizer}
+                events={events}
+                culture={culture}
+                startAccessor="start"
+                endAccessor="end"
+                // Vous pouvez ajouter un gestionnaire onSelectEvent pour afficher une modale avec les détails de l'événement
+                onSelectEvent={event => {
+                    onEditData(model, event.resource);
+                }}
+            />
+        </div>
+    );
+};
+
+export default CalendarView;

package/client/src/CalendarView.scss

@@ -0,0 +1,9 @@
+.calendar-view-container {
+  padding: 1rem;
+  height: 100%;
+  box-sizing: border-box;
+
+  .rbc-calendar {
+    height: 100% !important; // Pour s'assurer que le calendrier prend toute la hauteur disponible
+  }
+}

package/client/src/DataLayout.jsx

@@ -31,16 +31,9 @@ import ViewSwitcher from "./ViewSwitcher.jsx";
 import KanbanConfigModal from "./KanbanConfigModal.jsx";
 import CalendarConfigModal from "./CalendarConfigModal.jsx";
 import KanbanView from "./KanbanView.jsx";
+import CalendarView from "./CalendarView.jsx";
 
 
-const CalendarView = ({ settings, model }) => (
-    <div className="p-4 border rounded-md mt-4 bg-gray-50">
-        <h3 className="font-bold">Vue Calendrier</h3>
-        <p>Affichage des données pour le modèle <strong>{model?.name}</strong> en utilisant le champ de date : <strong>{settings.dateField}</strong>.</p>
-        {/* L'implémentation réelle du calendrier irait ici */}
-    </div>
-);
-
 const NotConfiguredPlaceholder = ({ type, onConfigure }) => (
     <div className="p-4 border border-dashed rounded-md mt-4 text-center bg-gray-50">
         <h4><Trans i18nKey="dataview.notConfiguredTitle" values={{ type }}>Vue {{type}} non configurée</Trans></h4>
@@ -52,9 +45,6 @@ const NotConfiguredPlaceholder = ({ type, onConfigure }) => (
 );
 
 function DataLayout() {
-    const [currentView, setCurrentView] = useState('table');
-
-    // Nouvelle version (persistante)
     const [viewSettings, setViewSettings] = useLocalStorage('viewSettings', {});
 
     const [isCalendarModalOpen, setCalendarModalOpen] = useState(false);
@@ -64,6 +54,9 @@ function DataLayout() {
     const { t, i18n } = useTranslation();
     const lang = (i18n.resolvedLanguage || i18n.language).split(/[-_]/)?.[0];
 
+    // Stocke la vue sélectionnée pour chaque modèle. Ex: { "contacts": "calendar", "tasks": "kanban" }
+    const [viewsByModel, setViewsByModel] = useLocalStorage('dataLayout_viewsByModel', {});
+
     const [filterValues, setFilterValues] = useState({});
     const { dataByModel,paginatedDataByModel,
         setRelationFilters, setSelectedModel, selectedModel,
@@ -94,6 +87,20 @@ function DataLayout() {
     const [showDataEditor, setDataEditorVisible] = useState(false);
     const [showAPIInfo, setAPIInfoVisible] = useState(false);
 
+    // La vue courante est dérivée du modèle sélectionné et des préférences stockées.
+    const currentView = useMemo(() => {
+        if (!selectedModel) return 'table';
+        return viewsByModel[selectedModel.name] || 'table';
+    }, [selectedModel, viewsByModel]);
+
+    // Met à jour la vue pour le modèle actuellement sélectionné.
+    const setCurrentView = (viewName) => {
+        if (!selectedModel) return;
+        setViewsByModel(prev => ({
+            ...prev,
+            [selectedModel.name]: viewName,
+        }));
+    };
 
     // --- MODIFICATION : Logique de changement de vue mise à jour ---
     const handleSwitchView = (viewName) => {
@@ -110,7 +117,7 @@ function DataLayout() {
         const modelSettings = viewSettings[selectedModel.name] || {};
 
         if (viewName === 'calendar') {
-            if (modelSettings.calendar?.dateField) {
+            if (modelSettings.calendar?.titleField && modelSettings.calendar?.startField && modelSettings.calendar?.endField) {
                 setCurrentView('calendar');
             } else {
                 setCalendarModalOpen(true);
@@ -127,15 +134,26 @@ function DataLayout() {
     // --- MODIFICATION : Sauvegarde dans localStorage ---
     const handleSaveCalendarConfig = (config) => {
         if (!selectedModel) return;
-        setViewSettings(prev => ({
-            ...prev,
-            [selectedModel.name]: {
-                ...(prev[selectedModel.name] || {}),
-                calendar: config,
-            },
-        }));
-        setCalendarModalOpen(false);
-        setCurrentView('calendar');
+        const isConfigValid = config && config.titleField && config.startField && config.endField;
+
+        if (isConfigValid) {
+            setViewSettings(prev => ({
+                ...prev,
+                [selectedModel.name]: {
+                    ...(prev[selectedModel.name] || {}),
+                    calendar: config,
+                },
+            }));
+            setCalendarModalOpen(false);
+            setCurrentView('calendar');
+        } else {
+            // Si la configuration n'est pas valide, afficher une notification et garder la modale ouverte
+            addNotification({
+                title: t('datalayout.invalidConfigTitle', 'Configuration invalide'),
+                message: t('datalayout.invalidConfigMessage', 'Veuillez vous assurer que les champs pour le titre, la date de début et la date de fin sont tous sélectionnés.'),
+                status: 'error'
+            });
+        }
     };
 
     const handleSaveKanbanConfig = (config) => {
@@ -162,7 +180,7 @@ function DataLayout() {
         if (!selectedModel) return { calendar: false, kanban: false };
         const modelSettings = viewSettings[selectedModel.name] || {};
         return {
-            calendar: !!modelSettings.calendar?.dateField,
+            calendar: !!modelSettings.calendar?.titleField && !!modelSettings.calendar?.startField && !!modelSettings.calendar?.endField,
             kanban: !!modelSettings.kanban?.groupByField,
         };
     }, [viewSettings, selectedModel]);
@@ -174,7 +192,7 @@ function DataLayout() {
         switch (currentView) {
             case 'calendar':
                 return configuredViews.calendar
-                    ? <CalendarView settings={currentModelViewSettings.calendar} model={selectedModel} />
+                    ? <CalendarView settings={currentModelViewSettings.calendar} onEditData={(model, data) => handleAddData(model,data)} model={selectedModel} />
                     : <NotConfiguredPlaceholder type="calendar" onConfigure={() => setCalendarModalOpen(true)} />;
             case 'kanban':
                 return configuredViews.kanban
@@ -217,13 +235,20 @@ function DataLayout() {
 
     const handleModelSelect = (model) => {
         setRelationFilters({});
-        setCurrentView('table');
         setCheckedItems([])
         setFilterValues({});
         if (!model) {
+            setSelectedModel(null);
             return;
         }
 
+        // Maintient la vue actuelle si elle est configurée pour le nouveau modèle, sinon revient à la vue "table"
+        const modelSettings = viewSettings[model.name] || {};
+        if (currentView === 'calendar' && (!modelSettings.calendar?.titleField || !modelSettings.calendar?.startField || !modelSettings.calendar?.endField)) {
+            setCurrentView('table');
+        } else if (currentView === 'kanban' && !modelSettings.kanban?.groupByField) {
+            setCurrentView('table');
+        }
         const dt = [];
         const t = [...model.fields].reduce((acc, field, index) => {
             if (field.type === "relation") {
@@ -327,11 +352,11 @@ function DataLayout() {
             };
             addNotification(notificationData);
         },
-        onSuccess: (data) => {
+        onSuccess: async (data) => {
 
             console.log('Données enregistrées:', data, selectedModel);
 
-            Event.Trigger(recordToEdit ? 'API_ADD_DATA' : 'API_ADD_DATA', "custom", "data", {
+            await Event.Trigger(recordToEdit ? 'API_ADD_DATA' : 'API_ADD_DATA', "custom", "data", {
                 model: selectedModel.name,
             });
 
@@ -464,7 +489,9 @@ function DataLayout() {
 
     const handleAddData = (model, data)=>{
 
-        handleModelSelect(model);
+        if (!selectedModel || model.name !== selectedModel.name) {
+            handleModelSelect(model);
+        }
 
         if( data ){
             setFormData(data);

package/client/src/DataTable.jsx

@@ -14,7 +14,7 @@ import {
     FaDatabase, FaEraser,
     FaFileExport,
     FaFileImport,
-    FaFilter,
+    FaFilter, FaHistory,
     FaInfo,
     FaPlus,
     FaTrash, FaWrench
@@ -59,6 +59,7 @@ import ConditionBuilder from "./ConditionBuilder.jsx";
 import {pagedFilterToMongoConds} from "./filter.js";
 import {isConditionMet} from "../../src/filter";
 import {DataImporter} from "./DataImporter.jsx";
+import {HistoryDialog} from "./HistoryDialog.jsx";
 
 const Header = ({
                     reversed = false,
@@ -238,6 +239,7 @@ export function DataTable({
     const queryClient = useQueryClient();
     const {me} = useAuthContext()
 
+
     const isDataLoaded = true;
     const [importVisible, setImportVisible] = useState(false);
     const [filterActive, setFilterActive] = useState(false)
@@ -248,6 +250,8 @@ export function DataTable({
     const [showExportDialog, setExportDialogVisible] = useState(false);
 
 
+    const [selectedRow, setSelectedRow] = useState(null);
+
     const [showAddPack, setAddPackVisible] = useState(false);
     const handleAddPack = () => {
         setAddPackVisible(!showAddPack);
@@ -283,7 +287,7 @@ export function DataTable({
                         console.log('Données non trouvées');
                     }
 
-                    Event.Trigger('API_DELETE_DATA', "custom", "data",{ model: item._model, id: item._id });
+                    await Event.Trigger('API_DELETE_DATA', "custom", "data",{ model: item._model, id: item._id });
                     queryClient.invalidateQueries(['api/data', item._model, 'page', page, elementsPerPage, pagedFilters[item._model], pagedSort[item._model]]);
 
                 } else {
@@ -697,6 +701,14 @@ export function DataTable({
                                         >
                                             <FaCopy/>
                                         </button>
+                                        {selectedModel?.history?.enabled && (<button
+                                            onClick={() => setSelectedRow(item._id)}
+                                            data-tooltip-id="tooltipActions"
+                                            data-tooltip-content={t('btns.showHistory', 'Voir l\'historique')}
+                                        >
+                                            <FaHistory />
+                                        </button>)}
+
                                         <button data-tooltip-id="tooltipActions"
                                                 data-tooltip-content={t('btns.delete', 'Supprimer')}
                                                 onClick={() => handleDelete(item)}><FaTrash/></button>
@@ -704,6 +716,7 @@ export function DataTable({
                                 </tr>
                             </DialogProvider></>
                         ))}
+
                         </tbody>
 
                         <tfoot>
@@ -720,6 +733,10 @@ export function DataTable({
                     {importVisible && (<DataImporter onClose={() => {
                         setImportVisible(false);
                     }}/>)}
+
+                    {selectedRow && (
+                        <HistoryDialog onClose={() => setSelectedRow(null)} modelName={selectedModel?.name} recordId={selectedRow} />
+                    )}
                     <RestoreConfirmationModal
                         isOpen={isBackupModalOpen}
                         onClose={() => setIsBackupModalOpen(false)}

package/client/src/Dialog.scss

@@ -44,7 +44,7 @@
 #content .dialog.dialog-relation {
   max-width: 480px;
 }
-.dialog-header {
+#content .dialog-header {
   display: flex;
   gap: 8px;
   justify-content: flex-start;
@@ -53,8 +53,9 @@
   h2 {
     display: flex;
     flex: 1;
-    padding: 0px;
-    margin: 0 0 0 16px;
+    padding: 0;
+    align-items: center;
+    margin: 8px;
     font-size: 100%;
     line-height: 208%;
   }

package/client/src/Field.jsx

@@ -93,6 +93,7 @@ const TextField = forwardRef(function TextField(
     searchable,
       labelProps,
       showErrors=false,
+      after,
     ...rest
   },
   ref,
@@ -186,7 +187,7 @@ const TextField = forwardRef(function TextField(
                 ></textarea>
             )}
 
-            <div className={"flex flex-row flex-1 flex-start"}>
+            <div className={"flex flex-1 flex-no-gap flex-start"}>
                 {!mult && (
                     <input
                         ref={inputRef}
@@ -207,7 +208,7 @@ const TextField = forwardRef(function TextField(
                         {...rest}
                     />
                 )}
-
+                {after}
             </div>
         </div>
         {errors.length > 0 && (

package/client/src/HistoryDialog.jsx

@@ -0,0 +1,253 @@
+import {useCallback, useEffect, useState} from "react";
+import { Dialog } from "./Dialog.jsx";
+import Button from "./Button.jsx";
+import { FaHistory } from "react-icons/fa";
+import {Trans, useTranslation} from "react-i18next";
+import "./HistoryDialog.scss";
+import {Tooltip} from "react-tooltip";
+import {CodeField} from "./Field.jsx";
+
+// Helper to render values in a friendly way for the summary list
+const renderSummaryValue = (value) => {
+    if (value === undefined || value === null) {
+        return <i className="value-empty">empty</i>;
+    }
+    if (typeof value === 'boolean') {
+        return <code className="value-boolean">{value.toString()}</code>;
+    }
+    if (Array.isArray(value)) {
+        return <code className="value-object" title={JSON.stringify(value, null, 2)}>[...] ({value.length} items)</code>
+    }
+    if (typeof value === 'object' && value !== null) {
+        return <code className="value-object" title={JSON.stringify(value, null, 2)}>{`{...}`}</code>
+    }
+    const strValue = String(value);
+    if (strValue.length > 50) {
+        return <span className="value-text" title={strValue}>{strValue.substring(0, 47) + '...'}</span>;
+    }
+    return <span className="value-text">{strValue}</span>;
+};
+
+// New sub-component for rendering a single field change
+const ChangeDetail = ({ field, from, to }) => {
+    const { t } = useTranslation();
+
+    const tt = typeof(to) === 'object' ? JSON.stringify(to,null,2):to;
+    const f = typeof(from) === 'object' ? JSON.stringify(from,null,2):from;
+    return (
+        <div className="change-detail">
+            <strong className="change-field-name" title={field}>{field}</strong>
+            <div className="change-values">
+                <div className="value-from" data-tooltip-id={"changeTooltip"} data-tooltip-content={f}>{renderSummaryValue(from)}</div>
+                <div className="change-arrow">→</div>
+                <div className="value-to"  data-tooltip-id={"changeTooltip"} data-tooltip-content={tt}>{renderSummaryValue(to)}</div>
+            </div>
+        </div>
+    );
+};
+
+// Sub-component for displaying a single history entry
+const HistoryEntry = ({ entry, onPreview, isSelected }) => {
+    const { t } = useTranslation();
+    // The backend has transformed the data for us.
+    // _id: history doc id, _v: version, _op: operation type (i,u,d), _rid: original record id
+    const { _id, _v, _op, _updatedAt, _user, ...data } = entry; // ...data collects the remaining fields
+
+    const operationDetails = {
+        // The keys 'i', 'u', 'd' correspond to what the backend sends now.
+        'i': { label: t('history.op.create', 'Creation'), className: 'op-insert' },
+        'u': { label: t('history.op.update', 'Update'), className: 'op-update' },
+        'd': { label: t('history.op.delete', 'Deletion'), className: 'op-delete' },
+    };
+    const opInfo = operationDetails[_op] || { label: _op, className: '' };
+
+    const renderData = () => {
+        if (_op === 'u') {
+            const changes = Object.entries(data).filter(([, value]) => value && typeof value === 'object' && 'from' in value && 'to' in value);
+            if (changes.length === 0) {
+                return <div className="no-changes-text">{t('history.noChanges', 'No relevant changes recorded.')}</div>;
+            }
+            return (
+                <div className="changes-list">
+                    {changes.map(([field, change]) => (
+                        <ChangeDetail key={field} field={field} from={change.from} to={change.to} />
+                    ))}
+                </div>
+            );
+        }
+
+        // For 'i' (create) and 'd' (delete), show a human-friendly summary of the snapshot.
+        const snapshotEntries = Object.entries(data);
+        if (snapshotEntries.length === 0) {
+            return <div className="no-changes-text">{t('history.noData', 'No data in snapshot.')}</div>;
+        }
+        return (
+            <div className="snapshot-list">
+                {snapshotEntries.map(([key, value]) => (
+                    <div className="snapshot-item" key={key}>
+                        <strong className="snapshot-key" title={key}>{key}:</strong>
+                        <span className="snapshot-value">{renderSummaryValue(value)}</span>
+                    </div>
+                ))}
+            </div>
+        );
+    };
+
+    return (
+        <div className={`history-entry ${isSelected ? 'selected' : ''}`}>
+            <div className="history-entry-header">
+                <span className={`op-badge ${opInfo.className}`}>{opInfo.label}</span>
+                <span className="history-date">{t('history.datePrefix', 'On')} {new Date(_updatedAt).toLocaleString()}</span>
+                {_user && <span className="history-user">{t('history.byUser', 'by')} <strong>{_user}</strong></span>}
+                <span className="history-version">{t('history.version', 'Version:')} {_v}</span>
+                <Button className="btn-preview" onClick={() => onPreview(_v)}>
+                    <Trans i18nKey={"history.previewAction"}>Preview</Trans>
+                </Button>
+            </div>
+            <div className="history-entry-data">
+                {renderData()}
+            </div>
+        </div>
+    );
+};
+
+export const HistoryDialog = ({ modelName, recordId, onClose }) => {
+    const [history, setHistory] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [previewData, setPreviewData] = useState(null);
+    const [previewLoading, setPreviewLoading] = useState(false);
+    const [selectedVersion, setSelectedVersion] = useState(null);
+    const { t, i18n } = useTranslation();
+
+    const fetchHistory = useCallback(async () => {
+        if (!modelName || !recordId) return;
+        setLoading(true);
+        setError(null);
+        try {
+            const query = await fetch(`/api/data/history/${modelName}/${recordId}`);
+            const response = await query.json();
+            if (response.success) {
+                setHistory(response.data);
+            } else {
+                setError(response.error || i18n.t("history.error", "Could not load history."));
+            }
+        } catch (err) {
+            setError(i18n.t("history.error", "Could not load history."));
+            console.error(err);
+        } finally {
+            setLoading(false);
+        }
+    }, [modelName, recordId, i18n]);
+
+    useEffect(() => {
+        fetchHistory();
+    }, [fetchHistory]);
+
+    const handlePreview = async (version) => {
+        if (selectedVersion === version) return; // Already selected
+
+        setSelectedVersion(version);
+        setPreviewLoading(true);
+        setPreviewData(null);
+        try {
+            const res = await fetch(`/api/data/history/${modelName}/${recordId}/${version}`);
+            const response = await res.json();
+            if (response.success) {
+                setPreviewData(response.data);
+            } else {
+                setPreviewData({ error: response.error || i18n.t("history.previewError", "Could not load revision preview.") });
+            }
+        } catch (err) {
+            setPreviewData({ error: i18n.t("history.previewError", "Could not load revision preview.") });
+            console.error(err);
+        } finally {
+            setPreviewLoading(false);
+        }
+    };
+
+    const handleRevert = async (version) => {
+        if (!window.confirm(t('history.confirmRevert', `Are you sure you want to revert to version ${version}? This will create a new version with the content of this revision.`))) {
+            return;
+        }
+
+        setPreviewLoading(true); // Reuse preview loading state to indicate activity
+        try {
+            const res = await fetch(`/api/data/history/${modelName}/${recordId}/revert/${version}`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' }
+            });
+            const response = await res.json();
+
+            if (response.success) {
+                alert(t('history.revertSuccess', 'Document successfully reverted. The history will now be updated.'));
+                // Refresh history list and clear preview
+                await fetchHistory();
+                setPreviewData(null);
+                setSelectedVersion(null);
+            } else {
+                alert(t('history.revertError', `Error reverting: ${response.error || 'Unknown error'}`));
+            }
+        } catch (err) {
+            alert(t('history.revertError', 'An error occurred while reverting.'));
+            console.error(err);
+        } finally {
+            setPreviewLoading(false);
+        }
+    };
+
+    return (
+        <Dialog
+            title={<><FaHistory style={{ marginRight: '8px' }} /> <Trans i18nKey={"history.title"}>Historique de l'enregistrement</Trans></>}
+            onClose={onClose}
+            isClosable={true}
+            className="history-dialog"
+        >
+            <Tooltip id={"changeTooltip"} clickable={true} />
+            <div className="history-dialog-content-split">
+                <div className="history-list-container">
+                    {loading && <div><Trans i18nKey={"history.loading"}>Chargement de l'historique..</Trans></div>}
+                    {error && <div className="error-message">{error}</div>}
+                    {!loading && !error && (
+                        <div className="history-list">
+                            {history.length > 0 ? (
+                                history.map(entry =>
+                                    <HistoryEntry
+                                        key={entry._id}
+                                        entry={entry}
+                                        onPreview={handlePreview}
+                                        isSelected={selectedVersion === entry._v}
+                                    />)
+                            ) : (
+                                <div><Trans i18nKey={"history.noHistory"}>Aucun historique trouvé pour cet enregistrement.</Trans></div>
+                            )}
+                        </div>
+                    )}
+                </div>
+                <div className="history-preview-container">
+                    <div className="preview-header">
+                        <h4><Trans i18nKey={"history.previewTitle"}>Revision Preview</Trans></h4>
+                        {previewData && !previewData.error && (
+                            <Button
+                                className="btn-revert"
+                                onClick={() => handleRevert(selectedVersion)}
+                                disabled={previewLoading}
+                                title={t('history.revertTooltip', 'Revert the document to this state. This creates a new version.')}
+                            >
+                                <Trans i18nKey={"history.revertAction"}>Revert to this version</Trans>
+                            </Button>
+                        )}
+                    </div>
+
+                    <div className="history-preview-area">
+                        {previewLoading && <div><Trans i18nKey={"history.loadingPreview"}>Loading preview...</Trans></div>}
+                        {!previewLoading && previewData && <CodeField value={JSON.stringify(previewData,null, 2)} language={"json"} disabled={true} />}
+                        {!previewLoading && !previewData && (
+                            <div className="placeholder"><Trans i18nKey={"history.selectRevision"}>Select a revision to preview its full state.</Trans></div>
+                        )}
+                    </div>
+                </div>
+            </div>
+        </Dialog>
+    );
+};