adminforth 2.26.2 → 2.27.0-next.2

package/dist/spa/src/types/Back.ts

@@ -1,4 +1,4 @@
-import type { Express, Request } from 'express';
+import type { Express, Request, Response } from 'express';
 import type { Writable } from 'stream';
 
 import { ActionCheckSource, AdminForthFilterOperators, AdminForthSortDirections, AllowedActionsEnum, AdminForthResourcePages,
@@ -67,6 +67,10 @@ export interface IHttpServer {
       headers: {[key: string]: string}, 
       cookies: {[key: string]: string}, 
       response: IAdminForthHttpResponse,
+      requestUrl: string,
+      abortSignal: AbortSignal,
+      _raw_express_req: Request,
+      _raw_express_res: Response,
     ) => void,
   }): void;
 
@@ -1287,11 +1291,14 @@ interface AdminForthInputConfigCustomization {
 
 export interface AdminForthActionInput {
   name: string;
+  bulkConfirmationMessage?: string;
+  bulkSuccessMessage?: string;
   showIn?: {
       list?: boolean,
       listThreeDotsMenu?: boolean,
       showButton?: boolean,
       showThreeDotsMenu?: boolean,
+      bulkButton?: boolean,
   };
   allowed?: (params: {
     adminUser: AdminUser;
@@ -1312,7 +1319,7 @@ export interface AdminForthActionInput {
       message?: string;
   }>;
   icon?: string;
-  id?: string;
+  id: string;
   customComponent?: AdminForthComponentDeclaration;
 }
 
@@ -1637,7 +1644,7 @@ export interface AdminForthConfigCustomization extends Omit<AdminForthInputConfi
 
   loginPageInjections: {
     underInputs: Array<AdminForthComponentDeclarationFull>,
-    underLoginButton?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
+    underLoginButton: Array<AdminForthComponentDeclarationFull>,
     panelHeader: Array<AdminForthComponentDeclarationFull>,
   },
 
@@ -1825,7 +1832,7 @@ export type AllowedActions = {
 /**
  * General options for resource.
  */
-export interface ResourceOptionsInput extends Omit<NonNullable<AdminForthResourceInputCommon['options']>, 'allowedActions' | 'bulkActions'> {
+export interface ResourceOptionsInput extends Omit<NonNullable<AdminForthResourceInputCommon['options']>, 'allowedActions' | 'bulkActions' | 'actions'> {
 
   /** 
    * Custom bulk actions list. Bulk actions available in list view when user selects multiple records by

package/dist/spa/src/types/Common.ts

@@ -314,6 +314,25 @@ export type FieldGroup = {
   noTitle?: boolean;
 };
 
+export interface AdminForthActionFront extends Omit<AdminForthActionInput, 'id'> {
+  id: string;
+}
+
+export interface AdminForthBulkActionFront extends Omit<AdminForthBulkActionCommon, 'id'> {
+  id: string,
+}
+
+type AdminforthOptionsCommon = NonNullable<AdminForthResourceCommon['options']>;
+
+export interface AdminForthOptionsForFrontend extends Omit<AdminforthOptionsCommon, 'actions' | 'bulkActions'> {
+  actions?: AdminForthActionFront[],
+  bulkActions?: AdminForthBulkActionFront[],
+}
+
+export interface AdminForthResourceFrontend extends Omit<AdminForthResourceCommon, 'options'> {
+  options: AdminForthOptionsForFrontend;
+}
+
 /**
  * Resource describes one table or collection in database.
  * AdminForth generates set of pages for 'list', 'show', 'edit', 'create', 'filter' operations for each resource.
@@ -361,17 +380,17 @@ export interface AdminForthResourceInputCommon {
     recordLabel?: (item: any) => string,
 
 
-    /**
-     * If true, user will not see warning about unsaved changes when tries to leave edit or create page with unsaved changes.
-     * default is false
-     */
-    dontShowWarningAboutUnsavedChanges?: boolean,
 
     /**
      * General options for resource.
      */
     options?: {
       
+      /**
+       * If true, user will not see warning about unsaved changes when tries to leave edit or create page with unsaved changes.
+       * default is false
+       */
+      dontShowWarningAboutUnsavedChanges?: boolean,
 
       /**
        * Show quick action icons for base actions (show, edit, delete) in list view. 
@@ -417,6 +436,7 @@ export interface AdminForthResourceInputCommon {
       /** 
        * Custom bulk actions list. Bulk actions available in list view when user selects multiple records by
        * using checkboxes.
+       * @deprecated in favor of defining .
        */
       bulkActions?: AdminForthBulkActionCommon[],
 
@@ -1172,6 +1192,7 @@ export interface AdminForthConfigForFrontend {
   loginPageInjections: {
     underInputs: Array<AdminForthComponentDeclaration>,
     panelHeader: Array<AdminForthComponentDeclaration>,
+    underLoginButton: Array<AdminForthComponentDeclaration>,
   },
   rememberMeDuration: string,
   showBrandNameInSidebar: boolean,

package/dist/spa/src/types/FrontendAPI.ts

@@ -144,7 +144,7 @@ export interface FrontendAPIInterface {
     /**
      * Run save interceptors for a specific resource or all resources if no resourceId is provided
      */
-    runSaveInterceptors(params: { action: 'create'|'edit'; values: any; resource: any; resourceId: string; }): Promise<{ ok: boolean; error?: string | null; extra?: object; }>;
+    runSaveInterceptors(params: { action: 'create'|'edit'; values: any; resource: any; resourceId: string; }): Promise<{ ok: boolean; error?: string | null; extra?: any; }>;
 
     /**
      * Clear save interceptors for a specific resource or all resources if no resourceId is provided
@@ -152,6 +152,11 @@ export interface FrontendAPIInterface {
      * @param resourceId - The resource ID to clear interceptors for
      */
     clearSaveInterceptors(resourceId?: string): void;
+
+    /**
+     * Register a save interceptor for a specific resource
+     */
+    registerSaveInterceptor(handler: (ctx: { action: 'create'|'edit'; values: any; resource: any; }) => Promise<{ ok: boolean; error?: string | null; extra?: any; }>): void;
 }
 
 export type ConfirmParams = {

package/dist/spa/src/utils/listUtils.ts

@@ -4,13 +4,18 @@ import { type AdminForthResourceCommon } from '../types/Common';
 import { useAdminforth } from '@/adminforth';
 import { showErrorTost } from '@/composables/useFrontendApi'
 
-
+let getResourceDataLastAbortController: AbortController | null = null;
 export async function getList(resource: AdminForthResourceCommon, isPageLoaded: boolean, page: number | null , pageSize: number, sort: any, checkboxes:{ value: any[] }, filters: any = [] ) {
   let rows: any[] = [];
   let totalRows: number | null = null;
   if (!isPageLoaded) {
     return; 
   }
+  const abortController = new AbortController();
+  if (getResourceDataLastAbortController) {
+    getResourceDataLastAbortController.abort();
+  }
+  getResourceDataLastAbortController = abortController;
   const data = await callAdminForthApi({
     path: '/get_resource_data',
     method: 'POST',
@@ -21,7 +26,8 @@ export async function getList(resource: AdminForthResourceCommon, isPageLoaded:
       offset: ((page || 1) - 1) * pageSize,
       filters: filters,
       sort: sort,
-    }
+    },
+    abortSignal: abortController.signal
   });
   if (data.error) {
     showErrorTost(data.error);

package/dist/spa/src/utils/utils.ts

@@ -1,6 +1,6 @@
 import { nextTick, onMounted, ref, resolveComponent } from 'vue';
 import type { CoreConfig } from '../spa_types/core';
-import type { ValidationObject } from '../types/Common.js';
+import type { AdminForthComponentDeclaration, AdminForthComponentDeclarationFull, ValidationObject } from '../types/Common.js';
 import router from "../router";
 import { useCoreStore } from '../stores/core';
 import { useUserStore } from '../stores/user';
@@ -19,11 +19,12 @@ const LS_LANG_KEY = `afLanguage`;
 const MAX_CONSECUTIVE_EMPTY_RESULTS = 2;
 const ITEMS_PER_PAGE_LIMIT = 100;
 
-export async function callApi({path, method, body, headers, silentError = false}: {
+export async function callApi({path, method, body, headers, silentError = false, abortSignal}: {
   path: string, method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' 
   body?: any
   headers?: Record<string, string>
   silentError?: boolean
+  abortSignal?: AbortSignal
 }): Promise<any> {
   const t = i18nInstance?.global.t || ((s: string) => s)
   const options = {
@@ -34,6 +35,7 @@ export async function callApi({path, method, body, headers, silentError = false}
       ...headers
     },
     body: JSON.stringify(body),
+    signal: abortSignal
   };
   const fullPath = `${import.meta.env.VITE_ADMINFORTH_PUBLIC_PATH || ''}${path}`;
   try {
@@ -68,28 +70,45 @@ export async function callApi({path, method, body, headers, silentError = false}
       return null;
     }
 
-    if (!silentError) {
+    if (!silentError && !(e instanceof DOMException && e.name === 'AbortError')) {
       adminforth.alert({variant:'danger', message: t('Something went wrong, please try again later'),})
     }
     console.error(`error in callApi ${path}`, e);
   }
 }
 
-export async function callAdminForthApi({ path, method, body=undefined, headers=undefined, silentError = false }: {
-  path: string,
-  method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH',
-  body?: any,
-  headers?: Record<string, string>,
-  silentError?: boolean
+export async function callAdminForthApi(
+  { 
+    path, 
+    method, 
+    body=undefined, 
+    headers=undefined, 
+    silentError = false,
+    abortSignal = undefined
+  }: {
+    path: string,
+    method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH',
+    body?: any,
+    headers?: Record<string, string>,
+    silentError?: boolean,
+    abortSignal?: AbortSignal
 }): Promise<any> {
   try {
-    return callApi({path: `/adminapi/v1${path}`, method, body, headers, silentError} );
+    return callApi({path: `/adminapi/v1${path}`, method, body, headers, silentError, abortSignal} );
   } catch (e) {
     console.error('error', e);
     return { error: `Unexpected error: ${e}` };
   }
 }
 
+export function formatComponent(component: AdminForthComponentDeclaration): AdminForthComponentDeclarationFull {
+  if (typeof component === 'string') {
+    return { file: component, meta: {} };
+  } else {
+    return { file: component.file, meta: component.meta };
+  }
+}
+
 export function getCustomComponent({ file, meta }: { file: string, meta?: any }) {
   const name = file.replace(/@/g, '').replace(/\./g, '').replace(/\//g, '');
   return resolveComponent(name);
@@ -671,4 +690,162 @@ export async function onBeforeRouteLeaveCreateEditViewGuard(initialValues: any,
       leaveGuardActive.setActive(false);
     }
   });
+}
+
+export async function executeCustomAction({
+  actionId,
+  resourceId,
+  recordId,
+  extra = {},
+  onSuccess,
+  onError,
+  setLoadingState,
+}: {
+  actionId: string | number,
+  resourceId: string,
+  recordId: string | number,
+  extra?: Record<string, any>,
+  onSuccess?: (data: any) => Promise<void>,
+  onError?: (error: string) => void,
+  setLoadingState?: (loading: boolean) => void,
+}): Promise<any> {
+  setLoadingState?.(true);
+
+  try {
+    const data = await callAdminForthApi({
+      path: '/start_custom_action',
+      method: 'POST',
+      body: {
+        resourceId,
+        actionId,
+        recordId,
+        extra: extra || {},
+      }
+    });
+
+    if (data?.redirectUrl) {
+      // Check if the URL should open in a new tab
+      if (data.redirectUrl.includes('target=_blank')) {
+        window.open(data.redirectUrl.replace('&target=_blank', '').replace('?target=_blank', ''), '_blank');
+      } else {
+        // Navigate within the app
+        if (data.redirectUrl.startsWith('http')) {
+          window.location.href = data.redirectUrl;
+        } else {
+          router.push(data.redirectUrl);
+        }
+      }
+      return data;
+    }
+
+    if (data?.ok) {
+      if (onSuccess) {
+        await onSuccess(data);
+      }
+      return data;
+    }
+
+    if (data?.error) {
+      if (onError) {
+        onError(data.error);
+      }
+    }
+
+    return data;
+  } finally {
+    setLoadingState?.(false);
+  }
+}
+
+export async function executeCustomBulkAction({
+  actionId,
+  resourceId,
+  recordIds,
+  extra = {},
+  onSuccess,
+  onError,
+  setLoadingState,
+  confirmMessage,
+}: {
+  actionId: string | number,
+  resourceId: string,
+  recordIds: (string | number)[],
+  extra?: Record<string, any>,
+  onSuccess?: (results: any[]) => Promise<void>,
+  onError?: (error: string) => void,
+  setLoadingState?: (loading: boolean) => void,
+  confirmMessage?: string,
+}): Promise<any> {
+  if (!recordIds || recordIds.length === 0) {
+    if (onError) {
+      onError('No records selected');
+    }
+    return { error: 'No records selected' };
+  }
+
+  if (confirmMessage) {
+    const { confirm } = useAdminforth();
+    const confirmed = await confirm({
+      message: confirmMessage,
+    });
+    if (!confirmed) {
+      return { cancelled: true };
+    }
+  }
+
+  setLoadingState?.(true);
+
+  try {
+    // Execute action for all records in parallel using Promise.all
+    const results = await Promise.all(
+      recordIds.map(recordId =>
+        callAdminForthApi({
+          path: '/start_custom_action',
+          method: 'POST',
+          body: {
+            resourceId,
+            actionId,
+            recordId,
+            extra: extra || {},
+          }
+        })
+      )
+    );
+
+    const lastResult = results[results.length - 1];
+    if (lastResult?.redirectUrl) {
+      if (lastResult.redirectUrl.includes('target=_blank')) {
+        window.open(lastResult.redirectUrl.replace('&target=_blank', '').replace('?target=_blank', ''), '_blank');
+      } else {
+        if (lastResult.redirectUrl.startsWith('http')) {
+          window.location.href = lastResult.redirectUrl;
+        } else {
+          router.push(lastResult.redirectUrl);
+        }
+      }
+      return lastResult;
+    }
+
+    const allSucceeded = results.every(r => r?.ok);
+    const hasErrors = results.some(r => r?.error);
+
+    if (allSucceeded) {
+      if (onSuccess) {
+        await onSuccess(results);
+      }
+      return { ok: true, results };
+    }
+
+    if (hasErrors) {
+      const errorMessages = results.filter(r => r?.error).map(r => r.error).join(', ');
+      if (onError) {
+        onError(errorMessages);
+      }
+      return { error: errorMessages, results };
+    }
+
+    return { results };
+  } finally {
+    setLoadingState?.(false);
+  }
 }

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

@@ -2,8 +2,8 @@
   <div class="relative w-full">
 
     <component 
-      v-for="c in coreStore?.resourceOptions?.pageInjections?.create?.beforeBreadcrumbs || []"
-      :is="getCustomComponent(c)"
+      v-for="c in coreStore?.resourceOptions?.pageInjections?.create?.beforeBreadcrumbs as AdminForthComponentDeclaration[] || []"
+      :is="getCustomComponent(formatComponent(c))"
       :meta="(c as AdminForthComponentDeclarationFull).meta"
       :record="coreStore.record"
       :resource="coreStore.resource"
@@ -13,13 +13,13 @@
     <BreadcrumbsWithButtons>
       <!-- save and cancle -->
       <button @click="() => {cancelButtonClicked = true; $router.back()}"
-        class="af-cancel-button flex items-center py-1 px-3 me-2 text-sm font-medium rounded-default text-lightCreateViewButtonText focus:outline-none bg-lightCreateViewButtonBackground rounded border border-lightCreateViewButtonBorder hover:bg-lightCreateViewButtonBackgroundHover hover:text-lightCreateViewButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightCreateViewButtonFocusRing dark:focus:ring-darkCreateViewButtonFocusRing dark:bg-darkCreateViewButtonBackground dark:text-darkCreateViewButtonText dark:border-darkCreateViewButtonBorder dark:hover:text-darkCreateViewButtonTextHover dark:hover:bg-darkCreateViewButtonBackgroundHover"
+        class="af-cancel-button h-[34px] af-button-shadow flex items-center py-1 px-3 me-2 text-sm font-medium rounded-default text-lightCreateViewButtonText focus:outline-none bg-lightCreateViewButtonBackground rounded border border-lightCreateViewButtonBorder hover:bg-lightCreateViewButtonBackgroundHover hover:text-lightCreateViewButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightCreateViewButtonFocusRing dark:focus:ring-darkCreateViewButtonFocusRing dark:bg-darkCreateViewButtonBackground dark:text-darkCreateViewButtonText dark:border-darkCreateViewButtonBorder dark:hover:text-darkCreateViewButtonTextHover dark:hover:bg-darkCreateViewButtonBackgroundHover"
       >
         {{ $t('Cancel') }}
       </button>
       <button  
         @click="() => saveRecord()"
-        class="af-save-button flex items-center py-1 px-3 text-sm font-medium rounded-default text-lightCreateViewSaveButtonText focus:outline-none bg-lightCreateViewButtonBackground rounded border border-lightCreateViewButtonBorder hover:bg-lightCreateViewButtonBackgroundHover hover:text-lightCreateViewSaveButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightCreateViewButtonFocusRing dark:focus:ring-darkCreateViewButtonFocusRing dark:bg-darkCreateViewButtonBackground dark:text-darkCreateViewSaveButtonText dark:border-darkCreateViewButtonBorder dark:hover:text-darkCreateViewSaveButtonTextHover dark:hover:bg-darkCreateViewButtonBackgroundHover disabled:opacity-50 gap-1"
+        class="af-save-button h-[34px] af-button-shadow flex items-center py-1 px-3 text-sm font-medium rounded-default text-lightCreateViewSaveButtonText focus:outline-none bg-lightCreateViewButtonBackground rounded border border-lightCreateViewButtonBorder hover:bg-lightCreateViewButtonBackgroundHover hover:text-lightCreateViewSaveButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightCreateViewButtonFocusRing dark:focus:ring-darkCreateViewButtonFocusRing dark:bg-darkCreateViewButtonBackground dark:text-darkCreateViewSaveButtonText dark:border-darkCreateViewButtonBorder dark:hover:text-darkCreateViewSaveButtonTextHover dark:hover:bg-darkCreateViewButtonBackgroundHover disabled:opacity-50 gap-1"
         :disabled="saving || (validating && !isValid)"
       > 
         <svg v-if="saving"
@@ -36,8 +36,8 @@
     </BreadcrumbsWithButtons>
 
     <component 
-      v-for="c in coreStore?.resourceOptions?.pageInjections?.create?.afterBreadcrumbs || []"
-      :is="getCustomComponent(c)"
+      v-for="c in coreStore?.resourceOptions?.pageInjections?.create?.afterBreadcrumbs as AdminForthComponentDeclaration[] || []"
+      :is="getCustomComponent(formatComponent(c))"
       :meta="(c as AdminForthComponentDeclarationFull).meta"
       :record="coreStore.record"
       :resource="coreStore.resource"
@@ -61,8 +61,8 @@
     </ResourceForm>
 
     <component 
-      v-for="c in coreStore?.resourceOptions?.pageInjections?.create?.bottom || []"
-      :is="getCustomComponent(c)"
+      v-for="c in coreStore?.resourceOptions?.pageInjections?.create?.bottom as AdminForthComponentDeclaration[] || []"
+      :is="getCustomComponent(formatComponent(c))"
       :meta="(c as AdminForthComponentDeclarationFull).meta"
       :record="coreStore.record"
       :resource="coreStore.resource"
@@ -79,7 +79,7 @@ import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
 import ResourceForm from '@/components/ResourceForm.vue';
 import SingleSkeletLoader from '@/components/SingleSkeletLoader.vue';
 import { useCoreStore } from '@/stores/core';
-import { callAdminForthApi, getCustomComponent,checkAcessByAllowedActions, initThreeDotsDropdown, checkShowIf, compareOldAndNewRecord, onBeforeRouteLeaveCreateEditViewGuard, leaveGuardActiveClass, onBeforeRouteLeaveCreateEditView } from '@/utils';
+import { callAdminForthApi, getCustomComponent,checkAcessByAllowedActions, initThreeDotsDropdown, checkShowIf, compareOldAndNewRecord, onBeforeRouteLeaveCreateEditViewGuard, leaveGuardActiveClass, formatComponent } from '@/utils';
 import { IconFloppyDiskSolid } from '@iconify-prerendered/vue-flowbite';
 import { onMounted, onBeforeMount, onBeforeUnmount, ref, watch, nextTick } from 'vue';
 import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router';
@@ -88,7 +88,7 @@ import { showErrorTost } from '@/composables/useFrontendApi';
 import ThreeDotsMenu from '@/components/ThreeDotsMenu.vue';
 import { useAdminforth } from '@/adminforth';
 import { useI18n } from 'vue-i18n';
-import { type AdminForthComponentDeclarationFull } from '@/types/Common.js';
+import { type AdminForthComponentDeclaration, type AdminForthComponentDeclarationFull } from '@/types/Common.js';
 import type { AdminForthResourceColumn } from '@/types/Back';
 
 const isValid = ref(false);

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

@@ -1,8 +1,8 @@
 <template>
   <div class="relative w-full">
     <component 
-      v-for="c in coreStore?.resourceOptions?.pageInjections?.edit?.beforeBreadcrumbs || []"
-      :is="getCustomComponent(c)"
+      v-for="c in coreStore?.resourceOptions?.pageInjections?.edit?.beforeBreadcrumbs as AdminForthComponentDeclaration[] || []"
+      :is="getCustomComponent(formatComponent(c))"
       :meta="(c as AdminForthComponentDeclarationFull).meta"
       :record="editableRecord"
       :resource="coreStore.resource"
@@ -12,13 +12,13 @@
     <BreadcrumbsWithButtons>
       <!-- save and cancle -->
       <button @click="() => {cancelButtonClicked = true; $router.back()}"
-        class="flex items-center py-1 px-3 me-2 text-sm font-medium text-lightEditViewButtonText  rounded-default focus:outline-none bg-lightEditViewButtonBackground rounded border border-lightEditViewButtonBorder hover:bg-lightEditViewButtonBackgroundHover hover:text-lightEditViewButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightEditViewButtonFocusRing dark:focus:ring-darkEditViewButtonFocusRing dark:bg-darkEditViewButtonBackground dark:text-darkEditViewButtonText dark:border-darkEditViewButtonBorder dark:hover:text-darkEditViewButtonTextHover dark:hover:bg-darkEditViewButtonBackgroundHover"
+        class="flex items-center h-[34px] af-button-shadow py-1 px-3 me-2 text-sm font-medium text-lightEditViewButtonText  rounded-default focus:outline-none bg-lightEditViewButtonBackground rounded border border-lightEditViewButtonBorder hover:bg-lightEditViewButtonBackgroundHover hover:text-lightEditViewButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightEditViewButtonFocusRing dark:focus:ring-darkEditViewButtonFocusRing dark:bg-darkEditViewButtonBackground dark:text-darkEditViewButtonText dark:border-darkEditViewButtonBorder dark:hover:text-darkEditViewButtonTextHover dark:hover:bg-darkEditViewButtonBackgroundHover"
       >
         {{ $t('Cancel') }}
       </button>
       <button
         @click="() => saveRecord()"
-        class="flex items-center py-1 px-3 text-sm font-medium  rounded-default text-lightEditViewSaveButtonText focus:outline-none bg-lightEditViewButtonBackground rounded border border-lightEditViewButtonBorder hover:bg-lightEditViewButtonBackgroundHover hover:text-lightEditViewSaveButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightEditViewButtonFocusRing dark:focus:ring-darkEditViewButtonFocusRing dark:bg-darkEditViewButtonBackground dark:text-darkEditViewSaveButtonText dark:border-darkEditViewButtonBorder dark:hover:text-darkEditViewSaveButtonTextHover dark:hover:bg-darkEditViewButtonBackgroundHover disabled:opacity-50 gap-1"
+        class="flex items-center h-[34px] af-button-shadow py-1 px-3 text-sm font-medium  rounded-default text-lightEditViewSaveButtonText focus:outline-none bg-lightEditViewButtonBackground rounded border border-lightEditViewButtonBorder hover:bg-lightEditViewButtonBackgroundHover hover:text-lightEditViewSaveButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightEditViewButtonFocusRing dark:focus:ring-darkEditViewButtonFocusRing dark:bg-darkEditViewButtonBackground dark:text-darkEditViewSaveButtonText dark:border-darkEditViewButtonBorder dark:hover:text-darkEditViewSaveButtonTextHover dark:hover:bg-darkEditViewButtonBackgroundHover disabled:opacity-50 gap-1"
         :disabled="saving || (validating && !isValid)"
       >
         <IconFloppyDiskSolid class="w-4 h-4" />
@@ -32,8 +32,8 @@
     </BreadcrumbsWithButtons>
 
     <component 
-      v-for="c in coreStore?.resourceOptions?.pageInjections?.edit?.afterBreadcrumbs || []"
-      :is="getCustomComponent(c)"
+      v-for="c in coreStore?.resourceOptions?.pageInjections?.edit?.afterBreadcrumbs as AdminForthComponentDeclaration[] || []"
+      :is="getCustomComponent(formatComponent(c))"
       :meta="(c as AdminForthComponentDeclarationFull).meta"
       :record="coreStore.record"
       :resource="coreStore.resource"
@@ -56,8 +56,8 @@
     </ResourceForm>
 
     <component 
-      v-for="c in coreStore?.resourceOptions?.pageInjections?.edit?.bottom || []"
-      :is="getCustomComponent(c)"
+      v-for="c in coreStore?.resourceOptions?.pageInjections?.edit?.bottom as AdminForthComponentDeclaration[] || []"
+      :is="getCustomComponent(formatComponent(c))"
       :meta="(c as AdminForthComponentDeclarationFull).meta"
       :record="coreStore.record"
       :resource="coreStore.resource"
@@ -82,7 +82,8 @@ import { showErrorTost } from '@/composables/useFrontendApi';
 import ThreeDotsMenu from '@/components/ThreeDotsMenu.vue';
 import { useAdminforth } from '@/adminforth';
 import { useI18n } from 'vue-i18n';
-import { type AdminForthComponentDeclarationFull } from '@/types/Common.js';
+import { formatComponent } from '@/utils';
+import { type AdminForthComponentDeclaration, type AdminForthComponentDeclarationFull } from '@/types/Common.js';
 import type { AdminForthResourceColumn } from '@/types/Back';
 
 const { t } = useI18n();