adminforth 1.3.54-next.9 → 1.3.55-next.2

package/dist/spa/package-lock.json

@@ -34,13 +34,16 @@
         "autoprefixer": "^10.4.19",
         "eslint": "^8.57.0",
         "eslint-plugin-vue": "^9.23.0",
+        "flag-icons": "^7.2.3",
+        "i18n-iso-countries": "^7.12.0",
         "npm-run-all2": "^6.1.2",
         "postcss": "^8.4.38",
         "sass": "^1.77.2",
         "tailwindcss": "^3.4.3",
         "typescript": "~5.4.0",
         "vite": "^5.2.13",
-        "vue-tsc": "^2.0.11"
+        "vue-tsc": "^2.0.11",
+        "vue3-json-viewer": "^2.2.2"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -1783,6 +1786,18 @@
         "node": ">= 6"
       }
     },
+    "node_modules/clipboard": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.11.tgz",
+      "integrity": "sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "good-listener": "^1.2.2",
+        "select": "^1.1.2",
+        "tiny-emitter": "^2.0.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -1906,6 +1921,20 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/diacritics": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/diacritics/-/diacritics-1.3.0.tgz",
+      "integrity": "sha512-wlwEkqcsaxvPJML+rDh/2iS824jbREk6DUMUKkEaSlxdYHeS43cClJtsWglvw2RfeXGm6ohKDqsXteJ5sP5enA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -2371,6 +2400,13 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/flag-icons": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/flag-icons/-/flag-icons-7.2.3.tgz",
+      "integrity": "sha512-X2gUdteNuqdNqob2KKTJTS+ZCvyWeLCtDz9Ty8uJP17Y4o82Y+U/Vd4JNrdwTAjagYsRznOn9DZ+E/Q52qbmqg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/flat-cache": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
@@ -2555,6 +2591,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/good-listener": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
+      "integrity": "sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "delegate": "^3.1.2"
+      }
+    },
     "node_modules/graphemer": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
@@ -2622,6 +2668,19 @@
         "entities": "^4.4.0"
       }
     },
+    "node_modules/i18n-iso-countries": {
+      "version": "7.12.0",
+      "resolved": "https://registry.npmjs.org/i18n-iso-countries/-/i18n-iso-countries-7.12.0.tgz",
+      "integrity": "sha512-NDFf5j/raA5JrcPT/NcHP3RUMH7TkdkxQKAKdvDlgb+MS296WJzzqvV0Y5uwavSm7A6oYvBeSV0AxoHdDiHIiw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "diacritics": "1.3.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
@@ -3713,6 +3772,13 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/select": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
+      "integrity": "sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/semver": {
       "version": "7.6.2",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz",
@@ -4018,6 +4084,13 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -4404,6 +4477,19 @@
         "typescript": "*"
       }
     },
+    "node_modules/vue3-json-viewer": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/vue3-json-viewer/-/vue3-json-viewer-2.2.2.tgz",
+      "integrity": "sha512-56l3XDGggnpwEqZieXsSMhNT4NhtO6d7zuSAxHo4i0UVxymyY2jRb7UMQOU1ztChKALZCAzX7DlgrsnEhxu77A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "clipboard": "^2.0.10"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

package/dist/spa/package.json

@@ -38,12 +38,15 @@
     "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
     "eslint-plugin-vue": "^9.23.0",
+    "flag-icons": "^7.2.3",
+    "i18n-iso-countries": "^7.12.0",
     "npm-run-all2": "^6.1.2",
     "postcss": "^8.4.38",
     "sass": "^1.77.2",
     "tailwindcss": "^3.4.3",
     "typescript": "~5.4.0",
     "vite": "^5.2.13",
-    "vue-tsc": "^2.0.11"
+    "vue-tsc": "^2.0.11",
+    "vue3-json-viewer": "^2.2.2"
   }
 }

package/dist/spa/src/App.vue

@@ -8,7 +8,7 @@
         <div class="flex items-center justify-between">
           <div class="flex items-center justify-start rtl:justify-end">
             <button @click="sideBarOpen = !sideBarOpen"
-            type="button" class="inline-flex items-center p-2 text-sm  rounded-lg sm:hidden hover:bg-lightSidebarItemHover focus:outline-none focus:ring-2 focus:ring-lightSidebarDevider dark:text-darkSidebarIcons dark:hover:bg-darkSidebarHover dark:focus:ring-lightSidebarDevider">
+              type="button" class="inline-flex items-center p-2 text-sm  rounded-lg sm:hidden hover:bg-lightSidebarItemHover focus:outline-none focus:ring-2 focus:ring-lightSidebarDevider dark:text-darkSidebarIcons dark:hover:bg-darkSidebarHover dark:focus:ring-lightSidebarDevider">
                 <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>
@@ -17,8 +17,25 @@
             
           </div>
           <div class="flex items-center">
+            
+            <component 
+              v-for="c in coreStore?.config?.globalInjections?.header || []"
+              :is="getCustomComponent(c)"
+              :meta="c.meta"
+              :adminUser="coreStore.adminUser"
+            />
+
             <div class="flex items-center ms-3 ">
+
+
+
+              <span               
+              @click="toggleTheme" class="cursor-pointer flex items-center gap-1 block px-4 py-2 text-sm text-black hover:bg-lightHtml dark:text-darkSidebarTextHover dark:hover:bg-darkHtml dark:hover:text-darkSidebarTextActive" role="menuitem">
+                <IconMoonSolid class="w-5 h-5 text-blue-300" v-if="theme !== 'dark'" />
+                <IconSunSolid class="w-5 h-5 text-yellow-300" v-else />
+              </span>
               <div>
+
                 <button type="button" class="flex text-sm bg- rounded-full focus:ring-4 focus:ring-lightSidebarDevider dark:focus:ring-darkSidebarDevider dark:bg-" aria-expanded="false" data-dropdown-toggle="dropdown-user">
                   <span class="sr-only">Open user menu</span>
                   <svg class="w-8 h-8 text-lightNavbarIcons dark:text-darkNavbarIcons" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
@@ -36,13 +53,13 @@
                   </p>
                 </div>
                 <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-lightHtml dark:text-darkSidebarTextHover dark:hover:bg-darkHtml dark:hover:text-darkSidebarTextActive" 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 v-for="c in coreStore?.config?.globalInjections?.userMenu || []" >
+                    <component 
+                      :is="getCustomComponent(c)"
+                      :meta="c.meta"
+                      :adminUser="coreStore.adminUser"
+                    />
                   </li>
                   <li>
                     <button @click="logout" class="cursor-pointer flex items-center gap-1 block px-4 py-2 text-sm text-black hover:bg-html dark:text-darkSidebarTextHover dark:hover:bg-darkSidebarItemHover dark:hover:text-darkSidebarTextActive w-full" role="menuitem">Sign out</button>
@@ -68,48 +85,95 @@
       <div class="h-full px-3 pb-4 overflow-y-auto bg-lightSidebar dark:bg-darkSidebar border-r border-lightSidebarBorder dark:border-darkSidebarBorder">
         <div class="flex ms-2 md:me-24  m-4  ">
           <img :src="loadFile(coreStore.config?.brandLogo || '@/assets/logo.svg')" :alt="`${ coreStore.config?.brandName } Logo`" class="h-8 me-3"  />
-          <span class="self-center text-lightNavbarText-size font-semibold sm:text-lightNavbarText-size whitespace-nowrap dark:text-darkSidebarText text-lightSidebarText">
+          <span 
+            v-if="coreStore.config?.showBrandNameInSidebar"
+            class="self-center text-lightNavbarText-size font-semibold sm:text-lightNavbarText-size whitespace-nowrap dark:text-darkSidebarText text-lightSidebarText"
+          >
             {{ 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-lightSidebarDevider dark:border-darkSidebarDevider"></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-lightSidebarHeading dark:text-darkSidebarHeading
-              ">{{ item.label }}</div>
-              <li v-else-if="item.children" class="  ">
-                <button @click="clickOnMenuItem(i)" type="button" class="flex items-center w-full p-2 text-base text-lightSidebarText rounded-default transition duration-75  group hover:bg-lightSidebarItemHover hover:text-lightSidebarTextHover dark:text-darkSidebarText dark:hover:bg-darkSidebarHover dark:hover:text-darkSidebarTextHover" 
-                    :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-lightSidebarIcons group-hover:text-lightSidebarIconsHover transition duration-75    dark:group-hover:text-darkSidebarIconsHover dark:text-darkSidebarIcons" ></component>
-
-                  <span class="flex-1 ms-3 text-left rtl:text-right whitespace-nowrap">{{ item.label }}</span>
-                  <svg :class="{'rotate-180':  opened.includes(i) }" class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"  fill="none" viewBox="0 0 10 6">
-                      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
-                  </svg>
-                </button>
+        <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-lightSidebarDevider dark:border-darkSidebarDevider"></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-lightSidebarHeading dark:text-darkSidebarHeading
+            ">{{ item.label }}</div>
+            <li v-else-if="item.children" class="  ">
+              <button @click="clickOnMenuItem(i)" type="button" class="flex items-center w-full p-2 text-base text-lightSidebarText rounded-default transition duration-75  group hover:bg-lightSidebarItemHover hover:text-lightSidebarTextHover dark:text-darkSidebarText dark:hover:bg-darkSidebarHover dark:hover:text-darkSidebarTextHover" 
+                  :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-lightSidebarIcons group-hover:text-lightSidebarIconsHover transition duration-75    dark:group-hover:text-darkSidebarIconsHover dark:text-darkSidebarIcons" ></component>
+
+                <span class="flex-1 ms-3 text-left rtl:text-right whitespace-nowrap">{{ item.label }}
+
+                <span v-if="item.badge" class="inline-flex items-center justify-center w-3 h-3 p-3 ms-3 text-sm font-medium rounded-full bg-lightAnnouncementBG dark:bg-darkAnnouncementBG 
+                    fill-lightAnnouncementText dark:fill-darkAccent text-lightAnnouncementText dark:text-darkAccent">{{ item.badge }}</span>
+                </span>
+
+                <svg :class="{'rotate-180':  opened.includes(i) }" class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"  fill="none" viewBox="0 0 10 6">
+                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
+                </svg>
+              </button>
 
-                <ul :id="`dropdown-example${i}`" role="none" class="pt-1 space-y-1" :class="{ 'hidden': !opened.includes(i) }">
-                  <template v-for="(child, j) in item.children" :key="`menu-${i}-${j}`">
-                    <li>
+              <ul :id="`dropdown-example${i}`" role="none" class="pt-1 space-y-1" :class="{ 'hidden': !opened.includes(i) }">
+                <template v-for="(child, j) in item.children" :key="`menu-${i}-${j}`">
+                  <li>
                       <MenuLink :item="child" isChild="true" />
                     </li>
-                  </template>
-                </ul> 
-              </li>
-              <li v-else>
-                <MenuLink :item="item" />
-              </li>
-            </template>
-          </ul>
+                </template>
+            </ul> 
+        </li>
+        <li v-else>
+              <MenuLink :item="item" />
+            </li>
+          </template>
+        </ul>
+
+
+        <div id="dropdown-cta" class="p-4 mt-6 rounded-lg bg-lightAnnouncementBG dark:bg-darkAnnouncementBG 
+          fill-lightAnnouncementText dark:fill-darkAccent text-lightAnnouncementText dark:text-darkAccent text-sm" role="alert"
+          v-if="ctaBadge"
+        >
+          <div class="flex items-center mb-3" :class="!ctaBadge.title ? 'float-right' : ''">
+            <!-- <span class="bg-lightPrimaryOpacity dark:bg-darkPrimaryOpacity  text-sm font-semibold me-2 px-2.5 py-0.5 rounded "
+              v-if="ctaBadge.title"
+            > -->
+            <span>
+              {{ctaBadge.title}}
+            </span>
+            <button type="button" 
+              class="ms-auto -mx-1.5 -my-1.5 bg-lightPrimaryOpacity dark:bg-darkPrimaryOpacity inline-flex justify-center items-center w-6 h-6  rounded-lg  p-1 hover:brightness-110" 
+              
+              data-dismiss-target="#dropdown-cta" aria-label="Close"
+              v-if="ctaBadge?.closable" @click="closeCTA"
+            >
+              <span class="sr-only">Close</span>
+              <svg class="w-2.5 h-2.5" aria-hidden="true" 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"/>
+              </svg>
+            </button>
+          </div>
+          <p class="mb-3 text-sm " v-if="ctaBadge.html" v-html="ctaBadge.html"></p>
+          <p class="mb-3 text-sm fill-lightNavbarText dark:fill-darkPrimary text-lightNavbarText dark:text-darkNavbarPrimary" v-else>
+            {{ ctaBadge.text }}  
+          </p>
+          <!-- <a class="text-sm text-lightPrimary underline font-medium hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300" href="#">Turn new navigation off</a> -->
+        </div>
+
+        <component 
+          v-for="c in coreStore?.config?.globalInjections?.sidebar || []"
+          :is="getCustomComponent(c)"
+          :meta="c.meta"
+          :adminUser="coreStore.adminUser"
+        />
       </div>
     </aside>
     
 
-    <div class="sm:ml-64" v-if="loggedIn && routerIsReady && loginRedirectCheckIsReady">
+    <div class="sm:ml-64 max-w-[100vw]" v-if="loggedIn && routerIsReady && loginRedirectCheckIsReady">
       <div class="p-0 dark:border-gray-700 mt-14">
         <RouterView/>     
       </div>
@@ -125,7 +189,7 @@
       </div>
     </div>
     <AcceptModal />
-    <div v-if="toastStore.toasts.length>0" class="fixed bottom-5 right-5 flex gap-1 flex-col-reverse">
+    <div v-if="toastStore.toasts.length>0" class="fixed bottom-5 right-5 flex gap-1 flex-col-reverse z-50">
       <transition-group
         name="fade"
         tag="div"
@@ -182,7 +246,7 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch, defineComponent, onBeforeMount } from 'vue';
 import { RouterLink, RouterView } from 'vue-router';
-import { initFlowbite } from 'flowbite'
+import { initFlowbite, Dropdown } from 'flowbite'
 import './index.scss'
 import { useCoreStore } from '@/stores/core';
 import { useUserStore } from '@/stores/user';
@@ -197,7 +261,9 @@ import { createHead } from 'unhead'
 import { loadFile } from '@/utils';
 import Toast from './components/Toast.vue';
 import {useToastStore} from '@/stores/toast';
-import { FrontendAPI } from '@/composables/useStores'
+import { FrontendAPI } from '@/composables/useStores';
+import { getCustomComponent } from '@/utils';
+
 // import { link } from 'fs';
 const coreStore = useCoreStore();
 const modalStore = useModalStore();
@@ -229,7 +295,7 @@ const theme = ref('light');
 function toggleTheme() {
   theme.value = theme.value === 'light' ? 'dark' : 'light';
   document.documentElement.classList.toggle('dark');
-  window.localStorage.setItem('theme', theme.value);
+  window.localStorage.setItem('af__theme', theme.value);
 
 }
 
@@ -257,7 +323,11 @@ async function initRouter() {
 }
 
 async function loadMenu() {
-  await coreStore.fetchMenuAndResource();
+  await initRouter();
+  if (!route.meta.customLayout) {
+    // for custom layouts we don't need to fetch menu
+    await coreStore.fetchMenuAndResource();
+  }
   loginRedirectCheckIsReady.value = true;
 }
 
@@ -269,16 +339,21 @@ function handleCustomLayout() {
   }
 }
 
+function humanizeSnake(str: string): string {
+  if (!str) {
+    return '';
+  }
+  return str.split('_').map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
+}
 
-
-watch(route, () => {
+watch([route, () => coreStore.resourceById], async () => {
   handleCustomLayout()
-  title.value = `${coreStore.config?.title || coreStore.config?.brandName || 'Adminforth'} | ${ Object.values(route.params)[0] || route.meta.title || ' '}`;
+  await new Promise((resolve) => setTimeout(resolve, 0));
+  const resourceTitle = coreStore.resourceById[route.params?.resourceId as string]?.label || humanizeSnake(Object.values(route.params)[0] as string);
+  title.value = `${coreStore.config?.title || coreStore.config?.brandName || 'Adminforth'} | ${ resourceTitle || route.meta.title || ' '}`;
   useHead({
     title: title.value,
   })
-  
-
 });
 
 watch (()=>coreStore.menu, () => {
@@ -293,6 +368,14 @@ watch([loggedIn,  routerIsReady, loginRedirectCheckIsReady], ([l,r,lr]) => {
   if (l && r && lr) {
     setTimeout(() => {
       initFlowbite();
+
+      const dd = new Dropdown(
+        document.querySelector('#dropdown-user') as HTMLElement,
+        document.querySelector('[data-dropdown-toggle="dropdown-user"]') as HTMLElement,
+      );
+      window.adminforth.closeUserMenuDropdown = () => {
+        dd.hide();
+      }
     }); 
   }
 })
@@ -307,8 +390,29 @@ onMounted(async () => {
 })
 
 onBeforeMount(()=>{
-  theme.value = window.localStorage.getItem('theme') || 'light';
+  theme.value = window.localStorage.getItem('af__theme') || 'light';
   document.documentElement.classList.toggle('dark', theme.value === 'dark');
 })
 
+
+const ctaBadge = computed(() => {
+  const badge = coreStore.config?.announcementBadge;
+  if (!badge) {
+    return null;
+  }
+  const hash = badge.closable ? JSON.stringify(badge).split('').reduce((a,b)=>{a=((a<<5)-a)+b.charCodeAt(0);return a&a},0) : '';
+  if (badge.closable && window.localStorage.getItem(`ctaBadge-${hash}`)) {
+    return null;
+  }
+  return {...badge, hash};
+});
+
+function closeCTA() {
+  const hash = ctaBadge.value.hash;
+  window.localStorage.setItem(`ctaBadge-${hash}`, '1');
+}
+
+
+
+
 </script>

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

@@ -24,7 +24,7 @@ const modalStore = useModalStore();
                     <button @click="()=>{ modalStore.onAcceptFunction(true);modalStore.togleModal()}" type="button" class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center">
                         {{ modalStore?.modalContent?.acceptText }}
                     </button>
-                    <button @click="()=>{modalStore.onAcceptFunction(false);modalStore.togleModal()}"  type="button" class="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 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">{{ modalStore?.modalContent?.cancelText }}</button>
+                    <button @click="()=>{modalStore.onAcceptFunction(false);modalStore.togleModal()}"  type="button" class="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-lightPrimary 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">{{ modalStore?.modalContent?.cancelText }}</button>
                 </div>
             </div>
         </div>

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

@@ -2,7 +2,7 @@
   <nav class="flex" aria-label="Breadcrumb">
       <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse flex-wrap">
         <li class="inline-flex items-center">
-          <RouterLink :to="{name: 'home'}" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white">
+          <RouterLink :to="{name: 'home'}" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-lightPrimary dark:text-gray-400 dark:hover:text-white">
             <svg class="w-3 h-3 me-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
               <path d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z"/>
             </svg>

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

@@ -32,7 +32,7 @@
       </div>
 
       <button type="button"
-              class="text-blue-700 dark:text-blue-500 text-base font-medium hover:underline p-0 inline-flex items-center mb-2"
+              class="text-lightPrimary dark:text-darkPrimary text-base font-medium hover:underline p-0 inline-flex items-center mb-2"
               @click="toggleTimeInputs">{{ showTimeInputs ? 'Hide time' : 'Show time' }}
         <svg class="w-8 h-8 ms-0.5" :class="{'rotate-180': showTimeInputs}" aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg" width="24" height="24"

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

@@ -50,7 +50,7 @@
       </div>
 
       <button type="button"
-              class="text-blue-700 dark:text-blue-500 text-base font-medium hover:underline p-0 inline-flex items-center mb-2"
+              class="text-lightPrimary dark:text-darkPrimary text-base font-medium hover:underline p-0 inline-flex items-center mb-2"
               @click="toggleTimeInputs">{{ showTimeInputs ? 'Hide time' : 'Show time' }}
         <svg class="w-8 h-8 ms-0.5 relative top-px" :class="{'rotate-180': showTimeInputs}" aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg" width="24" height="24"

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

@@ -21,7 +21,7 @@
     <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"
+      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-lightPrimary 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>
 
@@ -130,23 +130,27 @@ function setSliderValues(start, end) {
     }
 
     &:deep(.vue-slider-dot-handle) {
-        background-color: #1c64f2;
+        // apply bg-blue-500 to the handle when active
+        @apply bg-lightPrimary;
         border: none;
         box-shadow: none;
     }
 
     &:deep(.vue-slider-dot-handle:hover) {
-        background-color: #1c64f2;
+        @apply bg-lightPrimary;
+        filter: brightness(1.1);
         border: none;
         box-shadow: none;
     }
 
     &:deep(.vue-slider-process) {
-        background-color: rgb(225 239 254);
+      @apply bg-lightPrimaryOpacity;
+
     }
 
     &:deep(.vue-slider-process:hover) {
-        background-color: rgb(225 239 254);
+      filter: brightness(1.1);
+      @apply bg-lightPrimaryOpacity;
     }
 }
 </style>

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

@@ -10,7 +10,7 @@
       />
       <div class="absolute inset-y-0 left-2 flex items-center pr-2 flex-wrap">
         {{  }}
-        <div v-for="item in selectedItems" :key="item?.name" class="bg-blue-100 text-blue-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300">
+        <div v-for="item in selectedItems" :key="item?.name" class="bg-lightPrimaryOpacity text-lightPrimary text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-darkPrimaryOpacity dark:text-darkPrimary">
           <span>{{ item.label }}</span>
           <button
             type="button"
@@ -40,7 +40,7 @@
         v-for="item in filteredItems"
         :key="item.value"
         class="px-4 py-2 cursor-pointer hover:bg-gray-100"
-        :class="{ 'bg-blue-100': selectedItems.includes(item) }"
+        :class="{ 'bg-lightPrimaryOpacity': selectedItems.includes(item) }"
         @click="toogleItem(item)"
       >
         <label :for="item.value">{{ item.label }}</label>
@@ -147,10 +147,10 @@ const toogleItem = (item) => {
 
   
   const list = selectedItems.value.map(item => item.value);
-  const updValue = list.length ? list : undefined;
+  const updValue = list.length ? list : null;
   let emitValue;
   if (props.single) {
-    emitValue = updValue ? updValue[0] : undefined;
+    emitValue = updValue ? updValue[0] : null;
   } else {
     emitValue = updValue;
   }

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

@@ -103,7 +103,7 @@
       <button 
         :disabled="!filtersStore.filters.length"
         type="button" 
-        class="flex items-center py-1 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"
+        class="flex items-center py-1 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-lightPrimary 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 all</button>
 
    </div>
@@ -115,7 +115,7 @@
 </template>
 
 <script setup>
-import { watch, computed, ref, onMounted } from 'vue'
+import { watch, computed } from 'vue'
 import Dropdown from '@/components/Dropdown.vue';
 import CustomDateRangePicker from '@/components/CustomDateRangePicker.vue';
 import { callAdminForthApi } from '@/utils';

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

@@ -12,6 +12,9 @@
   >
     <component v-if="item.icon" :is="getIcon(item.icon)" class="w-5 h-5 text-lightSidebarIcons dark:text-darkSidebarIcons  transition duration-75  group-hover:text-lightSidebarIconsHover dark:group-hover:text-darkSidebarIconsHover" ></component>
     <span class="ms-3">{{ item.label }}</span>
+    <span v-if="item.badge" class="inline-flex items-center justify-center w-3 h-3 p-3 ms-3 text-sm font-medium rounded-full bg-lightAnnouncementBG dark:bg-darkAnnouncementBG 
+          fill-lightAnnouncementText dark:fill-darkAccent text-lightAnnouncementText dark:text-darkAccent">{{ item.badge }}</span>
+
   </RouterLink>
 </template>