adminforth 2.4.0-next.3 → 2.4.0-next.300

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

@@ -1,10 +1,10 @@
 <template>
-  <div class="relative flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 relative w-screen h-screen"
+  <div class="relative flex items-center justify-center min-h-screen bg-lightHtml dark:bg-darkHtml w-screen h-screen"
     :style="coreStore.config?.loginBackgroundImage && backgroundPosition === 'over' ? {
       'background-image': 'url(' + loadFile(coreStore.config?.loginBackgroundImage) + ')',
       'background-size': 'cover',
       'background-position': 'center',
-      'background-blend-mode': 'darken'
+      'background-blend-mode': coreStore.config?.removeBackgroundBlendMode ? 'normal' : 'darken'
     }: {}"
   >
     
@@ -23,44 +23,57 @@
 
     <!-- Main modal -->
     <div id="authentication-modal" tabindex="-1" 
-      class="overflow-y-auto flex flex-grow
+      class="af-login-modal overflow-y-auto flex flex-grow
       overflow-x-hidden z-50 min-w-[350px]  justify-center items-center md:inset-0 h-[calc(100%-1rem)] max-h-full">
         <div class="relative p-4 w-full max-h-full max-w-[400px]">
             <!-- Modal content -->
-            <div class="relative bg-white rounded-lg shadow dark:bg-gray-700 dark:shadow-black" >
+            <div class="af-login-popup af-login-modal-content relative bg-lightLoginViewBackground rounded-lg shadow dark:bg-darkLoginViewBackground dark:shadow-black" :class=" { 'rounded-b-none  overflow-hidden': error } ">
                 <!-- Modal header -->
-                <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
-                    <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
+                <div class="af-login-modal-header flex items-center justify-between flex-col p-4 md:p-5 border-b rounded-t dark:border-gray-600">
+
+                    <template v-if="coreStore?.config?.loginPageInjections?.panelHeader.length > 0">
+                      <component 
+                        v-for="(c, index) in coreStore?.config?.loginPageInjections?.panelHeader || []"
+                        :key="index"
+                        :is="getCustomComponent(c)"
+                        :meta="c.meta"
+                      />
+                    </template>
+                    <h3 v-else class="text-xl font-semibold text-lightLoginViewText dark:text-darkLoginViewTextColor">
                       {{ $t('Sign in to') }} {{ coreStore.config?.brandName }}
                     </h3>
                 </div>
                 <!-- Modal body -->
-                <div class="p-4 md:p-5">
+                <div class="af-login-modal-body p-4 md:p-5">
                     <form class="space-y-4" @submit.prevent>
                         <div>
-                            <label for="username" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ $t('Your') }} {{ coreStore.config?.usernameFieldName?.toLowerCase() }}</label>
-                            <input 
+                            <label for="username" class="block mb-2 text-sm font-medium text-lightLoginViewText dark:text-darkLoginViewTextColor">{{ $t('Your') }} {{ coreStore.config?.usernameFieldName?.toLowerCase() }}</label>
+                            <Input 
+                              v-model="username"
                               autocomplete="username"  
                               type="username" 
                               name="username" 
                               id="username" 
                               ref="usernameInput"
-                              oninput="setCustomValidity('')"
                               @keydown.enter="passwordInput.focus()"
-                              class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" placeholder="name@company.com" required />
+                              class="w-full"
+                              placeholder="name@company.com" required />
                         </div>
-                        <div class="relative">
-                            <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ $t('Your password') }}</label>
-                            <input 
+                        <div class="">
+                            <label for="password" class="block mb-2 text-sm font-medium text-lightLoginViewText dark:text-darkLoginViewTextColor">{{ $t('Your password') }}</label>
+                            <Input 
+                              v-model="password"
                               ref="passwordInput"
                               autocomplete="current-password"
-                              oninput="setCustomValidity('')"
                               @keydown.enter="login"
-                              :type="!showPw ? 'password': 'text'" name="password" id="password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" required />
-                            <button type="button" @click="showPw = !showPw" class="absolute top-12 right-3 -translate-y-1/2 text-gray-400 dark:text-gray-300">
-                              <IconEyeSolid class="w-5 h-5" v-if="!showPw" />
-                              <IconEyeSlashSolid class="w-5 h-5" v-else />
-                            </button>
+                              :type="!showPw ? 'password': 'text'" name="password" id="password" placeholder="••••••••" class="w-full" required>
+                              <template #rightIcon>
+                                <button type="button" @click="showPw = !showPw" class="text-lightLoginViewSubTextColor dark:text-darkLoginViewSubTextColor">
+                                  <IconEyeSolid class="w-5 h-5" v-if="!showPw" />
+                                  <IconEyeSlashSolid class="w-5 h-5" v-else />
+                                </button>
+                              </template>
+                            </Input>
                         </div>
 
                         <div v-if="coreStore.config.rememberMeDays" 
@@ -77,20 +90,11 @@
                           v-for="c in coreStore?.config?.loginPageInjections?.underInputs || []"
                           :is="getCustomComponent(c)"
                           :meta="c.meta"
+                          @update:disableLoginButton="setDisableLoginButton($event)"
                         />
-
-                        <div v-if="error" class="flex items-center p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400" role="alert">
-                          <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-                            <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
-                          </svg>
-                          <span class="sr-only">{{ $t('Info') }}</span>
-                          <div>
-                            {{ error }}
-                          </div>
-                        </div>
-
+                        
                         <div v-if="coreStore.config?.loginPromptHTML"
-                          class="flex items-center p-4 mb-4 text-sm text-gray-800 rounded-lg bg-gray-50 dark:bg-gray-800 dark:text-gray-400" role="alert"
+                          class="flex items-center p-4 mb-4 text-sm text-lightLoginViewPromptText rounded-lg bg-lightLoginViewPromptBackground dark:bg-darkLoginViewPromptBackground dark:text-darkLoginViewPromptText" role="alert"
                         >
                           <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                             <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
@@ -98,13 +102,19 @@
                           <span class="sr-only">{{ $t('Info') }}</span>
                           <div v-html="coreStore.config?.loginPromptHTML"></div>
                         </div>
-                        <Button @click="login" :loader="inProgress" :disabled="inProgress" class="w-full">
+                        <Button @click="login" :loader="inProgress" :disabled="inProgress || disableLoginButton" class="w-full">
                           {{ $t('Login to your account') }}
                         </Button>
+                        <component 
+                          v-for="c in coreStore?.config?.loginPageInjections?.underLoginButton || []"
+                          :is="getCustomComponent(c)"
+                          :meta="c.meta"
+                          @update:disableLoginButton="setDisableLoginButton($event)"
+                        />
                     </form>
-
                 </div>
             </div>
+            <ErrorMessage v-if="error" :error="error" class="absolute left-4 right-4 rounded-t-none mb-0 shadow px-9" />
         </div>
     </div> 
 
@@ -112,7 +122,7 @@
 </template>
 
 
-<script setup>
+<script setup lang="ts">
 
 import { getCustomComponent } from '@/utils';
 import { onBeforeMount, onMounted, ref, computed } from 'vue';
@@ -121,30 +131,34 @@ import { useUserStore } from '@/stores/user';
 import { IconEyeSolid, IconEyeSlashSolid } from '@iconify-prerendered/vue-flowbite';
 import { callAdminForthApi, loadFile } from '@/utils';
 import { useRoute, useRouter } from 'vue-router';
-import { Button, Checkbox } from '@/afcl';
+import { Button, Checkbox, Input } from '@/afcl';
 import { useI18n } from 'vue-i18n';
+import ErrorMessage from '@/components/ErrorMessage.vue';
 
 const { t } = useI18n();
 
 const passwordInput = ref(null);
 const usernameInput = ref(null);
 const rememberMeValue= ref(false);
+const username = ref('');
+const password = ref('');
 
 const route = useRoute();
 const router = useRouter();
 const inProgress = ref(false);
-
 const coreStore = useCoreStore();
 const user = useUserStore();
 
 const showPw = ref(false);
 
 const error = ref(null);
+const disableLoginButton = ref(false);
 
 const backgroundPosition = computed(() => {
   return coreStore.config?.loginBackgroundPosition || '1/2';
 });
 
+
 onBeforeMount(() => {
   if (localStorage.getItem('isAuthorized') === 'true') {
     // if route has next param, redirect
@@ -158,29 +172,17 @@ onBeforeMount(() => {
 })
 
 onMounted(async () => {
+  coreStore.getLoginFormConfig();
     if (coreStore.config?.demoCredentials) {
-      const [username, password] = coreStore.config.demoCredentials.split(':');
-      usernameInput.value.value = username;
-      passwordInput.value.value = password;
+      const [demoUsername, demoPassword] = coreStore.config.demoCredentials.split(':');
+      username.value = demoUsername;
+      password.value = demoPassword;
     }
     usernameInput.value.focus();
 });
 
 
 async function login() {
-  
-  const username = usernameInput.value.value;
-  const password = passwordInput.value.value;
-
-  if (!username) {
-    usernameInput.value.setCustomValidity(t('Please fill out this field.'));
-    return;
-  }
-  if (!password) {
-    passwordInput.value.setCustomValidity(t('Please fill out this field.'));
-    return;
-  }
-
   if (inProgress.value) {
     return;
   }
@@ -189,8 +191,8 @@ async function login() {
     path: '/login',
     method: 'POST',
     body: {
-      username,
-      password,
+      username: username.value,
+      password: password.value,
       rememberMe: rememberMeValue.value,
     }
   });
@@ -206,5 +208,8 @@ async function login() {
 
 }
 
+function setDisableLoginButton(value: boolean) {
+  disableLoginButton.value = value;
+}
 
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <div :key="`${$route?.params.resourceId}---${$route?.params.primaryKey}`" class="p-4 flex" 
+  <div :key="`${$route?.params.resourceId}---${$route?.params.primaryKey}`" class="af-resource-parent p-4 flex" 
     :class="limitHeightToPage ? 'h-[calc(100dvh-3.5rem)]': undefined"
   >
     <RouterView/>
@@ -33,7 +33,7 @@ const limitHeightToPage = computed(() => {
   }
   const listPageInjects = coreStore.resource.options.pageInjections.list;
   
-  for (const pi of [listPageInjects.beforeBreadcrumbs, listPageInjects.afterBreadcrumbs, listPageInjects.bottom]) {
+  for (const pi of [listPageInjects.beforeBreadcrumbs, listPageInjects.beforeActionButtons, listPageInjects.afterBreadcrumbs, listPageInjects.bottom]) {
     if (pi) {
       for (const piItem of pi) {
         if (!piItem.meta?.thinEnoughToShrinkTable) {

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

@@ -0,0 +1,121 @@
+<template>
+  <div class="mt-20 h-full w-full" :class="{ 'hidden': initialTabSet === false }">
+    <div v-if="!coreStore?.config?.settingPages || coreStore?.config?.settingPages.length === 0">
+      <p>{{ $t('No setting pages configured or still loading...') }}</p>
+    </div>
+      <VerticalTabs v-else ref="VerticalTabsRef" v-model:active-tab="activeTab" @update:active-tab="setURL({slug: $event, pageLabel: ''})">
+      <template v-for="(c,i) in coreStore?.config?.settingPages" :key="`tab:${settingPageSlotName(c,i)}`" v-slot:['tab:'+c.slug]>
+        <div class="flex items-center justify-center whitespace-nowrap w-full px-4 gap-2" @click="setURL(c)">
+          <component v-if="c.icon" :is="getIcon(c.icon)" class="w-5 h-5 group-hover:text-lightSidebarIconsHover transition duration-75 dark:group-hover:text-darkSidebarIconsHover dark:text-darkSidebarIcons" ></component>
+          {{ c.pageLabel }}
+        </div>
+      </template>
+
+      <template v-for="(c,i) in coreStore?.config?.settingPages" :key="`${settingPageSlotName(c,i)}-content`" v-slot:[c.slug]>
+        <component 
+          :is="getCustomComponent({file: c.component || ''})"
+          :resource="coreStore.resource"
+          :adminUser="coreStore.adminUser"
+        />
+      </template>
+    </VerticalTabs>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue';
+import { useRouter } from 'vue-router';
+import { useCoreStore } from '@/stores/core';
+import { getCustomComponent, getIcon } from '@/utils';
+import { Dropdown } from 'flowbite';
+import adminforth from '@/adminforth';
+import { VerticalTabs } from '@/afcl'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+const coreStore = useCoreStore();
+const router = useRouter();
+
+const routerIsReady = ref(false);
+const loginRedirectCheckIsReady = ref(false);
+const dropdownUserButton = ref<HTMLElement | null>(null);
+const VerticalTabsRef = ref();
+const activeTab = ref('');
+const initialTabSet = ref(false);
+
+watch(() => route?.params?.page, (val) => {
+  handleURLChange(val as string | null);
+});
+
+async function initRouter() {
+  await router.isReady();
+  routerIsReady.value = true;
+}
+
+watch(dropdownUserButton, (el) => {
+  if (el) {
+    const dd = new Dropdown(
+      document.querySelector('#dropdown-user') as HTMLElement,
+      document.querySelector('[data-dropdown-toggle="dropdown-user"]') as HTMLElement,
+    );
+    adminforth.closeUserMenuDropdown = () => dd.hide();
+  }
+});
+
+onMounted(async () => {
+  if (coreStore.adminUser) {
+    await loadMenu();
+    loginRedirectCheckIsReady.value = true;
+    const routeParamsPage = route?.params?.page;
+    if (!routeParamsPage) {
+      if (coreStore.config?.settingPages?.[0]) {
+        setURL(coreStore.config.settingPages[0]);
+      }
+    } else {
+      handleURLChange(routeParamsPage as string | null);
+    }
+  }
+});
+
+async function loadMenu() {
+  await initRouter();
+  await coreStore.fetchMenuAndResource();
+}
+
+function slugifyString(str: string): string {
+  return str
+    .toString()
+    .toLowerCase()
+    .replace(/\s+/g, '-')
+    .replace(/[^a-z0-9-_]/g, '-');
+}
+
+function setURL(item: {
+  pageLabel: string;
+  slug?: string | undefined;
+}) {
+  router.replace({
+    name: 'settings',
+    params: { page: item?.slug }
+  });
+}
+
+function handleURLChange(val: string | null) {
+  let isParamInTabs;
+  for (const c of coreStore?.config?.settingPages || []) {
+    if (c.slug ? c.slug === val : slugifyString(c.pageLabel) === val) {
+      isParamInTabs = true;
+      break;
+    }
+  }
+  if (isParamInTabs) {
+    VerticalTabsRef.value.setActiveTab(val);
+    activeTab.value = val as string;
+    if (!initialTabSet.value) initialTabSet.value = true;
+  } else {
+    if (coreStore.config?.settingPages?.[0]) {
+      setURL(coreStore.config.settingPages[0]);
+    }
+  }
+}
+</script>

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

@@ -4,52 +4,60 @@
       v-if="!loading"
       v-for="c in coreStore?.resourceOptions?.pageInjections?.show?.beforeBreadcrumbs || []"
       :is="getCustomComponent(c)"
-      :meta="c.meta"
+      :meta="(c as AdminForthComponentDeclarationFull).meta"
       :record="coreStore.record"
       :resource="coreStore.resource"
       :adminUser="coreStore.adminUser"
     />
     <BreadcrumbsWithButtons>
       <template v-if="coreStore.resource?.options?.actions">
-        <button 
-          v-for="action in coreStore.resource.options.actions.filter(a => a.showIn?.showButton)" 
-          :key="action.id"
-          @click="startCustomAction(action.id)"
-          :disabled="actionLoadingStates[action.id]"
-          class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-default 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"
-        >
-          <component 
-            v-if="action.icon" 
-            :is="getIcon(action.icon)" 
-            class="w-4 h-4 me-2 text-lightPrimary dark:text-darkPrimary"
-          />
-          {{ action.name }}
-        </button>
+
+        <template  v-for="action in coreStore.resource.options.actions.filter(a => a.showIn?.showButton)" :key="action.id">
+          <component
+            :is="action?.customComponent ? getCustomComponent(action.customComponent) : CallActionWrapper"
+            :meta="action.customComponent?.meta"
+            @callAction="(payload?) => startCustomAction(action.id, payload)"
+            :disabled="actionLoadingStates[action.id]"
+          >
+            <button 
+              :key="action.id"
+              :disabled="actionLoadingStates[action.id!]"
+              class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-default 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"
+            >
+              <component 
+                v-if="action.icon" 
+                :is="getIcon(action.icon)" 
+                class="w-4 h-4 me-2 text-lightPrimary dark:text-darkPrimary"
+              />
+              {{ action.name }}
+            </button>
+          </component>
+        </template>
       </template>
       <RouterLink v-if="coreStore.resource?.options?.allowedActions?.create"
         :to="{ name: 'resource-create', params: { resourceId: $route.params.resourceId } }"
-        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 rounded-default"
+        class="af-add-new-button flex items-center py-1 px-3 text-sm font-medium text-lightShowViewButtonText focus:outline-none bg-lightShowViewButtonBackground rounded border border-lightShowViewButtonBorder hover:bg-lightShowViewButtonBackgroundHover hover:text-lightShowViewButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightShowViewButtonFocusRing dark:focus:ring-darkShowViewButtonFocusRing dark:bg-darkShowViewButtonBackground dark:text-darkShowViewButtonText dark:border-darkShowViewButtonBorder dark:hover:text-darkShowViewButtonTextHover dark:hover:bg-darkShowViewButtonBackgroundHover rounded-default gap-1"
       >
-        <IconPlusOutline class="w-4 h-4 me-2"/>
+        <IconPlusOutline class="w-4 h-4"/>
         {{ $t('Add new') }}
       </RouterLink>
 
       <RouterLink v-if="coreStore?.resourceOptions?.allowedActions?.edit" :to="{ name: 'resource-edit', params: { resourceId: $route.params.resourceId, primaryKey: $route.params.primaryKey } }" 
-        class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-default 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"
+        class="flex items-center af-edit-button py-1 px-3 text-sm font-medium text-lightShowViewButtonText focus:outline-none bg-lightShowViewButtonBackground rounded-default border border-lightShowViewButtonBorder hover:bg-lightShowViewButtonBackgroundHover hover:text-lightShowViewButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightShowViewButtonFocusRing dark:focus:ring-darkShowViewButtonFocusRing dark:bg-darkShowViewButtonBackground dark:text-darkShowViewButtonText dark:border-darkShowViewButtonBorder dark:hover:text-darkShowViewButtonTextHover dark:hover:bg-darkShowViewButtonBackgroundHover gap-1"
       >
         <IconPenSolid class="w-4 h-4" />
         {{ $t('Edit') }}
       </RouterLink>
 
       <button v-if="coreStore?.resourceOptions?.allowedActions?.delete"  @click="deleteRecord"
-        class="flex items-center py-1 px-3 text-sm font-medium rounded-default text-red-600 focus:outline-none bg-white  border border-gray-300 hover:bg-gray-100 hover:text-red-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-red-500 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
+        class="flex items-center af-delete-button py-1 px-3 text-sm font-medium rounded-default text-red-600 focus:outline-none bg-lightShowViewButtonBackground  border border-lightShowViewButtonBorder hover:bg-lightShowViewButtonBackgroundHover hover:text-red-700 focus:z-10 focus:ring-4 focus:ring-lightShowViewButtonFocusRing dark:focus:ring-darkShowViewButtonFocusRing dark:bg-darkShowViewButtonBackground dark:text-red-500 dark:border-darkShowViewButtonBorder dark:hover:text-darkShowViewButtonTextHover dark:hover:bg-darkShowViewButtonBackgroundHover gap-1"
       >
         <IconTrashBinSolid class="w-4 h-4" />
         {{ $t('Delete') }}
       </button>
 
       <ThreeDotsMenu 
-        :threeDotsDropdownItems="coreStore.resourceOptions?.pageInjections?.show?.threeDotsDropdownItems"
+        :threeDotsDropdownItems="(coreStore.resourceOptions?.pageInjections?.show?.threeDotsDropdownItems as [])"
         :customActions="customActions"
       ></ThreeDotsMenu>
     </BreadcrumbsWithButtons>
@@ -57,7 +65,7 @@
     <component 
       v-for="c in coreStore?.resourceOptions?.pageInjections?.show?.afterBreadcrumbs || []"
       :is="getCustomComponent(c)"
-      :meta="c.meta"
+      :meta="(c as AdminForthComponentDeclarationFull).meta"
       :record="coreStore.record"
       :resource="coreStore.resource"
       :adminUser="coreStore.adminUser"
@@ -76,11 +84,11 @@
       v-else-if="coreStore.record"
       class="relative w-full flex flex-col gap-4"
     >
-    <div v-if="!groups.length && allColumns.length">
+    <div v-if="!groups.length && allColumns?.length">
       <ShowTable
-        :columns="allColumns"
         :resource="coreStore.resource"
         :record="coreStore.record"
+        :columns="allColumns as Array<{ name: string; label?: string; components?: any }>"
       />
     </div>
     <template v-else> 
@@ -93,12 +101,12 @@
           :record="coreStore.record"
         />
       </template>
-      <template v-if="otherColumns.length > 0">
+      <template v-if="otherColumns && otherColumns.length > 0">
         <ShowTable
-          :columns="otherColumns"
           groupName="Other Fields"
           :resource="coreStore.resource"
           :record="coreStore.record"
+          :columns="otherColumns as Array<{ name: string; label?: string; components?: any }>"
         />
       </template>
     </template>
@@ -112,8 +120,7 @@
       v-if="!loading"
       v-for="c in coreStore?.resourceOptions?.pageInjections?.show?.bottom || []"
       :is="getCustomComponent(c)"
-      :meta="c.meta"
-      :column="column"
+      :meta="(c as AdminForthComponentDeclarationFull).meta"
       :record="coreStore.record"
       :resource="coreStore.resource"
       :adminUser="coreStore.adminUser"
@@ -140,6 +147,8 @@ import ShowTable from '@/components/ShowTable.vue';
 import adminforth from "@/adminforth";
 import { useI18n } from 'vue-i18n';
 import { getIcon } from '@/utils';
+import { type AdminForthComponentDeclarationFull } from '@/types/Common.js';
+import CallActionWrapper from '@/components/CallActionWrapper.vue'
 
 const route = useRoute();
 const router = useRouter();
@@ -147,62 +156,65 @@ const loading = ref(true);
 const { t } = useI18n();
 const coreStore = useCoreStore();
 
-const actionLoadingStates = ref({});
+const actionLoadingStates = ref<Record<string, boolean>>({});
 
 const customActions = computed(() => {
-  return coreStore.resource?.options?.actions?.filter(a => a.showIn?.showThreeDotsMenu) || [];
+  return coreStore.resource?.options?.actions?.filter((a: any) => a.showIn?.showThreeDotsMenu) || [];
 });
 
 onMounted(async () => {
   loading.value = true;
   await coreStore.fetchResourceFull({
-    resourceId: route.params.resourceId
+    resourceId: route.params.resourceId as string,
   });
   initThreeDotsDropdown();
   await coreStore.fetchRecord({
-    resourceId: route.params.resourceId, 
-    primaryKey: route.params.primaryKey,
+    resourceId: route.params.resourceId as string, 
+    primaryKey: route.params.primaryKey as string,
     source: 'show',
   });
-  checkAcessByAllowedActions(coreStore.resourceOptions.allowedActions,'show');
+  if(coreStore.resourceOptions){
+    checkAcessByAllowedActions(coreStore.resourceOptions.allowedActions,'show');
+  }
   loading.value = false;
 });
 
 const groups = computed(() => {
   let fieldGroupType;
-  if (coreStore.resource.options?.showFieldGroups) {
-    fieldGroupType = coreStore.resource.options.showFieldGroups;
-  } else if (coreStore.resource.options?.showFieldGroups === null) {
-    fieldGroupType = [];
-  } else {
-    fieldGroupType = coreStore.resource.options?.fieldGroups;
+  if (coreStore.resource) {
+    if (coreStore.resource.options?.showFieldGroups) {
+      fieldGroupType = coreStore.resource.options.showFieldGroups;
+    } else if (coreStore.resource.options?.showFieldGroups === null) {
+      fieldGroupType = [];
+    } else {
+      fieldGroupType = coreStore.resource.options?.fieldGroups;
+    }
   }
+  const activeGroups: typeof fieldGroupType | [] = fieldGroupType ?? [];
 
-  const activeGroups = fieldGroupType ?? [];
-
-  return activeGroups.map(group => ({
+  return activeGroups.map((group: FieldGroup) => ({
     ...group,
-    columns: coreStore.resource.columns.filter(
-      col => group.columns.includes(col.name) && col.showIn.show
+    columns: coreStore.resource?.columns.filter(
+      col => group.columns.includes(col.name) && col.showIn?.show
     ),
   }));
 });
 
 const allColumns = computed(() => {
-  return coreStore.resource.columns.filter(col => col.showIn.show);
+  return coreStore.resource?.columns.filter(col => col.showIn?.show);
 });
 
 const otherColumns = computed(() => {
   const groupedColumnNames = new Set(
-    groups.value.flatMap(group => group.columns.map(col => col.name))
+    groups.value.flatMap(group => group.columns.map((col: AdminForthResourceColumnCommon) => col.name))
   );
 
-  return coreStore.resource.columns.filter(
-    col => !groupedColumnNames.has(col.name) && col.showIn.show
+  return coreStore.resource?.columns.filter(
+    col => !groupedColumnNames.has(col.name) && col.showIn?.show
   );
 });
 
-async function deleteRecord(row) {
+async function deleteRecord() {
   const data = await adminforth.confirm({
     message: t('Are you sure you want to delete this item?'),
     yes: t('Delete'),
@@ -231,7 +243,7 @@ async function deleteRecord(row) {
     
 }
 
-async function startCustomAction(actionId) {  
+async function startCustomAction(actionId: string, extra: any) {  
   actionLoadingStates.value[actionId] = true;
 
   const data = await callAdminForthApi({
@@ -240,7 +252,8 @@ async function startCustomAction(actionId) {
     body: {
       resourceId: route.params.resourceId,
       actionId: actionId,
-      recordId: route.params.primaryKey
+      recordId: route.params.primaryKey,
+      extra: extra,
     }
   });
   
@@ -263,8 +276,8 @@ async function startCustomAction(actionId) {
   
   if (data?.ok) {
     await coreStore.fetchRecord({
-      resourceId: route.params.resourceId, 
-      primaryKey: route.params.primaryKey,
+      resourceId: route.params.resourceId as string, 
+      primaryKey: route.params.primaryKey as string,
       source: 'show',
     });
 
@@ -281,4 +294,21 @@ async function startCustomAction(actionId) {
   }
 }
 
+adminforth.show.refresh = () => {
+  (async () => {
+    try {
+      loading.value = true;
+      await coreStore.fetchRecord({
+        resourceId: String(route.params.resourceId),
+        primaryKey: String(route.params.primaryKey),
+        source: 'show',
+      });
+    } catch (e) {
+      showErrorTost((e as Error).message);
+    } finally {
+      loading.value = false;
+    }
+  })();
+}
+
 </script>