adminforth 1.0.30 → 1.0.32

package/spa/package-lock.json

@@ -9,12 +9,15 @@
       "version": "0.0.0",
       "dependencies": {
         "@iconify-prerendered/vue-flowbite": "^0.23.1714023977",
+        "@vueuse/core": "^10.10.0",
         "dayjs": "^1.11.11",
+        "debounce": "^2.1.0",
         "flowbite": "^2.3.0",
         "flowbite-datepicker": "^1.2.6",
         "pinia": "^2.1.7",
         "vue": "^3.4.21",
-        "vue-router": "^4.3.0"
+        "vue-router": "^4.3.0",
+        "vue-slider-component": "^4.1.0-beta.7"
       },
       "devDependencies": {
         "@rushstack/eslint-patch": "^1.8.0",
@@ -950,6 +953,11 @@
         "undici-types": "~5.26.4"
       }
     },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.20",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
+      "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "7.9.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.9.0.tgz",
@@ -1330,6 +1338,89 @@
       "integrity": "sha512-VcZK7MvpjuTPx2w6blwnwZAu5/LgBUtejFOi3pPGQFXQN5Ela03FUtd2Qtg4yWGGissVL0dr6Ro1LfOFh+PCuQ==",
       "dev": true
     },
+    "node_modules/@vueuse/core": {
+      "version": "10.10.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.10.0.tgz",
+      "integrity": "sha512-vexJ/YXYs2S42B783rI95lMt3GzEwkxzC8Hb0Ndpd8rD+p+Lk/Za4bd797Ym7yq4jXqdSyj3JLChunF/vyYjUw==",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.20",
+        "@vueuse/metadata": "10.10.0",
+        "@vueuse/shared": "10.10.0",
+        "vue-demi": ">=0.14.7"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.14.8",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.8.tgz",
+      "integrity": "sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "10.10.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.10.0.tgz",
+      "integrity": "sha512-UNAo2sTCAW5ge6OErPEHb5z7NEAg3XcO9Cj7OK45aZXfLLH1QkexDcZD77HBi5zvEiLOm1An+p/4b5K3Worpug==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "10.10.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.10.0.tgz",
+      "integrity": "sha512-2aW33Ac0Uk0U+9yo3Ypg9s5KcR42cuehRWl7vnUHadQyFvCktseyxxEPBi1Eiq4D2yBGACOnqLZpx1eMc7g5Og==",
+      "dependencies": {
+        "vue-demi": ">=0.14.7"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.14.8",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.8.tgz",
+      "integrity": "sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/acorn": {
       "version": "8.11.3",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
@@ -1716,6 +1807,17 @@
       "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
       "dev": true
     },
+    "node_modules/debounce": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/debounce/-/debounce-2.1.0.tgz",
+      "integrity": "sha512-OkL3+0pPWCqoBc/nhO9u6TIQNTK44fnBnzuVtJAbp13Naxw9R6u21x+8tVTka87AhDZ3htqZ2pSSsZl9fqL2Wg==",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -3970,6 +4072,11 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/vue-slider-component": {
+      "version": "4.1.0-beta.7",
+      "resolved": "https://registry.npmjs.org/vue-slider-component/-/vue-slider-component-4.1.0-beta.7.tgz",
+      "integrity": "sha512-Qb7K920ZG7PoQswoF6Ias+i3W2rd3k4fpk04JUl82kEUcN86Yg6et7bVSKWt/7VpQe8a5IT3BqCKSCOZ7AJgCA=="
+    },
     "node_modules/vue-template-compiler": {
       "version": "2.7.16",
       "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz",

package/spa/package.json

@@ -13,12 +13,15 @@
   },
   "dependencies": {
     "@iconify-prerendered/vue-flowbite": "^0.23.1714023977",
+    "@vueuse/core": "^10.10.0",
     "dayjs": "^1.11.11",
+    "debounce": "^2.1.0",
     "flowbite": "^2.3.0",
     "flowbite-datepicker": "^1.2.6",
     "pinia": "^2.1.7",
     "vue": "^3.4.21",
-    "vue-router": "^4.3.0"
+    "vue-router": "^4.3.0",
+    "vue-slider-component": "^4.1.0-beta.7"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.8.0",

package/spa/src/App.vue

@@ -32,7 +32,7 @@
 
                 </button>
               </div>
-              <div class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded shadow dark:bg-gray-700 dark:divide-gray-600 dark:shadow-xl" id="dropdown-user">
+              <div class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded shadow dark:shadow-black dark:bg-gray-700 dark:divide-gray-600 dark:shadow-black" id="dropdown-user">
                 <div class="px-4 py-3" role="none">
                   <p class="text-sm text-gray-900 dark:text-white" role="none" v-if="coreStore.userFullname">
                     {{ coreStore.userFullname }}
@@ -112,7 +112,7 @@
     </div>
   </div> 
 
-  <div v-else>
+  <div v-else-if="routerIsReady">
     <RouterView/>
   </div>
   <AcceptModal />

package/spa/src/components/AcceptModal.vue

@@ -16,7 +16,7 @@ const modalStore = useModalStore();
   <Teleport to="body">
     <div  v-if="modalStore.isOpened"  class="bg-gray-900/50 dark:bg-gray-900/80  overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
         <div class="relative p-4 w-full max-w-md max-h-full top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 " >
-            <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
+            <div class="relative bg-white rounded-lg shadow dark:bg-gray-700 dark:shadow-black">
                 <button type="button"@click="modalStore.togleModal" class="absolute top-3 end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" >
                     <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"/>

package/spa/src/components/CustomRangePicker.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="flex flex-wrap gap-2">
+    <input
+      type="number" aria-describedby="helper-text-explanation"
+      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-20 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      placeholder="From"
+      v-model="start"
+    >
+
+    <input
+      type="number" aria-describedby="helper-text-explanation"
+      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-20 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      placeholder="To"
+      v-model="end"
+    >
+
+    <button
+      v-if="isChanged"
+      type="button"
+      class="flex items-center p-0.5 ml-auto px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-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 disabled:opacity-50 disabled:cursor-not-allowed"
+      @click="clear">Clear
+    </button>
+
+    <div class="w-full">
+      <vue-slider
+        class="custom-slider"
+        :dot-size="20"
+        height="7.99px"
+        :min="minFormatted"
+        :max="maxFormatted"
+        v-model="sliderValue"
+        @update:model-value="updateFromSlider($event)"
+      />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import VueSlider from 'vue-slider-component';
+import 'vue-slider-component/theme/antd.css'
+import {computed, onMounted, ref, watch} from "vue";
+import debounce from 'debounce'
+
+const props = defineProps({
+  valueStart: {
+    default: 0,
+  },
+  valueEnd: {
+    default: 10,
+  },
+  min: {
+    default: 0,
+  },
+  max: {
+    default: 10,
+  },
+});
+
+const emit = defineEmits(['update:valueStart', 'update:valueEnd']);
+
+const minFormatted = computed(() => Math.floor(props.min));
+const maxFormatted = computed(() => Math.ceil(props.max));
+
+const isChanged = computed(() => {
+  return start.value !== minFormatted.value || end.value !== maxFormatted.value;
+});
+
+const start = ref(minFormatted.value);
+const end = ref(maxFormatted.value);
+
+const sliderValue = ref([start.value, end.value]);
+
+const updateFromSlider =
+    debounce((value: [number, number]) => {
+      start.value = value[0];
+      end.value = value[1];
+    }, 500);
+
+function updateFromProps() {
+  if (props.valueStart || props.valueEnd) {
+    setFromProps(props.valueStart, props.valueEnd)
+  } else {
+    clear();
+  }
+}
+
+onMounted(() => {
+  updateFromProps();
+
+  watch(() => [props.valueStart, props.valueEnd], (value) => {
+    updateFromProps();
+  });
+})
+
+watch(start, () => {
+  //console.log('⚡ emit', start.value)
+  emit('update:valueStart', start.value)
+})
+
+watch(end, () => {
+  //console.log('⚡ emit', end.value)
+  emit('update:valueEnd', end.value);
+})
+
+const clear = () => {
+  start.value = minFormatted.value;
+  end.value = maxFormatted.value;
+  sliderValue.value = [start.value, end.value]
+}
+
+function setFromProps(startValue: number, endValue: number) {
+  start.value = startValue ? startValue : minFormatted.value
+  end.value = endValue ? endValue : maxFormatted.value
+  sliderValue.value = [start.value, end.value]
+}
+</script>
+
+<style lang="scss" scoped>
+.custom-slider {
+    &:deep(.vue-slider-rail) {
+        background-color: rgb(229 231 235);
+    }
+
+    &:deep(.vue-slider-dot-handle) {
+        background-color: #1c64f2;
+        border: none;
+        box-shadow: none;
+    }
+
+    &:deep(.vue-slider-dot-handle:hover) {
+        background-color: #1c64f2;
+        border: none;
+        box-shadow: none;
+    }
+
+    &:deep(.vue-slider-process) {
+        background-color: rgb(225 239 254);
+    }
+
+    &:deep(.vue-slider-process:hover) {
+        background-color: rgb(225 239 254);
+    }
+}
+</style>

package/spa/src/components/Dropdown.vue

@@ -34,7 +34,7 @@
         <IconCaretUpSolid v-else class="h-5 w-5 text-gray-400" />
       </div>
     </div>
-    <div v-if="showDropdown" class="absolute z-10 mt-1 w-full bg-white shadow-lg rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
+    <div v-if="showDropdown" class="absolute z-10 mt-1 w-full bg-white shadow-lg dark:shadow-black rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
       <div
         v-for="item in filteredItems"
         :key="item.value"
@@ -76,7 +76,6 @@ const showDropdown = ref(false);
 const selectedItems = ref([]);
 
 function updateFromProps() {
-  console.log('⚡ updateFromProps', props.modelValue)
   if (props.modelValue !== undefined) {
     if (props.single) {
       selectedItems.value = [props.options.find(item => item.value === props.modelValue)];

package/spa/src/components/Filters.vue

@@ -2,7 +2,7 @@
   <!-- drawer component -->
   <div id="drawer-navigation" 
   
-      class="fixed top-14 right-0 z-40 p-4 overflow-y-auto transition-transform translate-x-full bg-white w-80 dark:bg-gray-800 shadow-xl"
+      class="fixed top-14 right-0 z-40 p-4 overflow-y-auto transition-transform translate-x-full bg-white w-80 dark:bg-gray-800 shadow-xl dark:shadow-black"
 
       :class="show ? 'top-0 transform-none' : ''"
       tabindex="-1" aria-labelledby="drawer-navigation-label"
@@ -22,8 +22,14 @@
          <li v-for="c in columnsWithFilter" :key="c">
             <p class="dark:text-gray-400">{{ c.label }}</p>
 
-            <Dropdown 
-              v-if="c.type === 'boolean'" 
+            <Dropdown
+              v-if="c.foreignResource"
+              :options="columnOptions[c.name] || []"
+              @update:modelValue="setFilterItem({ column: c, operator: 'in', value: $event })"
+              :modelValue="filters.find(f => f.field === c.name && f.operator === 'in')?.value || []"
+            />
+            <Dropdown
+              v-else-if="c.type === 'boolean'"
               :options="[{ label: 'Yes', value: true }, { label: 'No', value: false }, { label: 'Unset', value: null }]"
               @update:modelValue="setFilterItem({ column: c, operator: 'in', value: $event })"
               :modelValue="filters.find(f => f.field === c.name && f.operator === 'in')?.value || []"
@@ -62,22 +68,15 @@
              :value="getFilterItem({ column: c, operator: 'ilike' })"
            >
 
-            <div v-else-if="['integer', 'decimal', 'float'].includes(c.type)" class="flex gap-2">
-              <input 
-                type="number" aria-describedby="helper-text-explanation" 
-                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-20 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                placeholder="From"
-                @input="setFilterItem({ column: c, operator: 'gte', value: $event.target.value || undefined })"
-                :value="getFilterItem({ column: c, operator: 'gte' })"
-              >
-              <input 
-                type="number" aria-describedby="helper-text-explanation" 
-                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-20 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                placeholder="To"
-                @input="setFilterItem({ column: c, operator: 'lte', value: $event.target.value || undefined})"
-                :value="getFilterItem({ column: c, operator: 'lte' })"
-              >
-            </div>
+           <CustomRangePicker
+             v-else-if="['integer', 'decimal', 'float'].includes(c.type)"
+             :min="c.min"
+             :max="c.max"
+             :valueStart="getFilterItem({ column: c, operator: 'gte' })"
+             @update:valueStart="setFilterItem({ column: c, operator: 'gte', value: $event || undefined })"
+             :valueEnd="getFilterItem({ column: c, operator: 'lte' })"
+             @update:valueEnd="setFilterItem({ column: c, operator: 'lte', value: $event || undefined })"
+           />
             
          </li>
       </ul>
@@ -99,19 +98,53 @@
 </template>
 
 <script setup>
-import { watch, computed } from 'vue'
+import { watch, computed, ref, onMounted } from 'vue'
 import Dropdown from '@/components/Dropdown.vue';
 import CustomDateRangePicker from '@/components/CustomDateRangePicker.vue';
+import { callAdminForthApi } from '@/utils';
+import { useRouter } from 'vue-router';
+import { computedAsync } from '@vueuse/core'
+import CustomRangePicker from "@/components/CustomRangePicker.vue";
 
 // props: columns
 // add support for v-model:filers
 const props = defineProps(['columns', 'filters', 'show', 'columnsMinMax']);
 const emits = defineEmits(['update:filters', 'hide']);
 
-const columnsWithFilter = computed( 
+const router = useRouter();
+
+
+const columnsWithFilter = computed(
   () => props.columns?.filter(column => column.showIn.includes('filter')) || []
 );
 
+const columnOptions = computedAsync(async () => {
+  const ret = {};
+  if (!props.columns) {
+    return ret;
+  }
+  await Promise.all(
+    Object.values(props.columns).map(async (column) => {
+      if (column.foreignResource) {
+        const list = await callAdminForthApi({
+          method: 'POST',
+          path: `/get_resource_foreign_data`,
+          body: {
+            resourceId: router.currentRoute.value.params.resourceId,
+            column: column.name,
+            limit: 1000,
+            offset: 0,
+          },
+        });
+        ret[column.name] = list.items;
+      }
+    })
+  );
+
+  return ret;
+}, {});
+
+
 // sync 'body' class 'overflow-hidden' with show prop show
 watch(() => props.show, (show) => {
   if (show) {

package/spa/src/components/ResourceForm.vue

@@ -2,7 +2,7 @@
   <div>
     
     <div 
-      class="relative shadow-md sm:rounded-lg dark:shadow-2xl"
+      class="relative shadow-md sm:rounded-lg dark:shadow-2xl dark:shadow-black"
     >
       <form autocomplete="off" @submit.prevent>
         <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
@@ -36,7 +36,14 @@
                 <td class="px-6 py-4 whitespace-nowrap whitespace-pre-wrap relative">
                   <Dropdown
                     single
-                    v-if="column.enum"
+                    v-if="column.foreignResource"
+                    :options="columnOptions[column.name] || []"
+                    :modelValue="currentValues[column.name]"
+                    @update:modelValue="setCurrentValue(column.name, $event)"
+                  />
+                  <Dropdown
+                    single
+                    v-else-if="column.enum"
                     :options="column.enum"
                     :modelValue="currentValues[column.name]"
                     @update:modelValue="setCurrentValue(column.name, $event)"
@@ -128,6 +135,11 @@ import { IconExclamationCircleSolid } from '@iconify-prerendered/vue-flowbite';
 import { initFlowbite } from 'flowbite'
 import { IconEyeSolid, IconEyeSlashSolid } from '@iconify-prerendered/vue-flowbite';
 import CustomDatePicker from "@/components/CustomDatePicker.vue";
+import { callAdminForthApi } from '@/utils';
+import { useRouter } from 'vue-router';
+import { computedAsync } from '@vueuse/core';
+
+const router = useRouter();
 
 const props = defineProps({
   loading: Boolean,
@@ -145,6 +157,7 @@ const emit = defineEmits(['update:record', 'update:isValid']);
 
 const currentValues = ref({});
 
+
 const columnError = (column) => {
   const val = computed(() => {
     if ( column.required[mode.value] && (currentValues.value[column.name] === undefined || currentValues.value[column.name] === null || currentValues.value[column.name] === '') ) {
@@ -172,8 +185,6 @@ const columnError = (column) => {
 };
 
 
-
-
 const setCurrentValue = (key, value) => {
   currentValues.value[key] = value;
 
@@ -185,8 +196,31 @@ onMounted(() => {
     currentValues.value[key] = props.record[key];
   });
   initFlowbite();
+
+  
 });
 
+const columnOptions = computedAsync(async () => { 
+  return (await Promise.all(
+    Object.values(props.resourceColumns).map(async (column) => {
+      if (column.foreignResource) {
+        const list = await callAdminForthApi({
+          method: 'POST',
+          path: `/get_resource_foreign_data`,
+          body: {
+            resourceId: router.currentRoute.value.params.resourceId,
+            column: column.name,
+            limit: 1000,
+            offset: 0,
+          },
+        });
+        return { [column.name]: list.items };
+      }
+    })
+  )).reduce((acc, val) => Object.assign(acc, val), {})
+
+}, {});
+
 const coreStore = useCoreStore();
 
 const editableColumns = computed(() => {

package/spa/src/router/index.ts

@@ -12,7 +12,9 @@ const router = createRouter({
     {
       path: '/',
       name: 'home',
-      component: HomeView
+      //redirect to login 
+      /* IMPORTANT:ADMINFORTH REDIRECT */
+
     },
     {
       path: '/login',

package/spa/src/stores/core.ts

@@ -42,20 +42,7 @@ export const useCoreStore = defineStore('core', () => {
     user.value = resp.user;
 
     // find homepage:true in menu recuresively
-    if (import.meta.env.DEV){
-      return
-    } else {
-      const homepage = await findHomepage(menu.value);
-      if (homepage) {
-        if (homepage.resourceId) {
-          // redirect to homepage
-          router.push({ name: 'resource-list', params: { resourceId: homepage.resourceId } });
-        } else {
-          // redirect to path
-          router.push(homepage.path);
-        }
-      }
-    }
+    
   }
 
   async function fetchRecord({ resourceId, primaryKey }) {

package/spa/src/views/ListView.vue

@@ -65,7 +65,7 @@
     </BreadcrumbsWithButtons>
 
     <!-- table -->
-    <div class="relative overflow-x-auto shadow-md sm:rounded-lg dark:shadow-2xl">
+    <div class="relative overflow-x-auto shadow-md dark:shadow-black	 sm:rounded-lg dark:s">
 
 
       <!-- skelet loader -->
@@ -357,7 +357,6 @@ const totalRows = ref(0);
 const allCheckedActions = ref([]);
 const allowedActions = ref({});
 
-
 const DEFAULT_PAGE_SIZE = 10;
 
 const columnsListed = computed(() => coreStore.resourceColumns?.filter(c => c.showIn.includes('list')));

package/spa/src/views/LoginView.vue

@@ -11,7 +11,7 @@
     <div id="authentication-modal" tabindex="-1" class=" overflow-y-auto overflow-x-hidden z-50 min-w-[400px] justify-center items-center md:inset-0 h-[calc(100%-1rem)] max-h-full">
         <div class="relative p-4 w-full max-w-md max-h-full">
             <!-- Modal content -->
-            <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
+            <div class="relative bg-white rounded-lg shadow dark:bg-gray-700 dark:shadow-black" >
                 <!-- Modal header -->
                 <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
                     <h3 class="text-xl font-semibold text-gray-900 dark:text-white">