data-primals-engine 1.4.1 → 1.4.3

package/README.md

@@ -1,4 +1,4 @@
-# Data Primals Engine
+# data-primals-engine
 [![Node.js CI](https://github.com/anonympins/data-primals-engine/actions/workflows/node.js.yml/badge.svg?branch=main)](https://github.com/anonympins/data-primals-engine/actions/workflows/node.js.yml)
 ![](https://img.shields.io/npm/dw/data-primals-engine)
 ![](https://img.shields.io/npm/last-update/data-primals-engine)
@@ -33,15 +33,6 @@
 - **📦 Starter Packs**: Quickly bootstrap applications with pre-built data packs for CRM, e-commerce, and more.
 - **📄Auto-Generated API Documentation**: Interactive API documentation available via the interface or at `/api-docs`.
 
-## ⚛️ Frontend Integration (React)
-
-This engine is designed to work seamlessly with its dedicated client library, **`data-primals-engine/client`**. This library provides a complete set of React hooks and UI components to build a rich, data-centric user interface on top of the backend.
-
-While this README focuses on the backend engine and its API, you can find detailed instructions on how to integrate the client part in your React application here:
-
-➡️ **[View the Frontend Integration Guide](https://github.com/anonympins/data-primals-engine/tree/develop/client)**
-
-
 ## 🌟 Why Choose data-primals-engine?
 
 - **Zero Boilerplate**: Focus on your business logic, not infrastructure
@@ -129,10 +120,11 @@ By default, the app runs on port **7633** : http://localhost:7633
 
 The engine includes a pluggable system for user management. For development and testing, it uses a `DefaultUserProvider` which creates a volatile **`demo`** user. This is perfect for getting started quickly without setting up a user database.
 
-For production environments, you should extend the base `UserProvider` class to connect to your actual user database (e.g., another MongoDB collection, a SQL database, or an external authentication service). This allows you to implement your own logic for finding users and validating passwords.
+For production environments, you should use SSO providers as seen in the page below, or extend the base `UserProvider` class to connect to your actual user database (e.g., another MongoDB collection, a SQL database, or an external authentication service). This allows you to implement your own logic for finding and creating users.
+
+### Model generation
+Models are the way to handle structured data. They organize data and they can be declared in JSON.
 
-### Models
-Define schemas using JSON:
 ```json
 {
   "name": "product",
@@ -150,12 +142,8 @@ Define schemas using JSON:
   ]
 }
 ```
-### Smart Relations
-- Handles up to 2,000 direct relations by default (can be customized)
-- For larger datasets, use intermediate collections
-- Automatic indexing on key fields
-- Custom indexing on fields
-- Custom fields :
+
+### Custom fields types
 
 | Type        | Description                                                                         | 	Properties/Notes                                                         | 
 |:------------|:------------------------------------------------------------------------------------|:--------------------------------------------------------------------------|
@@ -180,6 +168,12 @@ Define schemas using JSON:
 | model	      | Stores a model by name                                                              | –                                                                         |                                            
 | modelField	 | Stores a model field path	                                                          | –                                                                         |                                            
 
+### Other model features
+- Handles up to 2,000 direct relations by default (can be customized). For larger datasets, use intermediate collections
+- Automatic indexing on key fields
+- Custom indexing on fields
+- Anonymizable fields (encrypted for API users)
+
 ### Model constraints
 ```javascript
 {
@@ -250,6 +244,7 @@ data-primals-engine/
 ### 📁 Model Management
 
 #### Create a model
+> Defines a new data model (schema) in the system. The request body must contain the model's name and an array of field definitions.
 ```bash
 curl -X POST http://localhost:7633/api/model?_user=demo \
      -H "Authorization: Bearer demotoken" \
@@ -265,6 +260,7 @@ curl -X POST http://localhost:7633/api/model?_user=demo \
 ```
 
 #### Update a model
+> Modifies an existing model's structure using its unique ID. This allows you to add, remove, or change fields.
 ```bash
 curl -X PUT http://localhost:7633/api/model/60d0fe4f5311236168a109ca?_user=demo \
      -H "Authorization: Bearer demotoken" \
@@ -280,6 +276,7 @@ curl -X PUT http://localhost:7633/api/model/60d0fe4f5311236168a109ca?_user=demo
 ```
 
 #### Delete a model
+> Permanently deletes a model definition using its name. This action is irreversible.
 ```bash
 curl -X DELETE "http://localhost:7633/api/model?_user=demo&name=newModel" \
      -H "Authorization: Bearer demotoken"
@@ -288,6 +285,7 @@ curl -X DELETE "http://localhost:7633/api/model?_user=demo&name=newModel" \
 ### 🗂️ Data Management
 
 #### Create a document
+> Creates a single new document in the specified model. The `data` object must conform to the model's schema.
 ```bash
 curl -X POST http://localhost:7633/api/data?_user=demo \
      -H "Authorization: Bearer demotoken" \
@@ -303,18 +301,22 @@ curl -X POST http://localhost:7633/api/data?_user=demo \
          }'
 ```
 
+
 #### Search documents
+> Searches for documents using a MongoDB-style filter. This endpoint is ideal for complex queries, pagination, and sorting.
+
 ```bash
 curl -X POST http://localhost:7633/api/data/search?_user=demo \
      -H "Authorization: Bearer demotoken" \
      -H "Content-Type: application/json" \
      -d '{
            "model": "product",
-           "filter": { "price": { "$gt": 50 } }
+           "filter": { "$gt" : ["$price", 50] }
          }'
 ```
 
 #### Update a document by ID
+> Updates a single document by its unique ID. The request body contains the fields to be modified.
 ```bash
 curl -X PUT http://localhost:7633/api/data/64a31c123ef59d4c8d55aa99?_user=demo \
      -H "Authorization: Bearer demotoken" \
@@ -325,7 +327,9 @@ curl -X PUT http://localhost:7633/api/data/64a31c123ef59d4c8d55aa99?_user=demo \
          }'
 ```
 
+
 #### Bulk update
+> Updates multiple documents matching a filter. This is efficient for applying changes to a batch of records, such as restocking all out-of-stock products.
 ```bash
 curl -X PUT http://localhost:7633/api/data?_user=demo \
      -H "Authorization: Bearer demotoken" \
@@ -337,6 +341,7 @@ curl -X PUT http://localhost:7633/api/data?_user=demo \
 ```
 
 #### Delete documents
+> Deletes one or more documents. You can provide an array of `ids` to delete specific documents.
 ```bash
 curl -X DELETE http://localhost:7633/api/data?_user=demo \
      -H "Authorization: Bearer demotoken" \
@@ -811,7 +816,7 @@ Event.Listen("OnDataAdded", (engine, data) => {
 | OnDataInsert     | Triggered just before data insertion. It will use the overrided data.   | System        | internal             | (data)                                                                                                                                   |
 | OnDataValidate   | Triggered to override validation check.                                 | System        | internal             | (value, field, data)                                                                                                                     |
 | OnDataFilter     | Triggered to override data filtering operation.                         | System        | internal             | (filteredValue, field, data)                                                                                                             |
-| OnEmailTemplate  | Triggered to override custom email templates                            | System        | internal             | (filteredValue, field, data)                                                                                                             |
+| OnEmailTemplate  | Triggered to override custom email templates                            | System        | internal             | (templateData, lang)                                                                                                                     |
 
 ### Triggering events
 
@@ -826,6 +831,16 @@ Results are merged together if multiple events are triggered.
 - arrays are concatenated
 - objects are merged using spread operator
 
+---
+
+## ⚛️ Frontend Integration (React)
+
+This engine is designed to work seamlessly with its dedicated client library, **`data-primals-engine/client`**. This library provides a complete set of React hooks and UI components to build a rich, data-centric user interface on top of the backend.
+
+While this README focuses on the backend engine and its API, you can find detailed instructions on how to integrate the client part in your React application here:
+
+➡️ **[View the Frontend Integration Guide](https://github.com/anonympins/data-primals-engine/tree/develop/client)**
+
 
 ---
 
@@ -849,4 +864,4 @@ Distributed under the **MIT License**. See `LICENSE` file.
 
 ---
 
-## [🔼](https://github.com/anonympins/data-primals-engine?tab=readme-ov-file#data-primals-engine) Back to Top
+## [🔼](#data-primals-engine) Back to Top

package/client/package-lock.json

@@ -33,6 +33,7 @@
         "react": "^18.3.1",
         "react-big-calendar": "^1.15.0",
         "react-dom": "^18.3.1",
+        "react-leaflet": "^4.2.1",
         "react-router": "^7.8.1",
         "react-switch": "^7.1.0",
         "uniqid": "^5.4.0",
@@ -1692,6 +1693,17 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@react-leaflet/core": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.1.0.tgz",
+      "integrity": "sha512-Qk7Pfu8BSarKGqILj4x7bCSZ1pjuAPZ+qmRwH5S7mDS91VSbVVsJSrW4qA+GPrro8t69gFYVMWb1Zc4yFmPiVg==",
+      "license": "Hippocratic-2.1",
+      "peerDependencies": {
+        "leaflet": "^1.9.0",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
     "node_modules/@remirror/core-constants": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@remirror/core-constants/-/core-constants-3.0.0.tgz",
@@ -5157,6 +5169,13 @@
         "json-buffer": "3.0.1"
       }
     },
+    "node_modules/leaflet": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
+      "license": "BSD-2-Clause",
+      "peer": true
+    },
     "node_modules/levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -6274,6 +6293,20 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/react-leaflet": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-4.2.1.tgz",
+      "integrity": "sha512-p9chkvhcKrWn/H/1FFeVSqLdReGwn2qmiobOQGO3BifX+/vV/39qhY8dGqbdcPh1e6jxh/QHriLXr7a4eLFK4Q==",
+      "license": "Hippocratic-2.1",
+      "dependencies": {
+        "@react-leaflet/core": "^2.1.0"
+      },
+      "peerDependencies": {
+        "leaflet": "^1.9.0",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
     "node_modules/react-lifecycles-compat": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",

package/client/package.json

@@ -51,6 +51,7 @@
     "react": "^18.3.1",
     "react-big-calendar": "^1.15.0",
     "react-dom": "^18.3.1",
+    "react-leaflet": "^4.2.1",
     "react-router": "^7.8.1",
     "react-switch": "^7.1.0",
     "uniqid": "^5.4.0",

package/client/src/App.scss

@@ -1039,10 +1039,18 @@ h2.shadow {
   }
 }
 
-.mini input[type=checkbox] {
-  cursor: pointer;
-  width: 15px;
-  height: 15px;
+.mini {
+  .field-checkbox.field-bg {
+    background: none;
+  }
+  input[type=checkbox] {
+    cursor: pointer;
+    margin: 0 auto;
+    background: none;
+    width: 16px;
+    height: 16px;
+    display: block;
+  }
 }
 
 .pagination-wrapper {

package/client/src/AssistantChat.jsx

@@ -1,16 +1,26 @@
 // client/src/components/AssistantChat.jsx
 
 import React, { useState, useMemo, useEffect, useRef } from 'react';
-import { FaRobot, FaPaperPlane, FaTimes, FaExpand, FaCompress } from 'react-icons/fa';
+import { FaRobot, FaPaperPlane, FaTimes, FaExpand, FaCompress, FaPlus } from 'react-icons/fa';
 import './AssistantChat.scss';
 import { useModelContext } from "./contexts/ModelContext.jsx";
 import { Trans, useTranslation } from "react-i18next";
 import Markdown from 'react-markdown';
 import {useQueryClient} from "react-query";
 import {providers} from "../../src/modules/assistant/constants.js";
+import DashboardChart from "./DashboardChart.jsx";
+import {useUI} from "./contexts/UIContext.jsx";
+import Button from "./Button.jsx";
+import {getUserHash, getUserId} from "../../src/data.js";
+import {useNavigation} from "react-router";
+import {useAuthContext} from "./contexts/AuthContext.jsx";
+import {useNavigate} from "react-router-dom";
+import {DataTable} from "./DataTable.jsx";
 
 const AssistantChat = ({ config }) => {
-    const { selectedModel } = useModelContext();
+    const { selectedModel, models } = useModelContext();
+    const { me } = useAuthContext();
+    const nav = useNavigate();
     const { t } = useTranslation();
     const [isOpen, setIsOpen] = useState(false);
     const [isMaximized, setIsMaximized] = useState(false);
@@ -19,6 +29,7 @@ const AssistantChat = ({ config }) => {
     ]);
     const [input, setInput] = useState('');
     const [isLoading, setIsLoading] = useState(false);
+    const { setChartToAdd } = useUI();
 
     // NOUVEL ÉTAT : Stocke une action en attente de confirmation de l'utilisateur
     const [pendingConfirmation, setPendingConfirmation] = useState(null);
@@ -74,7 +85,8 @@ const AssistantChat = ({ config }) => {
                 const botMessage = {
                     from: 'bot',
                     text: null,
-                    actionDetails: null // Pour stocker les détails de l'action à afficher
+                    actionDetails: null,
+                    chartConfig: null// Pour stocker les détails de l'action à afficher
                 };
 
                 // Gérer le texte à afficher
@@ -104,7 +116,15 @@ const AssistantChat = ({ config }) => {
                 }
 
                 // On ajoute le message à la liste uniquement s'il a du contenu textuel
-                if (botMessage.text) {
+                if (result.chartConfig) {
+                    botMessage.chartConfig = result.chartConfig;
+                }
+                // Si des données tabulaires sont retournées
+                if (result.dataResult) {
+                    botMessage.dataResult = result.dataResult;
+                }
+                // On ajoute le message à la liste uniquement s'il a du contenu textuel ou un graphique
+                if (botMessage.text || botMessage.chartConfig || botMessage.dataResult) {
                     setMessages(prev => [...prev, botMessage]);
                 }
 
@@ -225,7 +245,30 @@ const AssistantChat = ({ config }) => {
             <div className="chat-messages">
                 {messages.map((msg, index) => (
                     <div key={index} className={`message ${msg.from}`}>
-                        <Markdown>{msg.text}</Markdown>
+                        {msg.text && <Markdown>{msg.text}</Markdown>}
+                        {msg.chartConfig && (
+                            <div className="chart-container">
+                                <DashboardChart config={msg.chartConfig} />
+                                <div className="chart-actions" style={{ marginTop: '8px', textAlign: 'right' }}>
+                                    <Button onClick={() => {
+                                        nav('/user/'+getUserHash(me)+'/dashboards');
+                                        setChartToAdd(msg.chartConfig);
+                                    }} title={t('assistant.addToDashboard', 'Ajouter au tableau de bord')}>
+                                        <FaPlus />
+                                        <span style={{ marginLeft: '8px' }}>
+                                            {t('assistant.addToDashboard', 'Ajouter au tableau de bord')}
+                                        </span>
+                                    </Button>
+                                </div>
+                            </div>
+                        )}
+
+                        {/* NOUVEAU : Affichage des données tabulaires */}
+                        {msg.dataResult && (
+                            <div className="data-table-container">
+                                <DataTable model={models.find(f => f.name === msg.dataResult.model)} advanced={false} data={msg.dataResult.data} />
+                            </div>
+                        )}
                         {msg.actionDetails && (
                             <div className="action-details">
                                 {msg.actionDetails.model && (

package/client/src/AssistantChat.scss

@@ -125,7 +125,6 @@ $input-height: 50px;
   gap: 12px;
 
   .message {
-    max-width: 80%;
     p {
       padding: 4px 8px;
       border-radius: 18px;

package/client/src/ChartConfigModal.jsx

@@ -55,6 +55,7 @@ const ChartConfigModal = ({ isOpen, onClose, onSave, initialConfig = null }) =>
     const [chartType, setChartType] = useState('bar');
     const [chartAggregationType, setChartAggregationType] = useState('count');
     const [chartTitle, setChartTitle] = useState('');
+    const [timeUnit, setTimeUnit] = useState('day');
 
     const currentModel = models.find(f => f.name === selectedModel && f._user === me.username);
 
@@ -74,6 +75,7 @@ const ChartConfigModal = ({ isOpen, onClose, onSave, initialConfig = null }) =>
                 setColorField(initialConfig.chartBackgroundColor || null);
                 setGroupByLabelField(initialConfig.groupByLabelField || '');
                 setChartAggregationType(initialConfig.aggregationType || 'count');
+                setTimeUnit(initialConfig.timeUnit || 'day');
                 // Note: modelFields et relatedModelFields seront chargés par les autres useEffects
                 // déclenchés par le changement de selectedModel et groupByField.
             } else {
@@ -87,6 +89,7 @@ const ChartConfigModal = ({ isOpen, onClose, onSave, initialConfig = null }) =>
                 setGroupByField('');
                 setGroupByLabelField('');
                 setChartAggregationType('count');
+                setTimeUnit('day');
                 setModelFields([]);
                 setRelatedModelFields([]);
             }
@@ -155,6 +158,9 @@ const ChartConfigModal = ({ isOpen, onClose, onSave, initialConfig = null }) =>
     const isRelationGroupBy = isGroupingChart && modelFields.find(f => f.name === groupByField)?.type === 'relation';
     const isYAxisRequiredForValidation = chartAggregationType && !['count'].includes(chartAggregationType);
 
+    const xAxisFieldDefinition = modelFields.find(f => f.name === xAxisField);
+    const isTemporal = !isGroupingChart && xAxisFieldDefinition && ['date', 'datetime'].includes(xAxisFieldDefinition.type);
+
     // handleSave (inchangé - envoie l'état actuel)
     const handleSave = () => {
         const isValid = selectedModel && chartType && chartTitle &&
@@ -178,6 +184,7 @@ const ChartConfigModal = ({ isOpen, onClose, onSave, initialConfig = null }) =>
                 aggregationType: chartAggregationType,
                 chartBackgroundColor: colorField,
                 filter,
+                timeUnit: isTemporal ? timeUnit : undefined,
             });
         } else {
             let errorMsg = t('chartConfigModal.fillFields', "Veuillez remplir tous les champs requis.");
@@ -321,15 +328,33 @@ const ChartConfigModal = ({ isOpen, onClose, onSave, initialConfig = null }) =>
                                 )}
                             </>
                         ) : (
-                            <SelectField
-                                label={t('chartConfigModal.xAxis', 'Axe X')}
-                                value={xAxisField}
-                                onChange={(item) => setXAxisField(item.value)}
-                                items={[{label: t('selectPlaceholder', 'Choisir...'), value: ''}, ...xAxisOptions]}
-                                required={!isGroupingChart}
-                                disabled={xAxisOptions.length === 0}
-                                hint={xAxisOptions.length === 0 ? t('chartConfigModal.noXAxisFields', 'Aucun champ utilisable pour l\'axe X') : ''}
-                            />
+                            <>
+                                <SelectField
+                                    label={t('chartConfigModal.xAxis', 'Axe X')}
+                                    value={xAxisField}
+                                    onChange={(item) => setXAxisField(item.value)}
+                                    items={[{label: t('selectPlaceholder', 'Choisir...'), value: ''}, ...xAxisOptions]}
+                                    required={!isGroupingChart}
+                                    disabled={xAxisOptions.length === 0}
+                                    hint={xAxisOptions.length === 0 ? t('chartConfigModal.noXAxisFields', 'Aucun champ utilisable pour l\'axe X') : ''}
+                                />
+                                {isTemporal && (
+                                    <SelectField
+                                        label={t('charts.timeUnit', 'Échelle de temps')}
+                                        value={timeUnit}
+                                        onChange={(item) => setTimeUnit(item.value)}
+                                        items={[
+                                            { value: 'minute', label: t('time.minute', 'Minute') },
+                                            { value: 'hour', label: t('time.hour', 'Heure') },
+                                            { value: 'day', label: t('time.day', 'Jour') },
+                                            { value: 'week', label: t('time.week', 'Semaine') },
+                                            { value: 'month', label: t('time.month', 'Mois') },
+                                            { value: 'year', label: t('time.year', 'Année') },
+                                        ]}
+                                        hint={t('charts.timeUnitHelp', "Définit l'unité de regroupement pour l'axe des dates.")}
+                                    />
+                                )}
+                            </>
                         )}
 
                         {/* Axe Y (inchangé) */}

package/client/src/ConditionBuilder.jsx

@@ -14,9 +14,9 @@ import './ConditionBuilder.scss';
 import { useTranslation, Trans } from "react-i18next";
 import { CodeField } from "./Field.jsx";
 import { useAuthContext } from "./contexts/AuthContext.jsx";
-import { MONGO_CALC_OPERATORS} from "./filter.js";
 import {ConditionBuilder2} from "./ConditionBuilder2.jsx";
 import {mongoOperators} from "./constants.js";
+import {MONGO_CALC_OPERATORS} from "../../src/constants";
 
 const getFieldDefinition = (fields, fieldName) => fields?.find(f => f.name === fieldName);
 const getModelFields = (modelName, allModels, user) => {

package/client/src/ConditionBuilder2.jsx

@@ -2,10 +2,11 @@ import React, {useEffect, useState} from 'react';
 import { Tooltip } from 'react-tooltip';
 import {FaPlus, FaProjectDiagram, FaTrash, FaInfoCircle, FaEdit, FaTags, FaCalendarAlt} from 'react-icons/fa';
 import { Trans } from 'react-i18next';
-import {convertInputValue, MONGO_CALC_OPERATORS} from "./filter.js";
+import {convertInputValue} from "./filter.js";
 import i18n from "i18next";
 import {FaRepeat} from "react-icons/fa6";
 import {useAuthContext} from "./contexts/AuthContext.jsx";
+import {MONGO_CALC_OPERATORS} from "../../src/constants.js";
 
 
 // Déterminer si le champ doit être une date