From 18ce292d898a5629df7a69b09e2f400bde01b871 Mon Sep 17 00:00:00 2001
From: yaroslav8765 <pechorkin2014@gmail.com>
Date: Mon, 6 Oct 2025 17:05:16 +0300
Subject: [PATCH 01/43] fix: remove "npm version patch" from package.json
 template in create plugin command

---
 adminforth/commands/createPlugin/templates/package.json.hbs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/adminforth/commands/createPlugin/templates/package.json.hbs b/adminforth/commands/createPlugin/templates/package.json.hbs
index d46c1e5af..42b3f687f 100644
--- a/adminforth/commands/createPlugin/templates/package.json.hbs
+++ b/adminforth/commands/createPlugin/templates/package.json.hbs
@@ -5,7 +5,7 @@
   "types": "dist/index.d.ts",
   "type": "module",
   "scripts": {
-    "build": "tsc && rsync -av --exclude 'node_modules' custom dist/ && npm version patch"
+    "build": "tsc && rsync -av --exclude 'node_modules' custom dist/"
   },
   "keywords": [],
   "author": "",

From 22d495986e8690d00ec8e1766fa01485091ec1e0 Mon Sep 17 00:00:00 2001
From: yaroslav8765 <pechorkin2014@gmail.com>
Date: Mon, 6 Oct 2025 17:11:11 +0300
Subject: [PATCH 02/43] docs: update example for passkeys in TwoFactorAuth

---
 .../docs/tutorial/07-Plugins/02-TwoFactorsAuth.md           | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/adminforth/documentation/docs/tutorial/07-Plugins/02-TwoFactorsAuth.md b/adminforth/documentation/docs/tutorial/07-Plugins/02-TwoFactorsAuth.md
index ae4454f53..ed0b5e42c 100644
--- a/adminforth/documentation/docs/tutorial/07-Plugins/02-TwoFactorsAuth.md
+++ b/adminforth/documentation/docs/tutorial/07-Plugins/02-TwoFactorsAuth.md
@@ -303,7 +303,7 @@ Now, update the settings of the Two-Factor Authentication plugin:
   plugins: [
     new TwoFactorsAuthPlugin ({ 
       twoFaSecretFieldName: 'secret2fa', 
-      timeStepWindow: 1       
+      timeStepWindow: 1,       
       //diff-add
       passkeys: {
         //diff-add
@@ -317,7 +317,7 @@ Now, update the settings of the Two-Factor Authentication plugin:
         //diff-add
         settings: {
           // diff-add
-          expectedOrigin: "http://localhost:3000",   // important, set it to your backoffice origin (starts from scheme, no slash at the end)
+          expectedOrigin: "http://localhost:3500",   // important, set it to your backoffice origin (starts from scheme, no slash at the end)
           //diff-add
           // relying party config
           //diff-add
@@ -352,7 +352,7 @@ Now, update the settings of the Two-Factor Authentication plugin:
               // diff-add
               // Can be "platform", "cross-platform" or "both"
               // diff-add
-                authenticatorAttachment: "platform",
+                authenticatorAttachment: "both",
                 //diff-add
                 requireResidentKey: true,
                 //diff-add

From 0ca5f6b3bfd4e9a8da33ce7004dc01f60eff1335 Mon Sep 17 00:00:00 2001
From: Ivan Borshchov <ivan@devforth.io>
Date: Mon, 6 Oct 2025 19:25:29 +0000
Subject: [PATCH 03/43] feat: enforce JSON-only content type for mutation
 methods in ExpressServer

---
 adminforth/servers/express.ts | 13 +++++++++++++
 adminforth/spa/src/utils.ts   |  2 +-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/adminforth/servers/express.ts b/adminforth/servers/express.ts
index ac1e70cbb..b8e38b8d1 100644
--- a/adminforth/servers/express.ts
+++ b/adminforth/servers/express.ts
@@ -269,6 +269,19 @@ class ExpressServer implements IExpressHttpServer {
     const fullPath = `${this.adminforth.config.baseUrl}/adminapi/v1${path}`;
 
     const expressHandler = async (req, res) => {
+      // Enforce JSON-only for mutation HTTP methods
+      // AdminForth API endpoints accept only application/json for POST, PUT, PATCH, DELETE
+      // If you need other content types, use a custom server endpoint.
+      const method = (req.method || '').toUpperCase();
+      if (["POST", "PUT", "PATCH", "DELETE"].includes(method)) {
+        const contentTypeHeader = (req.headers?.['content-type'] || '').toString();
+        const isJson = contentTypeHeader.toLowerCase().startsWith('application/json');
+        if (!isJson) {
+          const passed = contentTypeHeader || 'undefined';
+          res.status(415).send(`AdminForth API endpoints support only requests with Content/Type: application/json, when you passed: ${passed}. Please use custom server endpoint if you really need this content type`);
+          return;
+        }
+      }
       let body = req.body || {};
       if (typeof body === 'string') {
         try {
diff --git a/adminforth/spa/src/utils.ts b/adminforth/spa/src/utils.ts
index ba3c1c51a..eef5bf86f 100644
--- a/adminforth/spa/src/utils.ts
+++ b/adminforth/spa/src/utils.ts
@@ -50,7 +50,7 @@ export async function callApi({path, method, body=undefined}: {
 
 export async function callAdminForthApi({ path, method, body=undefined, headers=undefined }: {
   path: string,
-  method: 'GET' | 'POST' | 'PUT' | 'DELETE',
+  method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH',
   body?: any,
   headers?: Record<string, string>
 }): Promise<any> {

From 6406840c01bca96cff68536cdd24979a9807d9ec Mon Sep 17 00:00:00 2001
From: yaroslav8765 <pechorkin2014@gmail.com>
Date: Tue, 7 Oct 2025 08:47:57 +0300
Subject: [PATCH 04/43] fix: adjust margin for settings view template

---
 adminforth/spa/src/views/SettingsView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/adminforth/spa/src/views/SettingsView.vue b/adminforth/spa/src/views/SettingsView.vue
index 704833de9..92e87f3e6 100644
--- a/adminforth/spa/src/views/SettingsView.vue
+++ b/adminforth/spa/src/views/SettingsView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="mt-16 h-full w-full" :class="{ 'hidden': initialTabSet === false }">
+  <div class="mt-20 h-full w-full" :class="{ 'hidden': initialTabSet === false }">
     <div v-if="!coreStore?.config?.settingPages || coreStore?.config?.settingPages.length === 0">
       <p>No setting pages configured or still loading...</p>
     </div>

From 94392f29c0bc4442b3492fc84439df402391b929 Mon Sep 17 00:00:00 2001
From: yaroslav8765 <pechorkin2014@gmail.com>
Date: Tue, 7 Oct 2025 09:41:04 +0300
Subject: [PATCH 05/43] docs: update docs for passkeys

---
 .../tutorial/07-Plugins/02-TwoFactorsAuth.md  | 27 +++++++++++++------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/adminforth/documentation/docs/tutorial/07-Plugins/02-TwoFactorsAuth.md b/adminforth/documentation/docs/tutorial/07-Plugins/02-TwoFactorsAuth.md
index ed0b5e42c..00a7e23ad 100644
--- a/adminforth/documentation/docs/tutorial/07-Plugins/02-TwoFactorsAuth.md
+++ b/adminforth/documentation/docs/tutorial/07-Plugins/02-TwoFactorsAuth.md
@@ -231,15 +231,19 @@ First, you need to create a passkeys table in your schema.prisma file:
 ```ts title='./schema.prisma'
   //diff-add
   model passkeys {
-  //diff-add
-    credential_id           String @id 
-  //diff-add
+    //diff-add
+    id                      String @id
+    //diff-add
+    credential_id           String  
+    //diff-add
     user_id                 String
-  //diff-add
+    //diff-add
     meta                    String
-  //diff-add
+    //diff-add
     @@index([user_id])
-  //diff-add
+    //diff-add
+    @@index([credential_id])
+    //diff-add
   }
 ```
 
@@ -253,7 +257,8 @@ npm run makemigration -- --name add-passkeys ; npm run migrate:local
 Next, you need to create a new resource for passkeys:
 
 ```ts title='./resources/passkeys.ts'
-  import { AdminForthDataTypes, AdminForthResourceInput } from "../../adminforth";
+  import { AdminForthDataTypes, AdminForthResourceInput } from "adminforth";
+  import { randomUUID } from "crypto";
 
   export default {
     dataSource: 'maindb',
@@ -261,10 +266,16 @@ Next, you need to create a new resource for passkeys:
     resourceId: 'passkeys',
     label: 'Passkeys',
     columns: [
+      {
+        name: 'id',
+        label: 'ID',
+        primaryKey: true,
+        showIn: { all: false},
+        fillOnCreate: () => randomUUID(),
+      },
       {
         name: 'credential_id',
         label: 'Credential ID',
-        primaryKey: true,
       },
       {
         name: 'user_id',

From ab84e7cec4b46e148011ba8047fba92a01835e6f Mon Sep 17 00:00:00 2001
From: Ivan Borshchov <ivan@devforth.io>
Date: Tue, 7 Oct 2025 09:53:27 +0000
Subject: [PATCH 06/43] fix: remove sidebarAndHeader meta property from
 settings route

---
 adminforth/spa/src/router/index.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/adminforth/spa/src/router/index.ts b/adminforth/spa/src/router/index.ts
index ef8db651b..fd4d4d796 100644
--- a/adminforth/spa/src/router/index.ts
+++ b/adminforth/spa/src/router/index.ts
@@ -68,7 +68,6 @@ const router = createRouter({
       component: () => import('@/views/SettingsView.vue'),
       meta: { 
         title: 'Settings', 
-        sidebarAndHeader: 'preferIconOnly',
       },
     },
     /* IMPORTANT:ADMINFORTH ROUTES */

From 6244254da1991beef9d798c4f0e7394b45ceffe2 Mon Sep 17 00:00:00 2001
From: yaroslav8765 <pechorkin2014@gmail.com>
Date: Tue, 7 Oct 2025 14:24:23 +0300
Subject: [PATCH 07/43] fix: add cache control headers to get_base_config
 endpoint

---
 adminforth/modules/restApi.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/adminforth/modules/restApi.ts b/adminforth/modules/restApi.ts
index f84b64b29..77b7a6432 100644
--- a/adminforth/modules/restApi.ts
+++ b/adminforth/modules/restApi.ts
@@ -286,7 +286,7 @@ export default class AdminForthRestAPI implements IAdminForthRestAPI {
     server.endpoint({
       method: 'GET',
       path: '/get_base_config',
-      handler: async ({input, adminUser, cookies, tr}): Promise<GetBaseConfigResponse>=> {
+      handler: async ({input, adminUser, cookies, tr, response}): Promise<GetBaseConfigResponse>=> {
         let username = ''
         let userFullName = ''
     
@@ -295,6 +295,11 @@ export default class AdminForthRestAPI implements IAdminForthRestAPI {
           throw new Error('No config.auth defined');
         }
 
+        response.setHeader('Cache-Control', 'no-store, no-cache, must-revalidate, proxy-revalidate');
+        response.setHeader('Pragma', 'no-cache');
+        response.setHeader('Expires', '0');
+        response.setHeader('Surrogate-Control', 'no-store');
+
         const dbUser = adminUser.dbUser;
         username = dbUser[this.adminforth.config.auth.usernameField]; 
         userFullName = dbUser[this.adminforth.config.auth.userFullNameField];

From f3d223a614602fa448a6a5355fc8e280b178b8df Mon Sep 17 00:00:00 2001
From: yaroslav8765 <pechorkin2014@gmail.com>
Date: Tue, 7 Oct 2025 15:12:02 +0300
Subject: [PATCH 08/43] fix: add migration for legacy custom layout to update
 sidebarAndHeader property

---
 adminforth/modules/codeInjector.ts | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/adminforth/modules/codeInjector.ts b/adminforth/modules/codeInjector.ts
index ca38cab80..9b5c0b2e8 100644
--- a/adminforth/modules/codeInjector.ts
+++ b/adminforth/modules/codeInjector.ts
@@ -248,7 +248,12 @@ class CodeInjector implements ICodeInjector {
       }
     }));
   }
-
+  async migrateLegacyCustomLayout(oldMeta) {
+    if (oldMeta.customLayout === true) {
+      oldMeta.sidebarAndHeader = "none";
+    }
+    return oldMeta;
+  }
   async prepareSources() {
     // collects all files and folders into SPA_TMP_DIR
 
@@ -315,14 +320,15 @@ class CodeInjector implements ICodeInjector {
     };
     const registerCustomPages = (config) => {
       if (config.customization.customPages) {
-        config.customization.customPages.forEach((page) => {
+        config.customization.customPages.forEach(async (page) => {
+          const newMeta = await this.migrateLegacyCustomLayout(page?.component?.meta || {});
           routes += `{
             path: '${page.path}',
             name: '${page.path}',
             component: () => import('${page?.component?.file || page.component}'),
             meta: ${
                 JSON.stringify({
-                  ...(page?.component?.meta || {}),
+                  ...newMeta,
                   title: page.meta?.title || page.path.replace('/', '')
                 })
             }

From b42722244d985b8e94921e481ce7f89969408bc2 Mon Sep 17 00:00:00 2001
From: Vitalii Kulyk <vitaliy.kulik2313@gmail.com>
Date: Wed, 8 Oct 2025 16:07:41 +0300
Subject: [PATCH 09/43] fix: update sidebar component styles and adjust widths
 for expanded and collapsed states

---
 adminforth/spa/src/components/Sidebar.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/adminforth/spa/src/components/Sidebar.vue b/adminforth/spa/src/components/Sidebar.vue
index d3fff1be8..2192b75d9 100644
--- a/adminforth/spa/src/components/Sidebar.vue
+++ b/adminforth/spa/src/components/Sidebar.vue
@@ -13,7 +13,7 @@
      }"
     aria-label="Sidebar"
   >
-    <div class="h-full px-3 pb-4 bg-lightSidebar dark:bg-darkSidebar border-r border-lightSidebarBorder dark:border-darkSidebarBorder sidebar-scroll">
+    <div class="h-full px-3 pb-4 bg-lightSidebar dark:bg-darkSidebar border-r border-lightSidebarBorder dark:border-darkSidebarBorder" :class="{'sidebar-scroll':!isSidebarIconOnly || (isSidebarIconOnly && isSidebarHovering)}">
       <div class="af-logo-title-wrapper flex ms-2 relative transition-all duration-300 ease-in-out h-8 items-center" :class="{'my-4 ': isSidebarIconOnly && !isSidebarHovering, 'm-4': !isSidebarIconOnly || (isSidebarIconOnly && isSidebarHovering)}">
         <img v-if="coreStore.config?.showBrandLogoInSidebar !== false && (!iconOnlySidebarEnabled || !isSidebarIconOnly || (isSidebarIconOnly && isSidebarHovering))" :src="loadFile(coreStore.config?.brandLogo || '@/assets/logo.svg')" :alt="`${ coreStore.config?.brandName } Logo`" class="af-logo h-8 me-3"  />
         <img v-if="coreStore.config?.showBrandLogoInSidebar !== false && coreStore.config?.iconOnlySidebar?.logo && iconOnlySidebarEnabled && isSidebarIconOnly && !isSidebarHovering" :src="loadFile(coreStore.config?.iconOnlySidebar?.logo || '')" :alt="`${ coreStore.config?.brandName } Logo`" class="af-sidebar-icon-only-logo h-8 me-3"  />
@@ -188,14 +188,14 @@
 <style lang="scss" scoped>
   /* Sidebar width animations */
   .sidebar-container {
-    width: 16rem; /* Default expanded width (w-64) */
+    width: 16.5rem; /* Default expanded width (w-64) */
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     overflow: hidden; /* Prevent content from showing during animation */
     will-change: width, transform;
   }
   
   .sidebar-collapsed {
-    width: 5rem; /* Collapsed width (w-18) */
+    width: 4.5rem; /* Collapsed width (w-18) */
   }
   
   .sidebar-expanded {

From 90e67bc72b29e8122913761a41a992ba17ff2f64 Mon Sep 17 00:00:00 2001
From: Vitalii Kulyk <vitaliy.kulik2313@gmail.com>
Date: Wed, 8 Oct 2025 16:29:05 +0300
Subject: [PATCH 10/43] fix: adjust sidebar margin for icon-only view in
 App.vue

---
 adminforth/spa/src/App.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/adminforth/spa/src/App.vue b/adminforth/spa/src/App.vue
index cd5f543be..67a6eebde 100644
--- a/adminforth/spa/src/App.vue
+++ b/adminforth/spa/src/App.vue
@@ -83,7 +83,7 @@
 
     <div class="transition-all duration-300 ease-in-out max-w-[100vw]" 
       :class="{
-        'sm:ml-20': isSidebarIconOnly,
+        'sm:ml-18': isSidebarIconOnly,
         'sm:ml-[264px]': !isSidebarIconOnly,
         'sm:max-w-[calc(100%-4.5rem)]': isSidebarIconOnly,
         'sm:max-w-[calc(100%-16rem)]': !isSidebarIconOnly

From d7fc4c04821555a6f0932f0456598c5a4a4ba20e Mon Sep 17 00:00:00 2001
From: yaroslav8765 <pechorkin2014@gmail.com>
Date: Thu, 9 Oct 2025 09:18:02 +0300
Subject: [PATCH 11/43] feat: add ability to style setting button in user menu

---
 adminforth/modules/styles.ts                  | 22 +++++++++++++++++++
 .../src/components/UserMenuSettingsButton.vue | 18 ++++++++-------
 2 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/adminforth/modules/styles.ts b/adminforth/modules/styles.ts
index 62e81b59e..df3ba2bc1 100644
--- a/adminforth/modules/styles.ts
+++ b/adminforth/modules/styles.ts
@@ -346,6 +346,18 @@ export const styles = () => ({
     lightCardTitle: "#374151",
     lightCardDescription: "#6B7280",
 
+    lightUserMenuSettingsButtonBackground: "#FFFFFF",
+    lightUserMenuSettingsButtonBackgroundHover: "#FFFFFF",
+    lightUserMenuSettingsButtonBackgroundExpanded: "#E6E6E6",
+    lightUserMenuSettingsButtonText: "#000000",
+    lightUserMenuSettingsButtonTextHover: "#000000",
+    lightUserMenuSettingsButtonDropdownItemBackground: "#E6E6E6",
+    lightUserMenuSettingsButtonDropdownItemBackgroundHover: "#FFFFFF",
+    lightUserMenuSettingsButtonDropdownItemText: "alias:lightBreadcrumbsHomepageText",
+    lightUserMenuSettingsButtonDropdownItemTextHover: "alias:lightBreadcrumbsHomepageTextHover",
+
+
+
     // colors for dark theme
     darkHtml: "#111827",
 
@@ -689,6 +701,16 @@ export const styles = () => ({
     darkCardTitle: "#FFFFFF", // card title
     darkCardDescription: "#9CA3AF", // card description
 
+    darkUserMenuSettingsButtonBackground: "alias:darkPrimary",
+    darkUserMenuSettingsButtonBackgroundHover: "alias:darkSidebarItemHover",
+    darkUserMenuSettingsButtonBackgroundExpanded: "alias:darkUserMenuSettingsButtonBackgroundHover",
+    darkUserMenuSettingsButtonText: "#FFFFFF",
+    darkUserMenuSettingsButtonTextHover: "#FFFFFF",
+    darkUserMenuSettingsButtonDropdownItemBackground: "alias:darkUserMenuSettingsButtonBackgroundHover",
+    darkUserMenuSettingsButtonDropdownItemBackgroundHover: "#alias:darkUserMenuSettingsButtonBackground",
+    darkUserMenuSettingsButtonDropdownItemText: "#FFFFFF",
+    darkUserMenuSettingsButtonDropdownItemTextHover: "#FFFFFF",
+
   },
   boxShadow: {
     customLight: "0 4px 8px rgba(0, 0, 0, 0.1)", // Lighter shadow
diff --git a/adminforth/spa/src/components/UserMenuSettingsButton.vue b/adminforth/spa/src/components/UserMenuSettingsButton.vue
index aac8a9597..f8b3f4fcb 100644
--- a/adminforth/spa/src/components/UserMenuSettingsButton.vue
+++ b/adminforth/spa/src/components/UserMenuSettingsButton.vue
@@ -1,9 +1,12 @@
 <template>
   <div class="min-w-40">
-    <div class="cursor-pointer flex items-center justify-between 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 
+    <div class="cursor-pointer flex items-center justify-between gap-1 block px-4 py-2 text-sm 
+      bg-lightUserMenuSettingsButtonBackground hover:bg-lightUserMenuSettingsButtonBackgroundHover
+      text-lightUserMenuSettingsButtonText hover:text-lightUserMenuSettingsButtonTextHover
+      dark:bg-darkUserMenuSettingsButtonBackground dark:hover:bg-darkUserMenuSettingsButtonBackgroundHover
+      dark:text-darkUserMenuSettingsButtonText dark:hover:text-darkUserMenuSettingsButtonTextHover
       w-full select-none "
-      :class="{ 'bg-black bg-opacity-10	': showDropdown }"
+      :class="{ 'bg-lightUserMenuSettingsButtonBackgroundExpanded hover:bg-lightUserMenuSettingsButtonBackgroundExpanded dark:bg-darkUserMenuSettingsButtonBackgroundExpanded	hover:dark:bg-darkUserMenuSettingsButtonBackgroundExpanded ': showDropdown }"
       @click="showDropdown = !showDropdown"
     >
         <span>Settings</span>
@@ -15,11 +18,10 @@
     <div v-if="showDropdown" >
       
       <router-link class="cursor-pointer flex items-center gap-1 block px-4 py-1 text-sm 
-        text-black dark:text-darkSidebarTextHover
-        bg-black bg-opacity-10	
-        hover:brightness-110
-        hover:text-lightPrimary dark:hover:text-darkPrimary
-        hover:bg-lightPrimaryContrast dark:hover:bg-darkPrimaryContrast
+        bg-lightUserMenuSettingsButtonDropdownItemBackground hover:bg-lightUserMenuSettingsButtonDropdownItemBackgroundHover
+        text-lightUserMenuSettingsButtonDropdownItemText hover:text-lightUserMenuSettingsButtonDropdownItemTextHover
+        dark:bg-darkUserMenuSettingsButtonDropdownItemBackground dark:hover:bg-darkUserMenuSettingsButtonDropdownItemBackgroundHover
+        dark:text-darkUserMenuSettingsButtonDropdownItemText dark:hover:text-darkUserMenuSettingsButtonDropdownItemTextHover
         w-full text-select-none pl-5 select-none"
         v-for="option in options"
         :to="getRoute(option)"

From 8fcf305d21f189d374877c6203a57fef805d4199 Mon Sep 17 00:00:00 2001
From: Vitalii Kulyk <vitaliy.kulik2313@gmail.com>
Date: Thu, 9 Oct 2025 12:07:30 +0300
Subject: [PATCH 12/43] fix: add right shadow to sidebar

---
 adminforth/spa/src/components/Sidebar.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/adminforth/spa/src/components/Sidebar.vue b/adminforth/spa/src/components/Sidebar.vue
index 2192b75d9..0f9a99e5b 100644
--- a/adminforth/spa/src/components/Sidebar.vue
+++ b/adminforth/spa/src/components/Sidebar.vue
@@ -192,6 +192,12 @@
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     overflow: hidden; /* Prevent content from showing during animation */
     will-change: width, transform;
+    /* Right-side only shadow */
+    box-shadow: 12px 0px 14px -5px rgba(0, 0, 0, 0.25);
+  }
+  :deep(.dark) .sidebar-container {
+    /* Slightly stronger in dark mode */
+    box-shadow: 12px 0px 14px -5px rgba(0, 0, 0, 0.45);
   }
   
   .sidebar-collapsed {

From f20be314ed956c30eb14ad2fa238008bc0530d32 Mon Sep 17 00:00:00 2001
From: Vitalii Kulyk <vitaliy.kulik2313@gmail.com>
Date: Thu, 9 Oct 2025 12:49:11 +0300
Subject: [PATCH 13/43] fix: enhance sidebar shadow styling for improved
 visibility

---
 adminforth/spa/src/components/Sidebar.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/adminforth/spa/src/components/Sidebar.vue b/adminforth/spa/src/components/Sidebar.vue
index 0f9a99e5b..99463225c 100644
--- a/adminforth/spa/src/components/Sidebar.vue
+++ b/adminforth/spa/src/components/Sidebar.vue
@@ -193,11 +193,11 @@
     overflow: hidden; /* Prevent content from showing during animation */
     will-change: width, transform;
     /* Right-side only shadow */
-    box-shadow: 12px 0px 14px -5px rgba(0, 0, 0, 0.25);
+    box-shadow: 12px 0px 18px -8px rgba(0, 0, 0, 0.15);
   }
   :deep(.dark) .sidebar-container {
     /* Slightly stronger in dark mode */
-    box-shadow: 12px 0px 14px -5px rgba(0, 0, 0, 0.45);
+    box-shadow: 12px 0px 18px -8px rgba(0, 0, 0, 0.45);
   }
   
   .sidebar-collapsed {

From 7013a2e4765787d0e9fa1c59443a3afd502a595a Mon Sep 17 00:00:00 2001
From: Vitalii Kulyk <vitaliy.kulik2313@gmail.com>
Date: Thu, 9 Oct 2025 16:44:21 +0300
Subject: [PATCH 14/43] fix: adjust table height for better layout consistency
 in ResourceListTableVirtual component

---
 adminforth/spa/src/components/ResourceListTableVirtual.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/adminforth/spa/src/components/ResourceListTableVirtual.vue b/adminforth/spa/src/components/ResourceListTableVirtual.vue
index 8933f5cfa..53003d208 100644
--- a/adminforth/spa/src/components/ResourceListTableVirtual.vue
+++ b/adminforth/spa/src/components/ResourceListTableVirtual.vue
@@ -14,7 +14,7 @@
             <div class="h-2 bg-lightListSkeletLoader rounded-full dark:bg-darkListSkeletLoader max-w-[360px]"></div>
         </div>      
     </div>
-    <table v-else class=" w-full text-sm text-left rtl:text-right text-lightListTableText dark:text-darkListTableText rounded-default">
+    <table v-else class="h-full w-full text-sm text-left rtl:text-right text-lightListTableText dark:text-darkListTableText rounded-default">
 
       <tbody>
         <!-- table header -->
@@ -74,7 +74,7 @@
           :column-widths="columnWidths"
         />
         
-        <tr v-else-if="rows.length === 0" class="bg-lightListTable dark:bg-darkListTable dark:border-darkListTableBorder">
+        <tr v-else-if="rows.length === 0" class="h-full bg-lightListTable dark:bg-darkListTable dark:border-darkListTableBorder">
           <td :colspan="resource?.columns.length + 2">
 
             <div id="toast-simple"

From 458f5571d332484b35b3f1b8b3bcfcdeefa989c4 Mon Sep 17 00:00:00 2001
From: yaroslav8765 <pechorkin2014@gmail.com>
Date: Thu, 9 Oct 2025 18:12:33 +0300
Subject: [PATCH 15/43] fix: fix database path in .env.sample for dev demo
 setup

---
 dev-demo/.env.sample | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/dev-demo/.env.sample b/dev-demo/.env.sample
index 61944f666..6f2374397 100644
--- a/dev-demo/.env.sample
+++ b/dev-demo/.env.sample
@@ -7,5 +7,5 @@ HEAVY_DEBUG=
 HEAVY_DEBUG_QUERY=
 PORT=3000
 
-DATABASE_FILE=./db.sqlite
+DATABASE_FILE=./.db.sqlite
 DATABASE_FILE_URL=file:${DATABASE_FILE}
\ No newline at end of file

From 10522049c73a9a1a88edfc6d4c3090d8a44998e4 Mon Sep 17 00:00:00 2001
From: yaroslav8765 <pechorkin2014@gmail.com>
Date: Thu, 9 Oct 2025 18:29:51 +0300
Subject: [PATCH 16/43] fix: update SQL play URL in clicks resource
 configuration

---
 dev-demo/resources/clicks.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/dev-demo/resources/clicks.ts b/dev-demo/resources/clicks.ts
index 99f735b0f..98180dee8 100644
--- a/dev-demo/resources/clicks.ts
+++ b/dev-demo/resources/clicks.ts
@@ -5,7 +5,7 @@ export default {
   dataSource: "ch",
   table: "clicks",
   /*
-    SQL to create table run SQL in http://localhost:8123/play
+    SQL to create table run SQL in http://localhost:8124/play
     CREATE TABLE demo.clicks (
       clickid UUID PRIMARY KEY,
       element String,

From 59bc23108809ed8f1e01853423e469fa55226622 Mon Sep 17 00:00:00 2001
From: Vitalii Kulyk <vitaliy.kulik2313@gmail.com>
Date: Fri, 10 Oct 2025 09:57:11 +0300
Subject: [PATCH 17/43] fix: update sidebar shadow styles for collapsed state
 in dark mode

---
 adminforth/spa/src/components/Sidebar.vue | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/adminforth/spa/src/components/Sidebar.vue b/adminforth/spa/src/components/Sidebar.vue
index 99463225c..9b7676a0b 100644
--- a/adminforth/spa/src/components/Sidebar.vue
+++ b/adminforth/spa/src/components/Sidebar.vue
@@ -192,22 +192,21 @@
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     overflow: hidden; /* Prevent content from showing during animation */
     will-change: width, transform;
-    /* Right-side only shadow */
-    box-shadow: 12px 0px 18px -8px rgba(0, 0, 0, 0.15);
-  }
-  :deep(.dark) .sidebar-container {
-    /* Slightly stronger in dark mode */
-    box-shadow: 12px 0px 18px -8px rgba(0, 0, 0, 0.45);
   }
   
   .sidebar-collapsed {
     width: 4.5rem; /* Collapsed width (w-18) */
+    box-shadow: 12px 0px 18px -8px rgba(0, 0, 0, 0.15);
   }
   
   .sidebar-expanded {
     width: 16.5rem; /* Expanded width (w-64) */
   }
 
+  :deep(.dark) .sidebar-collapsed {
+    box-shadow: 12px 0px 18px -8px rgba(0, 0, 0, 0.45);
+  }
+
   /* Text visibility transitions */
   .sidebar-collapsed .af-title {
     opacity: 0;

From 4407eb356a0cf408c1e672009ea5802a2ab3f291 Mon Sep 17 00:00:00 2001
From: yaroslav8765 <pechorkin2014@gmail.com>
Date: Fri, 10 Oct 2025 10:50:53 +0300
Subject: [PATCH 18/43] docs: update docs for the insequreRawSql example

---
 .../03-Customization/03-virtualColumns.md     |   2 +-
 dev-demo/package-lock.json                    | 142 ++++++++++++++++++
 dev-demo/package.json                         |   2 +
 3 files changed, 145 insertions(+), 1 deletion(-)

diff --git a/adminforth/documentation/docs/tutorial/03-Customization/03-virtualColumns.md b/adminforth/documentation/docs/tutorial/03-Customization/03-virtualColumns.md
index e6fa5adb6..d3bd96c5b 100644
--- a/adminforth/documentation/docs/tutorial/03-Customization/03-virtualColumns.md
+++ b/adminforth/documentation/docs/tutorial/03-Customization/03-virtualColumns.md
@@ -163,7 +163,7 @@ import sqlstring from 'sqlstring';
       if (filter.field === 'some_json_b_field') {
         return {
           // check if some_json_b_field->'$.some_field' is equal to filter.value
-          insecureRawSQL: `some_json_b_field->'$.some_field' = ${sqlstring.escape(filter.value)}`,
+          insecureRawSQL: `some_json_b_field->>'$.some_field' = ${sqlstring.escape(filter.value)}`,
         }
       }
 
diff --git a/dev-demo/package-lock.json b/dev-demo/package-lock.json
index b81f01e5d..63c5aba4f 100644
--- a/dev-demo/package-lock.json
+++ b/dev-demo/package-lock.json
@@ -12,7 +12,9 @@
         "@prisma/client": "^5.22.0",
         "better-sqlite3": "^10.1.0",
         "express": "^4.21.0",
+        "pg": "^8.16.3",
         "random-words": "^2.0.1",
+        "sqlstring": "^2.3.3",
         "uuid": "^9.0.1"
       },
       "devDependencies": {
@@ -1705,6 +1707,87 @@
       "integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==",
       "license": "MIT"
     },
+    "node_modules/pg": {
+      "version": "8.16.3",
+      "resolved": "https://registry.npmjs.org/pg/-/pg-8.16.3.tgz",
+      "integrity": "sha512-enxc1h0jA/aq5oSDMvqyW3q89ra6XIIDZgCX9vkMrnz5DFTw/Ny3Li2lFQ+pt3L6MCgm/5o2o8HW9hiJji+xvw==",
+      "dependencies": {
+        "pg-connection-string": "^2.9.1",
+        "pg-pool": "^3.10.1",
+        "pg-protocol": "^1.10.3",
+        "pg-types": "2.2.0",
+        "pgpass": "1.0.5"
+      },
+      "engines": {
+        "node": ">= 16.0.0"
+      },
+      "optionalDependencies": {
+        "pg-cloudflare": "^1.2.7"
+      },
+      "peerDependencies": {
+        "pg-native": ">=3.0.1"
+      },
+      "peerDependenciesMeta": {
+        "pg-native": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pg-cloudflare": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/pg-cloudflare/-/pg-cloudflare-1.2.7.tgz",
+      "integrity": "sha512-YgCtzMH0ptvZJslLM1ffsY4EuGaU0cx4XSdXLRFae8bPP4dS5xL1tNB3k2o/N64cHJpwU7dxKli/nZ2lUa5fLg==",
+      "optional": true
+    },
+    "node_modules/pg-connection-string": {
+      "version": "2.9.1",
+      "resolved": "https://registry.npmjs.org/pg-connection-string/-/pg-connection-string-2.9.1.tgz",
+      "integrity": "sha512-nkc6NpDcvPVpZXxrreI/FOtX3XemeLl8E0qFr6F2Lrm/I8WOnaWNhIPK2Z7OHpw7gh5XJThi6j6ppgNoaT1w4w=="
+    },
+    "node_modules/pg-int8": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/pg-int8/-/pg-int8-1.0.1.tgz",
+      "integrity": "sha512-WCtabS6t3c8SkpDBUlb1kjOs7l66xsGdKpIPZsg4wR+B3+u9UAum2odSsF9tnvxg80h4ZxLWMy4pRjOsFIqQpw==",
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/pg-pool": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/pg-pool/-/pg-pool-3.10.1.tgz",
+      "integrity": "sha512-Tu8jMlcX+9d8+QVzKIvM/uJtp07PKr82IUOYEphaWcoBhIYkoHpLXN3qO59nAI11ripznDsEzEv8nUxBVWajGg==",
+      "peerDependencies": {
+        "pg": ">=8.0"
+      }
+    },
+    "node_modules/pg-protocol": {
+      "version": "1.10.3",
+      "resolved": "https://registry.npmjs.org/pg-protocol/-/pg-protocol-1.10.3.tgz",
+      "integrity": "sha512-6DIBgBQaTKDJyxnXaLiLR8wBpQQcGWuAESkRBX/t6OwA8YsqP+iVSiond2EDy6Y/dsGk8rh/jtax3js5NeV7JQ=="
+    },
+    "node_modules/pg-types": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/pg-types/-/pg-types-2.2.0.tgz",
+      "integrity": "sha512-qTAAlrEsl8s4OiEQY69wDvcMIdQN6wdz5ojQiOy6YRMuynxenON0O5oCpJI6lshc6scgAY8qvJ2On/p+CXY0GA==",
+      "dependencies": {
+        "pg-int8": "1.0.1",
+        "postgres-array": "~2.0.0",
+        "postgres-bytea": "~1.0.0",
+        "postgres-date": "~1.0.4",
+        "postgres-interval": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/pgpass": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/pgpass/-/pgpass-1.0.5.tgz",
+      "integrity": "sha512-FdW9r/jQZhSeohs1Z3sI1yxFQNFvMcnmfuj4WBMUTxOrAyLMaTcE1aAMBiTlbMNaXvBCQuVi0R7hd8udDSP7ug==",
+      "dependencies": {
+        "split2": "^4.1.0"
+      }
+    },
     "node_modules/picomatch": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
@@ -1718,6 +1801,41 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/postgres-array": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postgres-array/-/postgres-array-2.0.0.tgz",
+      "integrity": "sha512-VpZrUqU5A69eQyW2c5CA1jtLecCsN2U/bD6VilrFDWq5+5UIEVO7nazS3TEcHf1zuPYO/sqGvUvW62g86RXZuA==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postgres-bytea": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/postgres-bytea/-/postgres-bytea-1.0.0.tgz",
+      "integrity": "sha512-xy3pmLuQqRBZBXDULy7KbaitYqLcmxigw14Q5sj8QBVLqEwXfeybIKVWiqAXTlcvdvb0+xkOtDbfQMOf4lST1w==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postgres-date": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/postgres-date/-/postgres-date-1.0.7.tgz",
+      "integrity": "sha512-suDmjLVQg78nMK2UZ454hAG+OAW+HQPZ6n++TNDUX+L0+uUlLywnoxJKDou51Zm+zTCjrCl0Nq6J9C5hP9vK/Q==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postgres-interval": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/postgres-interval/-/postgres-interval-1.2.0.tgz",
+      "integrity": "sha512-9ZhXKM/rw350N1ovuWHbGxnGh/SNJ4cnxHiM0rxE4VN41wsg8P8zWn9hv/buK00RP4WvlOyr/RBDiptyxVbkZQ==",
+      "dependencies": {
+        "xtend": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/prebuild-install": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.3.tgz",
@@ -2125,6 +2243,22 @@
         "simple-concat": "^1.0.0"
       }
     },
+    "node_modules/split2": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/split2/-/split2-4.2.0.tgz",
+      "integrity": "sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==",
+      "engines": {
+        "node": ">= 10.x"
+      }
+    },
+    "node_modules/sqlstring": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/sqlstring/-/sqlstring-2.3.3.tgz",
+      "integrity": "sha512-qC9iz2FlN7DQl3+wjwn3802RTyjCx7sDvfQEXchwa6CWOx07/WVfh91gBmQ9fahw8snwGEWU3xGzOt4tFyHLxg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/statuses": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
@@ -2325,6 +2459,14 @@
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
       "license": "ISC"
+    },
+    "node_modules/xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+      "engines": {
+        "node": ">=0.4"
+      }
     }
   }
 }
diff --git a/dev-demo/package.json b/dev-demo/package.json
index f34233f13..4c15da729 100644
--- a/dev-demo/package.json
+++ b/dev-demo/package.json
@@ -18,7 +18,9 @@
     "@prisma/client": "^5.22.0",
     "better-sqlite3": "^10.1.0",
     "express": "^4.21.0",
+    "pg": "^8.16.3",
     "random-words": "^2.0.1",
+    "sqlstring": "^2.3.3",
     "uuid": "^9.0.1"
   },
   "devDependencies": {

From 39c66fa1053611056006db23bb66ef9e38e42f4a Mon Sep 17 00:00:00 2001
From: yaroslav8765 <pechorkin2014@gmail.com>
Date: Fri, 10 Oct 2025 11:05:43 +0300
Subject: [PATCH 19/43] chore: edit comments for the customHeadItems, so i
 won't break building of docusaurus build

---
 adminforth/types/Back.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/adminforth/types/Back.ts b/adminforth/types/Back.ts
index 4eef92040..ef4256d34 100644
--- a/adminforth/types/Back.ts
+++ b/adminforth/types/Back.ts
@@ -809,7 +809,7 @@ interface AdminForthInputConfigCustomization {
   }
 
   /**
-  * Allows adding custom elements (e.g., <link>, <script>, <meta>) to the <head> of the HTML document.
+  * Allows adding custom elements (e.g., &lt;link&gt;, &lt;script&gt;, &lt;meta&gt;) to the &lt;head&gt; of the HTML document.
   * Each item must include a tag name and a set of attributes.
   */
   customHeadItems?: {

From f865470bb5c22df20cc65f44c367171dd58c7c4f Mon Sep 17 00:00:00 2001
From: yaroslav8765 <pechorkin2014@gmail.com>
Date: Fri, 10 Oct 2025 14:37:47 +0300
Subject: [PATCH 20/43] feat: move login error message to the bottom of
 authentication modal

---
 adminforth/spa/src/views/LoginView.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/adminforth/spa/src/views/LoginView.vue b/adminforth/spa/src/views/LoginView.vue
index 70794bb57..a56e99ab1 100644
--- a/adminforth/spa/src/views/LoginView.vue
+++ b/adminforth/spa/src/views/LoginView.vue
@@ -92,8 +92,6 @@
                           :meta="c.meta"
                           @update:disableLoginButton="setDisableLoginButton($event)"
                         />
-
-                        <ErrorMessage :error="error" />
                         
                         <div v-if="loginPromptHTML"
                           class="flex items-center p-4 mb-4 text-sm text-lightLoginViewPromptText rounded-lg bg-lightLoginViewPromptBackground dark:bg-darkLoginViewPromptBackground dark:text-darkLoginViewPromptText" role="alert"
@@ -108,9 +106,10 @@
                           {{ $t('Login to your account') }}
                         </Button>
                     </form>
-
                 </div>
+                <ErrorMessage v-if="error" :error="error" class="rounded-t-none mb-0 w-full" />
             </div>
+            <div v-if="!error" class="h-[52px]"/>
         </div>
     </div> 
 

From ce6d14fb17b7effa87c6fe060ec583d4a33bda2c Mon Sep 17 00:00:00 2001
From: yaroslav8765 <pechorkin2014@gmail.com>
Date: Fri, 10 Oct 2025 14:46:52 +0300
Subject: [PATCH 21/43] fix: fix login error message positioning

---
 adminforth/spa/src/views/LoginView.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/adminforth/spa/src/views/LoginView.vue b/adminforth/spa/src/views/LoginView.vue
index a56e99ab1..b55ebf040 100644
--- a/adminforth/spa/src/views/LoginView.vue
+++ b/adminforth/spa/src/views/LoginView.vue
@@ -27,7 +27,7 @@
       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="af-login-modal-content relative bg-lightLoginViewBackground rounded-lg shadow dark:bg-darkLoginViewBackground dark:shadow-black" >
+            <div class="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="af-login-modal-header flex items-center justify-between flex-col p-4 md:p-5 border-b rounded-t dark:border-gray-600">
 
@@ -107,9 +107,8 @@
                         </Button>
                     </form>
                 </div>
-                <ErrorMessage v-if="error" :error="error" class="rounded-t-none mb-0 w-full" />
             </div>
-            <div v-if="!error" class="h-[52px]"/>
+            <ErrorMessage v-if="error" :error="error" class="absolute left-4 right-4 rounded-t-none mb-0 shadow px-8" />
         </div>
     </div> 
 

From 0a9c3f5aaf9a602ae7a6310ba090e544f043f232 Mon Sep 17 00:00:00 2001
From: yaroslav8765 <pechorkin2014@gmail.com>
Date: Fri, 10 Oct 2025 14:53:58 +0300
Subject: [PATCH 22/43] fix: fix padding for the login error message

---
 adminforth/spa/src/views/LoginView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/adminforth/spa/src/views/LoginView.vue b/adminforth/spa/src/views/LoginView.vue
index b55ebf040..8b0b5ad4c 100644
--- a/adminforth/spa/src/views/LoginView.vue
+++ b/adminforth/spa/src/views/LoginView.vue
@@ -108,7 +108,7 @@
                     </form>
                 </div>
             </div>
-            <ErrorMessage v-if="error" :error="error" class="absolute left-4 right-4 rounded-t-none mb-0 shadow px-8" />
+            <ErrorMessage v-if="error" :error="error" class="absolute left-4 right-4 rounded-t-none mb-0 shadow px-9" />
         </div>
     </div> 
 

From 6abacc3d3da6f2a85d8de7c2006ff1a0c8ac1aa3 Mon Sep 17 00:00:00 2001
From: Ivan Borshchov <ivan@devforth.io>
Date: Fri, 10 Oct 2025 21:55:10 +0000
Subject: [PATCH 23/43] fix: correct formatting of adapter list in
 install-adapters.sh

---
 adapters/install-adapters.sh | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/adapters/install-adapters.sh b/adapters/install-adapters.sh
index 9fe020066..8fd135ddc 100644
--- a/adapters/install-adapters.sh
+++ b/adapters/install-adapters.sh
@@ -1,8 +1,8 @@
 #!/usr/bin/env bash
 ADAPTERS="adminforth-completion-adapter-open-ai-chat-gpt adminforth-email-adapter-aws-ses \
 adminforth-email-adapter-mailgun adminforth-google-oauth-adapter adminforth-github-oauth-adapter \
-adminforth-facebook-oauth-adapter adminforth-keycloak-oauth-adapter adminforth-microsoft-oauth-adapter \ 
-adminforth-twitch-oauth-adapter adminforth-image-generation-adapter-openai adminforth-storage-adapter-amazon-s3 \ 
+adminforth-facebook-oauth-adapter adminforth-keycloak-oauth-adapter adminforth-microsoft-oauth-adapter \
+adminforth-twitch-oauth-adapter adminforth-image-generation-adapter-openai adminforth-storage-adapter-amazon-s3 \
 adminforth-storage-adapter-local adminforth-image-vision-adapter-openai adminforth-key-value-adapter-ram \
 adminforth-login-captcha-adapter-cloudflare adminforth-login-captcha-adapter-recaptcha"
 

From 6d4775c7f5a75f0f380f63b691deaf6de83ba078 Mon Sep 17 00:00:00 2001
From: yaroslav8765 <pechorkin2014@gmail.com>
Date: Mon, 13 Oct 2025 08:49:17 +0300
Subject: [PATCH 24/43] docs: add raw SQL usage example

---
 .../tutorial/03-Customization/11-dataApi.md   | 33 +++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/adminforth/documentation/docs/tutorial/03-Customization/11-dataApi.md b/adminforth/documentation/docs/tutorial/03-Customization/11-dataApi.md
index d7a370f60..3ed6c92f2 100644
--- a/adminforth/documentation/docs/tutorial/03-Customization/11-dataApi.md
+++ b/adminforth/documentation/docs/tutorial/03-Customization/11-dataApi.md
@@ -123,6 +123,39 @@ const users = await admin.resource('adminuser').list(
 );
 ```
 
+## Using a raw SQL in queries.
+
+Rarely you might want to add ciondition for some exotic SQL but still want to keep the rest of API.
+Technically it happened that AdminForth allows you to do this also
+
+```js
+const minUgcAge = 18;
+const usersWithNoUgcAccess = await admin.resource('adminuser').list(
+  [
+    Filters.NEQ('role', 'Admin'), 
+    {
+       insecureRawSQL: `(user_meta->>'age') < ${sqlstring.escape(minUgcAge)}`
+    }
+
+  ], 15, 0, Sorts.DESC('createdAt')
+);
+
+This will produce next SQL query:
+```
+
+```
+SELECT *
+FROM "adminuser"
+WHERE "role" != 'Admin'
+  AND (user_meta->>'age') < 18
+ORDER BY "createdAt" DESC
+LIMIT 15 OFFSET 0;
+
+```
+
+
+Finds users with age less then 18 from meta field which should be a JSONB field in Postgress.
+
 ## Create a new item in database
 
 Signature:

From 7b9dcd29d4de04c97b6293850076f0857e1cf5a6 Mon Sep 17 00:00:00 2001
From: yaroslav8765 <pechorkin2014@gmail.com>
Date: Mon, 13 Oct 2025 09:31:58 +0300
Subject: [PATCH 25/43] fix: refactor model generation for generate-models
 command to use callTsProxy

---
 adminforth/commands/generateModels.js | 40 +++++++++++++++++----------
 1 file changed, 26 insertions(+), 14 deletions(-)

diff --git a/adminforth/commands/generateModels.js b/adminforth/commands/generateModels.js
index f6ad2637a..018c67cd2 100755
--- a/adminforth/commands/generateModels.js
+++ b/adminforth/commands/generateModels.js
@@ -2,6 +2,7 @@ import fs from "fs";
 import path from "path";
 import { toPascalCase, mapToTypeScriptType, getInstance } from "./utils.js";
 import dotenv from "dotenv";
+import { callTsProxy } from "./callTsProxy.js";
 
 const envFileArg = process.argv.find((arg) => arg.startsWith("--env-file="));
 const envFilePath = envFileArg ? envFileArg.split("=")[1] : ".env";
@@ -25,28 +26,40 @@ async function generateModels() {
   let modelContent = "// Generated model file\n\n";
   const files = fs.readdirSync(currentDirectory);
   let instanceFound = false;
-
   for (const file of files) {
     if (file.endsWith(".js") || file.endsWith(".ts")) {
       const instance = await getInstance(file, currentDirectory);
       if (instance) {
         await instance.discoverDatabases();
         instanceFound = true;
-        instance.config.resources.forEach((resource) => {
+        for (const resource of instance.config.resources) {
           if (resource.columns) {
-            modelContent += `export type ${toPascalCase(
-              resource.resourceId
-            )} = {\n`;
-            resource.columns.forEach((column) => {
-              if (column.name && column.type) {
-                modelContent += `  ${column.name}: ${mapToTypeScriptType(
-                  column.type
-                )};\n`;
+            const typeName = toPascalCase(resource.resourceId);
+
+            const tsCode = `
+              export async function exec() {
+                const columns = ${JSON.stringify(resource.columns)};
+                const typeName = "${typeName}";
+                function mapToTypeScriptType(type) {
+                  const map = { "int": "number", "varchar": "string", "boolean": "boolean" };
+                  return map[type] || "any";
+                }
+
+                let typeStr = \`export type \${typeName} = {\\n\`;
+                for (const col of columns) {
+                  if (col.name && col.type) {
+                    typeStr += \`  \${col.name}: \${mapToTypeScriptType(col.type)};\\n\`;
+                  }
+                }
+                typeStr += "}\\n\\n";
+                return typeStr;
               }
-            });
-            modelContent += `}\n\n`;
+            `;
+
+            const result = await callTsProxy(tsCode);
+            modelContent += result;
           }
-        });
+        };
       }
     }
   }
@@ -55,7 +68,6 @@ async function generateModels() {
     console.error("Error: No valid instance found to generate models.");
     return;
   }
-
   fs.writeFileSync(modelFilePath, modelContent, "utf-8");
   console.log(`Generated TypeScript model file: ${modelFilePath}`);
   return true;

From ed136dd3ec075879a99a574b497e7ef9540b199a Mon Sep 17 00:00:00 2001
From: yaroslav8765 <pechorkin2014@gmail.com>
Date: Mon, 13 Oct 2025 09:53:27 +0300
Subject: [PATCH 26/43] fix: teleport tooltip to body

---
 adminforth/spa/src/afcl/Tooltip.vue | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/adminforth/spa/src/afcl/Tooltip.vue b/adminforth/spa/src/afcl/Tooltip.vue
index 1a3b83c68..4bb20bcc0 100644
--- a/adminforth/spa/src/afcl/Tooltip.vue
+++ b/adminforth/spa/src/afcl/Tooltip.vue
@@ -2,14 +2,16 @@
   <div ref="triggerEl" class="afcl-tooltip inline-flex items-center">
       <slot></slot>
   </div>
-  <div
-    role="tooltip"
-    class="absolute z-20 invisible inline-block px-3 py-2 text-sm font-medium text-lightTooltipText dark:darkTooltipText transition-opacity duration-300 bg-lightTooltipBackground rounded-lg shadow-sm opacity-0 tooltip dark:bg-darkTooltipBackground"
-    ref="tooltip"
-  >
-    <slot name="tooltip"></slot>
-    <div class="tooltip-arrow" data-popper-arrow></div>
-  </div>
+  <teleport to="body">
+    <div
+      role="tooltip"
+      class="absolute z-20 invisible inline-block px-3 py-2 text-sm font-medium text-lightTooltipText dark:darkTooltipText transition-opacity duration-300 bg-lightTooltipBackground rounded-lg shadow-sm opacity-0 tooltip dark:bg-darkTooltipBackground"
+      ref="tooltip"
+    >
+      <slot name="tooltip"></slot>
+      <div class="tooltip-arrow" data-popper-arrow></div>
+    </div>
+  </teleport>
 </template>
 
 <script setup lang="ts">

From edcd2bd0df0e3b74b2300f472b58d12a7addf807 Mon Sep 17 00:00:00 2001
From: yaroslav8765 <pechorkin2014@gmail.com>
Date: Mon, 13 Oct 2025 13:20:01 +0300
Subject: [PATCH 27/43] docs: add docs for the 2fa modal

---
 .../tutorial/07-Plugins/02-TwoFactorsAuth.md  | 241 ++++++++++++++++++
 1 file changed, 241 insertions(+)

diff --git a/adminforth/documentation/docs/tutorial/07-Plugins/02-TwoFactorsAuth.md b/adminforth/documentation/docs/tutorial/07-Plugins/02-TwoFactorsAuth.md
index 00a7e23ad..520dd1eaf 100644
--- a/adminforth/documentation/docs/tutorial/07-Plugins/02-TwoFactorsAuth.md
+++ b/adminforth/documentation/docs/tutorial/07-Plugins/02-TwoFactorsAuth.md
@@ -207,6 +207,247 @@ plugins: [
 ...
 ```
 
+## Request 2FA on custom Actions
+
+You might want to to allow to call some custom critical/money related actions with additional 2FA approval. This eliminates risk that user cookies might be stolen by some virous/doorway software after login.
+
+To do it you first need to create custom component which will call `window.adminforthTwoFaModal.getCode(cb?)` frontend API exposed by this plugin. This is awaitable call wich shows 2FA popup and asks user to enter a code.
+
+```ts title='/custom/RequireTwoFaGate.vue'
+<template>
+  <div class="contents" @click.stop.prevent="onClick">
+    <slot />  <!-- render action defgault contend - button/icon -->
+  </div>
+</template>
+
+<script setup lang="ts">
+  const emit = defineEmits<{ (e: 'callAction', payload?: any): void }>();
+  const props = defineProps<{ disabled?: boolean; meta?: Record<string, any> }>();
+
+  async function onClick() {
+    if (props.disabled) return;
+  
+    const verificationResult = await window.adminforthTwoFaModal.get2FaConfirmationResult();  // this will ask user to enter code
+    emit('callAction', { verificationResult }); // then we pass this code to action (from fronted to backend)
+  }
+</script>
+```
+
+Now we need to use code which we got from user on frontend, inside of backend action handler and verify that is is valid and not expired:
+
+```ts title='/adminuser.ts'
+options: {
+  actions: [
+    {
+      name: 'Auto submit',
+      icon: 'flowbite:play-solid',
+      allowed: () => true,
+      action: async ({ recordId, adminUser, adminforth, extra, cookies }) => {
+        //diff-add
+        const verificationResult = extra?.verificationResult
+        //diff-add
+        if (!verificationResult) {
+          //diff-add
+          return { ok: false, error: 'No verification result provided' };
+        //diff-add
+        }
+        //diff-add
+        const t2fa = adminforth.getPluginByClassName<TwoFactorsAuthPlugin>('TwoFactorsAuthPlugin');
+        //diff-add
+        const result = await t2fa.verify(verificationResult, {
+        //diff-add
+          adminUser: adminUser,
+        //diff-add
+          userPk: adminUser.pk,
+        //diff-add
+          cookies: cookies
+        //diff-add
+        });
+
+        //diff-add
+        if (!result?.ok) {
+          //diff-add
+          return { ok: false, error: result?.error ?? 'Provided data is invalid' };
+          //diff-add
+        }
+        //diff-add
+        await adminforth
+        //diff-add
+          .getPluginByClassName<AuditLogPlugin>('AuditLogPlugin')
+          //diff-add
+          .logCustomAction({
+            //diff-add
+            resourceId: 'aparts',
+            //diff-add
+            recordId: null,
+            //diff-add
+            actionId: 'visitedDashboard',
+            //diff-add
+            oldData: null,
+            //diff-add
+            data: { dashboard: 'main' },
+            //diff-add
+            user: adminUser,
+            //diff-add
+          });
+
+          //your critical action logic 
+      
+        return { ok: true, successMessage: 'Auto submitted' };
+      },
+      showIn: { showButton: true, showThreeDotsMenu: true, list: true },
+      //diff-add
+      customComponent: '@@/RequireTwoFaGate.vue',
+    },
+  ],
+}
+```
+
+## Request 2FA from custom components
+
+Imagine you have some button which does some API call
+
+```ts
+<template>
+  <Button @click="callAdminAPI">Call critical API</Button>
+</template>
+  
+
+<script setup lang="ts">
+import { callApi } from '@/utils';
+import adminforth from '@/adminforth';
+
+async function callAdminAPI() {
+  const verificationResult = await window.adminforthTwoFaModal.get2FaConfirmationResult();
+
+  const res = await callApi({
+    path: '/myCriticalAction',
+    method: 'POST',
+    body: { param: 1 },
+  });
+}
+</script>
+```
+
+On backend you have simple express api
+
+```ts
+app.post(`${ADMIN_BASE_URL}/myCriticalAction`,
+  admin.express.authorize(
+    async (req: any, res: any) => {
+
+      // ... your critical logic ...
+
+      return res.json({ ok: true, successMessage: 'Action executed' });
+    }
+  )
+);
+```
+
+You might want to protect this call with a TOTP code. To do it, we need to make this change
+
+```ts
+<template>
+  <Button @click="callAdminAPI">Call critical API</Button>
+</template>
+  
+
+<script setup lang="ts">
+import { callApi } from '@/utils';
+import adminforth from '@/adminforth';
+
+async function callAdminAPI() {
+  const code = await window.adminforthTwoFaModal.getCode();
+
+  // diff-remove
+  const res = await callApi({
+  // diff-remove
+    path: '/myCriticalAction',
+  // diff-remove
+    method: 'POST',
+  // diff-remove
+    body: { param: 1 },
+  // diff-remove
+  });
+
+  // diff-add
+  const res = await callApi({
+  // diff-add
+    path: '/myCriticalAction',
+  // diff-add
+    method: 'POST',
+  // diff-add
+    body: { param: 1, verificationResult: String(verificationResult) },
+  // diff-add
+  });
+
+  // diff-add
+  if (!res?.ok) {
+  // diff-add
+    adminforth.alert({ message: res.error, variant: 'danger' });
+  // diff-add
+  }
+}
+</script>
+
+```
+
+And oin API call we need to verify it:
+
+
+```ts
+app.post(`${ADMIN_BASE_URL}/myCriticalAction`,
+  admin.express.authorize(
+    async (req: any, res: any) => {
+
+      // diff-add
+      const { adminUser } = req;
+      // diff-add
+      const { param, verificationResult } = req.body ?? {};
+      // diff-add
+      const t2fa = admin.getPluginByClassName<TwoFactorsAuthPlugin>('TwoFactorsAuthPlugin');
+      // diff-add
+      const verifyRes = await t2fa.verify(verificationResult, {
+      // diff-add
+        adminUser: adminUser,
+      // diff-add
+        userPk: adminUser.pk,
+      // diff-add
+        cookies: cookies
+      // diff-add
+      });
+      // diff-add
+      if (!('ok' in verifyRes)) {
+      // diff-add
+        return res.status(400).json({ ok: false, error: verifyRes.error || 'Verification failed' });
+      // diff-add
+      }
+      // diff-add
+      await admin.getPluginByClassName<AuditLogPlugin>('AuditLogPlugin').logCustomAction({
+      // diff-add
+        resourceId: 'aparts',
+      // diff-add
+        recordId: null,
+      // diff-add
+        actionId: 'myCriticalAction',
+      // diff-add
+        oldData: null,
+      // diff-add
+        data: { param },
+      // diff-add
+        user: adminUser,
+      // diff-add
+      });
+
+      // ... your critical logic ...
+
+      return res.json({ ok: true, successMessage: 'Action executed' });
+    }
+  )
+);
+```
+
+
 ## Custom label prefix in authenticator app
 
 By default label prefix in Authenticator app is formed from Adminforth [brandName setting](/docs/tutorial/Customization/branding/) which is best behaviour for most admin apps (always remember to configure brandName correctly e.g. "RoyalFinTech Admin") 

From bf124da833f481150410299f8b52bbe0d0e7adb5 Mon Sep 17 00:00:00 2001
From: Ivan Borshchov <ivan@devforth.io>
Date: Mon, 13 Oct 2025 10:46:50 +0000
Subject: [PATCH 28/43] add passkey

---
 dev-demo/index.ts                             |  3 ++
 .../20251013081239_add_passkeys/migration.sql | 13 +++++
 dev-demo/resources/passkeys.ts                | 33 ++++++++++++
 dev-demo/resources/users.ts                   | 52 +++++++++++++++----
 dev-demo/schema.prisma                        |  9 ++++
 5 files changed, 99 insertions(+), 11 deletions(-)
 create mode 100644 dev-demo/migrations/20251013081239_add_passkeys/migration.sql
 create mode 100644 dev-demo/resources/passkeys.ts

diff --git a/dev-demo/index.ts b/dev-demo/index.ts
index 2420cd3d4..21950cebf 100644
--- a/dev-demo/index.ts
+++ b/dev-demo/index.ts
@@ -18,6 +18,8 @@ import apiKeysResource from './resources/api_keys.js';
 import CompletionAdapterOpenAIChatGPT from '../adapters/adminforth-completion-adapter-open-ai-chat-gpt/index.js';
 import pkg from 'pg';
 import I18nPlugin from '../plugins/adminforth-i18n/index.js';
+import passkeysResource from './resources/passkeys.js';
+
 const { Client } = pkg;
 
 
@@ -215,6 +217,7 @@ export const admin = new AdminForth({
     },
   ],
   resources: [
+    passkeysResource,
     clicksResource,
     auditLogResource,
     apartmentsResource,
diff --git a/dev-demo/migrations/20251013081239_add_passkeys/migration.sql b/dev-demo/migrations/20251013081239_add_passkeys/migration.sql
new file mode 100644
index 000000000..b8b358976
--- /dev/null
+++ b/dev-demo/migrations/20251013081239_add_passkeys/migration.sql
@@ -0,0 +1,13 @@
+-- CreateTable
+CREATE TABLE "passkeys" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "credential_id" TEXT NOT NULL,
+    "user_id" TEXT NOT NULL,
+    "meta" TEXT NOT NULL
+);
+
+-- CreateIndex
+CREATE INDEX "passkeys_user_id_idx" ON "passkeys"("user_id");
+
+-- CreateIndex
+CREATE INDEX "passkeys_credential_id_idx" ON "passkeys"("credential_id");
diff --git a/dev-demo/resources/passkeys.ts b/dev-demo/resources/passkeys.ts
new file mode 100644
index 000000000..fa31a9b6f
--- /dev/null
+++ b/dev-demo/resources/passkeys.ts
@@ -0,0 +1,33 @@
+import { AdminForthDataTypes, AdminForthResourceInput } from "../../adminforth";
+  import { randomUUID } from "crypto";
+
+  export default {
+    dataSource: 'maindb',
+    table: 'passkeys',
+    resourceId: 'passkeys',
+    label: 'Passkeys',
+    columns: [
+      {
+        name: 'id',
+        label: 'ID',
+        primaryKey: true,
+        showIn: { all: false},
+        fillOnCreate: () => randomUUID(),
+      },
+      {
+        name: 'credential_id',
+        label: 'Credential ID',
+      },
+      {
+        name: 'user_id',
+        label: 'User ID',
+      },
+      {
+        name: "meta",
+        type: AdminForthDataTypes.JSON,
+        label: "Meta",
+      }
+    ],
+    plugins: [],
+    options: {},
+  } as AdminForthResourceInput;
\ No newline at end of file
diff --git a/dev-demo/resources/users.ts b/dev-demo/resources/users.ts
index 879b9c1ef..1d99d3384 100644
--- a/dev-demo/resources/users.ts
+++ b/dev-demo/resources/users.ts
@@ -74,17 +74,47 @@ export default {
       twoFaSecretFieldName: "secret2fa",
       timeStepWindow: 1, // optional time step window for 2FA
       // optional callback to define which users should be enforced to use 2FA
-      usersFilterToApply: (adminUser: AdminUser) => {
-        if (process.env.NODE_ENV === "development") {
-          return false;
-        }
-        // return true if user should be enforced to use 2FA,
-        // return true;
-        return adminUser.dbUser.email !== "adminforth";
-      },
-      usersFilterToAllowSkipSetup: (adminUser: AdminUser) => {
-        return adminUser.dbUser.email === "adminforth";
-      },
+      // usersFilterToApply: (adminUser: AdminUser) => {
+      //   if (process.env.NODE_ENV === "development") {
+      //     return false;
+      //   }
+      //   // return true if user should be enforced to use 2FA,
+      //   // return true;
+      //   return adminUser.dbUser.email !== "adminforth";
+      // },
+      // usersFilterToAllowSkipSetup: (adminUser: AdminUser) => {
+      //   return adminUser.dbUser.email === "adminforth";
+      // },
+      passkeys: {
+        credentialResourceID: "passkeys",
+        credentialIdFieldName: "credential_id",
+        credentialMetaFieldName: "meta",
+        credentialUserIdFieldName: "user_id",
+        settings: {
+          expectedOrigin: "http://localhost:3000",   // important, set it to your backoffice origin (starts from scheme, no slash at the end)
+          // relying party config
+          rp: {
+              name: "New Reality",
+              
+              // optionaly you can set expected id explicitly if you need to:
+              // id: "localhost",
+            },
+            user: {
+                nameField: "email",
+                displayNameField: "email",
+            },
+            authenticatorSelection: {
+              // impacts a way how passkey will be created
+              // - platform - using browser internal authenticator (e.g. Google Chrome passkey / Google Password Manager )
+              // - cross-platform - using external authenticator (e.g. Yubikey, Google Titan etc)
+              // - both - plging will show both options to the user
+              // Can be "platform", "cross-platform" or "both"
+                authenticatorAttachment: "both",
+                requireResidentKey: true,
+                userVerification: "required",
+            },
+        },
+      } 
     }),
     ...(process.env.AWS_ACCESS_KEY_ID
       ? [
diff --git a/dev-demo/schema.prisma b/dev-demo/schema.prisma
index 62e846d00..f96f7bce5 100644
--- a/dev-demo/schema.prisma
+++ b/dev-demo/schema.prisma
@@ -125,4 +125,13 @@ model api_keys {
     name        String
     owner       String?
     owner_id    String?
+}
+
+model passkeys {
+    id                      String @id
+    credential_id           String  
+    user_id                 String
+    meta                    String
+    @@index([user_id])
+    @@index([credential_id])
 }
\ No newline at end of file

From 73bd03c4cc942c7b2cc9edb8450bd64a14e3b420 Mon Sep 17 00:00:00 2001
From: Ivan Borshchov <ivan@devforth.io>
Date: Mon, 13 Oct 2025 11:20:15 +0000
Subject: [PATCH 29/43] fix: correct typo in documentation for custom SQL
 queries

---
 .../docs/tutorial/03-Customization/03-virtualColumns.md         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/adminforth/documentation/docs/tutorial/03-Customization/03-virtualColumns.md b/adminforth/documentation/docs/tutorial/03-Customization/03-virtualColumns.md
index d3bd96c5b..ee22b5641 100644
--- a/adminforth/documentation/docs/tutorial/03-Customization/03-virtualColumns.md
+++ b/adminforth/documentation/docs/tutorial/03-Customization/03-virtualColumns.md
@@ -142,7 +142,7 @@ This way, when admin selects, for example, "Luxury" option for "Apartment Type"
 
 ### Custom SQL queries with `insecureRawSQL`
 
-Rarely the sec of Filters supported by AdminForth is not enough for your needs.
+Rarely the set of Filters supported by AdminForth is not enough for your needs.
 In this case you can use `insecureRawSQL` to write your own part of where clause.
 
 However the vital concern that the SQL passed to DB as is, so if you substitute any user inputs it will not be escaped and can lead to SQL injection. To miticate the issue we recommend using `sqlstring` package which will escape the inputs for you.

From 81617bafeafc09c1682036cbb4ff7fbd75287bf3 Mon Sep 17 00:00:00 2001
From: Ivan Borshchov <ivan@devforth.io>
Date: Mon, 13 Oct 2025 11:20:42 +0000
Subject: [PATCH 30/43] fix: correct typo in documentation regarding SQL
 injection mitigation

---
 .../docs/tutorial/03-Customization/03-virtualColumns.md         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/adminforth/documentation/docs/tutorial/03-Customization/03-virtualColumns.md b/adminforth/documentation/docs/tutorial/03-Customization/03-virtualColumns.md
index ee22b5641..199036cc9 100644
--- a/adminforth/documentation/docs/tutorial/03-Customization/03-virtualColumns.md
+++ b/adminforth/documentation/docs/tutorial/03-Customization/03-virtualColumns.md
@@ -145,7 +145,7 @@ This way, when admin selects, for example, "Luxury" option for "Apartment Type"
 Rarely the set of Filters supported by AdminForth is not enough for your needs.
 In this case you can use `insecureRawSQL` to write your own part of where clause.
 
-However the vital concern that the SQL passed to DB as is, so if you substitute any user inputs it will not be escaped and can lead to SQL injection. To miticate the issue we recommend using `sqlstring` package which will escape the inputs for you.
+However the vital concern that the SQL passed to DB as is, so if you substitute any user inputs it will not be escaped and can lead to SQL injection. To mitigate the issue we recommend using `sqlstring` package which will escape the inputs for you.
 
 ```bash
 npm i sqlstring

From 3a74ad5a18fdc73d933091a70ef5834c6778abb0 Mon Sep 17 00:00:00 2001
From: yaroslav8765 <pechorkin2014@gmail.com>
Date: Mon, 13 Oct 2025 14:54:56 +0300
Subject: [PATCH 31/43] feat: add prop "closable" to the afcl dialog

---
 adminforth/spa/src/afcl/Dialog.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/adminforth/spa/src/afcl/Dialog.vue b/adminforth/spa/src/afcl/Dialog.vue
index 8ab2cb909..494142458 100644
--- a/adminforth/spa/src/afcl/Dialog.vue
+++ b/adminforth/spa/src/afcl/Dialog.vue
@@ -76,6 +76,7 @@ interface DialogProps {
   clickToCloseOutside?: boolean
   beforeCloseFunction?: (() => void | Promise<void>) | null
   beforeOpenFunction?: (() => void | Promise<void>) | null
+  closable?: boolean
 }
 
 const props = withDefaults(defineProps<DialogProps>(), {
@@ -87,6 +88,7 @@ const props = withDefaults(defineProps<DialogProps>(), {
   clickToCloseOutside: true,
   beforeCloseFunction: null,
   beforeOpenFunction: null,
+  closable: true,
 })
 
 onMounted(async () => {
@@ -95,6 +97,7 @@ onMounted(async () => {
   modal.value = new Modal(
     modalEl.value,
     {
+      closable: props.closable,
       backdrop: props.clickToCloseOutside ? 'dynamic' : 'static',
       onHide: async () => {
         if (props.beforeCloseFunction) {

From 94af857feceda07e4fa379a8c0a37fc13d1ffbfb Mon Sep 17 00:00:00 2001
From: yaroslav8765 <pechorkin2014@gmail.com>
Date: Mon, 13 Oct 2025 17:50:57 +0300
Subject: [PATCH 32/43] fix: remove tooltip from DOM when its hidden

---
 adminforth/spa/src/afcl/Tooltip.vue | 27 +++++++++++++++++----------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/adminforth/spa/src/afcl/Tooltip.vue b/adminforth/spa/src/afcl/Tooltip.vue
index 4bb20bcc0..515efde3b 100644
--- a/adminforth/spa/src/afcl/Tooltip.vue
+++ b/adminforth/spa/src/afcl/Tooltip.vue
@@ -1,8 +1,8 @@
 <template>
-  <div ref="triggerEl" class="afcl-tooltip inline-flex items-center">
+  <div ref="triggerEl" class="afcl-tooltip inline-flex items-center" @mouseenter="mouseOn" @mouseleave="mouseOff">
       <slot></slot>
   </div>
-  <teleport to="body">
+  <teleport to="body" v-if="showTooltip">
     <div
       role="tooltip"
       class="absolute z-20 invisible inline-block px-3 py-2 text-sm font-medium text-lightTooltipText dark:darkTooltipText transition-opacity duration-300 bg-lightTooltipBackground rounded-lg shadow-sm opacity-0 tooltip dark:bg-darkTooltipBackground"
@@ -15,17 +15,20 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, nextTick, onUnmounted, type Ref } from 'vue';
+import { ref, nextTick, type Ref } from 'vue';
 import { Tooltip } from 'flowbite';
 
 const triggerEl = ref(null);
 const tooltip = ref(null);
-
+const showTooltip = ref(false);
 const tp: Ref<Tooltip|null> = ref(null);
 
-onMounted(async () => {
-  //await one tick when all is mounted
+async function mouseOn() {
+  showTooltip.value = true;
   await nextTick();
+
+  tp.value?.destroy();
+
   tp.value = new Tooltip(
     tooltip.value,
     triggerEl.value,
@@ -34,11 +37,15 @@ onMounted(async () => {
       triggerType: 'hover',
     },
   );
-})
 
+  tp.value.show();
+}
 
-onUnmounted(() => {
-  //destroy tooltip
+function mouseOff() {
+  tp.value?.hide();
   tp.value?.destroy();
-})
+  tp.value = null;
+  showTooltip.value = false;
+}
+
 </script>
\ No newline at end of file

From 58efa3ce2c697d8c57fdec43229433da5bfdf4cd Mon Sep 17 00:00:00 2001
From: Ivan Borshchov <ivan@devforth.io>
Date: Tue, 14 Oct 2025 14:44:09 +0300
Subject: [PATCH 33/43] docs: improve 2fa plugin docs

---
 .../docs/tutorial/07-Plugins/02-TwoFactorsAuth.md  | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/adminforth/documentation/docs/tutorial/07-Plugins/02-TwoFactorsAuth.md b/adminforth/documentation/docs/tutorial/07-Plugins/02-TwoFactorsAuth.md
index 520dd1eaf..ceab0bd0f 100644
--- a/adminforth/documentation/docs/tutorial/07-Plugins/02-TwoFactorsAuth.md
+++ b/adminforth/documentation/docs/tutorial/07-Plugins/02-TwoFactorsAuth.md
@@ -209,14 +209,14 @@ plugins: [
 
 ## Request 2FA on custom Actions
 
-You might want to to allow to call some custom critical/money related actions with additional 2FA approval. This eliminates risk that user cookies might be stolen by some virous/doorway software after login.
+You might want to to allow to call some custom critical/money related actions with additional 2FA approval. This eliminates risks caused by user cookies theft by some virous/doorway software after login.
 
-To do it you first need to create custom component which will call `window.adminforthTwoFaModal.getCode(cb?)` frontend API exposed by this plugin. This is awaitable call wich shows 2FA popup and asks user to enter a code.
+To do it, first, create frontend custom component which wraps and intercepts click event to menu item, and in click handler do a call to `window.adminforthTwoFaModal.getCode(cb?)` frontend API exposed by this plugin. This is awaitable call wich shows 2FA popup and asks user to authenticate with 2nd factor (if passkey is enabled it will be suggested first, with ability to fallback to TOTP)
 
 ```ts title='/custom/RequireTwoFaGate.vue'
 <template>
   <div class="contents" @click.stop.prevent="onClick">
-    <slot />  <!-- render action defgault contend - button/icon -->
+    <slot />  <!-- render action default content - button/icon -->
   </div>
 </template>
 
@@ -228,12 +228,12 @@ To do it you first need to create custom component which will call `window.admin
     if (props.disabled) return;
   
     const verificationResult = await window.adminforthTwoFaModal.get2FaConfirmationResult();  // this will ask user to enter code
-    emit('callAction', { verificationResult }); // then we pass this code to action (from fronted to backend)
+    emit('callAction', { verificationResult }); // then we pass this verification result to action (from fronted to backend)
   }
 </script>
 ```
 
-Now we need to use code which we got from user on frontend, inside of backend action handler and verify that is is valid and not expired:
+Now we need to use verification result  which we got from user on frontend, inside of backend action handler and verify that it is valid (and not expired):
 
 ```ts title='/adminuser.ts'
 options: {
@@ -267,7 +267,7 @@ options: {
         //diff-add
         if (!result?.ok) {
           //diff-add
-          return { ok: false, error: result?.error ?? 'Provided data is invalid' };
+          return { ok: false, error: result?.error ?? 'Provided 2fa verification data is invalid' };
           //diff-add
         }
         //diff-add
@@ -344,7 +344,7 @@ app.post(`${ADMIN_BASE_URL}/myCriticalAction`,
 );
 ```
 
-You might want to protect this call with a TOTP code. To do it, we need to make this change
+You might want to protect this call with a second factor also. To do it, we need to make this change
 
 ```ts
 <template>

From 3b39e757bfc74186d4b45ab5d8b198a6f27971db Mon Sep 17 00:00:00 2001
From: Ivan Borshchov <ivan@devforth.io>
Date: Tue, 14 Oct 2025 14:50:02 +0300
Subject: [PATCH 34/43] Update 02-TwoFactorsAuth.md

---
 .../tutorial/07-Plugins/02-TwoFactorsAuth.md  | 27 +++++++------------
 1 file changed, 9 insertions(+), 18 deletions(-)

diff --git a/adminforth/documentation/docs/tutorial/07-Plugins/02-TwoFactorsAuth.md b/adminforth/documentation/docs/tutorial/07-Plugins/02-TwoFactorsAuth.md
index ceab0bd0f..cff90e228 100644
--- a/adminforth/documentation/docs/tutorial/07-Plugins/02-TwoFactorsAuth.md
+++ b/adminforth/documentation/docs/tutorial/07-Plugins/02-TwoFactorsAuth.md
@@ -323,7 +323,9 @@ async function callAdminAPI() {
   const res = await callApi({
     path: '/myCriticalAction',
     method: 'POST',
-    body: { param: 1 },
+    body: {
+      param: 1
+    },
   });
 }
 </script>
@@ -357,28 +359,17 @@ import { callApi } from '@/utils';
 import adminforth from '@/adminforth';
 
 async function callAdminAPI() {
-  const code = await window.adminforthTwoFaModal.getCode();
-
-  // diff-remove
-  const res = await callApi({
-  // diff-remove
-    path: '/myCriticalAction',
-  // diff-remove
-    method: 'POST',
-  // diff-remove
-    body: { param: 1 },
-  // diff-remove
-  });
-
   // diff-add
+  const verificationResult = await window.adminforthTwoFaModal.getCode();
+
   const res = await callApi({
-  // diff-add
     path: '/myCriticalAction',
-  // diff-add
     method: 'POST',
+    body: {
+      param: 1,
   // diff-add
-    body: { param: 1, verificationResult: String(verificationResult) },
-  // diff-add
+      verificationResult: String(verificationResult)
+    },
   });
 
   // diff-add

From 218fc29ea6ac59a5faa63eb597e4314c034ec4fa Mon Sep 17 00:00:00 2001
From: yaroslav8765 <pechorkin2014@gmail.com>
Date: Tue, 14 Oct 2025 15:13:43 +0300
Subject: [PATCH 35/43] feat: add ability to pass headers in callApi function

---
 adminforth/spa/src/utils.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/adminforth/spa/src/utils.ts b/adminforth/spa/src/utils.ts
index eef5bf86f..c38ac361a 100644
--- a/adminforth/spa/src/utils.ts
+++ b/adminforth/spa/src/utils.ts
@@ -13,15 +13,17 @@ 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}: {
+export async function callApi({path, method, body, headers}: {
   path: string, method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' 
   body?: any
+  headers?: Record<string, string>
 }): Promise<any> {
   const options = {
     method,
     headers: {
       'Content-Type': 'application/json',
       'accept-language': localStorage.getItem(LS_LANG_KEY) || 'en',
+      ...headers
     },
     body: JSON.stringify(body),
   };

From 44f12d693be54e2194c16138139587359ffa7251 Mon Sep 17 00:00:00 2001
From: Maksym Pipkun <maxcim1077@gmail.com>
Date: Tue, 14 Oct 2025 15:40:44 +0300
Subject: [PATCH 36/43] fix: handle null and undefined values for DECIMAL type
 in getFieldValue methods

---
 adminforth/dataConnectors/mongo.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/adminforth/dataConnectors/mongo.ts b/adminforth/dataConnectors/mongo.ts
index 52007df83..6e1186172 100644
--- a/adminforth/dataConnectors/mongo.ts
+++ b/adminforth/dataConnectors/mongo.ts
@@ -189,6 +189,9 @@ class MongoConnector extends AdminForthBaseConnector implements IAdminForthDataS
         } else if (field.type == AdminForthDataTypes.BOOLEAN) {
           return value === null ? null : !!value;
         } else if (field.type == AdminForthDataTypes.DECIMAL) {
+            if (value === null || value === undefined) {
+                return null;
+            }
             return value?.toString();
         }
 
@@ -206,6 +209,9 @@ class MongoConnector extends AdminForthBaseConnector implements IAdminForthDataS
         } else if (field.type == AdminForthDataTypes.BOOLEAN) {
             return value === null ? null : (value ? true : false);
         } else if (field.type == AdminForthDataTypes.DECIMAL) {
+            if (value === null || value === undefined) {
+                return null;
+            }
             return Decimal128.fromString(value?.toString());
         }
         return value;

From 28ed53f045c2cf82d92a3aa994fb55f803957cee Mon Sep 17 00:00:00 2001
From: yaroslav8765 <pechorkin2014@gmail.com>
Date: Tue, 14 Oct 2025 18:13:54 +0300
Subject: [PATCH 37/43] fix: refactor config loading and model generation to
 use getAdminInstance

---
 .../createCustomComponent/configLoader.js     | 16 ++++-
 adminforth/commands/generateModels.js         | 60 +++++++++----------
 2 files changed, 41 insertions(+), 35 deletions(-)

diff --git a/adminforth/commands/createCustomComponent/configLoader.js b/adminforth/commands/createCustomComponent/configLoader.js
index 6fb8593e4..878b99edb 100644
--- a/adminforth/commands/createCustomComponent/configLoader.js
+++ b/adminforth/commands/createCustomComponent/configLoader.js
@@ -7,16 +7,16 @@ import dotenv from "dotenv";
 dotenv.config({ path: '.env.local', override: true });
 dotenv.config({ path: '.env', override: true });
 
-export async function loadAdminForthConfig() {
+export async function getAdminInstance() {
   const configFileName = 'index.ts';
   const configPath = path.resolve(process.cwd(), configFileName);
-
+  console.log('Loading config from', configPath);
   try {
     await fs.access(configPath);
   } catch (error) {
     console.error(chalk.red(`\nError: Configuration file not found at ${configPath}`));
     console.error(chalk.yellow(`Please ensure you are running this command from your project's root directory and the '${configFileName}' file exists.`));
-    process.exit(1);
+    return null;
   }
 
   try {
@@ -29,7 +29,17 @@ export async function loadAdminForthConfig() {
     const configModule = _require(configPath);
 
     const adminInstance = configModule.admin || configModule.default?.admin;
+    return adminInstance;
+  } catch (error) {
+    console.error(chalk.red(`\nError loading or parsing configuration file: ${configPath}`));
+    console.error(error);
+    return null;
+  }
+}
 
+export async function loadAdminForthConfig() {
+  try {
+    const adminInstance = getAdminInstance();
 
     if (!adminInstance) {
         throw new Error(`Could not find 'admin' export in ${configFileName}. Please ensure your config file exports the AdminForth instance like: 'export const admin = new AdminForth({...});'`);
diff --git a/adminforth/commands/generateModels.js b/adminforth/commands/generateModels.js
index 018c67cd2..05603f4bb 100755
--- a/adminforth/commands/generateModels.js
+++ b/adminforth/commands/generateModels.js
@@ -3,6 +3,7 @@ import path from "path";
 import { toPascalCase, mapToTypeScriptType, getInstance } from "./utils.js";
 import dotenv from "dotenv";
 import { callTsProxy } from "./callTsProxy.js";
+import { getAdminInstance } from "../commands/createCustomComponent/configLoader.js";
 
 const envFileArg = process.argv.find((arg) => arg.startsWith("--env-file="));
 const envFilePath = envFileArg ? envFileArg.split("=")[1] : ".env";
@@ -24,44 +25,39 @@ async function generateModels() {
   }
 
   let modelContent = "// Generated model file\n\n";
-  const files = fs.readdirSync(currentDirectory);
   let instanceFound = false;
-  for (const file of files) {
-    if (file.endsWith(".js") || file.endsWith(".ts")) {
-      const instance = await getInstance(file, currentDirectory);
-      if (instance) {
-        await instance.discoverDatabases();
-        instanceFound = true;
-        for (const resource of instance.config.resources) {
-          if (resource.columns) {
-            const typeName = toPascalCase(resource.resourceId);
 
-            const tsCode = `
-              export async function exec() {
-                const columns = ${JSON.stringify(resource.columns)};
-                const typeName = "${typeName}";
-                function mapToTypeScriptType(type) {
-                  const map = { "int": "number", "varchar": "string", "boolean": "boolean" };
-                  return map[type] || "any";
-                }
+  const instance = await getAdminInstance();
+  if (instance) {
+    await instance.discoverDatabases();
+    instanceFound = true;
+    for (const resource of instance.config.resources) {
+      if (resource.columns) {
+        const typeName = toPascalCase(resource.resourceId);
+        const tsCode = `
+          export async function exec() {
+            const columns = ${JSON.stringify(resource.columns)};
+            const typeName = "${typeName}";
+            function mapToTypeScriptType(type) {
+              const map = { "integer": "number", "varchar": "string", "boolean": "boolean", "date": "string", "datetime": "string", "decimal": "number", "float": "number", "json": "Record<string, any>", "text": "string", "string": "string", "time": "string" };
+              return map[type] || "any";
+            }
 
-                let typeStr = \`export type \${typeName} = {\\n\`;
-                for (const col of columns) {
-                  if (col.name && col.type) {
-                    typeStr += \`  \${col.name}: \${mapToTypeScriptType(col.type)};\\n\`;
-                  }
-                }
-                typeStr += "}\\n\\n";
-                return typeStr;
+            let typeStr = \`export type \${typeName} = {\\n\`;
+            for (const col of columns) {
+              if (col.name && col.type) {
+                typeStr += \`  \${col.name}: \${mapToTypeScriptType(col.type)};\\n\`;
               }
-            `;
-
-            const result = await callTsProxy(tsCode);
-            modelContent += result;
+            }
+            typeStr += "}\\n\\n";
+            return typeStr;
           }
-        };
+        `;
+
+        const result = await callTsProxy(tsCode);
+        modelContent += result;
       }
-    }
+    };
   }
 
   if (!instanceFound) {

From bbccede7188495f33666305395701c81a3b1991b Mon Sep 17 00:00:00 2001
From: yaroslav8765 <pechorkin2014@gmail.com>
Date: Wed, 15 Oct 2025 08:56:03 +0300
Subject: [PATCH 38/43] fix: fix "adminforth component" command

---
 .../commands/createCustomComponent/configLoader.js    | 11 ++++++-----
 adminforth/commands/generateModels.js                 |  8 ++++----
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/adminforth/commands/createCustomComponent/configLoader.js b/adminforth/commands/createCustomComponent/configLoader.js
index 878b99edb..a956a56ec 100644
--- a/adminforth/commands/createCustomComponent/configLoader.js
+++ b/adminforth/commands/createCustomComponent/configLoader.js
@@ -2,7 +2,7 @@ import fs from 'fs/promises';
 import path from 'path';
 import chalk from 'chalk';
 import jiti from 'jiti';
-import dotenv from "dotenv";
+import dotenv, { config } from "dotenv";
 
 dotenv.config({ path: '.env.local', override: true });
 dotenv.config({ path: '.env', override: true });
@@ -29,7 +29,7 @@ export async function getAdminInstance() {
     const configModule = _require(configPath);
 
     const adminInstance = configModule.admin || configModule.default?.admin;
-    return adminInstance;
+    return { adminInstance, configPath, configFileName };
   } catch (error) {
     console.error(chalk.red(`\nError loading or parsing configuration file: ${configPath}`));
     console.error(error);
@@ -38,9 +38,10 @@ export async function getAdminInstance() {
 }
 
 export async function loadAdminForthConfig() {
-  try {
-    const adminInstance = getAdminInstance();
+  
+  const { adminInstance, configPath, configFileName } = await getAdminInstance();
 
+  try {
     if (!adminInstance) {
         throw new Error(`Could not find 'admin' export in ${configFileName}. Please ensure your config file exports the AdminForth instance like: 'export const admin = new AdminForth({...});'`);
     }
@@ -63,7 +64,7 @@ export async function loadAdminForthConfig() {
     return config;
 
   } catch (error) {
-    console.error(chalk.red(`\nError loading or parsing configuration file: ${configPath}`));
+    console.error(chalk.red(`\nError loading or parsing configuration file: ${configPath},  error: ${error}`));
     console.error(error);
     process.exit(1);
   }
diff --git a/adminforth/commands/generateModels.js b/adminforth/commands/generateModels.js
index 05603f4bb..c64377889 100755
--- a/adminforth/commands/generateModels.js
+++ b/adminforth/commands/generateModels.js
@@ -27,11 +27,11 @@ async function generateModels() {
   let modelContent = "// Generated model file\n\n";
   let instanceFound = false;
 
-  const instance = await getAdminInstance();
-  if (instance) {
-    await instance.discoverDatabases();
+  const { adminInstance, configPath, configFileName } = await getAdminInstance();
+  if (adminInstance) {
+    await adminInstance.discoverDatabases();
     instanceFound = true;
-    for (const resource of instance.config.resources) {
+    for (const resource of adminInstance.config.resources) {
       if (resource.columns) {
         const typeName = toPascalCase(resource.resourceId);
         const tsCode = `

From 59b6de2785c507495f9d330842b6b6a73eef1b58 Mon Sep 17 00:00:00 2001
From: Ivan Borshchov <ivan@devforth.io>
Date: Wed, 15 Oct 2025 08:05:28 +0000
Subject: [PATCH 39/43] feat: add ability to sort injections by meta.afOrder

---
 adminforth/modules/configValidator.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/adminforth/modules/configValidator.ts b/adminforth/modules/configValidator.ts
index 9f4e79f66..233655bce 100644
--- a/adminforth/modules/configValidator.ts
+++ b/adminforth/modules/configValidator.ts
@@ -58,7 +58,8 @@ export default class ConfigValidator implements IConfigValidator {
     injections.forEach((target, i) => {
       injections[i] = this.validateComponent(target, errors);
     });
-    return injections;
+    // sort by injection.meta?.afOrder || 0 desc
+    return injections.sort((a, b) => (b.meta?.afOrder ?? 0) - (a.meta?.afOrder ?? 0));
   }
 
   checkCustomFileExists(filePath: string): Array<string> {

From dad5e4d7947fec8f852b6cf46677a9b97e66d5f3 Mon Sep 17 00:00:00 2001
From: Ivan Borshchov <ivan@devforth.io>
Date: Wed, 15 Oct 2025 09:43:08 +0000
Subject: [PATCH 40/43] feat: enhance injection sorting by preserving initial
 order

---
 adminforth/modules/configValidator.ts | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/adminforth/modules/configValidator.ts b/adminforth/modules/configValidator.ts
index 233655bce..725be72be 100644
--- a/adminforth/modules/configValidator.ts
+++ b/adminforth/modules/configValidator.ts
@@ -57,9 +57,16 @@ export default class ConfigValidator implements IConfigValidator {
     }
     injections.forEach((target, i) => {
       injections[i] = this.validateComponent(target, errors);
+      injections[i].meta.afInitialOrder = injections.length - i; // to keep initial order for sorting later
     });
-    // sort by injection.meta?.afOrder || 0 desc
-    return injections.sort((a, b) => (b.meta?.afOrder ?? 0) - (a.meta?.afOrder ?? 0));
+    // sort by (injection.meta?.afOrder || 0) * 1000 desc, fallback to initial order in array
+    return injections.sort(
+      (a, b) => (
+        (b.meta?.afOrder ?? 0) * 1000 || b.meta?.afInitialOrder
+      ) - (
+        (a.meta?.afOrder ?? 0) * 1000 || a.meta?.afInitialOrder
+      )
+    );
   }
 
   checkCustomFileExists(filePath: string): Array<string> {

From 9ecd737cecf4c44cd0972293910c68a1f1a20cf0 Mon Sep 17 00:00:00 2001
From: yaroslav8765 <pechorkin2014@gmail.com>
Date: Wed, 15 Oct 2025 14:48:10 +0300
Subject: [PATCH 41/43] feat: add underLoginInjection and order prop for login
 injection components

---
 adminforth/index.ts                    |  4 ++++
 adminforth/modules/configValidator.ts  | 28 +++++++++++++++-----------
 adminforth/spa/src/views/LoginView.vue |  6 ++++++
 adminforth/types/Back.ts               |  3 +++
 4 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/adminforth/index.ts b/adminforth/index.ts
index c1c575e29..28b4dd4d2 100644
--- a/adminforth/index.ts
+++ b/adminforth/index.ts
@@ -157,6 +157,10 @@ class AdminForth implements IAdminForth {
     this.activatePlugins();
     process.env.HEAVY_DEBUG && console.log('🔧 Plugins activated');
 
+    process.env.HEAVY_DEBUG && console.log('🔧 Validating after plugin activation...');
+    this.configValidator.validateAfterPluginsActivation();
+    process.env.HEAVY_DEBUG && console.log('🔧 Config validated');
+
     process.env.HEAVY_DEBUG && console.log('🔧 Creating ExpressServer...');
     this.express = new ExpressServer(this);
     process.env.HEAVY_DEBUG && console.log('🔧 ExpressServer created');
diff --git a/adminforth/modules/configValidator.ts b/adminforth/modules/configValidator.ts
index 725be72be..369eeb8fc 100644
--- a/adminforth/modules/configValidator.ts
+++ b/adminforth/modules/configValidator.ts
@@ -57,16 +57,9 @@ export default class ConfigValidator implements IConfigValidator {
     }
     injections.forEach((target, i) => {
       injections[i] = this.validateComponent(target, errors);
-      injections[i].meta.afInitialOrder = injections.length - i; // to keep initial order for sorting later
     });
-    // sort by (injection.meta?.afOrder || 0) * 1000 desc, fallback to initial order in array
-    return injections.sort(
-      (a, b) => (
-        (b.meta?.afOrder ?? 0) * 1000 || b.meta?.afInitialOrder
-      ) - (
-        (a.meta?.afOrder ?? 0) * 1000 || a.meta?.afInitialOrder
-      )
-    );
+    // sort by injection.meta?.afOrder || 0 desc
+    return injections;
   }
 
   checkCustomFileExists(filePath: string): Array<string> {
@@ -122,11 +115,12 @@ export default class ConfigValidator implements IConfigValidator {
 
     const loginPageInjections: AdminForthConfigCustomization['loginPageInjections'] = {
       underInputs: [],
+      underLoginButton: [],
       panelHeader: [],
     };
 
     if (this.inputConfig.customization?.loginPageInjections) {
-      const ALLOWED_LOGIN_INJECTIONS = ['underInputs', 'panelHeader']
+      const ALLOWED_LOGIN_INJECTIONS = ['underInputs', 'underLoginButton', 'panelHeader']
       Object.keys(this.inputConfig.customization.loginPageInjections).forEach((injection) => {
         if (ALLOWED_LOGIN_INJECTIONS.includes(injection)) {
           loginPageInjections[injection] = this.validateAndListifyInjectionNew(this.inputConfig.customization.loginPageInjections, injection, errors);
@@ -136,7 +130,6 @@ export default class ConfigValidator implements IConfigValidator {
         }
       });
     }
-    
     const globalInjections: AdminForthConfigCustomization['globalInjections'] = {
       userMenu: [],
       header: [],
@@ -814,7 +807,7 @@ export default class ConfigValidator implements IConfigValidator {
       });
 
       // if pageInjection is a string, make array with one element. Also check file exists
-  const possibleInjections = ['beforeBreadcrumbs', 'beforeActionButtons', 'afterBreadcrumbs', 'bottom', 'threeDotsDropdownItems', 'customActionIcons'];
+      const possibleInjections = ['beforeBreadcrumbs', 'beforeActionButtons', 'afterBreadcrumbs', 'bottom', 'threeDotsDropdownItems', 'customActionIcons'];
       const possiblePages = ['list', 'show', 'create', 'edit'];
 
       if (options.pageInjections) {
@@ -904,6 +897,17 @@ export default class ConfigValidator implements IConfigValidator {
     
   }
 
+  validateAfterPluginsActivation() {
+    const ALLOWED_LOGIN_INJECTIONS = ['underInputs', 'underLoginButton', 'panelHeader']
+    Object.entries(this.adminforth.config.customization).map(([key, value]) => {
+      Object.entries(value).map(([injection, target]) => {
+        if (ALLOWED_LOGIN_INJECTIONS.includes(injection)) {
+          (target as Array<AdminForthComponentDeclarationFull>).sort((a, b) => (b.meta?.afOrder ?? 0) - (a.meta?.afOrder ?? 0));
+        }
+      });
+    })
+  }
+
   validateConfig() {
     const errors = [];
     const warnings = [];
diff --git a/adminforth/spa/src/views/LoginView.vue b/adminforth/spa/src/views/LoginView.vue
index 8b0b5ad4c..530d24a24 100644
--- a/adminforth/spa/src/views/LoginView.vue
+++ b/adminforth/spa/src/views/LoginView.vue
@@ -105,6 +105,12 @@
                         <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>
diff --git a/adminforth/types/Back.ts b/adminforth/types/Back.ts
index ef4256d34..40efe6917 100644
--- a/adminforth/types/Back.ts
+++ b/adminforth/types/Back.ts
@@ -28,6 +28,7 @@ export interface ICodeInjector {
 
 export interface IConfigValidator {
   validateConfig(): void;
+  validateAfterPluginsActivation(): void;
   postProcessAfterDiscover(resource: AdminForthResource): void;
 }
 
@@ -794,6 +795,7 @@ interface AdminForthInputConfigCustomization {
    */
   loginPageInjections?: {
     underInputs?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
+    underLoginButton?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
     panelHeader?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
   }
 
@@ -1131,6 +1133,7 @@ export interface AdminForthConfigCustomization extends Omit<AdminForthInputConfi
 
   loginPageInjections: {
     underInputs: Array<AdminForthComponentDeclarationFull>,
+    underLoginButton?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
     panelHeader: Array<AdminForthComponentDeclarationFull>,
   },
 

From eb01fe72c664919fd5dfa4f10ecabd616be3a483 Mon Sep 17 00:00:00 2001
From: yaroslav8765 <pechorkin2014@gmail.com>
Date: Wed, 15 Oct 2025 15:34:45 +0300
Subject: [PATCH 42/43] fix: refactor injection validation and sorting logic
 for improved maintainability

---
 adminforth/modules/configValidator.ts | 88 +++++++++++++++++++++------
 1 file changed, 68 insertions(+), 20 deletions(-)

diff --git a/adminforth/modules/configValidator.ts b/adminforth/modules/configValidator.ts
index 369eeb8fc..9a498750a 100644
--- a/adminforth/modules/configValidator.ts
+++ b/adminforth/modules/configValidator.ts
@@ -34,6 +34,10 @@ export default class ConfigValidator implements IConfigValidator {
 
   customComponentsDir: string | undefined;
 
+  private static readonly LOGIN_INJECTION_KEYS = ['underInputs', 'underLoginButton', 'panelHeader'];
+  private static readonly GLOBAL_INJECTION_KEYS = ['userMenu', 'header', 'sidebar', 'sidebarTop', 'everyPageBottom'];
+  private static readonly PAGE_INJECTION_KEYS = ['beforeBreadcrumbs', 'beforeActionButtons', 'afterBreadcrumbs', 'bottom', 'threeDotsDropdownItems', 'customActionIcons'];
+
   constructor(private adminforth: IAdminForth, private inputConfig: AdminForthInputConfig) {
     this.adminforth = adminforth;
     this.inputConfig = inputConfig;
@@ -58,7 +62,6 @@ export default class ConfigValidator implements IConfigValidator {
     injections.forEach((target, i) => {
       injections[i] = this.validateComponent(target, errors);
     });
-    // sort by injection.meta?.afOrder || 0 desc
     return injections;
   }
 
@@ -120,13 +123,12 @@ export default class ConfigValidator implements IConfigValidator {
     };
 
     if (this.inputConfig.customization?.loginPageInjections) {
-      const ALLOWED_LOGIN_INJECTIONS = ['underInputs', 'underLoginButton', 'panelHeader']
       Object.keys(this.inputConfig.customization.loginPageInjections).forEach((injection) => {
-        if (ALLOWED_LOGIN_INJECTIONS.includes(injection)) {
+        if (ConfigValidator.LOGIN_INJECTION_KEYS.includes(injection)) {
           loginPageInjections[injection] = this.validateAndListifyInjectionNew(this.inputConfig.customization.loginPageInjections, injection, errors);
         } else {
-          const similar = suggestIfTypo(ALLOWED_LOGIN_INJECTIONS, injection);
-          errors.push(`Login page injection key "${injection}" is not allowed. Allowed keys are ${ALLOWED_LOGIN_INJECTIONS.join(', ')}. ${similar ? `Did you mean "${similar}"?` : ''}`);
+          const similar = suggestIfTypo(ConfigValidator.LOGIN_INJECTION_KEYS, injection);
+          errors.push(`Login page injection key "${injection}" is not allowed. Allowed keys are ${ConfigValidator.LOGIN_INJECTION_KEYS.join(', ')}. ${similar ? `Did you mean "${similar}"?` : ''}`);
         }
       });
     }
@@ -139,13 +141,12 @@ export default class ConfigValidator implements IConfigValidator {
     };
 
     if (this.inputConfig.customization?.globalInjections) {
-      const ALLOWED_GLOBAL_INJECTIONS = ['userMenu', 'header', 'sidebar', 'sidebarTop', 'everyPageBottom'];
       Object.keys(this.inputConfig.customization.globalInjections).forEach((injection) => {
-        if (ALLOWED_GLOBAL_INJECTIONS.includes(injection)) {
+        if (ConfigValidator.GLOBAL_INJECTION_KEYS.includes(injection)) {
           globalInjections[injection] = this.validateAndListifyInjectionNew(this.inputConfig.customization.globalInjections, injection, errors);
         } else {
-          const similar = suggestIfTypo(ALLOWED_GLOBAL_INJECTIONS, injection);
-          errors.push(`Global injection key "${injection}" is not allowed. Allowed keys are ${ALLOWED_GLOBAL_INJECTIONS.join(', ')}. ${similar ? `Did you mean "${similar}"?` : ''}`);
+          const similar = suggestIfTypo(ConfigValidator.GLOBAL_INJECTION_KEYS, injection);
+          errors.push(`Global injection key "${injection}" is not allowed. Allowed keys are ${ConfigValidator.GLOBAL_INJECTION_KEYS.join(', ')}. ${similar ? `Did you mean "${similar}"?` : ''}`);
         }
       });
     }
@@ -807,7 +808,6 @@ export default class ConfigValidator implements IConfigValidator {
       });
 
       // if pageInjection is a string, make array with one element. Also check file exists
-      const possibleInjections = ['beforeBreadcrumbs', 'beforeActionButtons', 'afterBreadcrumbs', 'bottom', 'threeDotsDropdownItems', 'customActionIcons'];
       const possiblePages = ['list', 'show', 'create', 'edit'];
 
       if (options.pageInjections) {
@@ -819,11 +819,11 @@ export default class ConfigValidator implements IConfigValidator {
           }
 
           Object.entries(value).map(([injection, target]) => {
-            if (possibleInjections.includes(injection)) {
-              this.validateAndListifyInjection(options.pageInjections[key], injection, errors);
+            if (ConfigValidator.PAGE_INJECTION_KEYS.includes(injection)) {
+              options.pageInjections[key][injection] = this.validateAndListifyInjectionNew(options.pageInjections[key], injection, errors);
             } else {
-              const similar = suggestIfTypo(possibleInjections, injection);
-              errors.push(`Resource "${res.resourceId}" has invalid pageInjection key "${injection}", Supported keys are ${possibleInjections.join(', ')} ${similar ? `Did you mean "${similar}"?` : ''}`);
+              const similar = suggestIfTypo(ConfigValidator.PAGE_INJECTION_KEYS, injection);
+              errors.push(`Resource "${res.resourceId}" has invalid pageInjection key "${injection}", Supported keys are ${ConfigValidator.PAGE_INJECTION_KEYS.join(', ')} ${similar ? `Did you mean "${similar}"?` : ''}`);
             }
           });
 
@@ -898,14 +898,62 @@ export default class ConfigValidator implements IConfigValidator {
   }
 
   validateAfterPluginsActivation() {
-    const ALLOWED_LOGIN_INJECTIONS = ['underInputs', 'underLoginButton', 'panelHeader']
-    Object.entries(this.adminforth.config.customization).map(([key, value]) => {
-      Object.entries(value).map(([injection, target]) => {
-        if (ALLOWED_LOGIN_INJECTIONS.includes(injection)) {
-          (target as Array<AdminForthComponentDeclarationFull>).sort((a, b) => (b.meta?.afOrder ?? 0) - (a.meta?.afOrder ?? 0));
+    // Sort all page injections throughout the config by afOrder
+    this.sortAllPageInjections();
+  }
+
+  private sortAllPageInjections(): void {
+    const config = this.adminforth.config;
+    
+    // Sort login page injections
+    if (config.customization?.loginPageInjections) {
+      const loginInjections = config.customization.loginPageInjections;
+      ConfigValidator.LOGIN_INJECTION_KEYS.forEach(key => {
+        if (loginInjections[key]) {
+          this.sortInjectionArray(loginInjections[key]);
         }
       });
-    })
+    }
+
+    // Sort global injections
+    if (config.customization?.globalInjections) {
+      const globalInjections = config.customization.globalInjections;
+      ConfigValidator.GLOBAL_INJECTION_KEYS.forEach(key => {
+        if (globalInjections[key]) {
+          this.sortInjectionArray(globalInjections[key]);
+        }
+      });
+    }
+
+    // Sort resource page injections
+    if (config.resources) {
+      config.resources.forEach(resource => {
+        if (resource.options?.pageInjections) {
+          const pageInjections = resource.options.pageInjections;
+          
+          // For each page type (list, show, create, edit)
+          Object.keys(pageInjections).forEach(pageType => {
+            const pageTypeInjections = pageInjections[pageType];
+            if (pageTypeInjections) {
+              // For each injection point within the page
+              ConfigValidator.PAGE_INJECTION_KEYS.forEach(injectionKey => {
+                if (pageTypeInjections[injectionKey]) {
+                  this.sortInjectionArray(pageTypeInjections[injectionKey]);
+                }
+              });
+            }
+          });
+        }
+      });
+    }
+  }
+
+  private sortInjectionArray(injections: any): void {
+    if (Array.isArray(injections)) {
+      injections.sort((a: AdminForthComponentDeclarationFull, b: AdminForthComponentDeclarationFull) => 
+        (b.meta?.afOrder ?? 0) - (a.meta?.afOrder ?? 0)
+      );
+    }
   }
 
   validateConfig() {

From f086b335c577d83408fe08c1171ed5a076fa6bf9 Mon Sep 17 00:00:00 2001
From: yaroslav8765 <pechorkin2014@gmail.com>
Date: Wed, 15 Oct 2025 15:36:12 +0300
Subject: [PATCH 43/43] fix: remove console log for loading config path in
 getAdminInstance function

---
 adminforth/commands/createCustomComponent/configLoader.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/adminforth/commands/createCustomComponent/configLoader.js b/adminforth/commands/createCustomComponent/configLoader.js
index a956a56ec..d7029d783 100644
--- a/adminforth/commands/createCustomComponent/configLoader.js
+++ b/adminforth/commands/createCustomComponent/configLoader.js
@@ -10,7 +10,6 @@ dotenv.config({ path: '.env', override: true });
 export async function getAdminInstance() {
   const configFileName = 'index.ts';
   const configPath = path.resolve(process.cwd(), configFileName);
-  console.log('Loading config from', configPath);
   try {
     await fs.access(configPath);
   } catch (error) {