data-primals-engine 1.0.10 → 1.1.0

package/client/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "client",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build --mode development",
+    "build:ssr-client": "vite build --ssrManifest --outDir dist/client --mode development",
+    "build:ssr-server": "vite build --ssr src/entry-server.jsx --outDir dist/server --mode development",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.24.7",
+    "@codeium/react-code-editor": "^1.0.12",
+    "@codemirror/lang-javascript": "^6.2.3",
+    "@tiptap/extension-code": "^2.12.0",
+    "@tiptap/extension-code-block": "^2.12.0",
+    "@tiptap/extension-code-block-lowlight": "^2.12.0",
+    "@tiptap/extension-color": "^2.11.5",
+    "@tiptap/extension-hard-break": "^2.12.0",
+    "@tiptap/extension-image": "^2.12.0",
+    "@tiptap/extension-link": "^2.12.0",
+    "@tiptap/extension-list-item": "^2.11.5",
+    "@tiptap/extension-text-style": "^2.11.5",
+    "@tiptap/pm": "^2.11.5",
+    "@tiptap/react": "^2.11.5",
+    "@tiptap/starter-kit": "^2.11.5",
+    "@uiw/react-codemirror": "^4.23.10",
+    "chart.js": "^4.4.9",
+    "chartjs-adapter-date-fns": "^3.0.0",
+    "classnames": "^2.5.1",
+    "date-fns": "^4.1.0",
+    "express-rate-limit": "^7.5.1",
+    "lowlight": "^3.3.0",
+    "react-chartjs-2": "^5.3.0",
+    "react-code-blocks": "^0.1.6",
+    "react-cookie": "^8.0.0",
+    "react-dom": "^18.3.1",
+    "react-ga": "^3.3.1",
+    "react-icons": "^5.0.1",
+    "react-international-phone": "^4.5.0",
+    "react-router": "^7.2.0",
+    "react-router-dom": "^7.1.5",
+    "react-syntax-highlighter": "^15.6.1",
+    "react-tooltip": "^5.28.1",
+    "uniqid": "^5.4.0",
+    "yet-another-react-lightbox": "^3.22.0",
+    "data-primals-engine": "^1.0.11",
+    "react-query": "^3.39.3"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.17.0",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.17.0",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "globals": "^15.14.0",
+    "process": "^0.11.10",
+    "sass-embedded": "^1.83.4",
+    "vite": "^6.1.1"
+  }
+}

package/client/public/doc/API.postman_collection.json

@@ -0,0 +1,214 @@
+{
+	"info": {
+		"_postman_id": "4cafd155-48e1-4b6d-84a5-15290eee57af",
+		"name": "PROD",
+		"schema": "https://schema.getpostman.com/json/collection/v2.1.0/collection.json",
+		"_exporter_id": "42951162"
+	},
+	"item": [
+		{
+			"name": "Create a model",
+			"request": {
+				"method": "POST",
+				"header": [],
+				"body": {
+					"mode": "raw",
+					"raw": "{\r\n  \"name\": \"dashboard\",\r\n  \"description\": \"Configuration d'un tableau de bord personnalisé par l'utilisateur.\",\r\n  \"maxRequestData\": 50,\r\n  \"fields\": [\r\n    {\r\n      \"name\": \"name\",\r\n      \"type\": \"string\",\r\n      \"required\": true,\r\n      \"hint\": \"Nom affiché et personnalisable du tableau de bord.\",\r\n      \"locked\": null\r\n    },\r\n    {\r\n      \"name\": \"description\",\r\n      \"type\": \"string\",\r\n      \"hint\": \"Description facultative pour donner plus de contexte au tableau de bord.\",\r\n      \"locked\": null\r\n    },\r\n    {\r\n      \"name\": \"layout\",\r\n      \"type\": \"code\",\r\n      \"language\": \"json\",\r\n      \"required\": true,\r\n      \"default\": \"{ \\\"type\\\": \\\"columns\\\", \\\"columns\\\": [] }\",\r\n      \"hint\": \"Structure JSON décrivant l'organisation des KPIs. Exemple : { \\\"type\\\": \\\"columns\\\", \\\"columns\\\": [ [\\\"kpi_id_1\\\"], [\\\"kpi_id_2\\\", \\\"kpi_id_3\\\"] ] }.\",\r\n      \"locked\": null\r\n    },\r\n    {\r\n      \"name\": \"settings\",\r\n      \"type\": \"code\",\r\n      \"language\": \"json\",\r\n      \"default\": \"{ \\\"defaultTimeRange\\\": \\\"last_7_days\\\", \\\"refreshInterval\\\": null }\",\r\n      \"hint\": \"Paramètres JSON pour le tableau de bord, comme la plage de temps par défaut ('defaultTimeRange') ou l'intervalle de rafraîchissement en secondes ('refreshInterval').\",\r\n      \"locked\": null\r\n    },\r\n    {\r\n      \"name\": \"isDefault\",\r\n      \"type\": \"boolean\",\r\n      \"default\": false,\r\n      \"hint\": \"Si 'true', ce tableau de bord est affiché par défaut pour l'utilisateur.\",\r\n      \"locked\": null\r\n    }\r\n  ]\r\n}",
+					"options": {
+						"raw": {
+							"language": "json"
+						}
+					}
+				},
+				"url": {
+					"raw": "https://data.primals.net/api/model?_user=demo",
+					"protocol": "https",
+					"host": [
+						"data",
+						"primals",
+						"net"
+					],
+					"path": [
+						"api",
+						"model"
+					],
+					"query": [
+						{
+							"key": "_user",
+							"value": "demo"
+						}
+					]
+				}
+			},
+			"response": []
+		},
+		{
+			"name": "Import a list of models",
+			"request": {
+				"method": "POST",
+				"header": [],
+				"body": {
+					"mode": "raw",
+					"raw": "{ \"models\" : [ \"translation\" ]}",
+					"options": {
+						"raw": {
+							"language": "json"
+						}
+					}
+				},
+				"url": {
+					"raw": "https://data.primals.net/api/models/import?_user=demo",
+					"protocol": "https",
+					"host": [
+						"data",
+						"primals",
+						"net"
+					],
+					"path": [
+						"api",
+						"models",
+						"import"
+					],
+					"query": [
+						{
+							"key": "_user",
+							"value": "demo"
+						},
+						{
+							"key": "",
+							"value": null,
+							"disabled": true
+						}
+					]
+				}
+			},
+			"response": []
+		},
+		{
+			"name": "Add data to a model",
+			"request": {
+				"method": "POST",
+				"header": [],
+				"body": {
+					"mode": "raw",
+					"raw": "{\r\n  \"model\": \"dashboard\",\r\n  \"data\": {\r\n    \"name\": \"Dashboard 1\",\r\n    \"layout\": {}\r\n  }\r\n}",
+					"options": {
+						"raw": {
+							"language": "json"
+						}
+					}
+				},
+				"url": {
+					"raw": "https://data.primals.net/api/data?_user=demo",
+					"protocol": "https",
+					"host": [
+						"data",
+						"primals",
+						"net"
+					],
+					"path": [
+						"api",
+						"data"
+					],
+					"query": [
+						{
+							"key": "_user",
+							"value": "demo"
+						}
+					]
+				}
+			},
+			"response": []
+		},
+		{
+			"name": "Raw filtering",
+			"request": {
+				"method": "POST",
+				"header": [],
+				"body": {
+					"mode": "raw",
+					"raw": "{\"filter\":{\r\n    \"key\": \"createaccount.content\",\r\n   \"lang\": {\"$find\":{\"$and\":[\r\n                {\"$or\":[\r\n                    {\"$and\":[\r\n                        {\"$regexMatch\":{\"input\":\"$$this.name\",\"regex\":\"en\"}}\r\n                ]},{\"$regexMatch\":{\"input\":\"$$this.code\",\"regex\":\"en\"}}\r\n            ]}\r\n            ]}}     \r\n}}",
+					"options": {
+						"raw": {
+							"language": "json"
+						}
+					}
+				},
+				"url": {
+					"raw": "https://data.primals.net/api/data/search?model=translation&_user=demo&depth=1",
+					"protocol": "https",
+					"host": [
+						"data",
+						"primals",
+						"net"
+					],
+					"path": [
+						"api",
+						"data",
+						"search"
+					],
+					"query": [
+						{
+							"key": "model",
+							"value": "translation"
+						},
+						{
+							"key": "_user",
+							"value": "demo"
+						},
+						{
+							"key": "depth",
+							"value": "1"
+						}
+					]
+				}
+			},
+			"response": []
+		},
+		{
+			"name": "Big data filtering",
+			"request": {
+				"method": "POST",
+				"header": [],
+				"body": {
+					"mode": "raw",
+					"raw": "{\r\n  \"filter\": {\r\n    \"$find\": [\"recipient\", \r\n        {\"$find\": [\"roles\", {\"$eq\": [\"$$this.name\", \"reg\"]}]}\r\n    ]\r\n  }\r\n}",
+					"options": {
+						"raw": {
+							"language": "json"
+						}
+					}
+				},
+				"url": {
+					"raw": "https://data.primals.net/api/data/search?model=message&_user=demo&depth=6",
+					"protocol": "https",
+					"host": [
+						"data",
+						"primals",
+						"net"
+					],
+					"path": [
+						"api",
+						"data",
+						"search"
+					],
+					"query": [
+						{
+							"key": "model",
+							"value": "message"
+						},
+						{
+							"key": "_user",
+							"value": "demo"
+						},
+						{
+							"key": "depth",
+							"value": "6"
+						}
+					]
+				}
+			},
+			"response": []
+		}
+	]
+}

package/client/public/github.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="107.5" height="28" role="img" aria-label="GITHUB"><title>GITHUB</title><g shape-rendering="crispEdges"><rect width="32" height="28" fill="black"/><rect x="32" width="75.5" height="28" fill="black"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="100"><image x="9" y="7" width="14" height="14" href="data:image/svg+xml;base64,PHN2ZyBmaWxsPSJ3aGl0ZSIgcm9sZT0iaW1nIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHRpdGxlPkdpdEh1YjwvdGl0bGU+PHBhdGggZD0iTTEyIC4yOTdjLTYuNjMgMC0xMiA1LjM3My0xMiAxMiAwIDUuMzAzIDMuNDM4IDkuOCA4LjIwNSAxMS4zODUuNi4xMTMuODItLjI1OC44Mi0uNTc3IDAtLjI4NS0uMDEtMS4wNC0uMDE1LTIuMDQtMy4zMzguNzI0LTQuMDQyLTEuNjEtNC4wNDItMS42MUM0LjQyMiAxOC4wNyAzLjYzMyAxNy43IDMuNjMzIDE3LjdjLTEuMDg3LS43NDQuMDg0LS43MjkuMDg0LS43MjkgMS4yMDUuMDg0IDEuODM4IDEuMjM2IDEuODM4IDEuMjM2IDEuMDcgMS44MzUgMi44MDkgMS4zMDUgMy40OTUuOTk4LjEwOC0uNzc2LjQxNy0xLjMwNS43Ni0xLjYwNS0yLjY2NS0uMy01LjQ2Ni0xLjMzMi01LjQ2Ni01LjkzIDAtMS4zMS40NjUtMi4zOCAxLjIzNS0zLjIyLS4xMzUtLjMwMy0uNTQtMS41MjMuMTA1LTMuMTc2IDAgMCAxLjAwNS0uMzIyIDMuMyAxLjIzLjk2LS4yNjcgMS45OC0uMzk5IDMtLjQwNSAxLjAyLjAwNiAyLjA0LjEzOCAzIC40MDUgMi4yOC0xLjU1MiAzLjI4NS0xLjIzIDMuMjg1LTEuMjMuNjQ1IDEuNjUzLjI0IDIuODczLjEyIDMuMTc2Ljc2NS44NCAxLjIzIDEuOTEgMS4yMyAzLjIyIDAgNC42MS0yLjgwNSA1LjYyNS01LjQ3NSA1LjkyLjQyLjM2LjgxIDEuMDk2LjgxIDIuMjIgMCAxLjYwNi0uMDE1IDIuODk2LS4wMTUgMy4yODYgMCAuMzE1LjIxLjY5LjgyNS41N0MyMC41NjUgMjIuMDkyIDI0IDE3LjU5MiAyNCAxMi4yOTdjMC02LjYyNy01LjM3My0xMi0xMi0xMiIvPjwvc3ZnPg=="/><text transform="scale(.1)" x="697.5" y="175" textLength="515" fill="#fff" font-weight="bold">GITHUB</text></g></svg>

package/client/public/react.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-11.5 -10.23174 23 20.46348">
+  <title>React Logo</title>
+  <circle cx="0" cy="0" r="2.05" fill="#61dafb"/>
+  <g stroke="#61dafb" stroke-width="1" fill="none">
+    <ellipse rx="11" ry="4.2"/>
+    <ellipse rx="11" ry="4.2" transform="rotate(60)"/>
+    <ellipse rx="11" ry="4.2" transform="rotate(120)"/>
+  </g>
+</svg>

package/client/src/APIInfo.jsx

@@ -0,0 +1,328 @@
+import React, {useEffect, useMemo, useState} from 'react';
+import {useModelContext} from './contexts/ModelContext';
+import {useAuthContext} from "./contexts/AuthContext.jsx";
+import Button from "./Button.jsx";
+import {Trans, useTranslation} from "react-i18next";
+import {getDefaultForType} from "data-primals-engine/data";
+import { CodeBlock, tomorrowNightBright } from 'react-code-blocks';
+import {getObjectHash, shuffle} from "data-primals-engine/core";
+import {mainFieldsTypes} from "data-primals-engine/constants";
+import {end} from "express-mongo-sanitize";
+import {FaFile, FaPlay, FaRunning} from "react-icons/fa";
+import {Tooltip} from "react-tooltip";
+import {CodeField} from "./Field.jsx";
+import {useMutation} from "react-query";
+import {FaF} from "react-icons/fa6";
+import {getHost} from "./constants.js";
+
+const Test= ({endpoint, lang, index, headers= {}}) =>  {
+    const qp = {...endpoint.queryParams};
+    const params = new URLSearchParams();
+    const isProd = import.meta.env.MODE === 'production';
+    Object.keys(qp || {}).forEach(k =>{
+        params.append(k, qp[k]);
+    })
+    params.append("lang", lang);
+    const [code, setCode] = useState(JSON.stringify(endpoint.body, null, 2), [endpoint]);
+
+
+    useEffect(() => {
+        setCode(JSON.stringify(endpoint.body, null, 2), [endpoint]);
+    }, [endpoint])
+
+    const [response,setResponse] = useState('');
+    const query = useMutation(() => {
+        return fetch((isProd ? 'https://'+getHost()+"/" : '')+'/api'+endpoint.endpoint+'?'+params.toString(), { method: endpoint.method, headers, body: code || JSON.stringify(endpoint.body) })
+            .then(e => e.json())
+    },{ onSuccess: (data) => {
+        setResponse(data)
+        }})
+
+    return (
+        <div key={index} className="api-endpoint">
+            <Tooltip id={"tooltip"} render={({content, activeAnchor}) => {
+
+            }}/>
+            <h2 className="description" dangerouslySetInnerHTML={{ __html: endpoint.title || endpoint.description }}></h2>
+            <button onClick={(e) => {
+                query.mutate();
+                const endpoint = e.target.closest('[data-endpoint]')?.dataset['endpoint'];
+                gtag('event', "select_content", {
+                    content_type: "endpoint",
+                    content_id: endpoint
+                });
+            }} data-tooltip-id="tooltip" data-endpoint={endpoint.method + " " + endpoint.endpoint} data-tooltip-html={'Run ' + endpoint.method+ ' /api'+endpoint.endpoint }><FaPlay /></button>
+            <span className="method">{endpoint.method}</span>
+            <span className="endpoint">{endpoint.endpoint}</span>
+            {response && <div className={"response fs-mini"}>
+                <CodeBlock language="json" theme={tomorrowNightBright}
+                           showLineNumbers={false} text={JSON.stringify(response,null,4)} /></div>}
+            {Object.keys(qp || {}).length > 0 && (<h4>Query params</h4>)}
+            <ul>{Object.keys(qp || {}).map(m => {
+                return <li
+                    className="query">
+                    {( endpoint.requiredParams && endpoint.requiredParams.includes(m)) && (<span className="required">*</span>)}
+                    <strong>{m}</strong> = {qp[m]}</li>
+            })}</ul>
+            {(endpoint.title || endpoint.description) !== endpoint.description && (<p className="description" dangerouslySetInnerHTML={{ __html: endpoint.description}}></p>)}
+            {endpoint.body && (<h4>Body Payload</h4>)}
+            {endpoint.body &&
+                <CodeField
+                    value={code}
+                    onChange={(e) => {
+                        setCode(e.value);
+                    }}/>}
+        </div>
+    )
+};
+
+const APIInfo = ({onInit}) => {
+    const {selectedModel, setSelectedModel, models} = useModelContext();
+    const [apiEndpoints, setApiEndpoints] = useState([]);
+
+    const {me} = useAuthContext();
+    const { t, i18n } = useTranslation()
+    const lang = (i18n.resolvedLanguage || i18n.language).split(/[-_]/)?.[0];
+
+    const   getMatchingFilter = (model, datas, expr)  => {
+        if(!model){
+            return null;
+        }
+        const parts = model.fields.filter(f=>f.asMain || f.required || f.type === "relation" || mainFieldsTypes.includes(f.type));
+        let fObj = {}, fa = [];
+        parts.forEach(field => {
+            const f = field.name;
+            if( field.type === 'datetime' || field.type === 'date'){
+                if( expr ){
+                    fa.push({
+                        '$lt': ['$'+f, datas[f]]
+                    })
+                }else{
+                    fObj[f] = datas[f];
+                }
+            }
+            else if( field.type === 'relation') {
+                if( expr){
+                    fa.push({ [field.name]: { $find: {}} });
+                }else {
+                    fObj[f] = (datas[f] ? getMatchingFilter(models.find(f => f.name === field.relation), datas[f], expr) : {$find: {}});
+                }
+            }else if( ['string', 'string_t', 'enum', 'richtext', 'url', 'password','email', 'phone'].includes(field.type)) {
+                if( expr ){
+                    fa.push({"$regexMatch": {input: "$" + f, regex: datas[f]}});
+                }else
+                fObj[f] = datas[f];
+            }
+            else{
+                if( expr )
+                    fa.push({ "$eq": ["$"+f, datas[f]] });
+                else
+                    fObj[f] = datas[f];
+            }
+        });
+        return fa.length? fa : fObj;
+    }
+
+    useEffect(() => {
+        onInit?.();
+    }, [lang]);
+    useEffect(() => {
+        if ((!selectedModel || Object.keys(selectedModel).length === 0)) {
+            const mockedModel = {
+                name: 'modelPresentation',
+                description: 'a presentation model used for demonstration usage.',
+                fields: [{ name: 'views', type: 'number', default: 100},
+                    { name: 'html', type: 'richtext', required: true},
+                    { name: 'lastPublishedAt', type: 'datetime', required: true},
+                    { name: 'comments', type: 'relation', relation: 'message', multiple: true}]
+            };
+            const endpoints = generateApiEndpoints(mockedModel);
+            setSelectedModel(mockedModel);
+            setApiEndpoints(endpoints);
+            return;
+        }
+
+        // Generate API endpoints based on the selected model
+        const endpoints = generateApiEndpoints(selectedModel);
+        setApiEndpoints(endpoints);
+    }, [selectedModel, lang, me]);
+
+    var mongoObjectId = function () {
+        var timestamp = (new Date().getTime() / 1000 | 0).toString(16);
+        return 'xxxxxxxxxxxxxxxx'.replace(/[x]/g, function() {
+            return (Math.random() * 16 | 0).toString(16);
+        }).toLowerCase();
+    };
+
+    const generateApiEndpoints = (model) => {
+        if (!model) return [];
+
+        let dt = {};
+        let orFields = { or : []};
+        model.fields.forEach(field => {
+            let val = getDefaultForType(field);
+            if( field.type === 'datetime' || field.type === 'date'){
+                val = new Date().toISOString();
+            }
+            else if( field.type === 'enum')
+                val = field.items[0];
+            else if( field.type === 'phone')
+                val = '+33606060606';
+            else if( field.type === 'email')
+                val = 'email@tld.com';
+            else if( Object.prototype.toString.call(val) === '[object Date]' ){
+                val = val.toISOString();
+            }
+            if(val!== undefined) {
+                orFields.or.push({[field.name]: val});
+                dt[field.name] = val;
+            }
+        });
+        let fields = getMatchingFilter(model, dt, false, true);
+
+        const modelName = model.name;
+        const searchFields = getMatchingFilter(model, dt, true, false);
+
+        let endpoints = []
+        if (!model.locked) {
+            endpoints.push(
+                {
+                    method: 'POST',
+                    endpoint: `/model`,
+                    description: t('doc.api.createModel', { model: modelName }),
+                    body: {
+                        name: modelName,
+                        description: model.description,
+                        maxRequestData: 50,
+                        fields: model.fields
+                    }
+                })
+            endpoints.push({
+                method: 'PUT',
+                endpoint: `/model/:id`,
+                description: t('doc.api.updateModel', { model: modelName }),
+                body: {
+                    model: {
+                        name: modelName,
+                        description: model.description,
+                        fields: model.fields// Add some template for fields
+                    }
+                }
+            })
+            endpoints.push({
+                method: 'DELETE',
+                endpoint: `/model`,
+                queryParams: {
+                    name: modelName
+                },
+                requiredParams: ['model'],
+                description: t('doc.api.deleteModel', { model: modelName })
+            });
+        }
+        endpoints = endpoints.concat([
+            {
+                method: 'POST',
+                endpoint: `/data`,
+                description: t('doc.api.createData', { model: modelName}),
+                body: {
+                    model: modelName,
+                    data: fields // Add some template for data
+                }
+            },
+            {
+                title: t('doc.api.searchData.title', { model: modelName}),
+                method: 'POST',
+                endpoint: `/data/search`,
+                queryParams: {
+                    model: modelName,
+                    page: 1,
+                    limit: 50,
+                    expand: 1,
+                    timeout: 5000,
+                    sort:'createdAt:DESC,updatedAt:DESC'
+                },
+                requiredParams: ['model'],
+                description: t('doc.api.searchData', { model: modelName }),
+                body: { filter: { $or: searchFields } }
+            },
+            /*{
+                method: 'GET',
+                endpoint: `/api/data/${modelName}/:id`,
+                description: `Récupérer une entrée de ${modelName} par ID`,
+            },*/
+            {
+                method: 'PUT',
+                endpoint: `/data/:id`,
+                description: t('doc.api.updateData', { model: modelName }),
+                body: {
+                    model: modelName,
+                    data: fields // Add some template for data
+                }
+            },
+            {
+                method: 'DELETE',
+                endpoint: `/data/:id`,
+                description: t('doc.api.deleteData', { model: modelName }),
+            },
+            {
+                method: 'GET',
+                endpoint: `/models`,
+                description: t('doc.api.getModels', { model: modelName }),
+            },
+        ]);
+        return endpoints;
+    };
+
+    const [tokenVisible, setTokenVisible] = useState(false);
+
+    const objInit = {
+        'Content-type': 'application/json',
+        '_user': me?.username || 'demo',
+        'Authorization': 'Bearer ' + me?.token,
+    };
+    const obj = {...objInit,
+        'Authorization': 'Bearer ' + (tokenVisible ? me?.token : (me?.token || '').substring(0, 10) + '...'),
+    };
+    if( /^demo[0-9]{1,2}$/.test(me?.username))
+        delete obj['Authorization'];
+    const isProd = import.meta.env.MODE === 'production';
+    const url = isProd ? 'https://'+getHost()+'/' : 'http://localhost:7632/';
+    return (
+        <div className="flex-1 api-info">
+            <h2><Trans i18nKey={"doc.api.title"}>API Documentation</Trans></h2>
+            <p className="hint">
+                API source endpoint: <span className={"endpoint"}>{url + 'api'}</span><br/><br/>
+                <a href={"/api-docs"} target="_blank"><FaFile/> Swagger / OpenAPI</a><br/>
+                <a href={"/doc/API.postman_collection.json"} target="_blank"><FaFile/> Collections Postman
+                    (v2.1)</a>
+            </p>
+
+            <h3><Trans i18nKey={"doc.api.auth"}>Authentification</Trans></h3>
+            Headers :
+            <div className="fs-mini"><CodeBlock text={JSON.stringify(obj, null, 2)}
+                       language="json" theme={tomorrowNightBright}
+                                                showLineNumbers={false}/></div>
+            {me && !/^demo[0-9]{1,2}$/.test(me.username) && (
+                <Button onClick={() => {
+                    setTokenVisible(!tokenVisible)
+                }}>{tokenVisible ? <Trans i18nKey={"doc.api.hideToken"}>Cacher le token</Trans> :
+                    <Trans i18nKey={"doc.api.seeToken"}>Voir le token</Trans>}</Button>
+            )}
+            {selectedModel ? (
+                <>
+                    <div className="api-endpoints">
+                        {apiEndpoints.map((endpoint, index) => <Test endpoint={endpoint} index={index} lang={lang} headers={objInit} />)}
+                    </div>
+                </>
+            ) : (
+                <p>Sélectionnez un modèle pour voir la documentation.</p>
+            )}
+            <h2><Trans i18nKey={"doc.api.modelSource"}>Source du modèle</Trans></h2>
+            <div className="fs-mini"><CodeBlock text={JSON.stringify({...selectedModel, ...{locked: undefined, _id: undefined, _user: undefined}}, null, 2)} language="json"
+                                                theme={tomorrowNightBright} showLineNumbers={false}/></div>
+</div>
+)
+    ;
+};
+
+export default APIInfo;