adminforth 1.0.58 → 1.0.60

package/dist/index.js

@@ -32,12 +32,12 @@ class AdminForth {
             deleteConfirmation: true,
         });
         this.config = Object.assign(Object.assign({}, __classPrivateFieldGet(this, _AdminForth_defaultConfig, "f")), config);
+        this.codeInjector = new CodeInjector(this);
         this.validateConfig();
         this.activatePlugins();
         this.validateConfig(); // revalidate after plugins
         this.express = new ExpressServer(this);
         this.auth = new Auth();
-        this.codeInjector = new CodeInjector(this);
         this.connectors = {};
         this.statuses = {};
         console.log(`🚀 AdminForth v${ADMINFORTH_VERSION} starting up`);
@@ -251,7 +251,11 @@ class AdminForth {
             for (const column of resource.columns) {
                 if (column.component) {
                     for (const [key, value] of Object.entries(column.component)) {
-                        // console.log(`${key}: ${value}`);
+                        if (this.codeInjector.allComponentNames[value]) {
+                            // not obvious, but if we are in this if, it means that this is plugin component
+                            // and there is no sense to check if it exists in users folder
+                            continue;
+                        }
                         const path = value.replace('@@', this.config.customization.customComponentsDir);
                         if (!fs.existsSync(path)) {
                             throw new Error(`Component file ${path} does not exist`);

package/dist/modules/codeInjector.js

@@ -30,6 +30,8 @@ function hashify(obj) {
 }
 class CodeInjector {
     constructor(adminforth) {
+        this.allComponentNames = {};
+        this.srcFoldersToSync = {};
         this.adminforth = adminforth;
     }
     // async runShell({command, verbose = false}) {
@@ -126,7 +128,14 @@ class CodeInjector {
                 });
                 // copy whole custom directory
                 if ((_b = this.adminforth.config.customization) === null || _b === void 0 ? void 0 : _b.customComponentsDir) {
-                    yield fsExtra.copy(this.adminforth.config.customization.customComponentsDir, path.join(CodeInjector.SPA_TMP_PATH, 'src', 'custom'), {
+                    this.srcFoldersToSync[this.adminforth.config.customization.customComponentsDir] = './';
+                }
+                for (const [src, dest] of Object.entries(this.srcFoldersToSync)) {
+                    const to = path.join(CodeInjector.SPA_TMP_PATH, 'src', 'custom', dest);
+                    if (process.env.HEAVY_DEBUG) {
+                        console.log(`🪲 await fsExtra.copy from ${src}, ${to}`);
+                    }
+                    yield fsExtra.copy(src, to, {
                         recursive: true,
                     });
                 }
@@ -169,11 +178,14 @@ class CodeInjector {
                     }
                 });
             });
-            let customComponentsImports = '';
             customResourceComponents.forEach((filePath) => {
                 const componentName = getComponentNameFromPath(filePath);
-                customComponentsImports += `import ${componentName} from '${filePath}';\n`;
+                this.allComponentNames[filePath] = componentName;
             });
+            let customComponentsImports = '';
+            for (const [targetPath, component] of Object.entries(this.allComponentNames)) {
+                customComponentsImports += `import ${component} from '${targetPath}';\n`;
+            }
             // Generate Vue.component statements for each icon
             const iconComponents = uniqueIcons.map((icon) => {
                 const [collection, iconName] = icon.split(':');
@@ -184,10 +196,9 @@ class CodeInjector {
             }).join('\n');
             // Generate Vue.component statements for each custom component
             let customComponentsComponents = '';
-            customResourceComponents.forEach((filePath) => {
-                const componentName = getComponentNameFromPath(filePath);
-                customComponentsComponents += `app.component('${componentName}', ${componentName});\n`;
-            });
+            for (const name of Object.values(this.allComponentNames)) {
+                customComponentsComponents += `app.component('${name}', ${name});\n`;
+            }
             let imports = iconImports + '\n';
             imports += customComponentsImports + '\n';
             if ((_d = this.adminforth.config.customization) === null || _d === void 0 ? void 0 : _d.vueUsesFile) {

package/dist/modules/utils.js

@@ -13,13 +13,17 @@ export function guessLabelFromName(name) {
         return name.split(/(?=[A-Z])/).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join(' ');
     }
 }
-const __filename = fileURLToPath(import.meta.url);
-let __dirname = path.join(path.dirname(__filename), '..');
-if (__dirname.endsWith('dist')) {
-    // in prod build we are in dist also
-    __dirname = path.join(__dirname, '..');
-}
-export const ADMIN_FORTH_ABSOLUTE_PATH = __dirname;
+export const currentFileDir = (metaUrl) => {
+    const __filename = fileURLToPath(metaUrl);
+    let __dirname = path.dirname(__filename);
+    console.log('currentFileDir', __dirname);
+    if (__dirname.endsWith('dist')) {
+        // in prod build we are in dist also
+        __dirname = path.join(__dirname, '..');
+    }
+    return __dirname;
+};
+export const ADMIN_FORTH_ABSOLUTE_PATH = path.join(currentFileDir(import.meta.url), '..');
 const package_json = JSON.parse(fs.readFileSync(path.join(ADMIN_FORTH_ABSOLUTE_PATH, 'package.json'), 'utf8'));
 export const ADMINFORTH_VERSION = package_json.version;
 export function getComponentNameFromPath(filePath) {

package/dist/plugins/ForeignInlineListPlugin/index.js

@@ -1,9 +1,8 @@
 import AdminForthPlugin from "../base.js";
 export default class ForeignInlineListPlugin extends AdminForthPlugin {
     constructor(options) {
-        super(options);
+        super(options, import.meta.url);
         this.options = options;
-        console.log('ForeignInlineListPlugin', this);
     }
     modifyResourceConfig(adminforth, resourceConfig) {
         super.modifyResourceConfig(adminforth, resourceConfig);
@@ -17,6 +16,9 @@ export default class ForeignInlineListPlugin extends AdminForthPlugin {
             label: 'Foreign Inline List',
             virtual: true,
             showIn: ['show'],
+            component: {
+                show: this.componentPath('InlineList.vue'),
+            },
         });
     }
 }

package/dist/plugins/base.js

@@ -1,8 +1,30 @@
+import { getComponentNameFromPath } from '../modules/utils.js';
+import { currentFileDir } from '../modules/utils.js';
+import path from 'path';
+import fs from 'fs';
 export default class AdminForthPlugin {
-    constructor(pluginOptions) {
+    constructor(pluginOptions, metaUrl) {
+        this.customFolderName = 'custom';
         // set up plugin here
+        this.pluginDir = currentFileDir(metaUrl);
     }
     modifyResourceConfig(adminforth, resourceConfig) {
         this.adminforth = adminforth;
     }
+    componentPath(componentFile) {
+        const key = `@@/plugins/${this.constructor.name}/${componentFile}`;
+        const componentName = getComponentNameFromPath(key);
+        const absSrcFolder = path.join(this.pluginDir, this.customFolderName);
+        if (!this.adminforth.codeInjector.srcFoldersToSync[absSrcFolder]) {
+            this.adminforth.codeInjector.srcFoldersToSync[absSrcFolder] = `./plugins/${this.constructor.name}/`;
+        }
+        if (!this.adminforth.codeInjector.allComponentNames[key]) {
+            const absSrcPath = path.join(absSrcFolder, componentFile);
+            if (!fs.existsSync(absSrcPath)) {
+                throw new Error(`Plugin "${this.constructor.name}" tried to use file as component which does not exist at "${absSrcPath}"`);
+            }
+            this.adminforth.codeInjector.allComponentNames[key] = componentName;
+        }
+        return key;
+    }
 }

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

@@ -1,7 +1,7 @@
 <template>
   <nav 
-    v-if="loggedIn"
-    class="fixed h-14 top-0 z-40 w-full  border-b shadow-sm bg-header-bg shadow-header-shadow dark:bg-header-bg-hover dark:border-nav-menu-devider">
+    v-if="loggedIn && routerIsReady && loginRedirectCheckIsReady"
+    class="fixed h-14 top-0 z-20 w-full  border-b shadow-sm bg-header-bg shadow-header-shadow dark:bg-header-bg-hover dark:border-nav-menu-devider">
     <div class="px-3 py-3 lg:px-5 lg:pl-3">
       <div class="flex items-center justify-between">
         <div class="flex items-center justify-start rtl:justify-end">
@@ -56,7 +56,7 @@
 
   <aside 
 
-    v-if="loggedIn"
+    v-if="loggedIn && routerIsReady && loginRedirectCheckIsReady"
 
     id="logo-sidebar" class="fixed border-none top-0 left-0 z-40 w-64 h-screen  transition-transform -translate-x-full bg-nav-menu-bg border-r border-  sm:translate-x-0 dark:bg-gray-800 dark:border-gray-700" aria-label="Sidebar">
     <div class="h-full px-3 pb-4 overflow-y-auto bg-nav-menu-bg dark:bg-gray-800">
@@ -102,16 +102,22 @@
     </div>
   </aside>
     
-  <div class="p-4 sm:ml-64 dark:bg-gray-800" v-if="loggedIn">
+  <div class="p-4 sm:ml-64 dark:bg-gray-800" v-if="loggedIn && routerIsReady && loginRedirectCheckIsReady">
     <div class="p-0 dark:border-gray-700 mt-14">
         <RouterView/>     
     </div>
   </div> 
 
-  <div v-else-if="routerIsReady">
+  <div v-else-if="routerIsReady && loginRedirectCheckIsReady">
     <RouterView/>
   </div>
+  <div v-else class="flex items-center justify-center h-screen">
+    <div class="text-3xl text-gray-400 animate-bounce">
+      ▶️
+    </div>
+  </div>
   <AcceptModal />
+
 </template>
 
 <style scoped>
@@ -149,8 +155,9 @@ const opened = ref<string[]>([]);
 
 
 const routerIsReady = ref(false);
+const loginRedirectCheckIsReady = ref(false);
 
-const loggedIn = computed(() => route.name !== 'login' && routerIsReady.value);
+const loggedIn = computed(() => route.name !== 'login');
 
 const theme = ref('light');
 
@@ -186,6 +193,7 @@ onMounted(async () => {
   initRouter();
   initFlowbite();
   await coreStore.fetchMenuAndResource();
+  loginRedirectCheckIsReady.value = true;
   title.value = coreStore.config.title || 'Admin Forth';
   useHead({
   title: title.value,

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

@@ -2,11 +2,11 @@
   <!-- drawer component -->
   <div id="drawer-navigation" 
   
-      class="fixed top-14 right-0 z-50 p-4 overflow-y-auto transition-transform translate-x-full bg-white w-80 dark:bg-gray-800 shadow-xl dark:shadow-black"
+      class="fixed  right-0 z-50 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"
-      :style="{ height: `calc(100vh - 3.5rem)` }"
+      :style="{ height: `calc(100vh ` }"
   >
     <h5 id="drawer-navigation-label" class="text-base font-semibold text-gray-500 uppercase dark:text-gray-400">
       Filters
@@ -92,7 +92,7 @@
    </div>
   </div>
 
-  <div v-if="show" drawer-backdrop="" class="bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-30"
+  <div v-if="show"  class="bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0  z-30"
     @click="$emit('hide')">
   </div>
 </template>

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

@@ -0,0 +1,14 @@
+<template>
+  <td class="px-6 py-4 whitespace-nowrap">
+      {{ column.label }}
+  </td>
+  <td class="px-6 py-4 whitespace-nowrap whitespace-pre-wrap">
+    <ValueRenderer :column="column" :row="row" />
+  </td>
+</template>
+
+<script setup>
+import ValueRenderer from '@/components/ValueRenderer.vue';
+
+defineProps(['column', 'row']);
+</script>

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

@@ -40,4 +40,5 @@ const router = createRouter({
   ]
 })
 
+
 export default router

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

@@ -11,12 +11,16 @@ export const useCoreStore = defineStore('core', () => {
   const resourceColumnsError = ref('');
   const resourceColumnsId = ref(null);
   const user = ref(null);
+  const flowBitIsInitialised = ref(false);
 
   async function fetchMenuAndResource() {
     const resp = await callAdminForthApi({
       path: '/get_base_config',
       method: 'GET',
     });
+    if(!resp){
+      return
+    }
     menu.value = resp.menu;
     resourceById.value = resp.resources.reduce((acc, resource) => {
       acc[resource.resourceId] = resource;
@@ -122,6 +126,7 @@ export const useCoreStore = defineStore('core', () => {
     resourceColumns, 
     fetchColumns, 
     resourceColumnsError,
+    flowBitIsInitialised,
     logout
   }
 })

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

@@ -448,10 +448,10 @@ fetchStatus.value.pending = false;
   allowedActions.value = data.options?.allowedActions;
   
 
-  setTimeout(() => {
-    initFlowbite();
-    console.log('initFlowbite');
-  });
+  // setTimeout(() => {
+  //   initFlowbite();
+  //   console.log('initFlowbite');
+  // });
 }
 
 
@@ -512,6 +512,7 @@ function addToCheckedValues(id) {
 }
 
 async function init() {
+  
   await coreStore.fetchColumns({
     resourceId: route.params.resourceId
   });
@@ -527,7 +528,13 @@ async function init() {
 }
 
 onMounted(async () => {
+  if (!coreStore.flowBitIsInitialised){
+     initFlowbite();
+     coreStore.flowBitIsInitialised = true;
+  }
+ 
   await init();
+
 });
 
 // on route param change 

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

@@ -44,18 +44,12 @@
             <tr v-for="column in coreStore.resourceColumns?.filter(c => c.showIn.includes('show'))" :key="column.name"
                 class="bg-form-view-bg odd:dark:bg-gray-900  even:dark:bg-gray-800 border-b  dark:border-gray-700"
             >
-                <td class="px-6 py-4 whitespace-nowrap">
-                    {{ column.label }}
-                </td>
-                <td class="px-6 py-4 whitespace-nowrap whitespace-pre-wrap">
-                    <component
-                        :is="showComponentsPerColumn[column.name] || ValueRenderer"
-                        :column="column"
-                        :row="coreStore.record"
-                    />
-                </td>
+              <component
+                  :is="showComponentsPerColumn[column.name] || ShowTableItem"
+                  :column="column"
+                  :row="coreStore.record"
+              />
             </tr>
-            
         </tbody>
     </table>
 </div>
@@ -68,6 +62,8 @@
 <script setup>
 
 import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
+import ShowTableItem from '@/components/ShowTableItem.vue';
+
 import ValueRenderer from '@/components/ValueRenderer.vue';
 import { useCoreStore } from '@/stores/core';
 import { getCustomComponent } from '@/utils';

package/index.ts

@@ -43,7 +43,6 @@ class AdminForth {
   connectorClasses: any;
   runningHotReload?: boolean;
 
-
   statuses: {
     dbDiscover?: 'running' | 'done',
   }
@@ -51,6 +50,7 @@ class AdminForth {
 
   constructor(config: AdminForthConfig) {
     this.config = {...this.#defaultConfig,...config};
+    this.codeInjector = new CodeInjector(this);
     
     this.validateConfig();
     this.activatePlugins();
@@ -58,7 +58,6 @@ class AdminForth {
 
     this.express = new ExpressServer(this);
     this.auth = new Auth();
-    this.codeInjector = new CodeInjector(this);
     this.connectors = {};
     this.statuses = {};
     console.log(`🚀 AdminForth v${ADMINFORTH_VERSION} starting up`)
@@ -309,7 +308,11 @@ class AdminForth {
       for (const column of resource.columns) {
           if (column.component) {
             for (const [key, value] of Object.entries(column.component)) {
-                // console.log(`${key}: ${value}`);
+                if (this.codeInjector.allComponentNames[value]) {
+                  // not obvious, but if we are in this if, it means that this is plugin component
+                  // and there is no sense to check if it exists in users folder
+                  continue;
+                }
                 const path = value.replace('@@', this.config.customization.customComponentsDir);
                 if (!fs.existsSync(path)) {
                     throw new Error(`Component file ${path} does not exist`);

package/modules/codeInjector.ts

@@ -30,6 +30,8 @@ function hashify(obj) {
 class CodeInjector {
 
   adminforth: AdminForth;
+  allComponentNames: { [key: string]: string } = {};
+  srcFoldersToSync: { [key: string]: string } = {};
 
   static SPA_TMP_PATH = path.join(TMP_DIR, 'adminforth', 'spa_tmp');
 
@@ -139,12 +141,23 @@ class CodeInjector {
 
       // copy whole custom directory
       if (this.adminforth.config.customization?.customComponentsDir) {
-        await fsExtra.copy(this.adminforth.config.customization.customComponentsDir, path.join(CodeInjector.SPA_TMP_PATH, 'src', 'custom'), {
+        this.srcFoldersToSync[this.adminforth.config.customization.customComponentsDir] = './'
+      }
+
+      for (const [src, dest] of Object.entries(this.srcFoldersToSync)) {
+        const to = path.join(CodeInjector.SPA_TMP_PATH, 'src', 'custom', dest);
+        if (process.env.HEAVY_DEBUG) {
+          console.log(`🪲 await fsExtra.copy from ${src}, ${to}`);
+        }
+
+        await fsExtra.copy(src, to, {
           recursive: true,
         });
       }
     }
 
+
+
     //collect all 'icon' fields from resources bulkActions
     this.adminforth.config.resources.forEach((resource) => {
       if (resource.options?.bulkActions) {
@@ -189,12 +202,15 @@ class CodeInjector {
       });
     });
 
-    let customComponentsImports = '';
     customResourceComponents.forEach((filePath) => {
       const componentName = getComponentNameFromPath(filePath);
-      customComponentsImports += `import ${componentName} from '${filePath}';\n`;
+      this.allComponentNames[filePath] = componentName;
     });
-
+    
+    let customComponentsImports = '';
+    for (const [targetPath, component] of Object.entries(this.allComponentNames)) {
+      customComponentsImports += `import ${component} from '${targetPath}';\n`;
+    }
 
 
     // Generate Vue.component statements for each icon
@@ -208,11 +224,9 @@ class CodeInjector {
 
     // Generate Vue.component statements for each custom component
     let customComponentsComponents = '';
-    customResourceComponents.forEach((filePath) => {
-      const componentName = getComponentNameFromPath(filePath);
-      customComponentsComponents += `app.component('${componentName}', ${componentName});\n`;
-    })
-    
+    for (const name of Object.values(this.allComponentNames)) {
+      customComponentsComponents += `app.component('${name}', ${name});\n`;
+    }
 
     let imports = iconImports + '\n';
     imports += customComponentsImports + '\n';

package/modules/utils.ts

@@ -15,14 +15,18 @@ export function guessLabelFromName(name) {
 }
 
 
-const __filename = fileURLToPath(import.meta.url);
-let __dirname = path.join(path.dirname(__filename), '..');
-if (__dirname.endsWith('dist')) {
-  // in prod build we are in dist also
-  __dirname = path.join(__dirname, '..');
+export const currentFileDir = (metaUrl) => {
+  const __filename = fileURLToPath(metaUrl);
+  let __dirname = path.dirname(__filename);
+  console.log('currentFileDir', __dirname);
+  if (__dirname.endsWith('dist')) {
+    // in prod build we are in dist also
+    __dirname = path.join(__dirname, '..');
+  }
+  return __dirname;
 }
 
-export const ADMIN_FORTH_ABSOLUTE_PATH = __dirname;
+export const ADMIN_FORTH_ABSOLUTE_PATH = path.join(currentFileDir(import.meta.url), '..');
 
 const package_json = JSON.parse(fs.readFileSync(path.join(ADMIN_FORTH_ABSOLUTE_PATH, 'package.json'), 'utf8'));
 

package/package.json

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

package/plugins/ForeignInlineListPlugin/custom/InlineList.vue

@@ -0,0 +1,5 @@
+<template>
+  <td colspan="2">
+    text
+  </td>
+</template>

package/plugins/ForeignInlineListPlugin/index.ts

@@ -11,9 +11,10 @@ export default class ForeignInlineListPlugin extends AdminForthPlugin {
   options: PluginOptions;
 
   constructor(options: PluginOptions) {
-    super(options);
+    super(options, import.meta.url);
+
     this.options = options;
-    console.log('ForeignInlineListPlugin', this);
+
   }
 
   modifyResourceConfig(adminforth: AdminForth, resourceConfig: AdminForthResource) {
@@ -30,6 +31,9 @@ export default class ForeignInlineListPlugin extends AdminForthPlugin {
       label: 'Foreign Inline List',
       virtual: true,
       showIn: ['show'],
+      component: {
+        show: this.componentPath('InlineList.vue'),
+      },
     });
   }
 }

package/plugins/base.ts

@@ -1,16 +1,44 @@
 import { AdminForthResource } from '../types/AdminForthConfig.js';
 import AdminForth from '../index.js';
+import { getComponentNameFromPath } from '../modules/utils.js';
+import { currentFileDir } from '../modules/utils.js';
+import path from 'path';
+import fs from 'fs';
 
 export default class AdminForthPlugin {
 
   adminforth: AdminForth;
+  pluginDir: string;
+  customFolderName: string = 'custom';
 
-  constructor(pluginOptions: any) {
+  constructor(pluginOptions: any, metaUrl: string) {
     // set up plugin here
+    this.pluginDir = currentFileDir(metaUrl);
   }
 
   modifyResourceConfig(adminforth: AdminForth, resourceConfig: AdminForthResource) {
     this.adminforth = adminforth;
   }
 
+  componentPath(componentFile: string) {
+    const key = `@@/plugins/${this.constructor.name}/${componentFile}`;
+    const componentName = getComponentNameFromPath(key);
+
+    const absSrcFolder = path.join(this.pluginDir, this.customFolderName);
+
+    if (!this.adminforth.codeInjector.srcFoldersToSync[absSrcFolder]) {
+      this.adminforth.codeInjector.srcFoldersToSync[absSrcFolder] = `./plugins/${this.constructor.name}/`;
+    }
+    
+    if (!this.adminforth.codeInjector.allComponentNames[key]) {
+      const absSrcPath = path.join(absSrcFolder, componentFile);
+      if (!fs.existsSync(absSrcPath)) {
+        throw new Error(`Plugin "${this.constructor.name}" tried to use file as component which does not exist at "${absSrcPath}"`);
+      }
+      this.adminforth.codeInjector.allComponentNames[key] = componentName;
+    }
+
+    return key;
+  }
+
 }

package/spa/src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <nav 
-    v-if="loggedIn"
-    class="fixed h-14 top-0 z-40 w-full  border-b shadow-sm bg-header-bg shadow-header-shadow dark:bg-header-bg-hover dark:border-nav-menu-devider">
+    v-if="loggedIn && routerIsReady && loginRedirectCheckIsReady"
+    class="fixed h-14 top-0 z-20 w-full  border-b shadow-sm bg-header-bg shadow-header-shadow dark:bg-header-bg-hover dark:border-nav-menu-devider">
     <div class="px-3 py-3 lg:px-5 lg:pl-3">
       <div class="flex items-center justify-between">
         <div class="flex items-center justify-start rtl:justify-end">
@@ -56,7 +56,7 @@
 
   <aside 
 
-    v-if="loggedIn"
+    v-if="loggedIn && routerIsReady && loginRedirectCheckIsReady"
 
     id="logo-sidebar" class="fixed border-none top-0 left-0 z-40 w-64 h-screen  transition-transform -translate-x-full bg-nav-menu-bg border-r border-  sm:translate-x-0 dark:bg-gray-800 dark:border-gray-700" aria-label="Sidebar">
     <div class="h-full px-3 pb-4 overflow-y-auto bg-nav-menu-bg dark:bg-gray-800">
@@ -102,16 +102,22 @@
     </div>
   </aside>
     
-  <div class="p-4 sm:ml-64 dark:bg-gray-800" v-if="loggedIn">
+  <div class="p-4 sm:ml-64 dark:bg-gray-800" v-if="loggedIn && routerIsReady && loginRedirectCheckIsReady">
     <div class="p-0 dark:border-gray-700 mt-14">
         <RouterView/>     
     </div>
   </div> 
 
-  <div v-else-if="routerIsReady">
+  <div v-else-if="routerIsReady && loginRedirectCheckIsReady">
     <RouterView/>
   </div>
+  <div v-else class="flex items-center justify-center h-screen">
+    <div class="text-3xl text-gray-400 animate-bounce">
+      ▶️
+    </div>
+  </div>
   <AcceptModal />
+
 </template>
 
 <style scoped>
@@ -149,8 +155,9 @@ const opened = ref<string[]>([]);
 
 
 const routerIsReady = ref(false);
+const loginRedirectCheckIsReady = ref(false);
 
-const loggedIn = computed(() => route.name !== 'login' && routerIsReady.value);
+const loggedIn = computed(() => route.name !== 'login');
 
 const theme = ref('light');
 
@@ -186,6 +193,7 @@ onMounted(async () => {
   initRouter();
   initFlowbite();
   await coreStore.fetchMenuAndResource();
+  loginRedirectCheckIsReady.value = true;
   title.value = coreStore.config.title || 'Admin Forth';
   useHead({
   title: title.value,

package/spa/src/components/Filters.vue

@@ -2,11 +2,11 @@
   <!-- drawer component -->
   <div id="drawer-navigation" 
   
-      class="fixed top-14 right-0 z-50 p-4 overflow-y-auto transition-transform translate-x-full bg-white w-80 dark:bg-gray-800 shadow-xl dark:shadow-black"
+      class="fixed  right-0 z-50 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"
-      :style="{ height: `calc(100vh - 3.5rem)` }"
+      :style="{ height: `calc(100vh ` }"
   >
     <h5 id="drawer-navigation-label" class="text-base font-semibold text-gray-500 uppercase dark:text-gray-400">
       Filters
@@ -92,7 +92,7 @@
    </div>
   </div>
 
-  <div v-if="show" drawer-backdrop="" class="bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-30"
+  <div v-if="show"  class="bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0  z-30"
     @click="$emit('hide')">
   </div>
 </template>

package/spa/src/components/ShowTableItem.vue

@@ -0,0 +1,14 @@
+<template>
+  <td class="px-6 py-4 whitespace-nowrap">
+      {{ column.label }}
+  </td>
+  <td class="px-6 py-4 whitespace-nowrap whitespace-pre-wrap">
+    <ValueRenderer :column="column" :row="row" />
+  </td>
+</template>
+
+<script setup>
+import ValueRenderer from '@/components/ValueRenderer.vue';
+
+defineProps(['column', 'row']);
+</script>

package/spa/src/router/index.ts

@@ -40,4 +40,5 @@ const router = createRouter({
   ]
 })
 
+
 export default router

package/spa/src/stores/core.ts

@@ -11,12 +11,16 @@ export const useCoreStore = defineStore('core', () => {
   const resourceColumnsError = ref('');
   const resourceColumnsId = ref(null);
   const user = ref(null);
+  const flowBitIsInitialised = ref(false);
 
   async function fetchMenuAndResource() {
     const resp = await callAdminForthApi({
       path: '/get_base_config',
       method: 'GET',
     });
+    if(!resp){
+      return
+    }
     menu.value = resp.menu;
     resourceById.value = resp.resources.reduce((acc, resource) => {
       acc[resource.resourceId] = resource;
@@ -122,6 +126,7 @@ export const useCoreStore = defineStore('core', () => {
     resourceColumns, 
     fetchColumns, 
     resourceColumnsError,
+    flowBitIsInitialised,
     logout
   }
 })

package/spa/src/views/ListView.vue

@@ -448,10 +448,10 @@ fetchStatus.value.pending = false;
   allowedActions.value = data.options?.allowedActions;
   
 
-  setTimeout(() => {
-    initFlowbite();
-    console.log('initFlowbite');
-  });
+  // setTimeout(() => {
+  //   initFlowbite();
+  //   console.log('initFlowbite');
+  // });
 }
 
 
@@ -512,6 +512,7 @@ function addToCheckedValues(id) {
 }
 
 async function init() {
+  
   await coreStore.fetchColumns({
     resourceId: route.params.resourceId
   });
@@ -527,7 +528,13 @@ async function init() {
 }
 
 onMounted(async () => {
+  if (!coreStore.flowBitIsInitialised){
+     initFlowbite();
+     coreStore.flowBitIsInitialised = true;
+  }
+ 
   await init();
+
 });
 
 // on route param change 

package/spa/src/views/ShowView.vue

@@ -44,18 +44,12 @@
             <tr v-for="column in coreStore.resourceColumns?.filter(c => c.showIn.includes('show'))" :key="column.name"
                 class="bg-form-view-bg odd:dark:bg-gray-900  even:dark:bg-gray-800 border-b  dark:border-gray-700"
             >
-                <td class="px-6 py-4 whitespace-nowrap">
-                    {{ column.label }}
-                </td>
-                <td class="px-6 py-4 whitespace-nowrap whitespace-pre-wrap">
-                    <component
-                        :is="showComponentsPerColumn[column.name] || ValueRenderer"
-                        :column="column"
-                        :row="coreStore.record"
-                    />
-                </td>
+              <component
+                  :is="showComponentsPerColumn[column.name] || ShowTableItem"
+                  :column="column"
+                  :row="coreStore.record"
+              />
             </tr>
-            
         </tbody>
     </table>
 </div>
@@ -68,6 +62,8 @@
 <script setup>
 
 import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
+import ShowTableItem from '@/components/ShowTableItem.vue';
+
 import ValueRenderer from '@/components/ValueRenderer.vue';
 import { useCoreStore } from '@/stores/core';
 import { getCustomComponent } from '@/utils';