adminforth 1.0.30 → 1.0.32

package/dataConnectors/postgres.ts

@@ -147,7 +147,7 @@ class PostgresConnector {
 
     async getRecordByPrimaryKey(resource, key) {
         const tableName = resource.table;
-        const columns = resource.dataSourceColumns.map((col) => col.name).join(', ');
+        const columns = resource.dataSourceColumns.map((col) => `"${col.name}"`).join(', ');
         const stmt = await this.db.query(`SELECT ${columns} FROM ${tableName} WHERE ${this.getPrimaryKey(resource)} = $1`, [key]);
         const row = stmt.rows[0];
         if (!row) {
@@ -177,7 +177,7 @@ class PostgresConnector {
       }
     
     async getData({ resource, limit, offset, sort, filters }) {
-      const columns = resource.dataSourceColumns.filter(c=> !c.virtual).map((col) => col.name).join(', ');
+      const columns = resource.dataSourceColumns.filter(c=> !c.virtual).map((col) => `"${col.name}"`).join(', ');
       const tableName = resource.table;
       
       for (const filter of filters) {
@@ -199,7 +199,7 @@ class PostgresConnector {
         } else {
             totalCounter += 1;
         }
-        return `${field} ${operator} ${placeholder}`
+        return `"${field}" ${operator} ${placeholder}`
       }).join(' AND ')}` : '';
 
       const filterValues = [];
@@ -267,17 +267,20 @@ class PostgresConnector {
                 return record[colName];
             }
         });
+        for (let i = 0; i < columns.length; i++) {
+            columns[i] = `"${columns[i]}"`;
+        }
         await this.db.query(`INSERT INTO ${tableName} (${columns.join(', ')}) VALUES (${placeholders})`, values);
     }
 
     async updateRecord({ resource, recordId, record, newValues }) {
         const values = [...Object.values(newValues), recordId];
-        const columnsWithPlaceholders = Object.keys(newValues).map((col, i) => `${col} = $${i + 1}`).join(', ');
-        await this.db.query(`UPDATE ${resource.table} SET ${columnsWithPlaceholders} WHERE ${this.getPrimaryKey(resource)} = $${values.length}`, values);
+        const columnsWithPlaceholders = Object.keys(newValues).map((col, i) => `"${col}" = $${i + 1}`).join(', ');
+        await this.db.query(`UPDATE ${resource.table} SET ${columnsWithPlaceholders} WHERE "${this.getPrimaryKey(resource)}" = $${values.length}`, values);
     }
 
     async deleteRecord({ resource, recordId }) {
-        await this.db.query(`DELETE FROM ${resource.table} WHERE ${this.getPrimaryKey(resource)} = $1`, [recordId]);
+        await this.db.query(`DELETE FROM ${resource.table} WHERE "${this.getPrimaryKey(resource)}" = $1`, [recordId]);
     }
 
     async close() {

package/dist/dataConnectors/postgres.js

@@ -148,7 +148,7 @@ class PostgresConnector {
     getRecordByPrimaryKey(resource, key) {
         return __awaiter(this, void 0, void 0, function* () {
             const tableName = resource.table;
-            const columns = resource.dataSourceColumns.map((col) => col.name).join(', ');
+            const columns = resource.dataSourceColumns.map((col) => `"${col.name}"`).join(', ');
             const stmt = yield this.db.query(`SELECT ${columns} FROM ${tableName} WHERE ${this.getPrimaryKey(resource)} = $1`, [key]);
             const row = stmt.rows[0];
             if (!row) {
@@ -180,7 +180,7 @@ class PostgresConnector {
     }
     getData(_a) {
         return __awaiter(this, arguments, void 0, function* ({ resource, limit, offset, sort, filters }) {
-            const columns = resource.dataSourceColumns.filter(c => !c.virtual).map((col) => col.name).join(', ');
+            const columns = resource.dataSourceColumns.filter(c => !c.virtual).map((col) => `"${col.name}"`).join(', ');
             const tableName = resource.table;
             for (const filter of filters) {
                 if (!this.OperatorsMap[filter.operator]) {
@@ -202,7 +202,7 @@ class PostgresConnector {
                 else {
                     totalCounter += 1;
                 }
-                return `${field} ${operator} ${placeholder}`;
+                return `"${field}" ${operator} ${placeholder}`;
             }).join(' AND ')}` : '';
             const filterValues = [];
             filters.length ? filters.forEach((f) => {
@@ -272,19 +272,22 @@ class PostgresConnector {
                     return record[colName];
                 }
             });
+            for (let i = 0; i < columns.length; i++) {
+                columns[i] = `"${columns[i]}"`;
+            }
             yield this.db.query(`INSERT INTO ${tableName} (${columns.join(', ')}) VALUES (${placeholders})`, values);
         });
     }
     updateRecord(_a) {
         return __awaiter(this, arguments, void 0, function* ({ resource, recordId, record, newValues }) {
             const values = [...Object.values(newValues), recordId];
-            const columnsWithPlaceholders = Object.keys(newValues).map((col, i) => `${col} = $${i + 1}`).join(', ');
-            yield this.db.query(`UPDATE ${resource.table} SET ${columnsWithPlaceholders} WHERE ${this.getPrimaryKey(resource)} = $${values.length}`, values);
+            const columnsWithPlaceholders = Object.keys(newValues).map((col, i) => `"${col}" = $${i + 1}`).join(', ');
+            yield this.db.query(`UPDATE ${resource.table} SET ${columnsWithPlaceholders} WHERE "${this.getPrimaryKey(resource)}" = $${values.length}`, values);
         });
     }
     deleteRecord(_a) {
         return __awaiter(this, arguments, void 0, function* ({ resource, recordId }) {
-            yield this.db.query(`DELETE FROM ${resource.table} WHERE ${this.getPrimaryKey(resource)} = $1`, [recordId]);
+            yield this.db.query(`DELETE FROM ${resource.table} WHERE "${this.getPrimaryKey(resource)}" = $1`, [recordId]);
         });
     }
     close() {

package/dist/index.js

@@ -22,6 +22,14 @@ import { guessLabelFromName } from './modules/utils.js';
 import ExpressServer from './servers/express.js';
 import { v1 as uuid } from 'uuid';
 import fs from 'fs';
+let package_json;
+if (fs.existsSync('../package.json')) {
+    // in prod we are in dist folder
+    package_json = JSON.parse(fs.readFileSync('../package.json', 'utf8'));
+}
+else {
+    package_json = JSON.parse(fs.readFileSync('./package.json', 'utf8'));
+}
 import { AdminForthFilterOperators, AdminForthTypes } from './types.js';
 const AVAILABLE_SHOW_IN = ['list', 'edit', 'create', 'filter', 'show'];
 const DEFAULT_ALLOWED_ACTIONS = { create: true, edit: true, show: true, delete: true };
@@ -409,6 +417,7 @@ class AdminForth {
                         usernameField: this.config.auth.usernameField,
                     },
                     adminUser,
+                    version: package_json.version,
                 };
             }),
         });
@@ -455,10 +464,73 @@ class AdminForth {
                 return Object.assign(Object.assign({}, data), { options: resource === null || resource === void 0 ? void 0 : resource.options });
             }),
         });
+        server.endpoint({
+            method: 'POST',
+            path: '/get_resource_foreign_data',
+            handler: (_h) => __awaiter(this, [_h], void 0, function* ({ body, adminUser }) {
+                var _j, _k, _l, _m;
+                const { resourceId, column } = body;
+                if (!this.statuses.dbDiscover) {
+                    return { error: 'Database discovery not started' };
+                }
+                if (this.statuses.dbDiscover !== 'done') {
+                    return { error: 'Database discovery is still in progress, please try later' };
+                }
+                const resource = this.config.resources.find((res) => res.resourceId == resourceId);
+                if (!resource) {
+                    return { error: `Resource ${resourceId} not found` };
+                }
+                const columnConfig = resource.columns.find((col) => col.name == column);
+                if (!columnConfig.foreignResource) {
+                    return { error: `Column ${column} in resource ${resourceId} is not a foreign key` };
+                }
+                const targetResourceId = columnConfig.foreignResource.resourceId;
+                const targetResource = this.config.resources.find((res) => res.resourceId == targetResourceId);
+                if ((_j = columnConfig.foreignResource.hooks) === null || _j === void 0 ? void 0 : _j.beforeDatasourceRequest) {
+                    const resp = yield ((_k = column.foreignResource.hooks) === null || _k === void 0 ? void 0 : _k.beforeDatasourceRequest({ query: body, adminUser }));
+                    if (!resp || (!resp.ok && !resp.error)) {
+                        throw new Error(`Hook must return object with {ok: true} or { error: 'Error' } `);
+                    }
+                    if (resp.error) {
+                        return { error: resp.error };
+                    }
+                }
+                const { limit, offset, filters, sort } = body;
+                const dbDataItems = yield this.connectors[targetResource.dataSource].getData({
+                    resource: targetResource,
+                    limit,
+                    offset,
+                    filters: filters || [],
+                    sort: sort || [],
+                });
+                const items = dbDataItems.data.map((item) => {
+                    const pk = item[targetResource.columns.find((col) => col.primaryKey).name];
+                    const labler = targetResource.itemLabel || ((record) => `${targetResource.label} ${pk}`);
+                    return {
+                        value: pk,
+                        label: labler(item),
+                        _item: item, // user might need it in hook to form new label
+                    };
+                });
+                const response = {
+                    items
+                };
+                if ((_l = columnConfig.foreignResource.hooks) === null || _l === void 0 ? void 0 : _l.afterDatasourceRequest) {
+                    const resp = yield ((_m = column.foreignResource.hooks) === null || _m === void 0 ? void 0 : _m.afterDatasourceRequest({ response, adminUser }));
+                    if (!resp || (!resp.ok && !resp.error)) {
+                        throw new Error(`Hook must return object with {ok: true} or { error: 'Error' } `);
+                    }
+                    if (resp.error) {
+                        return { error: resp.error };
+                    }
+                }
+                return response;
+            }),
+        });
         server.endpoint({
             method: 'POST',
             path: '/get_min_max_for_columns',
-            handler: (_h) => __awaiter(this, [_h], void 0, function* ({ body }) {
+            handler: (_o) => __awaiter(this, [_o], void 0, function* ({ body }) {
                 const { resourceId } = body;
                 if (!this.statuses.dbDiscover) {
                     return { error: 'Database discovery not started' };
@@ -487,8 +559,8 @@ class AdminForth {
         server.endpoint({
             method: 'POST',
             path: '/get_record',
-            handler: (_j) => __awaiter(this, [_j], void 0, function* ({ body, adminUser }) {
-                var _k, _l;
+            handler: (_p) => __awaiter(this, [_p], void 0, function* ({ body, adminUser }) {
+                var _q, _r;
                 const { resourceId, primaryKey } = body;
                 const resource = this.config.resources.find((res) => res.resourceId == resourceId);
                 const primaryKeyColumn = resource.columns.find((col) => col.primaryKey);
@@ -498,8 +570,8 @@ class AdminForth {
                     return { error: `Record with ${primaryKeyColumn.name} ${primaryKey} not found` };
                 }
                 // execute hook if needed
-                if ((_k = resource.hooks) === null || _k === void 0 ? void 0 : _k.show) {
-                    const resp = yield ((_l = resource.hooks) === null || _l === void 0 ? void 0 : _l.show({ resource, record, adminUser }));
+                if ((_q = resource.hooks) === null || _q === void 0 ? void 0 : _q.show) {
+                    const resp = yield ((_r = resource.hooks) === null || _r === void 0 ? void 0 : _r.show({ resource, record, adminUser }));
                     if (!resp || (!resp.ok && !resp.error)) {
                         throw new Error(`Hook must return object with {ok: true} or { error: 'Error' } `);
                     }
@@ -516,8 +588,8 @@ class AdminForth {
             noAuth: true, // TODO
             method: 'POST',
             path: '/create_record',
-            handler: (_m) => __awaiter(this, [_m], void 0, function* ({ body, adminUser }) {
-                var _o, _p, _q, _r, _s, _t, _u, _v, _w;
+            handler: (_s) => __awaiter(this, [_s], void 0, function* ({ body, adminUser }) {
+                var _t, _u, _v, _w, _x, _y, _z, _0, _1;
                 console.log('create_record', body, this.config.resources);
                 const resource = this.config.resources.find((res) => res.resourceId == body['resourceId']);
                 if (!resource) {
@@ -525,8 +597,8 @@ class AdminForth {
                 }
                 const record = body['record'];
                 // execute hook if needed
-                if ((_p = (_o = resource.hooks) === null || _o === void 0 ? void 0 : _o.create) === null || _p === void 0 ? void 0 : _p.beforeSave) {
-                    const resp = yield ((_r = (_q = resource.hooks) === null || _q === void 0 ? void 0 : _q.create) === null || _r === void 0 ? void 0 : _r.beforeSave({ resource, record, adminUser }));
+                if ((_u = (_t = resource.hooks) === null || _t === void 0 ? void 0 : _t.create) === null || _u === void 0 ? void 0 : _u.beforeSave) {
+                    const resp = yield ((_w = (_v = resource.hooks) === null || _v === void 0 ? void 0 : _v.create) === null || _w === void 0 ? void 0 : _w.beforeSave({ resource, record, adminUser }));
                     if (!resp || (!resp.ok && !resp.error)) {
                         throw new Error(`Hook beforeSave must return object with {ok: true} or { error: 'Error' } `);
                     }
@@ -542,7 +614,7 @@ class AdminForth {
                             });
                         }
                     }
-                    if (((_s = column.required) === null || _s === void 0 ? void 0 : _s.create) && body['record'][column.name] === undefined) {
+                    if (((_x = column.required) === null || _x === void 0 ? void 0 : _x.create) && body['record'][column.name] === undefined) {
                         return { error: `Column '${column.name}' is required` };
                     }
                     if (column.isUnique) {
@@ -567,8 +639,8 @@ class AdminForth {
                 const connector = this.connectors[resource.dataSource];
                 yield connector.createRecord({ resource, record });
                 // execute hook if needed
-                if ((_u = (_t = resource.hooks) === null || _t === void 0 ? void 0 : _t.create) === null || _u === void 0 ? void 0 : _u.afterSave) {
-                    const resp = yield ((_w = (_v = resource.hooks) === null || _v === void 0 ? void 0 : _v.create) === null || _w === void 0 ? void 0 : _w.afterSave({ resource, record, adminUser }));
+                if ((_z = (_y = resource.hooks) === null || _y === void 0 ? void 0 : _y.create) === null || _z === void 0 ? void 0 : _z.afterSave) {
+                    const resp = yield ((_1 = (_0 = resource.hooks) === null || _0 === void 0 ? void 0 : _0.create) === null || _1 === void 0 ? void 0 : _1.afterSave({ resource, record, adminUser }));
                     if (!resp || (!resp.ok && !resp.error)) {
                         throw new Error(`Hook afterSave must return object with {ok: true} or { error: 'Error' } `);
                     }
@@ -585,8 +657,8 @@ class AdminForth {
             noAuth: true, // TODO
             method: 'POST',
             path: '/update_record',
-            handler: (_x) => __awaiter(this, [_x], void 0, function* ({ body, adminUser }) {
-                var _y, _z, _0, _1, _2, _3, _4, _5;
+            handler: (_2) => __awaiter(this, [_2], void 0, function* ({ body, adminUser }) {
+                var _3, _4, _5, _6, _7, _8, _9, _10;
                 console.log('update_record', body);
                 const resource = this.config.resources.find((res) => res.resourceId == body['resourceId']);
                 if (!resource) {
@@ -601,8 +673,8 @@ class AdminForth {
                 }
                 const record = body['record'];
                 // execute hook if needed
-                if ((_z = (_y = resource.hooks) === null || _y === void 0 ? void 0 : _y.edit) === null || _z === void 0 ? void 0 : _z.beforeSave) {
-                    const resp = yield ((_1 = (_0 = resource.hooks) === null || _0 === void 0 ? void 0 : _0.edit) === null || _1 === void 0 ? void 0 : _1.beforeSave({ resource, record, adminUser }));
+                if ((_4 = (_3 = resource.hooks) === null || _3 === void 0 ? void 0 : _3.edit) === null || _4 === void 0 ? void 0 : _4.beforeSave) {
+                    const resp = yield ((_6 = (_5 = resource.hooks) === null || _5 === void 0 ? void 0 : _5.edit) === null || _6 === void 0 ? void 0 : _6.beforeSave({ resource, record, adminUser }));
                     if (!resp || (!resp.ok && !resp.error)) {
                         throw new Error(`Hook beforeSave must return object with {ok: true} or { error: 'Error' } `);
                     }
@@ -620,8 +692,8 @@ class AdminForth {
                     yield connector.updateRecord({ resource, recordId, record, newValues });
                 }
                 // execute hook if needed
-                if ((_3 = (_2 = resource.hooks) === null || _2 === void 0 ? void 0 : _2.edit) === null || _3 === void 0 ? void 0 : _3.afterSave) {
-                    const resp = yield ((_5 = (_4 = resource.hooks) === null || _4 === void 0 ? void 0 : _4.edit) === null || _5 === void 0 ? void 0 : _5.afterSave({ resource, record, adminUser }));
+                if ((_8 = (_7 = resource.hooks) === null || _7 === void 0 ? void 0 : _7.edit) === null || _8 === void 0 ? void 0 : _8.afterSave) {
+                    const resp = yield ((_10 = (_9 = resource.hooks) === null || _9 === void 0 ? void 0 : _9.edit) === null || _10 === void 0 ? void 0 : _10.afterSave({ resource, record, adminUser }));
                     if (!resp || (!resp.ok && !resp.error)) {
                         throw new Error(`Hook afterSave must return object with {ok: true} or { error: 'Error' } `);
                     }
@@ -638,16 +710,16 @@ class AdminForth {
             noAuth: true, // TODO
             method: 'POST',
             path: '/delete_record',
-            handler: (_6) => __awaiter(this, [_6], void 0, function* ({ body, adminUser }) {
-                var _7, _8, _9, _10, _11, _12, _13, _14;
+            handler: (_11) => __awaiter(this, [_11], void 0, function* ({ body, adminUser }) {
+                var _12, _13, _14, _15, _16, _17, _18, _19;
                 const resource = this.config.resources.find((res) => res.resourceId == body['resourceId']);
                 const record = yield this.connectors[resource.dataSource].getRecordByPrimaryKey(resource, body['primaryKey']);
                 if (!resource) {
                     return { error: `Resource '${body['resourceId']}' not found` };
                 }
                 // execute hook if needed
-                if ((_8 = (_7 = resource.hooks) === null || _7 === void 0 ? void 0 : _7.delete) === null || _8 === void 0 ? void 0 : _8.beforeSave) {
-                    const resp = yield ((_10 = (_9 = resource.hooks) === null || _9 === void 0 ? void 0 : _9.delete) === null || _10 === void 0 ? void 0 : _10.beforeSave({ resource, record, adminUser }));
+                if ((_13 = (_12 = resource.hooks) === null || _12 === void 0 ? void 0 : _12.delete) === null || _13 === void 0 ? void 0 : _13.beforeSave) {
+                    const resp = yield ((_15 = (_14 = resource.hooks) === null || _14 === void 0 ? void 0 : _14.delete) === null || _15 === void 0 ? void 0 : _15.beforeSave({ resource, record, adminUser }));
                     if (!resp || (!resp.ok && !resp.error)) {
                         throw new Error(`Hook beforeSave must return object with {ok: true} or { error: 'Error' } `);
                     }
@@ -658,8 +730,8 @@ class AdminForth {
                 const connector = this.connectors[resource.dataSource];
                 yield connector.deleteRecord({ resource, recordId: body['primaryKey'] });
                 // execute hook if needed
-                if ((_12 = (_11 = resource.hooks) === null || _11 === void 0 ? void 0 : _11.delete) === null || _12 === void 0 ? void 0 : _12.afterSave) {
-                    const resp = yield ((_14 = (_13 = resource.hooks) === null || _13 === void 0 ? void 0 : _13.delete) === null || _14 === void 0 ? void 0 : _14.afterSave({ resource, record, adminUser }));
+                if ((_17 = (_16 = resource.hooks) === null || _16 === void 0 ? void 0 : _16.delete) === null || _17 === void 0 ? void 0 : _17.afterSave) {
+                    const resp = yield ((_19 = (_18 = resource.hooks) === null || _18 === void 0 ? void 0 : _18.delete) === null || _19 === void 0 ? void 0 : _19.afterSave({ resource, record, adminUser }));
                     if (!resp || (!resp.ok && !resp.error)) {
                         throw new Error(`Hook afterSave must return object with {ok: true} or { error: 'Error' } `);
                     }
@@ -676,7 +748,7 @@ class AdminForth {
             noAuth: true, // TODO
             method: 'POST',
             path: '/start_bulk_action',
-            handler: (_15) => __awaiter(this, [_15], void 0, function* ({ body }) {
+            handler: (_20) => __awaiter(this, [_20], void 0, function* ({ body }) {
                 const { resourceId, actionId, recordIds } = body;
                 const resource = this.config.resources.find((res) => res.resourceId == resourceId);
                 if (!resource) {

package/dist/modules/codeInjector.js

@@ -63,9 +63,8 @@ class CodeInjector {
     rmTmpDir() {
         return __awaiter(this, void 0, void 0, function* () {
             // remove spa_tmp folder if it is exists
-            const spaTmpPath = CodeInjector.SPA_TMP_PATH;
             try {
-                yield fs.promises.rm(spaTmpPath, { recursive: true });
+                yield fs.promises.rm(CodeInjector.SPA_TMP_PATH, { recursive: true });
             }
             catch (e) {
                 // ignore
@@ -74,7 +73,7 @@ class CodeInjector {
     }
     prepareSources(_a) {
         return __awaiter(this, arguments, void 0, function* ({ filesUpdated, verbose = false }) {
-            var _b, _c, _d;
+            var _b, _c, _d, _e, _f, _g;
             const spaTmpPath = CodeInjector.SPA_TMP_PATH;
             // check SPA_TMP_PATH exists and create if not
             try {
@@ -186,23 +185,35 @@ class CodeInjector {
             }
             yield fs.promises.writeFile(appVuePath, appVueContent);
             /* generate custom rotes */
+            const homepageMenuItem = this.adminforth.config.menu.find((mi) => mi.homepage);
+            let childrenHomePageMenuItem = this.adminforth.config.menu.find((mi) => { var _a; return mi.children && ((_a = mi.children) === null || _a === void 0 ? void 0 : _a.find((mi) => mi.homepage)); });
+            let childrenHomepage = (_e = childrenHomePageMenuItem === null || childrenHomePageMenuItem === void 0 ? void 0 : childrenHomePageMenuItem.children) === null || _e === void 0 ? void 0 : _e.find((mi) => mi.homepage);
+            let homePagePath = (homepageMenuItem === null || homepageMenuItem === void 0 ? void 0 : homepageMenuItem.path) || `resource/${childrenHomepage === null || childrenHomepage === void 0 ? void 0 : childrenHomepage.resourceId}`;
+            if (!homePagePath) {
+                homePagePath = ((_f = this.adminforth.config.menu.filter((mi) => mi.path)[0]) === null || _f === void 0 ? void 0 : _f.path) || `resource/${(_g = this.adminforth.config.menu.filter((mi) => mi.children)[0]) === null || _g === void 0 ? void 0 : _g.resourceId}`;
+            }
+            routes += `{
+      path: '/',
+      name: 'home',
+      //redirect to login 
+      redirect: '/${homePagePath}'
+    },\n`;
             const routerVuePath = path.join(spaTmpPath, 'src', 'router', 'index.ts');
             let routerVueContent = yield fs.promises.readFile(routerVuePath, 'utf-8');
             routerVueContent = routerVueContent.replace('/* IMPORTANT:ADMINFORTH ROUTES */', routes);
             yield fs.promises.writeFile(routerVuePath, routerVueContent);
             /* hash checking */
-            const packageLockPath = path.join(spaTmpPath, 'package-lock.json');
-            const packageLock = JSON.parse(yield fs.promises.readFile(packageLockPath, 'utf-8'));
-            const lockHash = hashify(packageLock);
+            const spaPackageLockPath = path.join(spaTmpPath, 'package-lock.json');
+            const spaPackageLock = JSON.parse(yield fs.promises.readFile(spaPackageLockPath, 'utf-8'));
+            const spaLockHash = hashify(spaPackageLock);
             /* customPackageLock */
-            const customPackagePath = path.join('./package.json');
-            const customPackage = JSON.parse(yield fs.promises.readFile(customPackagePath, 'utf-8'));
-            const customPackageHash = hashify(customPackage);
-            const customLockPath = path.join('./package-lock.json');
-            const customLock = JSON.parse(yield fs.promises.readFile(customLockPath, 'utf-8'));
-            const customLockHash = hashify(customLock);
+            const usersPackagePath = path.join('./package.json');
+            const usersPackage = JSON.parse(yield fs.promises.readFile(usersPackagePath, 'utf-8'));
+            const usersLockPath = path.join('./package-lock.json');
+            const usersLock = JSON.parse(yield fs.promises.readFile(usersLockPath, 'utf-8'));
+            const usersLockHash = hashify(usersLock);
             const packagesNamesHash = hashify(packageNames);
-            const fullHash = hashify([lockHash, packagesNamesHash, customLockHash]);
+            const fullHash = `${spaLockHash}::${packagesNamesHash}::${usersLockHash}`;
             const hashPath = path.join(spaTmpPath, 'node_modules', '.adminforth_hash');
             try {
                 const existingHash = yield fs.promises.readFile(hashPath, 'utf-8');
@@ -210,14 +221,25 @@ class CodeInjector {
                     console.log('Hashes match, skipping npm ci/install');
                     return;
                 }
+                else {
+                    if (verbose) {
+                        console.log(`Hashes do not match: existing ${existingHash} new ${fullHash}, proceeding with npm ci/install`);
+                    }
+                }
             }
             catch (e) {
                 // ignore
+                if (verbose) {
+                    console.log('Hash file does not exist, proceeding with npm ci/install');
+                }
             }
             yield this.runNpmShell({ command: 'ci', verbose, cwd: spaTmpPath });
             // get packages with version from customPackage
-            const customPackgeNames = [...Object.keys(customPackage.dependencies), ...Object.keys(customPackage.devDependencies || [])].reduce((acc, packageName) => {
-                const version = customLock.packages[`node_modules/${packageName}`].version;
+            const IGNORE_PACKAGES = ['tsx', 'typescript', 'express', 'nodemon'];
+            const customPackgeNames = [...Object.keys(usersPackage.dependencies), ...Object.keys(usersPackage.devDependencies || [])]
+                .filter((packageName) => !IGNORE_PACKAGES.includes(packageName))
+                .reduce((acc, packageName) => {
+                const version = usersLock.packages[`node_modules/${packageName}`].version;
                 acc.push(`${packageName}@${version}`);
                 return acc;
             }, []);

package/dist/spa/spa/package-lock.json

@@ -9,12 +9,15 @@
       "version": "0.0.0",
       "dependencies": {
         "@iconify-prerendered/vue-flowbite": "^0.23.1714023977",
+        "@vueuse/core": "^10.10.0",
         "dayjs": "^1.11.11",
+        "debounce": "^2.1.0",
         "flowbite": "^2.3.0",
         "flowbite-datepicker": "^1.2.6",
         "pinia": "^2.1.7",
         "vue": "^3.4.21",
-        "vue-router": "^4.3.0"
+        "vue-router": "^4.3.0",
+        "vue-slider-component": "^4.1.0-beta.7"
       },
       "devDependencies": {
         "@rushstack/eslint-patch": "^1.8.0",
@@ -950,6 +953,11 @@
         "undici-types": "~5.26.4"
       }
     },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.20",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
+      "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "7.9.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.9.0.tgz",
@@ -1330,6 +1338,89 @@
       "integrity": "sha512-VcZK7MvpjuTPx2w6blwnwZAu5/LgBUtejFOi3pPGQFXQN5Ela03FUtd2Qtg4yWGGissVL0dr6Ro1LfOFh+PCuQ==",
       "dev": true
     },
+    "node_modules/@vueuse/core": {
+      "version": "10.10.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.10.0.tgz",
+      "integrity": "sha512-vexJ/YXYs2S42B783rI95lMt3GzEwkxzC8Hb0Ndpd8rD+p+Lk/Za4bd797Ym7yq4jXqdSyj3JLChunF/vyYjUw==",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.20",
+        "@vueuse/metadata": "10.10.0",
+        "@vueuse/shared": "10.10.0",
+        "vue-demi": ">=0.14.7"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.14.8",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.8.tgz",
+      "integrity": "sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "10.10.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.10.0.tgz",
+      "integrity": "sha512-UNAo2sTCAW5ge6OErPEHb5z7NEAg3XcO9Cj7OK45aZXfLLH1QkexDcZD77HBi5zvEiLOm1An+p/4b5K3Worpug==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "10.10.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.10.0.tgz",
+      "integrity": "sha512-2aW33Ac0Uk0U+9yo3Ypg9s5KcR42cuehRWl7vnUHadQyFvCktseyxxEPBi1Eiq4D2yBGACOnqLZpx1eMc7g5Og==",
+      "dependencies": {
+        "vue-demi": ">=0.14.7"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.14.8",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.8.tgz",
+      "integrity": "sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/acorn": {
       "version": "8.11.3",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
@@ -1716,6 +1807,17 @@
       "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
       "dev": true
     },
+    "node_modules/debounce": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/debounce/-/debounce-2.1.0.tgz",
+      "integrity": "sha512-OkL3+0pPWCqoBc/nhO9u6TIQNTK44fnBnzuVtJAbp13Naxw9R6u21x+8tVTka87AhDZ3htqZ2pSSsZl9fqL2Wg==",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -3970,6 +4072,11 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/vue-slider-component": {
+      "version": "4.1.0-beta.7",
+      "resolved": "https://registry.npmjs.org/vue-slider-component/-/vue-slider-component-4.1.0-beta.7.tgz",
+      "integrity": "sha512-Qb7K920ZG7PoQswoF6Ias+i3W2rd3k4fpk04JUl82kEUcN86Yg6et7bVSKWt/7VpQe8a5IT3BqCKSCOZ7AJgCA=="
+    },
     "node_modules/vue-template-compiler": {
       "version": "2.7.16",
       "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz",

package/dist/spa/spa/package.json

@@ -13,12 +13,15 @@
   },
   "dependencies": {
     "@iconify-prerendered/vue-flowbite": "^0.23.1714023977",
+    "@vueuse/core": "^10.10.0",
     "dayjs": "^1.11.11",
+    "debounce": "^2.1.0",
     "flowbite": "^2.3.0",
     "flowbite-datepicker": "^1.2.6",
     "pinia": "^2.1.7",
     "vue": "^3.4.21",
-    "vue-router": "^4.3.0"
+    "vue-router": "^4.3.0",
+    "vue-slider-component": "^4.1.0-beta.7"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.8.0",

package/dist/spa/spa/src/App.vue

@@ -32,7 +32,7 @@
 
                 </button>
               </div>
-              <div class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded shadow dark:bg-gray-700 dark:divide-gray-600 dark:shadow-xl" id="dropdown-user">
+              <div class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded shadow dark:shadow-black dark:bg-gray-700 dark:divide-gray-600 dark:shadow-black" id="dropdown-user">
                 <div class="px-4 py-3" role="none">
                   <p class="text-sm text-gray-900 dark:text-white" role="none" v-if="coreStore.userFullname">
                     {{ coreStore.userFullname }}
@@ -112,7 +112,7 @@
     </div>
   </div> 
 
-  <div v-else>
+  <div v-else-if="routerIsReady">
     <RouterView/>
   </div>
   <AcceptModal />

package/dist/spa/spa/src/components/AcceptModal.vue

@@ -16,7 +16,7 @@ const modalStore = useModalStore();
   <Teleport to="body">
     <div  v-if="modalStore.isOpened"  class="bg-gray-900/50 dark:bg-gray-900/80  overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
         <div class="relative p-4 w-full max-w-md max-h-full top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 " >
-            <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
+            <div class="relative bg-white rounded-lg shadow dark:bg-gray-700 dark:shadow-black">
                 <button type="button"@click="modalStore.togleModal" class="absolute top-3 end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" >
                     <svg class="w-3 h-3"  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>