adminforth 1.0.30 → 1.0.31

package/dist/index.js

@@ -455,10 +455,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 +550,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 +561,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 +579,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 +588,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 +605,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 +630,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 +648,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 +664,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 +683,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 +701,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 +721,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 +739,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 />
@@ -141,6 +141,10 @@ const routerIsReady = ref(false);
 
 const loggedIn = computed(() => route.name !== 'login' && routerIsReady.value);
 
+watch(loggedIn, (value) => {
+  console.log('🔻🔻🔻 loggedIn', value);
+});
+
 const theme = ref('light');
 
 function toggleTheme() {

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"/>

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

@@ -0,0 +1,143 @@
+<template>
+  <div class="flex flex-wrap gap-2">
+    <input
+      type="number" aria-describedby="helper-text-explanation"
+      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-20 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      placeholder="From"
+      v-model="start"
+    >
+
+    <input
+      type="number" aria-describedby="helper-text-explanation"
+      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-20 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      placeholder="To"
+      v-model="end"
+    >
+
+    <button
+      v-if="isChanged"
+      type="button"
+      class="flex items-center p-0.5 ml-auto px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
+      @click="clear">Clear
+    </button>
+
+    <div class="w-full">
+      <vue-slider
+        class="custom-slider"
+        :dot-size="20"
+        height="7.99px"
+        :min="minFormatted"
+        :max="maxFormatted"
+        v-model="sliderValue"
+        @update:model-value="updateFromSlider($event)"
+      />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import VueSlider from 'vue-slider-component';
+import 'vue-slider-component/theme/antd.css'
+import {computed, onMounted, ref, watch} from "vue";
+import debounce from 'debounce'
+
+const props = defineProps({
+  valueStart: {
+    default: 0,
+  },
+  valueEnd: {
+    default: 10,
+  },
+  min: {
+    default: 0,
+  },
+  max: {
+    default: 10,
+  },
+});
+
+const emit = defineEmits(['update:valueStart', 'update:valueEnd']);
+
+const minFormatted = computed(() => Math.floor(props.min));
+const maxFormatted = computed(() => Math.ceil(props.max));
+
+const isChanged = computed(() => {
+  return start.value !== minFormatted.value || end.value !== maxFormatted.value;
+});
+
+const start = ref(minFormatted.value);
+const end = ref(maxFormatted.value);
+
+const sliderValue = ref([start.value, end.value]);
+
+const updateFromSlider =
+    debounce((value: [number, number]) => {
+      start.value = value[0];
+      end.value = value[1];
+    }, 500);
+
+function updateFromProps() {
+  if (props.valueStart || props.valueEnd) {
+    setFromProps(props.valueStart, props.valueEnd)
+  } else {
+    clear();
+  }
+}
+
+onMounted(() => {
+  updateFromProps();
+
+  watch(() => [props.valueStart, props.valueEnd], (value) => {
+    updateFromProps();
+  });
+})
+
+watch(start, () => {
+  //console.log('⚡ emit', start.value)
+  emit('update:valueStart', start.value)
+})
+
+watch(end, () => {
+  //console.log('⚡ emit', end.value)
+  emit('update:valueEnd', end.value);
+})
+
+const clear = () => {
+  start.value = minFormatted.value;
+  end.value = maxFormatted.value;
+  sliderValue.value = [start.value, end.value]
+}
+
+function setFromProps(startValue: number, endValue: number) {
+  start.value = startValue ? startValue : minFormatted.value
+  end.value = endValue ? endValue : maxFormatted.value
+  sliderValue.value = [start.value, end.value]
+}
+</script>
+
+<style lang="scss" scoped>
+.custom-slider {
+    &:deep(.vue-slider-rail) {
+        background-color: rgb(229 231 235);
+    }
+
+    &:deep(.vue-slider-dot-handle) {
+        background-color: #1c64f2;
+        border: none;
+        box-shadow: none;
+    }
+
+    &:deep(.vue-slider-dot-handle:hover) {
+        background-color: #1c64f2;
+        border: none;
+        box-shadow: none;
+    }
+
+    &:deep(.vue-slider-process) {
+        background-color: rgb(225 239 254);
+    }
+
+    &:deep(.vue-slider-process:hover) {
+        background-color: rgb(225 239 254);
+    }
+}
+</style>