adminforth 1.0.30 → 1.0.31

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

@@ -34,7 +34,7 @@
         <IconCaretUpSolid v-else class="h-5 w-5 text-gray-400" />
       </div>
     </div>
-    <div v-if="showDropdown" class="absolute z-10 mt-1 w-full bg-white shadow-lg rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
+    <div v-if="showDropdown" class="absolute z-10 mt-1 w-full bg-white shadow-lg dark:shadow-black rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
       <div
         v-for="item in filteredItems"
         :key="item.value"

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

@@ -2,7 +2,7 @@
   <!-- drawer component -->
   <div id="drawer-navigation" 
   
-      class="fixed top-14 right-0 z-40 p-4 overflow-y-auto transition-transform translate-x-full bg-white w-80 dark:bg-gray-800 shadow-xl"
+      class="fixed top-14 right-0 z-40 p-4 overflow-y-auto transition-transform translate-x-full bg-white w-80 dark:bg-gray-800 shadow-xl dark:shadow-black"
 
       :class="show ? 'top-0 transform-none' : ''"
       tabindex="-1" aria-labelledby="drawer-navigation-label"
@@ -22,8 +22,14 @@
          <li v-for="c in columnsWithFilter" :key="c">
             <p class="dark:text-gray-400">{{ c.label }}</p>
 
-            <Dropdown 
-              v-if="c.type === 'boolean'" 
+            <Dropdown
+              v-if="c.foreignResource"
+              :options="columnOptions[c.name] || []"
+              @update:modelValue="setFilterItem({ column: c, operator: 'in', value: $event })"
+              :modelValue="filters.find(f => f.field === c.name && f.operator === 'in')?.value || []"
+            />
+            <Dropdown
+              v-else-if="c.type === 'boolean'"
               :options="[{ label: 'Yes', value: true }, { label: 'No', value: false }, { label: 'Unset', value: null }]"
               @update:modelValue="setFilterItem({ column: c, operator: 'in', value: $event })"
               :modelValue="filters.find(f => f.field === c.name && f.operator === 'in')?.value || []"
@@ -62,22 +68,15 @@
              :value="getFilterItem({ column: c, operator: 'ilike' })"
            >
 
-            <div v-else-if="['integer', 'decimal', 'float'].includes(c.type)" class="flex 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"
-                @input="setFilterItem({ column: c, operator: 'gte', value: $event.target.value || undefined })"
-                :value="getFilterItem({ column: c, operator: 'gte' })"
-              >
-              <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"
-                @input="setFilterItem({ column: c, operator: 'lte', value: $event.target.value || undefined})"
-                :value="getFilterItem({ column: c, operator: 'lte' })"
-              >
-            </div>
+           <CustomRangePicker
+             v-else-if="['integer', 'decimal', 'float'].includes(c.type)"
+             :min="c.min"
+             :max="c.max"
+             :valueStart="getFilterItem({ column: c, operator: 'gte' })"
+             @update:valueStart="setFilterItem({ column: c, operator: 'gte', value: $event || undefined })"
+             :valueEnd="getFilterItem({ column: c, operator: 'lte' })"
+             @update:valueEnd="setFilterItem({ column: c, operator: 'lte', value: $event || undefined })"
+           />
             
          </li>
       </ul>
@@ -99,19 +98,53 @@
 </template>
 
 <script setup>
-import { watch, computed } from 'vue'
+import { watch, computed, ref, onMounted } from 'vue'
 import Dropdown from '@/components/Dropdown.vue';
 import CustomDateRangePicker from '@/components/CustomDateRangePicker.vue';
+import { callAdminForthApi } from '@/utils';
+import { useRouter } from 'vue-router';
+import { computedAsync } from '@vueuse/core'
+import CustomRangePicker from "@/components/CustomRangePicker.vue";
 
 // props: columns
 // add support for v-model:filers
 const props = defineProps(['columns', 'filters', 'show', 'columnsMinMax']);
 const emits = defineEmits(['update:filters', 'hide']);
 
-const columnsWithFilter = computed( 
+const router = useRouter();
+
+
+const columnsWithFilter = computed(
   () => props.columns?.filter(column => column.showIn.includes('filter')) || []
 );
 
+const columnOptions = computedAsync(async () => {
+  const ret = {};
+  if (!props.columns) {
+    return ret;
+  }
+  await Promise.all(
+    Object.values(props.columns).map(async (column) => {
+      if (column.foreignResource) {
+        const list = await callAdminForthApi({
+          method: 'POST',
+          path: `/get_resource_foreign_data`,
+          body: {
+            resourceId: router.currentRoute.value.params.resourceId,
+            column: column.name,
+            limit: 1000,
+            offset: 0,
+          },
+        });
+        ret[column.name] = list.items;
+      }
+    })
+  );
+
+  return ret;
+}, {});
+
+
 // sync 'body' class 'overflow-hidden' with show prop show
 watch(() => props.show, (show) => {
   if (show) {

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

@@ -2,7 +2,7 @@
   <div>
     
     <div 
-      class="relative shadow-md sm:rounded-lg dark:shadow-2xl"
+      class="relative shadow-md sm:rounded-lg dark:shadow-2xl dark:shadow-black"
     >
       <form autocomplete="off" @submit.prevent>
         <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
@@ -36,7 +36,14 @@
                 <td class="px-6 py-4 whitespace-nowrap whitespace-pre-wrap relative">
                   <Dropdown
                     single
-                    v-if="column.enum"
+                    v-if="column.foreignResource"
+                    :options="columnOptions[column.name] || []"
+                    :modelValue="currentValues[column.name]"
+                    @update:modelValue="setCurrentValue(column.name, $event)"
+                  />
+                  <Dropdown
+                    single
+                    v-else-if="column.enum"
                     :options="column.enum"
                     :modelValue="currentValues[column.name]"
                     @update:modelValue="setCurrentValue(column.name, $event)"
@@ -128,6 +135,11 @@ import { IconExclamationCircleSolid } from '@iconify-prerendered/vue-flowbite';
 import { initFlowbite } from 'flowbite'
 import { IconEyeSolid, IconEyeSlashSolid } from '@iconify-prerendered/vue-flowbite';
 import CustomDatePicker from "@/components/CustomDatePicker.vue";
+import { callAdminForthApi } from '@/utils';
+import { useRouter } from 'vue-router';
+import { computedAsync } from '@vueuse/core';
+
+const router = useRouter();
 
 const props = defineProps({
   loading: Boolean,
@@ -145,6 +157,7 @@ const emit = defineEmits(['update:record', 'update:isValid']);
 
 const currentValues = ref({});
 
+
 const columnError = (column) => {
   const val = computed(() => {
     if ( column.required[mode.value] && (currentValues.value[column.name] === undefined || currentValues.value[column.name] === null || currentValues.value[column.name] === '') ) {
@@ -172,8 +185,6 @@ const columnError = (column) => {
 };
 
 
-
-
 const setCurrentValue = (key, value) => {
   currentValues.value[key] = value;
 
@@ -185,8 +196,31 @@ onMounted(() => {
     currentValues.value[key] = props.record[key];
   });
   initFlowbite();
+
+  
 });
 
+const columnOptions = computedAsync(async () => { 
+  return (await Promise.all(
+    Object.values(props.resourceColumns).map(async (column) => {
+      if (column.foreignResource) {
+        const list = await callAdminForthApi({
+          method: 'POST',
+          path: `/get_resource_foreign_data`,
+          body: {
+            resourceId: router.currentRoute.value.params.resourceId,
+            column: column.name,
+            limit: 1000,
+            offset: 0,
+          },
+        });
+        return { [column.name]: list.items };
+      }
+    })
+  )).reduce((acc, val) => Object.assign(acc, val), {})
+
+}, {});
+
 const coreStore = useCoreStore();
 
 const editableColumns = computed(() => {

package/dist/spa/spa/src/router/index.ts

@@ -12,7 +12,9 @@ const router = createRouter({
     {
       path: '/',
       name: 'home',
-      component: HomeView
+      //redirect to login 
+      /* IMPORTANT:ADMINFORTH REDIRECT */
+
     },
     {
       path: '/login',

package/dist/spa/spa/src/stores/core.ts

@@ -42,20 +42,7 @@ export const useCoreStore = defineStore('core', () => {
     user.value = resp.user;
 
     // find homepage:true in menu recuresively
-    if (import.meta.env.DEV){
-      return
-    } else {
-      const homepage = await findHomepage(menu.value);
-      if (homepage) {
-        if (homepage.resourceId) {
-          // redirect to homepage
-          router.push({ name: 'resource-list', params: { resourceId: homepage.resourceId } });
-        } else {
-          // redirect to path
-          router.push(homepage.path);
-        }
-      }
-    }
+    
   }
 
   async function fetchRecord({ resourceId, primaryKey }) {

package/dist/spa/spa/src/views/ListView.vue

@@ -65,7 +65,7 @@
     </BreadcrumbsWithButtons>
 
     <!-- table -->
-    <div class="relative overflow-x-auto shadow-md sm:rounded-lg dark:shadow-2xl">
+    <div class="relative overflow-x-auto shadow-md dark:shadow-black	 sm:rounded-lg dark:s">
 
 
       <!-- skelet loader -->
@@ -357,6 +357,9 @@ const totalRows = ref(0);
 const allCheckedActions = ref([]);
 const allowedActions = ref({});
 
+onMounted(() => {
+  console.log('LISTVIEW mounted⌛⌛⌛⌛⌛⌛🔻🔻🔻');
+});
 
 const DEFAULT_PAGE_SIZE = 10;
 

package/dist/spa/spa/src/views/LoginView.vue

@@ -11,7 +11,7 @@
     <div id="authentication-modal" tabindex="-1" class=" overflow-y-auto overflow-x-hidden z-50 min-w-[400px] justify-center items-center md:inset-0 h-[calc(100%-1rem)] max-h-full">
         <div class="relative p-4 w-full max-w-md max-h-full">
             <!-- Modal content -->
-            <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" >
                 <!-- Modal header -->
                 <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
                     <h3 class="text-xl font-semibold text-gray-900 dark:text-white">

package/index.ts

@@ -615,6 +615,71 @@ class AdminForth {
         return {...data, options: resource?.options };
       },
     });
+    server.endpoint({
+      method: 'POST',
+      path: '/get_resource_foreign_data',
+      handler: async ({ body, adminUser }) => {
+        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 (columnConfig.foreignResource.hooks?.beforeDatasourceRequest) {
+          const resp = await column.foreignResource.hooks?.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 = await 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 (columnConfig.foreignResource.hooks?.afterDatasourceRequest) {
+          const resp = await column.foreignResource.hooks?.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',

package/modules/codeInjector.ts

@@ -75,9 +75,8 @@ class CodeInjector {
 
   async rmTmpDir() {
     // remove spa_tmp folder if it is exists
-    const spaTmpPath = CodeInjector.SPA_TMP_PATH;
     try {
-      await fs.promises.rm(spaTmpPath, { recursive: true });
+      await fs.promises.rm(CodeInjector.SPA_TMP_PATH, { recursive: true });
     } catch (e) {
       // ignore
     }
@@ -210,6 +209,24 @@ class CodeInjector {
 
 
     /* generate custom rotes */
+    const homepageMenuItem = this.adminforth.config.menu.find((mi)=>mi.homepage);
+    let childrenHomePageMenuItem = this.adminforth.config.menu.find((mi)=>mi.children && mi.children?.find((mi)=>mi.homepage));
+    let childrenHomepage = childrenHomePageMenuItem?.children?.find((mi)=>mi.homepage)
+    let homePagePath = homepageMenuItem?.path || `resource/${childrenHomepage?.resourceId}`;
+    if (!homePagePath) {
+      homePagePath=this.adminforth.config.menu.filter((mi)=>mi.path)[0]?.path || `resource/${this.adminforth.config.menu.filter((mi)=>mi.children)[0]?.resourceId}` ;
+    }
+
+    
+    
+      
+
+    routes += `{
+      path: '/',
+      name: 'home',
+      //redirect to login 
+      redirect: '/${homePagePath}'
+    },\n`;
     const routerVuePath = path.join(spaTmpPath, 'src', 'router', 'index.ts');
     let routerVueContent = await fs.promises.readFile(routerVuePath, 'utf-8');
     routerVueContent = routerVueContent.replace('/* IMPORTANT:ADMINFORTH ROUTES */', routes);
@@ -217,21 +234,21 @@ class CodeInjector {
     
 
     /* hash checking */
-    const packageLockPath = path.join(spaTmpPath, 'package-lock.json');
-    const packageLock = JSON.parse(await fs.promises.readFile(packageLockPath, 'utf-8'));
-    const lockHash = hashify(packageLock);
+    const spaPackageLockPath = path.join(spaTmpPath, 'package-lock.json');
+    const spaPackageLock = JSON.parse(await fs.promises.readFile(spaPackageLockPath, 'utf-8'));
+    const spaLockHash = hashify(spaPackageLock);
+
     /* customPackageLock */
-    const customPackagePath = path.join('./package.json');
-    const customPackage = JSON.parse(await fs.promises.readFile(customPackagePath, 'utf-8'));
-    const customPackageHash = hashify(customPackage);
+    const usersPackagePath = path.join('./package.json');
+    const usersPackage = JSON.parse(await fs.promises.readFile(usersPackagePath, 'utf-8'));
 
-    const customLockPath = path.join('./package-lock.json');
-    const customLock = JSON.parse(await fs.promises.readFile(customLockPath, 'utf-8'));
-    const customLockHash = hashify(customLock);
+    const usersLockPath = path.join('./package-lock.json');
+    const usersLock = JSON.parse(await 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 {
@@ -239,20 +256,30 @@ class CodeInjector {
       if (existingHash === fullHash) {
         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');
+      }
     }
 
     await 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;
-        acc.push(`${packageName}@${version}`);
-        return acc;
-      }, []);
+    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;
+        }, []);
 
     if (packageNames.length) {
       const npmInstallCommand = `install ${[...packageNames, ...customPackgeNames].join(' ')}`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminforth",
-  "version": "1.0.30",
+  "version": "1.0.31",
   "description": "OpenSource Vue3 powered forth-generation admin panel",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

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