adminforth 2.4.0-next.33 → 2.4.0-next.331

package/dist/spa/package.json

@@ -10,50 +10,50 @@
     "build-only": "vite build",
     "type-check": "vue-tsc --build --force",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
-    "i18n:extract": "echo {} > i18n-empty.json && vue-i18n-extract report --vueFiles \"./src/**/*.{js,vue}\" --output ./i18n-messages.json --languageFiles \"i18n-empty.json\" --add"
+    "i18n:extract": "echo {} > i18n-empty.json && vue-i18n-extract report --vueFiles \"./src/**/*.{js,vue,ts}\" --output ./i18n-messages.json --languageFiles \"i18n-empty.json\" --add"
   },
   "dependencies": {
-    "@iconify-prerendered/vue-flag": "^0.28.1748584105",
-    "@iconify-prerendered/vue-flowbite": "^0.23.1714023977",
-    "@unhead/vue": "^1.9.12",
-    "@vueuse/core": "^10.10.0",
+    "@iconify-prerendered/vue-flag": "^0.28.1754899047",
+    "@iconify-prerendered/vue-flowbite": "^0.28.1754899090",
+    "@unhead/vue": "^1.11.20",
+    "@vueuse/core": "^10.11.1",
     "apexcharts": "^4.7.0",
-    "dayjs": "^1.11.11",
-    "debounce": "^2.1.0",
-    "flowbite-datepicker": "^1.2.6",
-    "javascript-time-ago": "^2.5.11",
-    "pinia": "^2.1.7",
-    "sanitize-html": "^2.13.0",
-    "unhead": "^1.9.12",
+    "dayjs": "^1.11.19",
+    "debounce": "^2.2.0",
+    "flowbite-datepicker": "^1.3.2",
+    "javascript-time-ago": "^2.5.12",
+    "pinia": "^2.3.1",
+    "sanitize-html": "^2.17.0",
+    "unhead": "^1.11.20",
     "uuid": "^10.0.0",
-    "vue": "^3.5.12",
+    "vue": "^3.5.22",
     "vue-diff": "^1.2.4",
-    "vue-i18n": "^10.0.5",
-    "vue-router": "^4.3.0",
+    "vue-i18n": "^10.0.8",
+    "vue-router": "^4.6.3",
     "vue-slider-component": "^4.1.0-beta.7"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "^1.8.0",
-    "@tsconfig/node20": "^20.1.4",
-    "@types/node": "^20.12.5",
-    "@vitejs/plugin-vue": "^5.0.4",
+    "@rushstack/eslint-patch": "^1.14.1",
+    "@tsconfig/node20": "^20.1.6",
+    "@types/node": "^20.19.24",
+    "@vitejs/plugin-vue": "^5.2.4",
     "@vue/eslint-config-typescript": "^13.0.0",
-    "@vue/tsconfig": "^0.5.1",
-    "autoprefixer": "^10.4.19",
-    "eslint": "^8.57.0",
-    "eslint-plugin-vue": "^9.23.0",
-    "flag-icons": "^7.2.3",
+    "@vue/tsconfig": "^0.8.1",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^8.57.1",
+    "eslint-plugin-vue": "^9.33.0",
+    "flag-icons": "^7.5.0",
     "flowbite": "^3.1.2",
-    "i18n-iso-countries": "^7.12.0",
-    "npm-run-all2": "^6.1.2",
-    "portfinder": "^1.0.32",
-    "postcss": "^8.4.38",
-    "sass": "^1.77.2",
-    "tailwindcss": "^3.4.17",
-    "typescript": "~5.4.0",
-    "vite": "^5.2.13",
+    "i18n-iso-countries": "^7.14.0",
+    "npm-run-all2": "^6.2.6",
+    "portfinder": "^1.0.38",
+    "postcss": "^8.5.6",
+    "sass": "^1.93.3",
+    "tailwindcss": "^3.4.18",
+    "typescript": "~5.9.3",
+    "vite": "^5.4.21",
     "vue-i18n-extract": "^2.0.7",
-    "vue-tsc": "^2.0.11",
-    "vue3-json-viewer": "^2.2.2"
+    "vue-tsc": "^2.2.12",
+    "vue3-json-viewer": "^2.4.1"
   }
 }

package/dist/spa/src/App.vue

@@ -2,9 +2,9 @@
   <div>
     <nav 
       v-if="loggedIn && routerIsReady && loginRedirectCheckIsReady && defaultLayout"
-      class="fixed h-14 top-0 z-20 w-full border-b shadow-sm bg-lightNavbar shadow-headerShadow dark:bg-darkNavbar dark:border-darkSidebarDevider"
+      class="fixed h-14 top-0 z-30 w-full border-b shadow-sm bg-lightNavbar shadow-headerShadow dark:bg-darkNavbar dark:border-darkSidebarDevider"
     >
-      <div class="px-3 lg:px-5 lg:pl-3 flex items-center justify-between h-full w-full" >
+      <div class="af-header px-3 lg:px-5 lg:pl-3 flex items-center justify-between h-full w-full" >
           <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">
@@ -24,8 +24,9 @@
             />
 
             <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">
+              <span  
+                v-if="!coreStore.config?.singleTheme"
+                @click="toggleTheme" class="cursor-pointer flex items-center gap-1 block px-4 py-2 text-sm text-black  dark:text-darkSidebarTextHover dark:hover:text-darkSidebarTextActive" role="menuitem">
                 <IconMoonSolid class="w-5 h-5 text-blue-300" v-if="coreStore.theme !== 'dark'" />
                 <IconSunSolid class="w-5 h-5 text-yellow-300" v-else />
               </span>
@@ -40,7 +41,7 @@
                 </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-darkSidebar dark:divide-darkSidebarDevider dark:shadow-black" id="dropdown-user">
+              <div class="z-50 hidden my-4 text-base list-none bg-lightUserMenuBackground divide-y divide-lightUserMenuBorder text-lightUserMenuText rounded shadow dark:shadow-black dark:bg-darkUserMenuBackground dark:divide-darkUserMenuBorder text-darkUserMenuText dark:shadow-black" id="dropdown-user">
                 <div class="px-4 py-3" role="none">
                   <p class="text-sm text-gray-900 dark:text-darkNavbarText" role="none" v-if="coreStore.userFullname">
                     {{ coreStore.userFullname }}
@@ -51,15 +52,18 @@
                 </div>
 
                 <ul class="py-1" role="none">
-                  <li v-for="c in coreStore?.config?.globalInjections?.userMenu || []" >
+                  <li v-for="c in userMenuComponents" class="bg-lightUserMenuItemBackground hover:bg-lightUserMenuItemBackgroundHover text-lightUserMenuItemText hover:text-lightUserMenuItemText dark:bg-darkUserMenuItemBackground dark:hover:bg-darkUserMenuItemBackgroundHover dark:text-darkUserMenuItemText dark:hover:darkUserMenuItemTextHover" >
                     <component 
                       :is="getCustomComponent(c)"
                       :meta="c.meta"
                       :adminUser="coreStore.adminUser"
                     />
                   </li>
+                  <li v-if="coreStore?.config?.settingPages && coreStore.config.settingPages.length > 0">
+                    <UserMenuSettingsButton />
+                  </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">{{ $t('Sign out') }}</button>
+                    <button @click="logout" class="cursor-pointer flex items-center gap-1 block px-4 py-2 text-sm bg-lightUserMenuItemBackground hover:bg-lightUserMenuItemBackgroundHover text-lightUserMenuItemText hover:text-lightUserMenuItemText dark:bg-darkUserMenuItemBackground dark:hover:bg-darkUserMenuItemBackgroundHover dark:text-darkUserMenuItemText dark:hover:darkUserMenuItemTextHover w-full" role="menuitem">{{ $t('Sign out') }}</button>
                   </li>
                 </ul>
               </div>
@@ -68,114 +72,20 @@
       </div>
     </nav>
 
-    <aside 
-      ref="sidebarAside"
-      v-if="loggedIn && routerIsReady && loginRedirectCheckIsReady && defaultLayout"
-      id="logo-lightSidebar" class="fixed border-none top-0 left-0 z-30 w-64 h-screen  transition-transform bg-lightSidebar dark:bg-darkSidebar border-r border-lightSidebarBorder  sm:translate-x-0 dark:bg-darkSidebar dark:border-darkSidebarBorder"
-      :class="{ '-translate-x-full': !sideBarOpen, 'transform-none': sideBarOpen }"
-      aria-label="Sidebar"
-    >
-      <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 m-4">
-          <img :src="loadFile(coreStore.config?.brandLogo || '@/assets/logo.svg')" :alt="`${ coreStore.config?.brandName } Logo`" class="h-8 me-3"  />
-          <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="text-ellipsis overflow-hidden 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">
-                    <Tooltip v-if="item.badgeTooltip">
-                      {{ item.badge }}
-                      <template #tooltip>
-                        {{ item.badgeTooltip }}
-                      </template>
-                    </Tooltip>
-                    <template v-else>
-                      {{ item.badge }}
-                    </template> 
-                  </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="af-sidebar-dropdown 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" @click="hideSidebar"/>
-                    </li>
-                </template>
-            </ul>
-        </li>
-        <li v-else>
-          <MenuLink :item="item" @click="hideSidebar"/>
-        </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>
+    <Sidebar 
+      v-if="loggedIn && routerIsReady && loginRedirectCheckIsReady && defaultLayout && !headerOnlyLayout"
+      :sideBarOpen="sideBarOpen"
+      :forceIconOnly="route.meta?.sidebarAndHeader === 'preferIconOnly'"
+      @hideSidebar="hideSidebar"
+      @loadMenu="loadMenu"
+      @sidebarStateChange="handleSidebarStateChange"
+    />
 
-    <div class="sm:ml-64 max-w-[100vw] sm:max-w-[calc(100%-16rem)]" 
+    <div class="af-content-wrapper transition-all duration-300 ease-in-out max-w-[100vw]" 
+      :style="{
+        marginLeft: headerOnlyLayout ? 0 : isSidebarIconOnly ? '4.5rem' : expandedWidth,
+        maxWidth: headerOnlyLayout ? '100%' : isSidebarIconOnly ? 'calc(100% - 4.5rem)' : `calc(100% - ${expandedWidth})`
+      }"
       v-if="loggedIn && routerIsReady && loginRedirectCheckIsReady && defaultLayout">
       <div class="p-0 dark:border-gray-700 mt-14">
         <RouterView/>     
@@ -193,7 +103,7 @@
       </div>
     </div>
     <AcceptModal />
-    <div v-if="toastStore.toasts.length>0" class="fixed bottom-5 right-5 flex gap-1 flex-col-reverse z-50">
+    <div v-if="toastStore.toasts.length>0" class="fixed bottom-5 right-5 flex gap-1 flex-col-reverse z-[100]">
       <transition-group
         name="fade"
         tag="div"
@@ -235,10 +145,18 @@
     @apply opacity-100;
   }
 
+  @media (max-width: 640px) {
+    .af-content-wrapper {
+      margin-left: 0 !important;
+      max-width: 100% !important;
+    }
+  }
+
+
 </style>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, watch, onBeforeMount, nextTick, type Ref } from 'vue';
+import { computed, onMounted, ref, watch, onBeforeMount } from 'vue';
 import { RouterView } from 'vue-router';
 import { Dropdown } from 'flowbite'
 import './index.scss'
@@ -246,19 +164,15 @@ import { useCoreStore } from '@/stores/core';
 import { useUserStore } from '@/stores/user';
 import { IconMoonSolid, IconSunSolid } from '@iconify-prerendered/vue-flowbite';
 import AcceptModal from './components/AcceptModal.vue';
-import MenuLink from './components/MenuLink.vue';
+import Sidebar from './components/Sidebar.vue';
 import { useRoute, useRouter } from 'vue-router';
-import { getIcon, verySimpleHash } from '@/utils';
 import { createHead } from 'unhead'
-import { loadFile } from '@/utils';
+import { getCustomComponent } from '@/utils';
 import Toast from './components/Toast.vue';
 import {useToastStore} from '@/stores/toast';
-import { getCustomComponent } from '@/utils';
-import type { AdminForthConfigMenuItem, AnnouncementBadgeResponse } from './types/Common';
-import { Tooltip } from '@/afcl';
 import { initFrontedAPI } from '@/adminforth';
 import adminforth from '@/adminforth';
-
+import UserMenuSettingsButton from './components/UserMenuSettingsButton.vue';
 
 const coreStore = useCoreStore();
 const toastStore = useToastStore();
@@ -269,39 +183,110 @@ initFrontedAPI()
 createHead()
 const sideBarOpen = ref(false);
 const defaultLayout = ref(true);
+const headerOnlyLayout = ref(false);
 const route = useRoute();
 const router = useRouter();
-//create a ref to store the opened menu items with ts type;
-const opened = ref<string[]>([]);
 const publicConfigLoaded = ref(false);
 const dropdownUserButton = ref(null);
 
-const sidebarAside = ref(null);
 
 const routerIsReady = ref(false);
 const loginRedirectCheckIsReady = ref(false);
 
+const isSidebarIconOnly = ref(localStorage.getItem('afIconOnlySidebar') === 'true');
+
 const loggedIn = computed(() => !!coreStore?.adminUser);
 
+const expandedWidth = computed(() => coreStore.config?.iconOnlySidebar?.expandedSidebarWidth || '16.5rem');
+
 const theme = ref('light');
 
+const userMenuComponents = computed(() => {
+  console.log('🪲🆕 userMenuComponents recomputed', JSON.parse(JSON.stringify(coreStore?.config?.globalInjections?.userMenu)));
+  return coreStore?.config?.globalInjections?.userMenu || [];
+})
+
+watch(
+  () => coreStore.config?.globalInjections?.userMenu,
+  (newVal, oldVal) => {
+    // Only log when it becomes undefined (you can relax this if needed)
+    if (newVal === undefined) {
+      const err = new Error('🔍 userMenu changed to undefined');
+      console.groupCollapsed(
+        '%c[TRACE] userMenu changed to undefined',
+        'color: red; font-weight: bold;'
+      );
+      console.log('old value:', oldVal);
+      console.log('new value:', newVal);
+      console.log('coreStore.config.globalInjections:', coreStore.config?.globalInjections);
+      console.log('Stack trace:');
+      console.log(err.stack);
+      console.groupEnd();
+    } else {
+      // Optional: log ALL changes for debugging
+      console.groupCollapsed(
+        '%c[DEBUG] userMenu changed',
+        'color: orange; font-weight: bold;'
+      );
+      console.log('old value:', oldVal);
+      console.log('new value:', newVal);
+      console.log('coreStore.config.globalInjections:', coreStore.config?.globalInjections);
+      console.groupEnd();
+    }
+  },
+  {
+    deep: false,
+    immediate: false,
+  }
+);
+
+watch(() => coreStore.config?.globalInjections, (v) => {
+  console.log("🔧 globalInjections replaced:", v);
+}, { deep: false });
+
+watch(
+  () => coreStore.config?.globalInjections?.userMenu,
+  (newVal, oldVal) => {
+    if (newVal === undefined) {
+      const err = new Error('🔍 userMenu changed to undefined');
+      console.groupCollapsed(
+        '%c[TRACE] userMenu changed to undefined',
+        'color: red; font-weight: bold;'
+      );
+      console.log('old value:', oldVal);
+      console.log('new value:', newVal);
+      console.log('coreStore.config.globalInjections:', coreStore.config?.globalInjections);
+      console.log('Stack trace:');
+      console.log(err.stack);
+      console.groupEnd();
+    } else {
+      console.groupCollapsed(
+        '%c[DEBUG] userMenu changed',
+        'color: orange; font-weight: bold;'
+      );
+      console.log('old value:', oldVal);
+      console.log('new value:', newVal);
+      console.log('coreStore.config.globalInjections:', coreStore.config?.globalInjections);
+      console.groupEnd();
+    }
+  },
+  { deep: false, immediate: false }
+);
+
 function hideSidebar(): void {
   sideBarOpen.value = false;
 }
 
+function handleSidebarStateChange(state: { isSidebarIconOnly: boolean }) {
+  isSidebarIconOnly.value = state.isSidebarIconOnly;
+}
+
+
 function toggleTheme() {
   theme.value = theme.value === 'light' ? 'dark' : 'light';
   coreStore.toggleTheme();
 }
 
-function clickOnMenuItem(label: string) {
-  if (opened.value.includes(label)) {
-    opened.value = opened.value.filter((item) => item !== label);
-  } else {
-    opened.value.push(label);
-  }
- 
-}
 
 async function logout() {
   userStore.unauthorize();
@@ -316,7 +301,7 @@ async function initRouter() {
 
 async function loadMenu() {
   await initRouter();
-  if (!route.meta.customLayout) {
+  if (route.meta.sidebarAndHeader !== 'none') {
     // for custom layouts we don't need to fetch menu
     await coreStore.fetchMenuAndResource();
   }
@@ -324,8 +309,13 @@ async function loadMenu() {
 }
 
 function handleCustomLayout() {
-  if (route.meta?.customLayout) {
+  if (route.meta?.sidebarAndHeader === 'none') {
     defaultLayout.value = false;
+  } else if (route.meta?.sidebarAndHeader === 'preferIconOnly') {
+    defaultLayout.value = true;
+    isSidebarIconOnly.value = true;
+  } else if (route.meta?.sidebarAndHeader === 'headerOnly') {
+    headerOnlyLayout.value = true;
   } else {
     defaultLayout.value = true;
   }
@@ -361,13 +351,6 @@ watch([route, () => coreStore.resourceById, () => coreStore.config], async () =>
  
 });
 
-watch(()=>coreStore.menu, () => {
-    coreStore.menu.forEach((item, i) => {
-    if (item.open) {
-      opened.value.push(i);
-    };
-  });
-})
 
 watch(dropdownUserButton, (dropdownUserButton) => {
   if (dropdownUserButton) {
@@ -386,11 +369,6 @@ async function loadPublicConfig() {
   publicConfigLoaded.value = true;
 }
 
-watch(sidebarAside, (sidebarAside) => {
-  if (sidebarAside) {
-    coreStore.fetchMenuBadges();
-  }
-})
 
 // initialize components based on data attribute selectors
 onMounted(async () => {
@@ -410,32 +388,12 @@ onBeforeMount(()=>{
   document.documentElement.classList.toggle('dark', theme.value === 'dark');
 })
 
-
-const ctaBadge: Ref<(AnnouncementBadgeResponse & { hash: string; }) | null> = computed(() => {
-  const badge = coreStore.config?.announcementBadge;
-  if (!badge) {
-    return null;
-  }
-  const hash = badge.closable ? verySimpleHash(JSON.stringify(badge)) : '';
-  if (badge.closable && window.localStorage.getItem(`ctaBadge-${hash}`)) {
-    return null;
-  }
-  return {...badge, hash};
-});
-
-function closeCTA() {
-  if (!ctaBadge.value) {
-    return;
+watch(() => coreStore.config?.singleTheme, (singleTheme) => {
+  if (singleTheme) {
+    theme.value = singleTheme;
+    window.localStorage.setItem('af__theme', singleTheme);
+    document.documentElement.classList.toggle('dark', theme.value === 'dark');
   }
-  const hash = ctaBadge.value.hash;
-  window.localStorage.setItem(`ctaBadge-${hash}`, '1');
-  nextTick( async() => {
-    loadMenu();
-    await coreStore.fetchMenuBadges();
-    adminforth.menu.refreshMenuBadges();
-  })
-
-}
-
+}, { immediate: true })
 
 </script>

package/dist/spa/src/adminforth.ts

@@ -1,6 +1,5 @@
-import type { FilterParams, FrontendAPIInterface } from "./types/FrontendAPI";
 import type { FrontendAPIInterface, ConfirmParams, AlertParams, } from '@/types/FrontendAPI';
-import type { AdminForthFilterOperators, AdminForthResourceColumn } from '@/types/Common';
+import type { AdminForthFilterOperators, AdminForthResourceColumnCommon, FilterParams } from '@/types/Common';
 import { useToastStore } from '@/stores/toast';
 import { useModalStore } from '@/stores/modal';
 import { useCoreStore } from '@/stores/core';
@@ -36,6 +35,10 @@ class FrontendAPI implements FrontendAPIInterface {
     refreshMenuBadges: () => void;
   }
 
+  public show: {
+    refresh(): void;
+  }
+
   closeUserMenuDropdown(): void {
     console.log('closeUserMenuDropdown')
   }
@@ -73,9 +76,15 @@ class FrontendAPI implements FrontendAPIInterface {
       updateFilter: this.updateListFilter.bind(this),
       clearFilters: this.clearListFilters.bind(this),
     }
+
+    this.show = {
+      refresh: () => {
+        console.log('show.refresh')
+      }
+    }
   }
 
-  confirm(params: ConfirmParams): Promise<void> {
+  confirm(params: ConfirmParams): Promise<boolean> {
     return new Promise((resolve, reject) => {
       this.modalStore.setModalContent({ 
         content: params.message, 
@@ -88,35 +97,50 @@ class FrontendAPI implements FrontendAPIInterface {
     })
   }
 
-  alert(params: AlertParams): void {
-    this.toastStore.addToast({
+  alert(params: AlertParams): void | Promise<string> | string {
+    const toats = {
       message: params.message,
       messageHtml: params.messageHtml,
       variant: params.variant,
-      timeout: params.timeout  
-    })
+      timeout: params.timeout,
+      buttons: params.buttons,  
+    }
+    if (params.buttons && params.buttons.length > 0) {
+      return new Promise<string>((resolve) => {
+        this.toastStore.addToast({
+          ...toats,
+          onResolve: (value?: any) => resolve(String(value ?? '')),
+        })
+      })
+    } else {
+      this.toastStore.addToast({...toats})
+    }
   }
 
   listFilterValidation(filter: FilterParams): boolean {
     if(router.currentRoute.value.meta.type !== 'list'){
       throw new Error(`Cannot use ${this.setListFilter.name} filter on a list page`)
-    } else {
-      console.log(this.coreStore.resourceColumnsWithFilters,'core store')
-      const filterField = this.coreStore.resourceColumnsWithFilters.find((col: AdminForthResourceColumn) => col.name === filter.field)
-      if(!filterField){
-          throw new Error(`Field ${filter.field} is not available for filtering`)
-      }
-      
     }
     return true
   }
 
   setListFilter(filter: FilterParams): void {
     if(this.listFilterValidation(filter)){
-      if(this.filtersStore.filters.some((f) => {return f.field === filter.field && f.operator === filter.operator})){
-        throw new Error(`Filter ${filter.field} with operator ${filter.operator} already exists`)
+      const existingFilterIndex = this.filtersStore.filters.findIndex((f: any) => {
+        return f.field === filter.field && f.operator === filter.operator
+      });
+      
+      if(existingFilterIndex !== -1){
+        // Update existing filter instead of throwing error
+        const filters = [...this.filtersStore.filters];
+        if (filter.value === undefined) {
+          filters.splice(existingFilterIndex, 1);
+        } else {
+          filters[existingFilterIndex] = filter;
+        }
+        this.filtersStore.setFilters(filters);
       } else {
-      this.filtersStore.setFilter(filter)
+        this.filtersStore.setFilter(filter);
       }
     }
   }

package/dist/spa/src/afcl/AreaChart.vue

@@ -142,7 +142,6 @@ watch(() => [options.value, chart.value], (value) => {
   if (!value || !chart.value) {
     return;
   }
-  console.log('options changed', options.value);
   if (apexChart) {
     apexChart.updateOptions(options.value);
   } else {

package/dist/spa/src/afcl/BarChart.vue

@@ -60,7 +60,7 @@ const optionsBase = {
   tooltip: {
     shared: true,
     intersect: false,
-    formatter: function (value) {
+    formatter: function (value: any) {
       return value
     },
   },
@@ -71,7 +71,7 @@ const optionsBase = {
         fontFamily: "Inter, sans-serif",
         cssClass: 'text-xs font-normal fill-gray-500 dark:fill-gray-400'
       },
-      formatter: function (value) {
+      formatter: function (value: any) {
         return value
       }
     },