adminforth 1.1.52 → 1.1.53

package/dist/modules/styles.js

@@ -32,7 +32,7 @@ export const styles = () => ({
         lightListBorder: "#DDDDDD", // list view  rows border
         lightForm: "#FFFFFF", // show view background
         lightFormBorder: "#F5F5F5", // show view rows border
-        lightFormHeading: "#EDEDED", // show view heading
+        lightFormHeading: "rgb(249 250 251)", // show view heading
         // colors for dark theme
         darkHtml: "#111827",
         darkNavbar: "#111827",
@@ -67,7 +67,7 @@ export const styles = () => ({
         darkListBorder: "#444444",
         darkForm: "#111111",
         darkFormBorder: "#222222",
-        darkFormHeading: "#333333"
+        darkFormHeading: "#334155"
     },
     boxShadow: {
         customLight: "0 4px 8px rgba(0, 0, 0, 0.1)", // Lighter shadow

package/dist/plugins/AccessControl/index.js

@@ -0,0 +1,66 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { AllowedActionsEnum } from "../../types/AdminForthConfig.js";
+import AdminForthPlugin from "../base.js";
+class AccessControlPlugin extends AdminForthPlugin {
+    constructor(options) {
+        super(options, import.meta.url);
+        this.options = options;
+    }
+    modifyResourceConfig(adminforth, resourceConfig) {
+        super.modifyResourceConfig(adminforth, resourceConfig);
+        this.adminforth = adminforth;
+        if (!resourceConfig.hooks) {
+            resourceConfig.hooks = {};
+        }
+        const checkAccess = (adminUser, action, meta) => __awaiter(this, void 0, void 0, function* () {
+            const hasAccessOrError = yield this.options.hasAccess(adminUser, action, meta);
+            if (hasAccessOrError === true) {
+                return { ok: true };
+            }
+            else {
+                return { ok: false, error: hasAccessOrError || AccessControlPlugin.defaultError };
+            }
+        });
+        const bindHookCheck = (action, hookName) => {
+            if (!resourceConfig.hooks[action]) {
+                resourceConfig.hooks[action] = {};
+            }
+            if (!resourceConfig.hooks[action][hookName]) {
+                resourceConfig.hooks[action][hookName] = [];
+            }
+            if (hookName === 'beforeDatasourceRequest') {
+                resourceConfig.hooks[action][hookName].unshift((_a) => __awaiter(this, [_a], void 0, function* ({ adminUser, query }) {
+                    return checkAccess(adminUser, action, { query });
+                }));
+            }
+            else {
+                resourceConfig.hooks[action][hookName].unshift((_b) => __awaiter(this, [_b], void 0, function* ({ adminUser, record }) {
+                    return checkAccess(adminUser, action, { record });
+                }));
+            }
+        };
+        // List check
+        bindHookCheck(AllowedActionsEnum.list, 'beforeDatasourceRequest');
+        // Show check
+        bindHookCheck(AllowedActionsEnum.show, 'beforeDatasourceRequest');
+        // Edit check
+        bindHookCheck(AllowedActionsEnum.edit, 'beforeDatasourceRequest');
+        // create check
+        bindHookCheck(AllowedActionsEnum.create, 'beforeSave');
+        // edit check
+        bindHookCheck(AllowedActionsEnum.edit, 'beforeSave');
+        // delete check
+        bindHookCheck(AllowedActionsEnum.delete, 'beforeSave');
+        console.log('resourceConfig', resourceConfig);
+    }
+}
+AccessControlPlugin.defaultError = 'Sorry, you do not have access to this resource.';
+export default AccessControlPlugin;

package/dist/plugins/AccessControl/types.js

@@ -0,0 +1 @@
+export {};

package/dist/spa/index.html

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

package/dist/spa/package-lock.json

@@ -9,12 +9,17 @@
       "version": "0.0.0",
       "dependencies": {
         "@iconify-prerendered/vue-flowbite": "^0.23.1714023977",
+        "@unhead/vue": "^1.9.12",
+        "@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",
+        "unhead": "^1.9.12",
         "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 +955,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",
@@ -1141,6 +1151,58 @@
       "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
       "dev": true
     },
+    "node_modules/@unhead/dom": {
+      "version": "1.9.12",
+      "resolved": "https://registry.npmjs.org/@unhead/dom/-/dom-1.9.12.tgz",
+      "integrity": "sha512-3MY1TbZmEjGNZapi3wvJW0vWNS2CLKHt7/m57sScDHCNvNBe1mTwrIOhtZFDgAndhml2EVQ68RMa0Vhum/M+cw==",
+      "dependencies": {
+        "@unhead/schema": "1.9.12",
+        "@unhead/shared": "1.9.12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      }
+    },
+    "node_modules/@unhead/schema": {
+      "version": "1.9.12",
+      "resolved": "https://registry.npmjs.org/@unhead/schema/-/schema-1.9.12.tgz",
+      "integrity": "sha512-ue2FKyIZKsuZDpWJBMlBGwMm4s+vFeU3NUWsNt8Z+2JkOUIqO/VG43LxNgY1M595bOS71Gdxk+G9VtzfKJ5uEA==",
+      "dependencies": {
+        "hookable": "^5.5.3",
+        "zhead": "^2.2.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      }
+    },
+    "node_modules/@unhead/shared": {
+      "version": "1.9.12",
+      "resolved": "https://registry.npmjs.org/@unhead/shared/-/shared-1.9.12.tgz",
+      "integrity": "sha512-72wlLXG3FP3sXUrwd42Uv8jYpHSg4R6IFJcsl+QisRjKM89JnjOFSw1DqWO4IOftW5xOxS4J5v7SQyJ4NJo7Bw==",
+      "dependencies": {
+        "@unhead/schema": "1.9.12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      }
+    },
+    "node_modules/@unhead/vue": {
+      "version": "1.9.12",
+      "resolved": "https://registry.npmjs.org/@unhead/vue/-/vue-1.9.12.tgz",
+      "integrity": "sha512-keE4EuswgzCqVU7zmZprU+ToMvNWc3s8NoLreH5AtJd2u0FgBygD8sxRVyEnZw1KwFYOJ2C7yD2TChSKZioPGQ==",
+      "dependencies": {
+        "@unhead/schema": "1.9.12",
+        "@unhead/shared": "1.9.12",
+        "hookable": "^5.5.3",
+        "unhead": "1.9.12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      },
+      "peerDependencies": {
+        "vue": ">=2.7 || >=3"
+      }
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.0.4.tgz",
@@ -1330,6 +1392,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 +1861,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",
@@ -2369,6 +2525,11 @@
         "he": "bin/he"
       }
     },
+    "node_modules/hookable": {
+      "version": "5.5.3",
+      "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
+      "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ=="
+    },
     "node_modules/ignore": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
@@ -3812,6 +3973,20 @@
       "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
       "dev": true
     },
+    "node_modules/unhead": {
+      "version": "1.9.12",
+      "resolved": "https://registry.npmjs.org/unhead/-/unhead-1.9.12.tgz",
+      "integrity": "sha512-s6VxcTV45hy8c/IioKQOonFnAO+kBOSpgDfqEHhnU0YVSQYaRPEp9pzW1qSPf0lx+bg9RKeOQyNNbSGGUP26aQ==",
+      "dependencies": {
+        "@unhead/dom": "1.9.12",
+        "@unhead/schema": "1.9.12",
+        "@unhead/shared": "1.9.12",
+        "hookable": "^5.5.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.0.16",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.16.tgz",
@@ -3970,6 +4145,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",
@@ -4153,6 +4333,14 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zhead": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/zhead/-/zhead-2.2.4.tgz",
+      "integrity": "sha512-8F0OI5dpWIA5IGG5NHUg9staDwz/ZPxZtvGVf01j7vHqSyZ0raHY+78atOVxRqb73AotX22uV1pXt3gYSstGag==",
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      }
     }
   }
 }

package/dist/spa/package.json

@@ -13,12 +13,17 @@
   },
   "dependencies": {
     "@iconify-prerendered/vue-flowbite": "^0.23.1714023977",
+    "@unhead/vue": "^1.9.12",
+    "@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",
+    "unhead": "^1.9.12",
     "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/components/ResourceListTable.vue

@@ -300,15 +300,18 @@ function addToCheckedValues(id) {
 const columnsListed = computed(() => props.resource?.columns?.filter(c => c.showIn.includes('list')));
 
 async function selectAll(value) {
-  props.rows.forEach((r) => {
-    if (!checkboxesInternal.value.includes(r.id)) {
-      checkboxesInternal.value.push(r.id)
-    } else {
-      checkboxesInternal.value = checkboxesInternal.value.filter((item) => item !== r.id)
-    }
-  });
-  checkboxesInternal.value = [ ...checkboxesInternal.value ]
-  // checkboxes.value = rows.value.map((v) => v.id);
+  if (!allFromThisPageChecked.value) {
+    props.rows.forEach((r) => {
+      if (!checkboxesInternal.value.includes(r.id)) {
+        checkboxesInternal.value.push(r.id)
+      } 
+    });
+  }
+  else {
+    props.rows.forEach((r) => {
+      checkboxesInternal.value = checkboxesInternal.value.filter((item) => item !== r.id);
+    });
+  }
 }
 
 const totalPages = computed(() => Math.ceil(props.totalRows / props.pageSize));

package/dist/spa/src/App.vue

@@ -1,88 +1,84 @@
 <template>
   <nav 
     v-if="loggedIn"
-
-    class="fixed h-14 top-0 z-50 w-full bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
+    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">
     <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">
-          <button data-drawer-target="logo-sidebar" data-drawer-toggle="logo-sidebar" aria-controls="logo-sidebar" type="button" class="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg sm:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600">
+          <button data-drawer-target="logo-sidebar" data-drawer-toggle="logo-sidebar" aria-controls="logo-sidebar" type="button" class="inline-flex items-center p-2 text-sm  rounded-lg sm:hidden hover:bg-nav-menu-bg-hover focus:outline-none focus:ring-2 focus:ring-nav-menu-devider dark:text-nav-menu-icons dark:hover:bg-nav-menu-bg-hover dark:focus:ring-nav-menu-devider">
               <span class="sr-only">Open sidebar</span>
               <svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                 <path clip-rule="evenodd" fill-rule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"></path>
               </svg>
           </button>
-          <div  class="flex ms-2 md:me-24">
-            <img src="https://flowbite.com/docs/images/logo.svg" class="h-8 me-3" alt="FlowBite Logo" />
-            <span class="self-center text-xl font-semibold sm:text-2xl whitespace-nowrap dark:text-white">
-              {{ coreStore.config?.brandName }}
-            </span>
-          </div>
+          
         </div>
         <div class="flex items-center">
-          
-
-            <div class="flex items-center ms-3">
-              <div>
-                <button type="button" class="flex text-sm bg-gray-100 rounded-full focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600 dark:bg-gray-700" aria-expanded="false" data-dropdown-toggle="dropdown-user">
-                  <span class="sr-only">Open user menu</span>
-                  <svg class="w-8 h-8 text-gray-400 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
-                    <path fill-rule="evenodd" d="M12 20a7.966 7.966 0 0 1-5.002-1.756l.002.001v-.683c0-1.794 1.492-3.25 3.333-3.25h3.334c1.84 0 3.333 1.456 3.333 3.25v.683A7.966 7.966 0 0 1 12 20ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10c0 5.5-4.44 9.963-9.932 10h-.138C6.438 21.962 2 17.5 2 12Zm10-5c-1.84 0-3.333 1.455-3.333 3.25S10.159 13.5 12 13.5c1.84 0 3.333-1.455 3.333-3.25S13.841 7 12 7Z" clip-rule="evenodd"/>
-                  </svg>
-
-                </button>
+          <div class="flex items-center ms-3 ">
+            <div>
+              <button type="button" class="flex text-sm bg-header-bg-hover rounded-full focus:ring-4 focus:ring-nav-menu-devider dark:focus:ring-nav-menu-devider dark:bg-header-bg-hover" aria-expanded="false" data-dropdown-toggle="dropdown-user">
+                <span class="sr-only">Open user menu</span>
+                <svg class="w-8 h-8 text-nav-menu-icons dark:text-header-icons" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+                  <path fill-rule="evenodd" d="M12 20a7.966 7.966 0 0 1-5.002-1.756l.002.001v-.683c0-1.794 1.492-3.25 3.333-3.25h3.334c1.84 0 3.333 1.456 3.333 3.25v.683A7.966 7.966 0 0 1 12 20ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10c0 5.5-4.44 9.963-9.932 10h-.138C6.438 21.962 2 17.5 2 12Zm10-5c-1.84 0-3.333 1.455-3.333 3.25S10.159 13.5 12 13.5c1.84 0 3.333-1.455 3.333-3.25S13.841 7 12 7Z" clip-rule="evenodd"/>
+                </svg>
+              </button>
+            </div>
+            <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-nav-menu-bg dark:divide-nav-menu-devider dark:shadow-black" id="dropdown-user">
+              <div class="px-4 py-3" role="none">
+                <p class="text-sm text-gray-900 dark:text-header-text" role="none" v-if="coreStore.userFullname">
+                  {{ coreStore.userFullname }}
+                </p>
+                <p class="text-sm font-medium text-gray-900 truncate dark:text-nav-menu-text" role="none">
+                  {{ coreStore.username }}
+                </p>
               </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="px-4 py-3" role="none">
-                  <p class="text-sm text-gray-900 dark:text-white" role="none" v-if="coreStore.userFullname">
-                    {{ coreStore.userFullname }}
-                  </p>
-                  <p class="text-sm font-medium text-gray-900 truncate dark:text-gray-300" role="none">
-                    {{ coreStore.username }}
-                  </p>
-                </div>
-                <ul class="py-1" role="none">
-                  <li>
-                    <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white" role="menuitem">Dashboard</a>
-                  </li>
-                  <li >
-                    <span @click="toggleTheme" class=" cursor-pointer flex items-center	 gap-1 block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white" role="menuitem">
-                      {{ theme === 'dark' ? 'Light' : 'Dark' }}
-                      <IconMoonSolid class="w-5 h-5 text-blue-300
-                      " v-if="theme !== 'dark'"/>
-                      <IconSunSolid class="w-5 h-5 text-yellow-300
-                      " v-else/>
-                      mode
-                    </span>
-                  </li>
-                  
-                  <li>
-                    <button @click="logout" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white" role="menuitem">Sign out</button>
+              <ul class="py-1" role="none">
+                <li>
+                  <span @click="toggleTheme" class="cursor-pointer flex items-center gap-1 block px-4 py-2 text-sm text-black hover:bg-html-bg dark:text-nav-menu-text-hover dark:hover:bg-nav-menu-hover dark:hover:text-nav-menu-text-active" role="menuitem">
+                    {{ theme === 'dark' ? 'Light' : 'Dark' }}
+                    <IconMoonSolid class="w-5 h-5 text-blue-300" v-if="theme !== 'dark'" />
+                    <IconSunSolid class="w-5 h-5 text-yellow-300" v-else />
+                    mode
+                  </span>
                 </li>
-                </ul>
-              </div>
+                <li>
+                  <button @click="logout" class="cursor-pointer flex items-center gap-1 block px-4 py-2 text-sm text-black hover:bg-html-bg dark:text-nav-menu-text-hover dark:hover:bg-nav-menu-hover dark:hover:text-nav-menu-text-active w-full" role="menuitem">Sign out</button>
+                </li>
+              </ul>
             </div>
           </div>
+        </div>
       </div>
     </div>
-  </nav>
+</nav>
+
+
 
   <aside 
     v-if="loggedIn"
 
-    id="logo-sidebar" class="fixed top-0 left-0 z-10 w-64 h-screen pt-20 transition-transform -translate-x-full bg-white border-r border-gray-200 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-white dark:bg-gray-800">
+    id="logo-sidebar" class="fixed border-none top-0 left-0 z-50 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">
+      <div class="flex ms-2 md:me-24  m-4  ">
+            <img src="https://flowbite.com/docs/images/logo.svg" class="h-8 me-3" alt="FlowBite Logo" />
+            <span class="self-center text-header-text-size font-semibold sm:text-header-text-size whitespace-nowrap dark:text-header-text text-header-logo-color">
+              {{ coreStore.config?.brandName }}
+            </span>
+          </div>
         <ul class="space-y-2 font-medium">
           <template v-for="(item, i) in coreStore.menu" :key="`menu-${i}`">
-            <div v-if="item.type === 'divider'" class="border-t border-gray-200 dark:border-gray-700"></div>
+            <div v-if="item.type === 'divider'" class="border-t border-nav-menu-devider dark:border-gray-700"></div>
             <div v-else-if="item.type === 'gap'" class="flex items-center justify-center h-8"></div>
+            <div v-else-if="item.type === 'heading'" class="flex items-center justify-left pl-2 h-8 text-gray-400 dark:text-gray-400
+            ">{{ item.label }}</div>
+
             
             <li v-else-if="item.children">
-              <button  type="button" class="flex items-center w-full p-2 text-base text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700" 
+              <button  type="button" class="flex items-center w-full p-2 text-base text-nav-menu-text rounded-default transition duration-75  group hover:bg-nav-menu-bg-hover dark:text-white dark:hover:bg-gray-700" 
                   :aria-controls="`dropdown-example${i}`"
                   :data-collapse-toggle="`dropdown-example${i}`"
               >
-                <component v-if="item.icon" :is="getIcon(item.icon)" class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" ></component>
+                <component v-if="item.icon" :is="getIcon(item.icon)" class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400  dark:group-hover:text-white" ></component>
 
                 <span class="flex-1 ms-3 text-left rtl:text-right whitespace-nowrap">{{ item.label }}</span>
                 <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
@@ -90,7 +86,7 @@
                 </svg>
               </button>
 
-              <ul :id="`dropdown-example${i}`" role="none" class="py-2 space-y-2" :class="{ 'hidden': !item.open }">
+              <ul :id="`dropdown-example${i}`" role="none" class="pt-1 space-y-1" :class="{ 'hidden': !item.open }">
                 <template v-for="(child, j) in item.children" :key="`menu-${i}-${j}`">
                   <li>
                     <MenuLink :item="child" isChild="true" />
@@ -112,7 +108,7 @@
     </div>
   </div> 
 
-  <div v-else>
+  <div v-else-if="routerIsReady">
     <RouterView/>
   </div>
   <AcceptModal />
@@ -132,10 +128,23 @@ import AcceptModal from './components/AcceptModal.vue';
 import MenuLink from './components/MenuLink.vue';
 import { useRoute, useRouter } from 'vue-router';
 import { getIcon } from '@/utils';
+import { useHead } from 'unhead'
+import { createHead } from 'unhead'
+// import { link } from 'fs';
+const coreStore = useCoreStore();
+
+
+createHead()
+
+
+
+
 
 
 const route = useRoute();
 const router = useRouter();
+const title = ref('');
+
 
 const routerIsReady = ref(false);
 
@@ -153,7 +162,6 @@ async function logout() {
   router.push({ name: 'login' });
 }
 
-const coreStore = useCoreStore();
 
 
 
@@ -167,6 +175,17 @@ onMounted(async () => {
   initRouter();
   initFlowbite();
   await coreStore.fetchMenuAndResource();
+  title.value = coreStore.config.title || 'Admin Forth';
+  useHead({
+  title: title.value,
+  link: [
+    {
+      rel: 'icon',
+      href: coreStore.config.favicon || '/favicon.ico',
+    },
+  ],
+  
+})
 })
 
 </script>

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