adminforth 1.3.51 → 1.3.52-next.1

package/dist/modules/codeInjector.js

@@ -158,7 +158,7 @@ class CodeInjector {
     }
     prepareSources(_a) {
         return __awaiter(this, arguments, void 0, function* ({ filesUpdated }) {
-            var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+            var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
             // check SPA_TMP_PATH exists and create if not
             try {
                 yield fs.promises.access(CodeInjector.SPA_TMP_PATH, fs.constants.F_OK);
@@ -325,6 +325,16 @@ class CodeInjector {
             }).join('\n');
             // for each custom component generate import statement
             const customResourceComponents = [];
+            function checkInjections(filePathes) {
+                filePathes.forEach(({ file }) => {
+                    if (!customResourceComponents.includes(file)) {
+                        if (file === undefined) {
+                            throw new Error('file is undefined');
+                        }
+                        customResourceComponents.push(file);
+                    }
+                });
+            }
             this.adminforth.config.resources.forEach((resource) => {
                 var _a;
                 resource.columns.forEach((column) => {
@@ -341,17 +351,15 @@ class CodeInjector {
                 });
                 (Object.values(((_a = resource.options) === null || _a === void 0 ? void 0 : _a.pageInjections) || {})).forEach((injection) => {
                     Object.values(injection).forEach((filePathes) => {
-                        filePathes.forEach(({ file }) => {
-                            if (!customResourceComponents.includes(file)) {
-                                if (file === undefined) {
-                                    throw new Error('file is undefined');
-                                }
-                                customResourceComponents.push(file);
-                            }
-                        });
+                        checkInjections(filePathes);
                     });
                 });
             });
+            if ((_e = this.adminforth.config.customization) === null || _e === void 0 ? void 0 : _e.globalInjections) {
+                Object.values(this.adminforth.config.customization.globalInjections).forEach((injection) => {
+                    checkInjections(injection);
+                });
+            }
             customResourceComponents.forEach((filePath) => {
                 const componentName = getComponentNameFromPath(filePath);
                 this.allComponentNames[filePath] = componentName;
@@ -376,7 +384,7 @@ class CodeInjector {
             }
             let imports = iconImports + '\n';
             imports += customComponentsImports + '\n';
-            if ((_e = this.adminforth.config.customization) === null || _e === void 0 ? void 0 : _e.vueUsesFile) {
+            if ((_f = this.adminforth.config.customization) === null || _f === void 0 ? void 0 : _f.vueUsesFile) {
                 imports += `import addCustomUses from '${this.adminforth.config.customization.vueUsesFile}';\n`;
             }
             // inject that code into spa_tmp/src/App.vue
@@ -384,12 +392,12 @@ class CodeInjector {
             let appVueContent = yield fs.promises.readFile(appVuePath, 'utf-8');
             appVueContent = appVueContent.replace('/* IMPORTANT:ADMINFORTH IMPORTS */', imports);
             appVueContent = appVueContent.replace('/* IMPORTANT:ADMINFORTH COMPONENT REGISTRATIONS */', iconComponents + '\n' + customComponentsComponents + '\n');
-            if ((_f = this.adminforth.config.customization) === null || _f === void 0 ? void 0 : _f.vueUsesFile) {
+            if ((_g = this.adminforth.config.customization) === null || _g === void 0 ? void 0 : _g.vueUsesFile) {
                 appVueContent = appVueContent.replace('/* IMPORTANT:ADMINFORTH CUSTOM USES */', 'addCustomUses(app);');
             }
             yield fs.promises.writeFile(appVuePath, appVueContent);
             // generate tailwind extend styles
-            const stylesGenerator = new StylesGenerator((_g = this.adminforth.config.customization) === null || _g === void 0 ? void 0 : _g.styles);
+            const stylesGenerator = new StylesGenerator((_h = this.adminforth.config.customization) === null || _h === void 0 ? void 0 : _h.styles);
             const stylesText = JSON.stringify(stylesGenerator.mergeStyles(), null, 2).slice(1, -1);
             let tailwindConfigPath = path.join(CodeInjector.SPA_TMP_PATH, 'tailwind.config.js');
             let tailwindConfigContent = yield fs.promises.readFile(tailwindConfigPath, 'utf-8');
@@ -402,7 +410,7 @@ class CodeInjector {
             const indexHtmlPath = path.join(CodeInjector.SPA_TMP_PATH, 'index.html');
             let indexHtmlContent = yield fs.promises.readFile(indexHtmlPath, 'utf-8');
             indexHtmlContent = indexHtmlContent.replace('/* IMPORTANT:ADMINFORTH TITLE */', `${this.adminforth.config.customization.title || 'AdminForth'}`);
-            indexHtmlContent = indexHtmlContent.replace('/* IMPORTANT:ADMINFORTH FAVICON */', ((_h = this.adminforth.config.customization.favicon) === null || _h === void 0 ? void 0 : _h.replace('@@/', `${this.adminforth.baseUrlSlashed}assets/`))
+            indexHtmlContent = indexHtmlContent.replace('/* IMPORTANT:ADMINFORTH FAVICON */', ((_j = this.adminforth.config.customization.favicon) === null || _j === void 0 ? void 0 : _j.replace('@@/', `${this.adminforth.baseUrlSlashed}assets/`))
                 ||
                     `${this.adminforth.baseUrlSlashed}assets/favicon.png`);
             yield fs.promises.writeFile(indexHtmlPath, indexHtmlContent);
@@ -417,7 +425,7 @@ class CodeInjector {
             }
             let homePagePath = homepageMenuItem.path || `/resource/${homepageMenuItem.resourceId}`;
             if (!homePagePath) {
-                homePagePath = ((_j = this.adminforth.config.menu.filter((mi) => mi.path)[0]) === null || _j === void 0 ? void 0 : _j.path) || `/resource/${(_k = this.adminforth.config.menu.filter((mi) => mi.children)[0]) === null || _k === void 0 ? void 0 : _k.resourceId}`;
+                homePagePath = ((_k = this.adminforth.config.menu.filter((mi) => mi.path)[0]) === null || _k === void 0 ? void 0 : _k.path) || `/resource/${(_l = this.adminforth.config.menu.filter((mi) => mi.children)[0]) === null || _l === void 0 ? void 0 : _l.resourceId}`;
             }
             routes += `{
       path: '/',
@@ -434,7 +442,7 @@ class CodeInjector {
             /* customPackageLock */
             let usersLockHash = '';
             let usersPackages = [];
-            if ((_l = this.adminforth.config.customization) === null || _l === void 0 ? void 0 : _l.customComponentsDir) {
+            if ((_m = this.adminforth.config.customization) === null || _m === void 0 ? void 0 : _m.customComponentsDir) {
                 [usersLockHash, usersPackages] = yield this.packagesFromNpm(this.adminforth.config.customization.customComponentsDir);
             }
             const pluginPackages = [];

package/dist/modules/configValidator.js

@@ -19,6 +19,15 @@ export default class ConfigValidator {
         this.adminforth = adminforth;
         this.config = config;
     }
+    validateAndListifyInjection(obj, key, errors) {
+        if (!Array.isArray(obj[key])) {
+            // not array
+            obj[key] = [obj[key]];
+        }
+        obj[key].forEach((target, i) => {
+            obj[key][i] = this.validateComponent(target, errors);
+        });
+    }
     checkCustomFileExists(filePath) {
         if (filePath.startsWith('@@/')) {
             const checkPath = path.join(this.config.customization.customComponentsDir, filePath.replace('@@/', ''));
@@ -99,6 +108,9 @@ export default class ConfigValidator {
         if (this.config.customization.loginPageInjections === undefined) {
             this.config.customization.loginPageInjections = {};
         }
+        if (this.config.customization.globalInjections === undefined) {
+            this.config.customization.globalInjections = {};
+        }
         if (this.config.customization.loginPageInjections.underInputs === undefined) {
             this.config.customization.loginPageInjections.underInputs = [];
         }
@@ -297,13 +309,7 @@ export default class ConfigValidator {
                         }
                         Object.entries(value).map(([injection, target]) => {
                             if (possibleInjections.includes(injection)) {
-                                if (!Array.isArray(res.options.pageInjections[key][injection])) {
-                                    // not array
-                                    res.options.pageInjections[key][injection] = [target];
-                                }
-                                res.options.pageInjections[key][injection].forEach((target, i) => {
-                                    res.options.pageInjections[key][injection][i] = this.validateComponent(target, errors);
-                                });
+                                this.validateAndListifyInjection(res.options.pageInjections[key], injection, errors);
                             }
                             else {
                                 const similar = suggestIfTypo(possibleInjections, injection);
@@ -351,6 +357,18 @@ export default class ConfigValidator {
                     }
                 }
             });
+            if (this.config.customization.globalInjections) {
+                const ALLOWED_GLOBAL_INJECTIONS = ['userMenu', 'header', 'sidebar',];
+                Object.keys(this.config.customization.globalInjections).forEach((injection) => {
+                    if (ALLOWED_GLOBAL_INJECTIONS.includes(injection)) {
+                        this.validateAndListifyInjection(this.config.customization.globalInjections, injection, errors);
+                    }
+                    else {
+                        const similar = suggestIfTypo(ALLOWED_GLOBAL_INJECTIONS, injection);
+                        errors.push(`Global injection key "${injection}" is not allowed. Allowed keys are ${ALLOWED_GLOBAL_INJECTIONS.join(', ')}. ${similar ? `Did you mean "${similar}"?` : ''}`);
+                    }
+                });
+            }
             if (!this.config.menu) {
                 errors.push('No config.menu defined');
             }

package/dist/modules/restApi.js

@@ -154,7 +154,7 @@ export default class AdminForthRestAPI {
             method: 'GET',
             path: '/get_base_config',
             handler: (_k) => __awaiter(this, [_k], void 0, function* ({ input, adminUser, cookies }) {
-                var _l, _m, _o, _p;
+                var _l, _m, _o, _p, _q;
                 let username = '';
                 let userFullName = '';
                 const dbUser = adminUser.dbUser;
@@ -227,6 +227,7 @@ export default class AdminForthRestAPI {
                         title: (_o = this.adminforth.config.customization) === null || _o === void 0 ? void 0 : _o.title,
                         emptyFieldPlaceholder: (_p = this.adminforth.config.customization) === null || _p === void 0 ? void 0 : _p.emptyFieldPlaceholder,
                         announcementBadge,
+                        globalInjections: (_q = this.adminforth.config.customization) === null || _q === void 0 ? void 0 : _q.globalInjections,
                     },
                     adminUser,
                     version: ADMINFORTH_VERSION,
@@ -243,7 +244,7 @@ export default class AdminForthRestAPI {
         server.endpoint({
             method: 'POST',
             path: '/get_resource',
-            handler: (_q) => __awaiter(this, [_q], void 0, function* ({ body, adminUser }) {
+            handler: (_r) => __awaiter(this, [_r], void 0, function* ({ body, adminUser }) {
                 const { resourceId } = body;
                 if (!this.adminforth.statuses.dbDiscover) {
                     return { error: 'Database discovery not started' };
@@ -277,8 +278,8 @@ export default class AdminForthRestAPI {
         server.endpoint({
             method: 'POST',
             path: '/get_resource_data',
-            handler: (_r) => __awaiter(this, [_r], void 0, function* ({ body, adminUser }) {
-                var _s, _t, _u, _v;
+            handler: (_s) => __awaiter(this, [_s], void 0, function* ({ body, adminUser }) {
+                var _t, _u, _v, _w;
                 const { resourceId, source } = body;
                 if (['show', 'list'].includes(source) === false) {
                     return { error: 'Invalid source, should be list or show' };
@@ -298,7 +299,7 @@ export default class AdminForthRestAPI {
                 if (!allowed) {
                     return { error };
                 }
-                for (const hook of listify((_t = (_s = resource.hooks) === null || _s === void 0 ? void 0 : _s[source]) === null || _t === void 0 ? void 0 : _t.beforeDatasourceRequest)) {
+                for (const hook of listify((_u = (_t = resource.hooks) === null || _t === void 0 ? void 0 : _t[source]) === null || _u === void 0 ? void 0 : _u.beforeDatasourceRequest)) {
                     const resp = yield hook({ resource, query: body, adminUser });
                     if (!resp || (!resp.ok && !resp.error)) {
                         throw new Error(`Hook must return object with {ok: true} or { error: 'Error' } `);
@@ -381,7 +382,7 @@ export default class AdminForthRestAPI {
                     })));
                 }
                 // only after adminforth made all post processing, give user ability to edit it
-                for (const hook of listify((_v = (_u = resource.hooks) === null || _u === void 0 ? void 0 : _u[source]) === null || _v === void 0 ? void 0 : _v.afterDatasourceResponse)) {
+                for (const hook of listify((_w = (_v = resource.hooks) === null || _v === void 0 ? void 0 : _v[source]) === null || _w === void 0 ? void 0 : _w.afterDatasourceResponse)) {
                     const resp = yield hook({ resource, response: data.data, adminUser });
                     if (!resp || (!resp.ok && !resp.error)) {
                         throw new Error(`Hook must return object with {ok: true} or { error: 'Error' } `);
@@ -396,8 +397,8 @@ export default class AdminForthRestAPI {
         server.endpoint({
             method: 'POST',
             path: '/get_resource_foreign_data',
-            handler: (_w) => __awaiter(this, [_w], void 0, function* ({ body, adminUser }) {
-                var _x, _y, _z, _0;
+            handler: (_x) => __awaiter(this, [_x], void 0, function* ({ body, adminUser }) {
+                var _y, _z, _0, _1;
                 const { resourceId, column } = body;
                 if (!this.adminforth.statuses.dbDiscover) {
                     return { error: 'Database discovery not started' };
@@ -418,7 +419,7 @@ export default class AdminForthRestAPI {
                 }
                 const targetResourceId = columnConfig.foreignResource.resourceId;
                 const targetResource = this.adminforth.config.resources.find((res) => res.resourceId == targetResourceId);
-                for (const hook of listify((_y = (_x = columnConfig.foreignResource.hooks) === null || _x === void 0 ? void 0 : _x.dropdownList) === null || _y === void 0 ? void 0 : _y.beforeDatasourceRequest)) {
+                for (const hook of listify((_z = (_y = columnConfig.foreignResource.hooks) === null || _y === void 0 ? void 0 : _y.dropdownList) === null || _z === void 0 ? void 0 : _z.beforeDatasourceRequest)) {
                     const resp = yield hook({ query: body, adminUser, resource: targetResource });
                     if (!resp || (!resp.ok && !resp.error)) {
                         throw new Error(`Hook must return object with {ok: true} or { error: 'Error' } `);
@@ -447,7 +448,7 @@ export default class AdminForthRestAPI {
                 const response = {
                     items
                 };
-                for (const hook of listify((_0 = (_z = columnConfig.foreignResource.hooks) === null || _z === void 0 ? void 0 : _z.dropdownList) === null || _0 === void 0 ? void 0 : _0.afterDatasourceResponse)) {
+                for (const hook of listify((_1 = (_0 = columnConfig.foreignResource.hooks) === null || _0 === void 0 ? void 0 : _0.dropdownList) === null || _1 === void 0 ? void 0 : _1.afterDatasourceResponse)) {
                     const resp = yield hook({ response, adminUser, resource: targetResource });
                     if (!resp || (!resp.ok && !resp.error)) {
                         throw new Error(`Hook must return object with {ok: true} or { error: 'Error' } `);
@@ -462,7 +463,7 @@ export default class AdminForthRestAPI {
         server.endpoint({
             method: 'POST',
             path: '/get_min_max_for_columns',
-            handler: (_1) => __awaiter(this, [_1], void 0, function* ({ body }) {
+            handler: (_2) => __awaiter(this, [_2], void 0, function* ({ body }) {
                 const { resourceId } = body;
                 if (!this.adminforth.statuses.dbDiscover) {
                     return { error: 'Database discovery not started' };
@@ -491,8 +492,8 @@ export default class AdminForthRestAPI {
         server.endpoint({
             method: 'POST',
             path: '/create_record',
-            handler: (_2) => __awaiter(this, [_2], void 0, function* ({ body, adminUser }) {
-                var _3;
+            handler: (_3) => __awaiter(this, [_3], void 0, function* ({ body, adminUser }) {
+                var _4;
                 const resource = this.adminforth.config.resources.find((res) => res.resourceId == body['resourceId']);
                 if (!resource) {
                     return { error: `Resource '${body['resourceId']}' not found` };
@@ -504,7 +505,7 @@ export default class AdminForthRestAPI {
                 }
                 const { record } = body;
                 for (const column of resource.columns) {
-                    if (((_3 = column.required) === null || _3 === void 0 ? void 0 : _3.create) &&
+                    if (((_4 = column.required) === null || _4 === void 0 ? void 0 : _4.create) &&
                         record[column.name] === undefined &&
                         column.showIn.includes(AdminForthResourcePages.create)) {
                         return { error: `Column '${column.name}' is required`, ok: false };
@@ -524,7 +525,7 @@ export default class AdminForthRestAPI {
         server.endpoint({
             method: 'POST',
             path: '/update_record',
-            handler: (_4) => __awaiter(this, [_4], void 0, function* ({ body, adminUser }) {
+            handler: (_5) => __awaiter(this, [_5], void 0, function* ({ body, adminUser }) {
                 const resource = this.adminforth.config.resources.find((res) => res.resourceId == body['resourceId']);
                 if (!resource) {
                     return { error: `Resource '${body['resourceId']}' not found` };
@@ -554,7 +555,7 @@ export default class AdminForthRestAPI {
         server.endpoint({
             method: 'POST',
             path: '/delete_record',
-            handler: (_5) => __awaiter(this, [_5], void 0, function* ({ body, adminUser }) {
+            handler: (_6) => __awaiter(this, [_6], void 0, function* ({ body, adminUser }) {
                 const resource = this.adminforth.config.resources.find((res) => res.resourceId == body['resourceId']);
                 const record = yield this.adminforth.connectors[resource.dataSource].getRecordByPrimaryKey(resource, body['primaryKey']);
                 if (!resource) {
@@ -584,7 +585,7 @@ export default class AdminForthRestAPI {
         server.endpoint({
             method: 'POST',
             path: '/start_bulk_action',
-            handler: (_6) => __awaiter(this, [_6], void 0, function* ({ body, adminUser }) {
+            handler: (_7) => __awaiter(this, [_7], void 0, function* ({ body, adminUser }) {
                 const { resourceId, actionId, recordIds } = body;
                 const resource = this.adminforth.config.resources.find((res) => res.resourceId == resourceId);
                 if (!resource) {

package/index.ts

@@ -12,8 +12,7 @@ import {
   type IConfigValidator,
   IOperationalResource,
   AdminForthFilterOperators,
-  AdminForthDataTypes, 
-  IHttpServer, 
+  AdminForthDataTypes, IHttpServer, 
   BeforeSaveFunction,
   AfterSaveFunction,
   AdminUser,
@@ -25,7 +24,6 @@ import ConfigValidator from './modules/configValidator.js';
 import AdminForthRestAPI, { interpretResource } from './modules/restApi.js';
 import ClickhouseConnector from './dataConnectors/clickhouse.js';
 import OperationalResource from './modules/operationalResource.js';
-import { error } from 'console';
 
 // exports
 export * from './types/AdminForthConfig.js'; 

package/modules/codeInjector.ts

@@ -356,6 +356,18 @@ class CodeInjector implements ICodeInjector {
 
     // for each custom component generate import statement
     const customResourceComponents = [];
+
+    function checkInjections(filePathes) {
+      filePathes.forEach(({ file }) => {
+        if (!customResourceComponents.includes(file)) {
+          if (file === undefined) {
+            throw new Error('file is undefined');
+          }
+          customResourceComponents.push(file);
+        }
+      });
+    }
+
     this.adminforth.config.resources.forEach((resource) => {
       resource.columns.forEach((column) => {
         if (column.components) {
@@ -369,20 +381,21 @@ class CodeInjector implements ICodeInjector {
           });
         }
       });
+      
       (Object.values(resource.options?.pageInjections || {})).forEach((injection) => {
         Object.values(injection).forEach((filePathes: {file: string}[]) => {
-          filePathes.forEach(({ file }) => {
-            if (!customResourceComponents.includes(file)) {
-              if (file === undefined) {
-                throw new Error('file is undefined');
-              }
-              customResourceComponents.push(file);
-            }
-          });
+          checkInjections(filePathes);
         });
       });
     });
 
+    if (this.adminforth.config.customization?.globalInjections) {
+      Object.values(this.adminforth.config.customization.globalInjections).forEach((injection) => {
+        checkInjections(injection);
+      });
+    }
+
+
     customResourceComponents.forEach((filePath) => {
       const componentName = getComponentNameFromPath(filePath);
       this.allComponentNames[filePath] = componentName;

package/modules/configValidator.ts

@@ -15,6 +15,9 @@ import { guessLabelFromName, suggestIfTypo } from './utils.js';
 
 import crypto from 'crypto';
 
+
+
+
 export default class ConfigValidator implements IConfigValidator {
 
   constructor(private adminforth: IAdminForth, private config: AdminForthConfig) {
@@ -22,6 +25,16 @@ export default class ConfigValidator implements IConfigValidator {
     this.config = config;
   }
   
+  validateAndListifyInjection(obj, key, errors) {
+    if (!Array.isArray(obj[key])) {
+      // not array
+      obj[key] = [obj[key]];
+    }
+    obj[key].forEach((target, i) => {
+      obj[key][i] = this.validateComponent(target, errors);
+    });
+  }
+
   checkCustomFileExists(filePath: string): Array<string> {
     if (filePath.startsWith('@@/')) {
       const checkPath = path.join(this.config.customization.customComponentsDir, filePath.replace('@@/', ''));
@@ -112,7 +125,9 @@ export default class ConfigValidator implements IConfigValidator {
     if (this.config.customization.loginPageInjections === undefined) {
       this.config.customization.loginPageInjections = {};
     }
-
+    if (this.config.customization.globalInjections === undefined) {
+      this.config.customization.globalInjections = {};
+    }
     if (this.config.customization.loginPageInjections.underInputs === undefined) {
       this.config.customization.loginPageInjections.underInputs = [];
     }
@@ -339,7 +354,11 @@ export default class ConfigValidator implements IConfigValidator {
         const possibleInjections = ['beforeBreadcrumbs', 'afterBreadcrumbs', 'bottom', 'threeDotsDropdownItems', 'customActionIcons'];
         const possiblePages = ['list', 'show', 'create', 'edit'];
 
+        
+          
+
         if (res.options.pageInjections) {
+
           Object.entries(res.options.pageInjections).map(([key, value]) => {
             if (!possiblePages.includes(key)) {
               const similar = suggestIfTypo(possiblePages, key);
@@ -348,13 +367,7 @@ export default class ConfigValidator implements IConfigValidator {
 
             Object.entries(value).map(([injection, target]) => {
               if (possibleInjections.includes(injection)) {
-                if (!Array.isArray(res.options.pageInjections[key][injection])) {
-                  // not array
-                  res.options.pageInjections[key][injection] = [target];
-                }
-                res.options.pageInjections[key][injection].forEach((target, i) => {
-                  res.options.pageInjections[key][injection][i] = this.validateComponent(target, errors);
-                });
+                this.validateAndListifyInjection(res.options.pageInjections[key], injection, errors);
               } else {
                 const similar = suggestIfTypo(possibleInjections, injection);
                 errors.push(`Resource "${res.resourceId}" has invalid pageInjection key "${injection}", Supported keys are ${possibleInjections.join(', ')} ${similar ? `Did you mean "${similar}"?` : ''}`);
@@ -362,6 +375,7 @@ export default class ConfigValidator implements IConfigValidator {
             });
 
           })
+          
         }
 
         // transform all hooks Functions to array of functions
@@ -407,6 +421,18 @@ export default class ConfigValidator implements IConfigValidator {
         }
       });
 
+      if (this.config.customization.globalInjections) {
+        const ALLOWED_GLOBAL_INJECTIONS = ['userMenu', 'header', 'sidebar',]
+        Object.keys(this.config.customization.globalInjections).forEach((injection) => {
+          if (ALLOWED_GLOBAL_INJECTIONS.includes(injection)) {
+            this.validateAndListifyInjection(this.config.customization.globalInjections, injection, errors);
+          } else {
+            const similar = suggestIfTypo(ALLOWED_GLOBAL_INJECTIONS, injection);
+            errors.push(`Global injection key "${injection}" is not allowed. Allowed keys are ${ALLOWED_GLOBAL_INJECTIONS.join(', ')}. ${similar ? `Did you mean "${similar}"?` : ''}`);
+          }
+        });
+      }
+
       if (!this.config.menu) {
         errors.push('No config.menu defined');
       }

package/modules/restApi.ts

@@ -265,6 +265,7 @@ export default class AdminForthRestAPI {
             title: this.adminforth.config.customization?.title,
             emptyFieldPlaceholder: this.adminforth.config.customization?.emptyFieldPlaceholder,
             announcementBadge,
+            globalInjections: this.adminforth.config.customization?.globalInjections,
           },
           adminUser,
           version: ADMINFORTH_VERSION,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminforth",
-  "version": "1.3.51",
+  "version": "1.3.52-next.1",
   "description": "OpenSource Vue3 powered forth-generation admin panel",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -19,6 +19,7 @@
   "type": "module",
   "dependencies": {
     "@clickhouse/client": "^1.4.0",
+    "adminforth": "^1.3.52-next.0",
     "better-sqlite3": "^10.0.0",
     "dayjs": "^1.11.11",
     "express": "^4.21.0",

package/spa/index.html

@@ -16,8 +16,8 @@
   </script> -->
 
   </head>
-  <body class=" ">
-    <div id="app" class="min-h-screen bg-lightHtml dark:bg-darkHtml"></div>
+  <body class="min-h-screen flex flex-column">
+    <div id="app" class="grow bg-lightHtml dark:bg-darkHtml"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

package/spa/src/App.vue

@@ -17,7 +17,20 @@
             
           </div>
           <div class="flex items-center">
+            
+            <component 
+              v-for="c in coreStore?.config?.globalInjections?.header || []"
+              :is="getCustomComponent(c)"
+              :meta="c.meta"
+              :record="coreStore.record"
+              :resource="coreStore.resource"
+              :adminUser="coreStore.adminUser"
+            />
+
             <div class="flex items-center ms-3 ">
+
+
+
               <span @click="toggleTheme" class="cursor-pointer flex items-center gap-1 block px-4 py-2 text-sm text-black hover:bg-lightHtml dark:text-darkSidebarTextHover dark:hover:bg-darkHtml dark:hover:text-darkSidebarTextActive" role="menuitem">
                 <IconMoonSolid class="w-5 h-5 text-blue-300" v-if="theme !== 'dark'" />
                 <IconSunSolid class="w-5 h-5 text-yellow-300" v-else />
@@ -41,9 +54,15 @@
                   </p>
                 </div>
                 <ul class="py-1" role="none">
-                  <!-- <li>
-                    
-                  </li> -->
+                  <li v-for="c in coreStore?.config?.globalInjections?.userMenu || []">
+                    <component 
+                      :is="getCustomComponent(c)"
+                      :meta="c.meta"
+                      :record="coreStore.record"
+                      :resource="coreStore.resource"
+                      :adminUser="coreStore.adminUser"
+                    />
+                  </li>
                   <li>
                     <button @click="logout" class="cursor-pointer flex items-center gap-1 block px-4 py-2 text-sm text-black hover:bg-html dark:text-darkSidebarTextHover dark:hover:bg-darkSidebarItemHover dark:hover:text-darkSidebarTextActive w-full" role="menuitem">Sign out</button>
                   </li>
@@ -145,6 +164,15 @@
           </p>
           <!-- <a class="text-sm text-lightPrimary underline font-medium hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300" href="#">Turn new navigation off</a> -->
         </div>
+
+        <component 
+          v-for="c in coreStore?.config?.globalInjections?.sidebar || []"
+          :is="getCustomComponent(c)"
+          :meta="c.meta"
+          :record="coreStore.record"
+          :resource="coreStore.resource"
+          :adminUser="coreStore.adminUser"
+        />
       </div>
     </aside>
     
@@ -237,7 +265,9 @@ import { createHead } from 'unhead'
 import { loadFile } from '@/utils';
 import Toast from './components/Toast.vue';
 import {useToastStore} from '@/stores/toast';
-import { FrontendAPI } from '@/composables/useStores'
+import { FrontendAPI } from '@/composables/useStores';
+import { getCustomComponent } from '@/utils';
+
 // import { link } from 'fs';
 const coreStore = useCoreStore();
 const modalStore = useModalStore();

package/spa/src/components/ResourceListTable.vue

@@ -23,7 +23,7 @@
           </div>
         </th>
 
-        <th v-for="c in columnsListed" scope="col" class="px-6 py-3">
+        <th v-for="c in columnsListed" scope="col" class="px-2 md:px-3 lg:px-6 py-3">
          
           <div @click="(evt) => c.sortable && onSortButtonClick(evt, c.name)" 
               class="flex items-center " :class="{'cursor-pointer':c.sortable}">
@@ -94,7 +94,7 @@
               <label for="checkbox-table-search-1" class="sr-only">checkbox</label>
             </div>
           </td>
-          <td v-for="c in columnsListed" class="px-6 py-4">
+          <td v-for="c in columnsListed" class="px-2 md:px-3 lg:px-6 py-4">
             <!-- if c.name in listComponentsPerColumn, render it. If not, render ValueRenderer -->
             <component
               :is="c?.components?.list ? getCustomComponent(c.components.list) : ValueRenderer"
@@ -105,7 +105,7 @@
               :resource="resource"
             />
           </td>
-          <td class=" items-center px-6 py-4 cursor-default" @click="(e)=>{e.stopPropagation()}">
+          <td class=" items-center px-2 md:px-3 lg:px-6 py-4 cursor-default" @click="(e)=>{e.stopPropagation()}">
             <div class="flex">
               <RouterLink
                 v-if="resource.options?.allowedActions.show"

package/types/AdminForthConfig.ts

@@ -1075,6 +1075,8 @@ export type AdminForthResource = {
        * 
        */
       pageInjections?: {
+
+
         /**
          * Custom components which can be injected into resource list page.
          * 
@@ -1405,6 +1407,15 @@ export type AdminForthConfig = {
       loginPageInjections?: {
         underInputs?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
       }
+
+      /**
+       * Custom panel components or array of components which will be displayed in different parts of the admin panel.
+       */
+      globalInjections?: {
+        userMenu?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
+        header?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
+        sidebar?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
+      }
     }
 
     /**