adminforth 2.4.0-next.7 → 2.4.0-next.71

package/dist/spa/src/utils.ts

@@ -7,8 +7,11 @@ import { useUserStore } from './stores/user';
 import { Dropdown } from 'flowbite';
 import adminforth from './adminforth';
 import sanitizeHtml  from 'sanitize-html'
+import debounce from 'debounce';
 
 const LS_LANG_KEY = `afLanguage`;
+const MAX_CONSECUTIVE_EMPTY_RESULTS = 2;
+const ITEMS_PER_PAGE_LIMIT = 100;
 
 export async function callApi({path, method, body=undefined}: {
   path: string, method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' 
@@ -208,4 +211,210 @@ export function protectAgainstXSS(value: string) {
       'img': [ 'src', 'srcset', 'alt', 'title', 'width', 'height', 'loading' ]
     } 
   });
+}
+
+export function isPolymorphicColumn(column: any): boolean {
+  return !!(column.foreignResource?.polymorphicResources && column.foreignResource.polymorphicResources.length > 0);
+}
+
+export function handleForeignResourcePagination(
+  column: any,
+  items: any[],
+  emptyResultsCount: number = 0,
+  isSearching: boolean = false
+): { hasMore: boolean; emptyResultsCount: number } {
+  const isPolymorphic = isPolymorphicColumn(column);
+  
+  if (isPolymorphic) {
+    if (isSearching) {
+      return {
+        hasMore: items.length > 0,
+        emptyResultsCount: 0
+      };
+    } else {
+      if (items.length === 0) {
+        const newEmptyCount = emptyResultsCount + 1;
+        return {
+          hasMore: newEmptyCount < MAX_CONSECUTIVE_EMPTY_RESULTS, // Stop loading after 2 consecutive empty results
+          emptyResultsCount: newEmptyCount
+        };
+      } else {
+        return {
+          hasMore: true,
+          emptyResultsCount: 0
+        };
+      }
+    }
+  } else {
+    return {
+      hasMore: items.length === ITEMS_PER_PAGE_LIMIT,
+      emptyResultsCount: 0
+    };
+  }
+}
+
+export async function loadMoreForeignOptions({
+  columnName,
+  searchTerm = '',
+  columns,
+  resourceId,
+  columnOptions,
+  columnLoadingState,
+  columnOffsets,
+  columnEmptyResultsCount
+}: {
+  columnName: string;
+  searchTerm?: string;
+  columns: any[];
+  resourceId: string;
+  columnOptions: any;
+  columnLoadingState: any;
+  columnOffsets: any;
+  columnEmptyResultsCount: any;
+}) {
+  const column = columns?.find(c => c.name === columnName);
+  if (!column || !column.foreignResource) return;
+  
+  const state = columnLoadingState[columnName];
+  if (state.loading || !state.hasMore) return;
+  
+  state.loading = true;
+  
+  try {
+    const list = await callAdminForthApi({
+      method: 'POST',
+      path: `/get_resource_foreign_data`,
+      body: {
+        resourceId,
+        column: columnName,
+        limit: 100,
+        offset: columnOffsets[columnName],
+        search: searchTerm,
+      },
+    });
+    
+    if (!list || !Array.isArray(list.items)) {
+      console.warn(`Unexpected API response for column ${columnName}:`, list);
+      state.hasMore = false;
+      return;
+    }
+    
+    if (!columnOptions.value) {
+      columnOptions.value = {};
+    }
+    if (!columnOptions.value[columnName]) {
+      columnOptions.value[columnName] = [];
+    }
+    columnOptions.value[columnName].push(...list.items);
+    
+    columnOffsets[columnName] += 100;
+    
+    const paginationResult = handleForeignResourcePagination(
+      column,
+      list.items,
+      columnEmptyResultsCount[columnName] || 0,
+      false // not searching
+    );
+    
+    columnEmptyResultsCount[columnName] = paginationResult.emptyResultsCount;
+    state.hasMore = paginationResult.hasMore;
+    
+  } catch (error) {
+    console.error('Error loading more options:', error);
+  } finally {
+    state.loading = false;
+  }
+}
+
+export async function searchForeignOptions({
+  columnName,
+  searchTerm,
+  columns,
+  resourceId,
+  columnOptions,
+  columnLoadingState,
+  columnOffsets,
+  columnEmptyResultsCount
+}: {
+  columnName: string;
+  searchTerm: string;
+  columns: any[];
+  resourceId: string;
+  columnOptions: any;
+  columnLoadingState: any;
+  columnOffsets: any;
+  columnEmptyResultsCount: any;
+}) {
+  const column = columns?.find(c => c.name === columnName);
+
+  if (!column || !column.foreignResource || !column.foreignResource.searchableFields) {
+    return;
+  }
+  
+  const state = columnLoadingState[columnName];
+  if (state.loading) return;
+  
+  state.loading = true;
+  
+  try {
+    const list = await callAdminForthApi({
+      method: 'POST',
+      path: `/get_resource_foreign_data`,
+      body: {
+        resourceId,
+        column: columnName,
+        limit: 100,
+        offset: 0,
+        search: searchTerm,
+      },
+    });
+    
+    if (!list || !Array.isArray(list.items)) {
+      console.warn(`Unexpected API response for column ${columnName}:`, list);
+      state.hasMore = false;
+      return;
+    }
+    
+    if (!columnOptions.value) {
+      columnOptions.value = {};
+    }
+    columnOptions.value[columnName] = list.items;
+    columnOffsets[columnName] = 100;
+    
+    const paginationResult = handleForeignResourcePagination(
+      column,
+      list.items,
+      columnEmptyResultsCount[columnName] || 0,
+      true // is searching
+    );
+    
+    columnEmptyResultsCount[columnName] = paginationResult.emptyResultsCount;
+    state.hasMore = paginationResult.hasMore;
+
+  } catch (error) {
+    console.error('Error searching options:', error);
+  } finally {
+    state.loading = false;
+  }
+}
+
+export function createSearchInputHandlers(
+  columns: any[],
+  searchFunction: (columnName: string, searchTerm: string) => void,
+  getDebounceMs?: (column: any) => number
+) {
+  if (!columns) return {};
+
+  return columns.reduce((acc, c) => {
+    if (c.foreignResource && c.foreignResource.searchableFields) {
+      const debounceMs = getDebounceMs ? getDebounceMs(c) : 300;
+      return {
+        ...acc,
+        [c.name]: debounce((searchTerm: string) => {
+          searchFunction(c.name, searchTerm);
+        }, debounceMs),
+      };
+    }
+    return acc;
+  }, {} as Record<string, (searchTerm: string) => void>);
 }

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

@@ -13,14 +13,14 @@
     <BreadcrumbsWithButtons>
       <!-- save and cancle -->
       <button @click="$router.back()"
-        class="flex items-center py-1 px-3 me-2 text-sm font-medium rounded-default 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"
+        class="af-cancel-button flex items-center py-1 px-3 me-2 text-sm font-medium rounded-default 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"
       >
         {{ $t('Cancel') }}
       </button>
 
       <button  
         @click="saveRecord"
-        class="flex items-center py-1 px-3 text-sm font-medium rounded-default text-red-600 focus:outline-none bg-white rounded 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 disabled:opacity-50"
+        class="af-save-button flex items-center py-1 px-3 text-sm font-medium rounded-default text-red-600 focus:outline-none bg-white rounded 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 disabled:opacity-50"
         :disabled="saving || (validating && !isValid)"
       > 
         <svg v-if="saving"
@@ -154,7 +154,7 @@ async function saveRecord() {
       record: record.value,
     },
   });
-  if (response?.error) {
+  if (response?.error && response?.error !== 'Operation aborted by hook') {
     showErrorTost(response.error);
   }
   saving.value = false;

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

@@ -177,7 +177,7 @@ async function saveRecord() {
       record: updates,
     },
   });
-  if (resp.error) {
+  if (resp.error && resp.error !== 'Operation aborted by hook') {
     showErrorTost(resp.error);
   } else {
     adminforth.alert({

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

@@ -74,14 +74,14 @@
 
       <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-create-button 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"
       >
         <IconPlusOutline class="w-4 h-4 me-2"/>
         {{ $t('Create') }}
       </RouterLink>
 
       <button
-        class="flex gap-1 items-center py-1 px-3 me-2 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-filter-button flex gap-1 items-center py-1 px-3 me-2 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"
         @click="()=>{filtersShow = !filtersShow}"
         v-if="coreStore.resource?.options?.allowedActions?.filter"
       >

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

@@ -4,7 +4,7 @@
       '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-modal-content relative bg-white rounded-lg shadow dark:bg-gray-700 dark:shadow-black" >
                 <!-- 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-gray-900 dark:text-white">
                       {{ $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 
+                            <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">
+                        <div class="">
                             <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ $t('Your password') }}</label>
-                            <input 
+                            <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-gray-400 dark:text-gray-300">
+                                  <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" 
@@ -79,7 +92,7 @@
                           :meta="c.meta"
                         />
 
-                        <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">
+                        <div v-if="error" class="af-login-modal-error 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>
@@ -121,7 +134,7 @@ 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';
 
 const { t } = useI18n();
@@ -129,6 +142,8 @@ 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();
@@ -159,28 +174,15 @@ onBeforeMount(() => {
 
 onMounted(async () => {
     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,
     }
   });

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/>

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

@@ -28,21 +28,21 @@
       </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-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"
       >
         <IconPlusOutline class="w-4 h-4 me-2"/>
         {{ $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-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"
       >
         <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-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"
       >
         <IconTrashBinSolid class="w-4 h-4" />
         {{ $t('Delete') }}

package/dist/types/Back.d.ts

@@ -62,14 +62,14 @@ export interface IExpressHttpServer extends IHttpServer {
      * Adds adminUser to request object if user is authorized. Drops request with 401 status if user is not authorized.
      * @param callable : Function which will be called if user is authorized.
      *
-     * Example:
      *
+     * @example
      * ```ts
-     * expressApp.get('/myApi', authorize((req, res) => \{
+     * expressApp.get('/myApi', authorize((req, res) => {
      *  console.log('User is authorized', req.adminUser);
-     *  res.json(\{ message: 'Hello World' \});
-     * \}));
-     * ``
+     *  res.json({ message: 'Hello World' });
+     * }));
+     * ```
      *
      */
     authorize(callable: Function): void;
@@ -315,6 +315,7 @@ export interface IAdminForth {
     }): Promise<{
         error?: string;
         createdRecord?: any;
+        newRecordId?: any;
     }>;
     updateResourceRecord(params: {
         resource: AdminForthResource;
@@ -451,6 +452,7 @@ export type BeforeDataSourceRequestFunction = (params: {
 }) => Promise<{
     ok: boolean;
     error?: string;
+    newRecordId?: string;
 }>;
 /**
  * Modify response to change how data is returned after fetching from database.
@@ -509,7 +511,7 @@ export type BeforeEditSaveFunction = (params: {
     extra?: HttpExtra;
 }) => Promise<{
     ok: boolean;
-    error?: string;
+    error?: string | null;
 }>;
 export type BeforeCreateSaveFunction = (params: {
     resource: AdminForthResource;
@@ -519,7 +521,8 @@ export type BeforeCreateSaveFunction = (params: {
     extra?: HttpExtra;
 }) => Promise<{
     ok: boolean;
-    error?: string;
+    error?: string | null;
+    newRecordId?: string;
 }>;
 export type AfterCreateSaveFunction = (params: {
     resource: AdminForthResource;
@@ -602,6 +605,10 @@ interface AdminForthInputConfigCustomization {
      * Your app name
      */
     brandName?: string;
+    /**
+     * Whether to use single theme for the app
+     */
+    singleTheme?: 'light' | 'dark';
     /**
      * Whether to show brand name in sidebar
      * default is true
@@ -718,6 +725,7 @@ interface AdminForthInputConfigCustomization {
      */
     loginPageInjections?: {
         underInputs?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>;
+        panelHeader?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>;
     };
     /**
      * Custom panel components or array of components which will be displayed in different parts of the admin panel.
@@ -728,6 +736,14 @@ interface AdminForthInputConfigCustomization {
         sidebar?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>;
         everyPageBottom?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>;
     };
+    /**
+    * Allows adding custom elements (e.g., <link>, <script>, <meta>) to the <head> of the HTML document.
+    * Each item must include a tag name and a set of attributes.
+    */
+    customHeadItems?: {
+        tagName: string;
+        attributes: Record<string, string | boolean>;
+    }[];
 }
 export interface AdminForthActionInput {
     name: string;
@@ -884,6 +900,12 @@ export interface AdminForthInputConfig {
          * Default: '1/2'
          */
         loginBackgroundPosition?: 'over' | '1/2' | '1/3' | '2/3' | '3/4' | '2/5' | '3/5';
+        /**
+         * If true, background blend mode will be removed from login background image when position is 'over'
+         *
+         * Default: false
+         */
+        removeBackgroundBlendMode?: boolean;
         /**
          * Function or functions  which will be called before user try to login.
          * Each function will resive User object as an argument
@@ -984,6 +1006,7 @@ export interface AdminForthConfigCustomization extends Omit<AdminForthInputConfi
     customPages: Array<AdminForthPageDeclaration>;
     loginPageInjections: {
         underInputs: Array<AdminForthComponentDeclarationFull>;
+        panelHeader: Array<AdminForthComponentDeclarationFull>;
     };
     globalInjections: {
         userMenu: Array<AdminForthComponentDeclarationFull>;
@@ -991,6 +1014,10 @@ export interface AdminForthConfigCustomization extends Omit<AdminForthInputConfi
         sidebar: Array<AdminForthComponentDeclarationFull>;
         everyPageBottom: Array<AdminForthComponentDeclarationFull>;
     };
+    customHeadItems?: {
+        tagName: string;
+        attributes: Record<string, string | boolean>;
+    }[];
 }
 export interface AdminForthConfig extends Omit<AdminForthInputConfig, 'customization' | 'resources'> {
     baseUrl: string;
@@ -1164,9 +1191,13 @@ export interface AdminForthResource extends Omit<AdminForthResourceInput, 'optio
         };
         create?: {
             /**
+             * Should return `ok: true` to continue saving pipeline and allow creating record in database, and `ok: false` to interrupt pipeline and prevent record creation.
+             * If you need to show error on UI, set `error: \<error message\>` in response.
+             *
              * Typical use-cases:
-             * - Validate record before saving to database and interrupt execution if validation failed (`allowedActions.create` should be preferred in most cases)
-             * - fill-in adminUser as creator of record
+             * - Create record by custom code (return `{ ok: false, newRecordId: <id of created record from custom code> }`)
+             * - Validate record before saving to database and interrupt execution if validation failed (return `{ ok: false, error: <validation error> }`), though `allowedActions.create` should be preferred in most cases
+             * - fill-in adminUser as creator of record (set `record.<some field> = x; return \{ ok: true \}`)
              * - Attach additional data to record before saving to database (mostly fillOnCreate should be used instead)
              */
             beforeSave?: Array<BeforeCreateSaveFunction>;