adminforth 1.0.83 → 1.0.86

package/servers/express.ts

@@ -1,15 +1,10 @@
 
 import path from 'path';
-import { fileURLToPath } from 'url';
 import fs from 'fs';
 import CodeInjector from '../modules/codeInjector.js';
-import AdminForth from '../index.js';
 import { Express } from 'express';
 import fetch from 'node-fetch';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
+import { AdminForthClass, ExpressHttpServer } from '../types/AdminForthConfig.js';
 
 
 function replaceAtStart(string, substring) {
@@ -80,12 +75,12 @@ const respondNoServer = (title, explanation) => {
     </body>
     `;
 }
-class ExpressServer {
+class ExpressServer implements ExpressHttpServer {
 
   expressApp: Express;
-  adminforth: AdminForth;
+  adminforth: AdminForthClass;
 
-  constructor(adminforth) {
+  constructor(adminforth: AdminForthClass) {
     this.adminforth = adminforth;
   }
 

package/spa/package-lock.json

@@ -17,6 +17,7 @@
         "flowbite-datepicker": "^1.2.6",
         "pinia": "^2.1.7",
         "unhead": "^1.9.12",
+        "uuid": "^10.0.0",
         "vue": "^3.4.21",
         "vue-router": "^4.3.0",
         "vue-slider-component": "^4.1.0-beta.7"
@@ -4032,6 +4033,18 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "dev": true
     },
+    "node_modules/uuid": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz",
+      "integrity": "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/vite": {
       "version": "5.2.13",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.13.tgz",

package/spa/package.json

@@ -21,6 +21,7 @@
     "flowbite-datepicker": "^1.2.6",
     "pinia": "^2.1.7",
     "unhead": "^1.9.12",
+    "uuid": "^10.0.0",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0",
     "vue-slider-component": "^4.1.0-beta.7"

package/spa/src/App.vue

@@ -123,15 +123,43 @@
     </div>
   </div>
   <AcceptModal />
+  <div v-if="toastStore.toasts.length>0" class="fixed bottom-5 right-5 flex gap-1 flex-col-reverse">
+    <transition-group
+      name="fade"
+      tag="div"
+      class="flex flex-col-reverse gap-1"
+    >
+      <Toast :toast="t" @close="toastStore.removeToast(t)" v-for="(t,i) in toastStore.toasts" :key="`t-${t.id}`" ></Toast>
+    </transition-group>
+  </div>
 
   <div v-if="sideBarOpen" 
   @click="sideBarOpen = false"
   
   drawer-backdrop="" class="bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-30"></div>
 
+
+
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
+
+  .fade-leave-active {
+    @apply transition-opacity duration-500;
+  }
+  .fade-leave-to {
+    @apply opacity-0;
+  }
+  .fade-enter-active {
+    @apply transition-opacity duration-500;
+  }
+  .fade-enter-from {
+    @apply opacity-0;
+  }
+  .fade-enter-to {
+    @apply opacity-100;
+  }
+
 </style>
 
 <script setup lang="ts">
@@ -140,6 +168,7 @@ import { RouterLink, RouterView } from 'vue-router';
 import { initFlowbite } from 'flowbite'
 import './index.scss'
 import { useCoreStore } from '@/stores/core';
+import {useModalStore} from '@/stores/modal';
 import { IconMoonSolid, IconSunSolid } from '@iconify-prerendered/vue-flowbite';
 import AcceptModal from './components/AcceptModal.vue';
 import MenuLink from './components/MenuLink.vue';
@@ -148,33 +177,22 @@ import { getIcon } from '@/utils';
 import { useHead } from 'unhead'
 import { createHead } from 'unhead'
 import { loadFile } from './utils';
-
+import Toast from './components/Toast.vue';
+import {useToastStore} from '@/stores/toast';
+import { FrontendAPI } from '@/composables/useStores'
 // import { link } from 'fs';
 const coreStore = useCoreStore();
-
-
+const modalStore = useModalStore();
+const toastStore = useToastStore();
+const frontendApi = new FrontendAPI();
+frontendApi.init();
 const splitAtLast = (str: string, separator: string) => {
   const index = str.lastIndexOf(separator);
   return [str.slice(0, index), str.slice(index + 1)];
 }
-
-
-
 createHead()
-
-
 const sideBarOpen = ref(false);
-
-
-
 const route = useRoute();
-watch(route, () => {
-  title.value = `${coreStore.config?.title || coreStore.config?.brandName || 'Adminforth'} | ${ Object.values(route.params)[0] || route.meta.title || ' '}`;
-  useHead({
-    title: title.value,
-  })
-});
-
 const router = useRouter();
 const title = ref('');
 //create a ref to store the opened menu items with ts type;
@@ -226,6 +244,13 @@ async function loadMenu() {
   });
 }
 
+watch(route, () => {
+  title.value = `${coreStore.config?.title || coreStore.config?.brandName || 'Adminforth'} | ${ Object.values(route.params)[0] || route.meta.title || ' '}`;
+  useHead({
+    title: title.value,
+  })
+});
+
 // initialize components based on data attribute selectors
 onMounted(async () => {
   loadMenu(); // run this in async mode

package/spa/src/components/AcceptModal.vue

@@ -3,13 +3,6 @@ import { ref,onMounted } from 'vue'
 import { useModalStore } from '@/stores/modal';
 
 const modalStore = useModalStore();
-
-
-
-
-
-
-        
 </script>
 
 <template>
@@ -28,10 +21,10 @@ const modalStore = useModalStore();
                         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
                     </svg>
                     <h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">{{ modalStore?.modalContent?.content }}</h3>
-                    <button @click="()=>{modalStore.onAcceptFunction();modalStore.togleModal()}" type="button" class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center">
+                    <button @click="()=>{ modalStore.onAcceptFunction(true);modalStore.togleModal()}" type="button" class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center">
                         {{ modalStore?.modalContent?.acceptText }}
                     </button>
-                    <button @click="modalStore.togleModal"  type="button" class="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">{{ modalStore?.modalContent?.cancelText }}</button>
+                    <button @click="()=>{modalStore.onAcceptFunction(false);modalStore.togleModal()}"  type="button" class="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">{{ modalStore?.modalContent?.cancelText }}</button>
                 </div>
             </div>
         </div>

package/spa/src/components/Toast.vue

@@ -0,0 +1,65 @@
+<template>
+    
+
+<div id="toast-default" class="flex  items-center w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800" role="alert">
+    <div v-if="toast.variant == 'info'" class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-blue-500 bg-blue-100 rounded-lg dark:bg-blue-800 dark:text-blue-200">
+        <svg class="w-4 h-4"  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 20">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.147 15.085a7.159 7.159 0 0 1-6.189 3.307A6.713 6.713 0 0 1 3.1 15.444c-2.679-4.513.287-8.737.888-9.548A4.373 4.373 0 0 0 5 1.608c1.287.953 6.445 3.218 5.537 10.5 1.5-1.122 2.706-3.01 2.853-6.14 1.433 1.049 3.993 5.395 1.757 9.117Z"/>
+        </svg>
+        <span class="sr-only">Fire icon</span>
+    </div>
+    <div v-else-if="toast.variant == 'danger'" class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-red-500 bg-red-100 rounded-lg dark:bg-red-800 dark:text-red-200">
+        <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+            <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 11.793a1 1 0 1 1-1.414 1.414L10 11.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L8.586 10 6.293 7.707a1 1 0 0 1 1.414-1.414L10 8.586l2.293-2.293a1 1 0 0 1 1.414 1.414L11.414 10l2.293 2.293Z"/>
+        </svg>
+        <span class="sr-only">Error icon</span>
+    </div>
+    <div v-else-if="toast.variant == 'warning'"class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-orange-500 bg-orange-100 rounded-lg dark:bg-orange-700 dark:text-orange-200">
+        <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+            <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM10 15a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm1-4a1 1 0 0 1-2 0V6a1 1 0 0 1 2 0v5Z"/>
+        </svg>
+        <span class="sr-only">Warning icon</span>
+    </div>
+    <div v-else class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200">
+        <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+            <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
+        </svg>
+        <span class="sr-only">Check icon</span>
+    </div>
+    <div class="ms-3 text-sm font-normal">{{toast.message}}</div>
+    <button @click="closeToast" type="button" class="ms-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" >
+        <svg class="w-3 h-3"  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
+        </svg>
+    </button>
+</div>
+
+
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue';
+import { useToastStore } from '@/stores/toast';
+const toastStore = useToastStore();
+const emit = defineEmits(['close']);
+const props = defineProps<{
+    toast:{message: string;
+    variant: string;
+    id: string;
+    duration?: number;}
+}>();
+function closeToast() {
+    emit('close');
+}
+
+onMounted(() => {
+    setTimeout(() => {
+     emit('close');   
+    }, props.toast.duration  || 5000 );
+});
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>

package/spa/src/components/ValueRenderer.vue

@@ -2,9 +2,9 @@
   <div>
     
     <span v-if="column.foreignResource">
-      <RouterLink v-if="row[column.name]" class="font-medium text-blue-600 dark:text-blue-500 hover:brightness-110"
-        :to="{ name: 'resource-show', params: { resourceId: column.foreignResource.resourceId, primaryKey: row[column.name].pk } }">
-        {{ row[column.name].label }}
+      <RouterLink v-if="record[column.name]" class="font-medium text-blue-600 dark:text-blue-500 hover:brightness-110"
+        :to="{ name: 'resource-show', params: { resourceId: column.foreignResource.resourceId, primaryKey: record[column.name].pk } }">
+        {{ record[column.name].label }}
       </RouterLink>
       <div v-else>
         <span class="text-gray-400">-</span>
@@ -12,18 +12,18 @@
     </span>
         
     <span v-else-if="column.type === 'boolean'">
-      <span v-if="row[column.name]" class="bg-green-100 text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-green-400 border border-green-400">Yes</span>
+      <span v-if="record[column.name]" class="bg-green-100 text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-green-400 border border-green-400">Yes</span>
       <span v-else class="bg-red-100 text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400">No</span>
     </span>
     <span v-else-if="column.enum">
-      {{ checkEmptyValues(column.enum.find(e => e.value === row[column.name])?.label,route.meta.type) }}
+      {{ checkEmptyValues(column.enum.find(e => e.value === record[column.name])?.label,route.meta.type) }}
     </span>
     <span v-else-if="column.type === 'datetime'">
-      {{ checkEmptyValues(formatDate(row[column.name]),route.meta.type) }}
+      {{ checkEmptyValues(formatDate(record[column.name]),route.meta.type) }}
       
     </span>
     <span v-else>
-      {{ checkEmptyValues(row[column.name],route.meta.type) }}
+      {{ checkEmptyValues(record[column.name],route.meta.type) }}
     </span>
   </div>
 </template>
@@ -49,7 +49,7 @@ dayjs.extend(timezone);
 
 const props = defineProps({
   column: Object,
-  row: Object
+  record: Object
 });
 
 

package/spa/src/composables/useStores.ts

@@ -0,0 +1,51 @@
+import type { FrontendAPIInterface, ConfirmParams, AlertParams } from '../types/FrontendAPI';
+import { useToastStore } from '../stores/toast';
+import { useModalStore } from '../stores/modal';
+
+
+
+declare global {
+  interface Window {
+    adminforth: {
+      confirm: (params: ConfirmParams) => Promise<void>;
+      alert: (params: AlertParams) => void;
+    };
+  }
+}
+
+export class FrontendAPI implements FrontendAPIInterface {
+  private toastStore:any
+  private modalStore:any
+  init() {
+    if (window.adminforth) {
+      throw new Error('adminforth already initialized');
+    }
+    this.toastStore = useToastStore();
+    this.modalStore = useModalStore();
+    console.log(this.toastStore, this.modalStore,'init of adminforth frontend api')
+    window.adminforth = {
+      confirm: this.confirm.bind(this),
+      alert: this.alert.bind(this)
+    }
+  }
+
+  confirm(params: ConfirmParams): Promise<void> {
+    return new Promise((resolve, reject) => {
+      this.modalStore.setModalContent({ content: params.message, acceptText: params.yes, cancelText: params.no })
+      this.modalStore.onAcceptFunction = resolve
+      this.modalStore.onCancelFunction = reject
+      this.modalStore.togleModal()
+    })
+  }
+
+  alert(params: AlertParams): void {
+    this.toastStore.addToast({
+      message: params.message,
+      variant: params.variant
+    })
+  }
+}
+
+
+
+

package/spa/src/stores/core.ts

@@ -8,6 +8,8 @@ export const useCoreStore = defineStore('core', () => {
   const config = ref({});
   const record = ref({});
   const resourceColumns = ref(null);
+  const resource = ref(null);
+
   const resourceOptions = ref(null);
   const resourceColumnsError = ref('');
   const resourceColumnsId = ref(null);
@@ -85,6 +87,7 @@ export const useCoreStore = defineStore('core', () => {
     } else {
       resourceColumns.value = res.resource.columns;
       resourceById.value[resourceId] = res.resource;
+      resource.value = res.resource;
       resourceOptions.value = res.resource.options;
     }
   }
@@ -129,6 +132,7 @@ export const useCoreStore = defineStore('core', () => {
     fetchResourceFull, 
     resourceColumnsError,
     resourceOptions,
-    logout
+    logout,
+    resource,
   }
 })

package/spa/src/stores/modal.ts

@@ -2,6 +2,13 @@ import { ref } from 'vue'
 import { defineStore } from 'pinia'
 import { callAdminForthApi } from '@/utils';
 
+ type ModalContentType = {
+  title?: string;
+  content?: string;
+  acceptText?: string;
+  cancelText?: string;
+ }
+
 
 export const useModalStore = defineStore('modal', () => {
   const modalContent = ref({
@@ -12,13 +19,17 @@ export const useModalStore = defineStore('modal', () => {
   });  
   const isOpened = ref(false);
   const onAcceptFunction: any = ref(()=>{});
+  const onCancelFunction: any = ref(()=>{});
   function togleModal() {
     isOpened.value = !isOpened.value;
   }
   function setOnAcceptFunction(func: Function) {
     onAcceptFunction.value = func;
   }
-  function setModalContent(content: string) {
+  function setOnCancelFunction(func: Function) {
+    onCancelFunction.value = func;
+  }
+  function setModalContent(content: ModalContentType) {
     modalContent.value = content;
   }
   function resetmodalState() {
@@ -33,6 +44,6 @@ export const useModalStore = defineStore('modal', () => {
 
   }
     
-  return {isOpened, setModalContent, togleModal,modalContent, setOnAcceptFunction, onAcceptFunction,resetmodalState} 
+  return {isOpened, setModalContent,onCancelFunction, togleModal,modalContent, setOnAcceptFunction, onAcceptFunction,resetmodalState,setOnCancelFunction} 
    
 })

package/spa/src/stores/toast.ts

@@ -0,0 +1,15 @@
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+import { callAdminForthApi } from '@/utils';
+import { v1 as uuid } from 'uuid';
+
+export const useToastStore = defineStore('toast', () => {
+    const toasts = ref([]);
+    const addToast = (toast) => {
+        toasts.value.push({...toast, id: uuid()});
+    };
+    const removeToast = (toast) => {
+        toasts.value = toasts.value.filter((t) => t.id !== toast.id);
+    };
+    return { toasts, addToast, removeToast };
+});

package/spa/src/views/CreateView.vue

@@ -1,6 +1,14 @@
 <template>
   <div class="relative">
 
+    <component 
+      v-for="c in coreStore?.resourceOptions?.pageInjections?.create?.beforeBreadcrumbs || []"
+      :is="getCustomComponent(c)"
+      :record="coreStore.record"
+      :resource="coreStore.resource"
+      :adminUser="coreStore.adminUser"
+    />
+
     <BreadcrumbsWithButtons>
       <!-- save and cancle -->
       <button @click="$router.back()"
@@ -22,6 +30,14 @@
 
     </BreadcrumbsWithButtons>
 
+    <component 
+      v-for="c in coreStore?.resourceOptions?.pageInjections?.create?.afterBreadcrumbs || []"
+      :is="getCustomComponent(c)"
+      :record="coreStore.record"
+      :resource="coreStore.resource"
+      :adminUser="coreStore.adminUser"
+    />
+
     <SingleSkeletLoader v-if="loading"></SingleSkeletLoader>
 
     
@@ -36,6 +52,13 @@
     >
     </ResourceForm>
 
+    <component 
+      v-for="c in coreStore?.resourceOptions?.pageInjections?.create?.bottom || []"
+      :is="getCustomComponent(c)"
+      :record="coreStore.record"
+      :resource="coreStore.resource"
+      :adminUser="coreStore.adminUser"
+    />
 
   </div>
 </template>
@@ -78,8 +101,8 @@ onMounted(async () => {
     resourceId: route.params.resourceId
   });
   createComponentsPerColumn = coreStore.resourceColumns.reduce((acc, column) => {
-      if (column.component?.create) {
-          acc[column.name] = getCustomComponent(column.component.create);
+      if (column.components?.create) {
+          acc[column.name] = getCustomComponent(column.components.create);
       }
       return acc;
     }, {});

package/spa/src/views/EditView.vue

@@ -1,5 +1,12 @@
 <template>
   <div class="relative">
+    <component 
+      v-for="c in coreStore?.resourceOptions?.pageInjections?.edit?.beforeBreadcrumbs || []"
+      :is="getCustomComponent(c)"
+      :record="editableRecord"
+      :resource="coreStore.resource"
+      :adminUser="coreStore.adminUser"
+    />
 
     <BreadcrumbsWithButtons>
       <!-- save and cancle -->
@@ -19,18 +26,36 @@
 
     </BreadcrumbsWithButtons>
 
+    <component 
+      v-for="c in coreStore?.resourceOptions?.pageInjections?.edit?.afterBreadcrumbs || []"
+      :is="getCustomComponent(c)"
+      :record="coreStore.record"
+      :resource="coreStore.resource"
+      :adminUser="coreStore.adminUser"
+    />
+
     <SingleSkeletLoader v-if="loading"></SingleSkeletLoader>
 
     <ResourceForm 
       v-else
       :record="editableRecord"
-      :resourceColumns="coreStore.resourceColumns"
+      :resource="coreStore.resource"
+      :adminUser="coreStore.adminUser"
       @update:record="onUpdateRecord"
       @update:isValid="isValid = $event"
       :validating="validating"
       :customComponentsPerColumn="editComponentsPerColumn"
     >
     </ResourceForm>
+
+    <component 
+      v-for="c in coreStore?.resourceOptions?.pageInjections?.edit?.bottom || []"
+      :is="getCustomComponent(c)"
+      :record="coreStore.record"
+      :resource="coreStore.resource"
+      :adminUser="coreStore.adminUser"
+    />
+
   </div>
 </template>
 
@@ -92,8 +117,8 @@ onMounted(async () => {
   checkAcessByAllowedActions(coreStore.resourceOptions.allowedActions,'edit');
 
   editComponentsPerColumn = coreStore.resourceColumns.reduce((acc, column) => {
-      if (column.component?.edit) {
-          acc[column.name] = getCustomComponent(column.component.edit);
+      if (column.components?.edit) {
+          acc[column.name] = getCustomComponent(column.components.edit);
       }
       return acc;
     }, {});

package/spa/src/views/ListView.vue

@@ -9,6 +9,13 @@
       />
     </Teleport>
 
+    <component 
+      v-for="c in coreStore?.resourceOptions?.pageInjections?.list?.beforeBreadcrumbs || []"
+      :is="getCustomComponent(c)"
+      :resource="coreStore.resource"
+      :adminUser="coreStore.adminUser"
+    />
+
     <BreadcrumbsWithButtons>
       <button
         @click="()=>{checkboxes = []}"
@@ -64,6 +71,13 @@
       </button>
     </BreadcrumbsWithButtons>
 
+    <component 
+      v-for="c in coreStore?.resourceOptions?.pageInjections?.list?.afterBreadcrumbs || []"
+      :is="getCustomComponent(c)"
+      :resource="coreStore.resource"
+      :adminUser="coreStore.adminUser"
+    />
+
     <!-- table -->
     <div class="relative overflow-x-auto shadow-list-table-shadow dark:shadow-black	overflow-y-hidden  rounded-default">
 
@@ -202,7 +216,9 @@
             <component
               :is="listComponentsPerColumn[c.name] || ValueRenderer"
               :column="c"
-              :row="row"
+              :record="row"
+              :adminUser="coreStore.adminUser"
+              :resource="coreStore.resource"
             />
           </td>
           <td class=" items-center px-6 py-4">
@@ -260,8 +276,7 @@
     </div>
     <!-- pagination -->
     <div class="flex flex-col items-center mt-4 xs:flex-row xs:justify-between xs:items-center"
-         v-if="rows && totalRows >= pageSize && totalRows > 0"
-    >
+         v-if="rows && totalRows >= pageSize && totalRows > 0">
       <!-- Help text -->
       <span class="text-sm text-gray-700 dark:text-gray-400">
             Showing <span class="font-semibold text-gray-900 dark:text-white">
@@ -313,6 +328,14 @@
         </button>
       </div>
     </div>
+
+    <component 
+      v-for="c in coreStore?.resourceOptions?.pageInjections?.list?.bottom || []"
+      :is="getCustomComponent(c)"
+      :resource="coreStore.resource"
+      :adminUser="coreStore.adminUser"
+    />
+
   </div>
 </template>
 
@@ -434,8 +457,8 @@ async function getList() {
     }
   });
   listComponentsPerColumn = coreStore.resourceColumns.reduce((acc, column) => {
-      if (column.component?.list) {
-          acc[column.name] = getCustomComponent(column.component.list);
+      if (column.components?.list) {
+          acc[column.name] = getCustomComponent(column.components.list);
       }
       return acc;
     }, {});