adminforth 3.35.0 → 4.0.0

package/dist/spa/src/afcl/MixedChart.vue

@@ -4,8 +4,9 @@
 
 <script setup lang="ts">
 import type ApexCharts from 'apexcharts';
-import { type ApexOptions } from 'apexcharts';
+import type { ApexOptions } from 'apexcharts';
 import { ref, onUnmounted, watch, computed } from 'vue';
+import { mergeChartOptions } from './chartUtils';
 type ApexChartsConstructor = new (el: Element, options: any) => ApexCharts;
 
 const props = defineProps<{
@@ -29,7 +30,7 @@ const optionsBase = {
     height: 250,
     type: 'line',
     stacked: false,
-    fontFamily: "Inter, sans-serif",
+    fontFamily: "'Geist Variable', ui-sans-serif, sans-serif",
     toolbar: {
       show: false,
     }
@@ -84,22 +85,7 @@ const chartOptions = computed(() => {
     labels: props.data?.map((item) => item.x) ?? [],
   };
 
-  function mergeOptions(options: any, newOptions: any) {
-    if (!newOptions) {
-      return;
-    }
-    for (const key in newOptions) {
-      if (typeof newOptions[key] === 'object' && !Array.isArray(newOptions[key])) {
-        if (!options[key]) {
-          options[key] = {};
-        }
-        mergeOptions(options[key], newOptions[key]);
-      } else {
-        options[key] = newOptions[key];
-      }
-    }
-  }
-  mergeOptions(options, props.options);
+  mergeChartOptions(options, props.options);
 
   return options;
 });

package/dist/spa/src/afcl/Modal.vue

@@ -10,11 +10,11 @@
         v-show="isModalOpen" 
         v-if="!removeFromDom" 
         @click="backdropClick" 
-        class="bg-black/50 overflow-y-auto overscroll-contain overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full h-full md:inset-0 h-1rem max-h-full flex"
+        class="bg-zinc-900/40 dark:bg-black/60 overflow-y-auto overscroll-contain overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full h-full md:inset-0 h-1rem max-h-full flex"
         :class="props.backgroundCustomClasses"
       >
         <!-- Modal content -->
-        <div v-bind="$attrs" class="relative bg-lightDialogBackgorund rounded-lg shadow-sm dark:bg-darkDialogBackgorund mx-4 sm:mx-0">
+        <div v-bind="$attrs" class="relative bg-lightDialogBackgorund rounded-xl shadow-popover dark:shadow-darkPopover dark:bg-darkDialogBackgorund mx-4 sm:mx-0">
 
           <!-- Modal body -->
           <div class="text-lightDialogBodyText dark:text-darkDialogBodyText">
@@ -24,15 +24,15 @@
           <!-- Confirmation Modal -->
           <div
             v-if="showConfirmationOnClose"
-            class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-[60]"
+            class="fixed inset-0 flex items-center justify-center bg-zinc-900/40 dark:bg-black/60 z-[60]"
             :class="props.modalCustomClasses"
           >
-            <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-sm w-full">
-              <h2 class="text-lg font-semibold mb-4 text-lightDialogHeaderText dark:text-darkDialogHeaderText">{{ t('Confirm Close') }}</h2>
-              <p class="mb-6 text-lightDialogBodyText dark:text-darkDialogBodyText">{{ props.closeConfirmationText }}</p>
-              <div class="flex justify-end">
+            <div class="bg-lightDialogBackgorund dark:bg-darkDialogBackgorund p-5 rounded-xl shadow-popover dark:shadow-darkPopover max-w-sm w-full">
+              <h2 class="text-base font-semibold mb-2 text-lightDialogHeaderText dark:text-darkDialogHeaderText">{{ t('Confirm Close') }}</h2>
+              <p class="mb-5 text-sm text-lightDialogBodyText dark:text-darkDialogBodyText">{{ props.closeConfirmationText }}</p>
+              <div class="flex justify-end gap-2">
                 <Button
-                  class="me-3 !bg-gray-50 dark:!bg-gray-700 !text-lightDialogBodyText dark:!text-darkDialogBodyText hover:!bg-gray-100 dark:hover:!bg-gray-600 !border-gray-200 dark:!border-gray-600"
+                  variant="secondary"
                   @click="showConfirmationOnClose = false"
                 >
                   {{ t('Cancel') }}
@@ -58,7 +58,7 @@ import Button from "./Button.vue";
 import { ref, onMounted, nextTick, onUnmounted, computed, type Ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-const isModalOpen = ref(false);
+const isModalOpen = defineModel<boolean>('open', { default: false });
 const { t } = useI18n();
 
 const removeFromDom = computed(() => {

package/dist/spa/src/afcl/PieChart.vue

@@ -4,8 +4,9 @@
 
 <script setup lang="ts">
 import type ApexCharts from 'apexcharts';
-import { type ApexOptions } from 'apexcharts';
+import type { ApexOptions } from 'apexcharts';
 import { ref, type Ref, watch, computed, onUnmounted } from 'vue';
+import { CHART_COLORS, mergeChartOptions } from './chartUtils';
 type ApexChartsConstructor = new (el: Element, options: any) => ApexCharts;
 
 const chart: Ref<HTMLDivElement | null> = ref(null);
@@ -20,11 +21,6 @@ const props = defineProps<{
   options?: ApexOptions,
 }>();
 
-const SUGGESTED_COLORS = [
-  "#4E79A7", "#F28E2B", "#E15759", "#76B7B2", "#59A14F", "#EDC949", "#B07AA1", "#FF9DA6", "#9C755F", "#BAB0AC",
-  "#2B8A86", "#CC4D58", "#F7941D", "#F9C232", "#729B33", "#497288", "#16578D", "#5F4D99", "#F9F871", "#F9F871",
-];
-
 
 //  [ "#2B8A86", "#CC4D58", "#F7941D", "#F9C232", "#729B33", "#497288", "#16578D", "#5F4D99",]
 //  ["#4E79A7", "#F28E2B", "#E15759", "#76B7B2", "#59A14F"], // Professional Cool Tones
@@ -57,13 +53,13 @@ const optionsBase = {
             show: true,
             name: {
               show: true,
-              fontFamily: "Inter, sans-serif",
+              fontFamily: "'Geist Variable', ui-sans-serif, sans-serif",
               offsetY: 20,
             },
             total: {
               showAlways: true,
               show: false,
-              fontFamily: "Inter, sans-serif",
+              fontFamily: "'Geist Variable', ui-sans-serif, sans-serif",
               label: "",
               formatter: function (w: any) {
                 const sum = w.globals.seriesTotals.reduce((a: any, b: any) => {
@@ -74,7 +70,7 @@ const optionsBase = {
             },
             value: {
               show: true,
-              fontFamily: "Inter, sans-serif",
+              fontFamily: "'Geist Variable', ui-sans-serif, sans-serif",
               offsetY: -20,
               formatter: function (value: any) {
                 return value + "k"
@@ -98,7 +94,7 @@ const optionsBase = {
     },
     legend: {
       position: "bottom",
-      fontFamily: "Inter, sans-serif",
+      fontFamily: "'Geist Variable', ui-sans-serif, sans-serif",
     },
     yaxis: {
       labels: {
@@ -129,28 +125,11 @@ const options = computed(() => {
    
     // shade and gradient take from first series
     series: props.data?.map((item) => item.amount) ?? [],
-    colors: props.data?.map((item, index) => item.color ?? SUGGESTED_COLORS[index]) ?? [],
+    colors: props.data?.map((item, index) => item.color ?? CHART_COLORS[index]) ?? [],
     labels: props.data?.map((item) => item.label) ?? [],
   };
 
-  // for each of  ...props.options  merge on lowest level. so if { chart: {height : 2} }, it should not replace chart level, only height level
-  function mergeOptions(options: any, newOptions: any) {
-    if (!newOptions) {
-      return;
-    }
-    for (const key in newOptions) {
-      // and is not array
-      if (typeof newOptions[key] === 'object' && !Array.isArray(newOptions[key])) {
-        if (!options[key]) {
-          options[key] = {};
-        }
-        mergeOptions(options[key], newOptions[key]);
-      } else {
-        options[key] = newOptions[key];
-      }
-    }
-  }
-  mergeOptions(options, props.options);
+  mergeChartOptions(options, props.options);
 
   return options;
 });

package/dist/spa/src/afcl/ProgressBar.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="relative w-full bg-lightProgressBarUnfilledColor rounded-full h-2.5 dark:bg-darkProgressBarUnfilledColor" :class="props.height ? `h-${props.height}` : ''">
+  <div class="relative w-full bg-lightProgressBarUnfilledColor rounded-full h-1.5 dark:bg-darkProgressBarUnfilledColor" :class="props.height ? `h-${props.height}` : ''">
     <span v-if="leftLabel" class="absolute -top-6 left-0 text-sm" :class="textClass">{{ leftLabel }}</span>
     <span v-if="rightLabel" class="absolute -top-6 right-0 text-sm" :class="textClass">{{ rightLabel }}</span>
     <div
-      class="bg-lightPrimary dark:bg-darkPrimary h-2.5 rounded-full transition-all duration-300 ease-in-out"
+      class="bg-lightPrimary dark:bg-darkPrimary h-1.5 rounded-full transition-all duration-300 ease-in-out"
       :class="{ 'progress-bar': showAnimation, [`h-${props.height}`]: props.height }"
       :style="{ width: `${percentage}%` }"
     ></div>

package/dist/spa/src/afcl/Select.vue

@@ -10,9 +10,9 @@
         v-model="search"
         @click="inputClick"
         @input="inputInput"
-        class="block w-full pl-3 pr-10 py-2.5 border border-lightDropownButtonsBorder rounded-default leading-5 bg-lightDropdownButtonsBackground 
+        class="block w-full pl-2.5 pr-9 py-1.5 border border-lightDropownButtonsBorder rounded-default leading-5 bg-lightDropdownButtonsBackground shadow-customLight hover:border-lightInputBorderHover dark:hover:border-darkInputBorderHover
         placeholder-lightDropdownButtonsPlaceholderText text-lightDropdownButtonsText text-base sm:text-sm transition duration-150 ease-in-out dark:bg-darkDropdownButtonsBackground dark:border-darkDropdownButtonsBorder dark:placeholder-darkDropdownButtonsPlaceholderText
-        dark:text-darkDropdownButtonsText focus:ring-lightPrimary focus:border-lightPrimary dark:focus:ring-darkPrimary dark:focus:border-darkPrimary"
+        dark:text-darkDropdownButtonsText focus:outline-none focus:ring-[3px] focus:ring-lightInputFocusRing focus:border-lightInputFocusBorder dark:focus:ring-darkInputFocusRing dark:focus:border-darkInputFocusBorder"
         :class="[{'cursor-pointer': searchDisabled}, classesForInput]"
         :id="inputId"
         :name="inputId"
@@ -23,67 +23,67 @@
         data-bwignore
         data-form-type="other"
         :placeholder="
-          selectedItems.length && !multiple ? '' :  (showDropdown ? $t('Search') : placeholder || $t('Select...')) 
+          selectedItems.length && !multiple ? '' :  (showDropdown && !searchDisabled ? $t('Search') : placeholder || $t('Select...'))
         "
       />
 
-      <div v-if="!multiple && selectedItems.length" class="text-lightDropdownButtonsText dark:text-darkDropdownButtonsText absolute pointer-events-none inset-y-0 left-2 flex items-center pr-2 px-1">
+      <div v-if="!multiple && selectedItems.length" class="text-sm text-lightDropdownButtonsText dark:text-darkDropdownButtonsText absolute pointer-events-none inset-y-0 left-1.5 flex items-center pr-2 px-1">
         <slot 
           name="selected-item" 
           :option="selectedItems[0]"
         ></slot>
-        <span v-if="!$slots['selected-item']" class="text-lightDropdownButtonsText dark:text-darkDropdownButtonsText font-medium  ">
+        <span v-if="!$slots['selected-item']" class="text-lightDropdownButtonsText dark:text-darkDropdownButtonsText">
           {{ selectedItems[0]?.label }}
         </span>
       </div>
 
       <div class="absolute inset-y-0 right-2 flex items-center pointer-events-none">
         <!-- triangle icon -->
-        <IconCaretDownSolid class="h-4 w-4 text-lightPrimary dark:text-darkPrimary opacity-50 transition duration-150 ease-in"
+        <IconChevronDown class="h-4 w-4 text-lightInputIconColor dark:text-darkInputIconColor transition duration-150 ease-in"
           :class="{ 'transform rotate-180': showDropdown }"
         />
       </div>
     </div>
     <teleport to="body" v-if="(teleportToBody  || teleportToTop) && showDropdown">
       <div ref="dropdownEl" :style="getDropdownPosition" :class="{'shadow-none': isTop, 'z-30': teleportToBody, 'z-[1000]': teleportToTop}"
-        class="fixed w-full bg-lightDropdownOptionsBackground shadow-lg dark:shadow-black dark:bg-darkDropdownOptionsBackground
-          dark:border-gray-600 rounded-default py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm max-h-48"
+        class="fixed w-full bg-lightDropdownOptionsBackground shadow-popover dark:shadow-darkPopover dark:bg-darkDropdownOptionsBackground
+          rounded-lg p-1 text-base overflow-auto focus:outline-none sm:text-sm max-h-60"
         @scroll="handleDropdownScroll">
         <div
           v-for="item in filteredItems"
           :key="item.value"
-          class="px-4 py-2 cursor-pointer hover:bg-lightDropdownOptionsHoverBackground dark:hover:bg-darkDropdownOptionsHoverBackground text-lightDropdownOptionsText dark:text-darkDropdownOptionsText"
-          :class="{ 'bg-lightDropdownPicked dark:bg-darkDropdownPicked': selectedItems.includes(item) }"
+          class="px-2.5 py-1.5 rounded-md cursor-pointer hover:bg-lightDropdownOptionsHoverBackground dark:hover:bg-darkDropdownOptionsHoverBackground text-lightDropdownOptionsText dark:text-darkDropdownOptionsText"
+          :class="{ 'bg-lightDropdownPicked dark:bg-darkDropdownPicked font-medium': selectedItems.includes(item) }"
           @click="toogleItem(item)"
         >
           <slot name="item" :option="item"></slot>
           <label v-if="!$slots.item" :for="item.value">{{ item.label }}</label>
         </div>
-        <div v-if="!filteredItems.length" class="px-4 py-2 cursor-pointer text-lightDropdownOptionsText dark:text-darkDropdownOptionsText">
+        <div v-if="!filteredItems.length" class="px-2.5 py-1.5 text-lightDropdownButtonsPlaceholderText dark:text-darkDropdownButtonsPlaceholderText">
           {{ $t('No results found') }}
         </div>
 
-        <div v-if="$slots['extra-item']" class="px-4 py-2 dark:text-gray-400">
+        <div v-if="$slots['extra-item']" class="px-2.5 py-1.5 text-lightDropdownOptionsText dark:text-darkDropdownOptionsText">
           <slot name="extra-item"></slot>
         </div>
       </div>
     </teleport>
 
     <div v-if="!teleportToBody && !teleportToTop && showDropdown" ref="dropdownEl" :style="dropdownStyle" :class="{'shadow-none': isTop}"
-      class="afcl-select-content absolute z-10 mt-1 w-full bg-lightDropdownOptionsBackground shadow-lg text-lightDropdownButtonsText dark:shadow-black dark:bg-darkDropdownOptionsBackground
-        dark:border-gray-600 rounded-default py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm max-h-48"
+      class="afcl-select-content absolute z-10 mt-1 w-full bg-lightDropdownOptionsBackground shadow-popover text-lightDropdownButtonsText dark:shadow-darkPopover dark:bg-darkDropdownOptionsBackground
+        rounded-lg p-1 text-base overflow-auto focus:outline-none sm:text-sm max-h-60"
         @scroll="handleDropdownScroll">
       <div
         v-for="item in filteredItems"
         :key="item.value"
-        class="px-4 py-2 cursor-pointer text-lightDropdownOptionsText hover:bg-lightDropdownOptionsHoverBackground dark:hover:bg-darkDropdownOptionsHoverBackground dark:text-darkDropdownOptionsText"
-        :class="{ 'bg-lightDropdownPicked dark:bg-darkDropdownPicked': selectedItems.includes(item) }"
+        class="px-2.5 py-1.5 rounded-md cursor-pointer text-lightDropdownOptionsText hover:bg-lightDropdownOptionsHoverBackground dark:hover:bg-darkDropdownOptionsHoverBackground dark:text-darkDropdownOptionsText"
+        :class="{ 'bg-lightDropdownPicked dark:bg-darkDropdownPicked font-medium': selectedItems.includes(item) }"
         @click="toogleItem(item)"
       >
         <slot name="item" :option="item"></slot>
         <label v-if="!$slots.item" :for="item.value">{{ item.label }}</label>
       </div>
-      <div v-if="!filteredItems.length" class="px-4 py-2 cursor-pointer text-lightDropdownOptionsText dark:text-darkDropdownOptionsText">
+      <div v-if="!filteredItems.length" class="px-2.5 py-1.5 text-lightDropdownButtonsPlaceholderText dark:text-darkDropdownButtonsPlaceholderText">
         {{ options?.length ? $t('No results found') : $t('No items here') }}
       </div>
       <div v-if="$slots['extra-item']"  class="px-4 py-2 dark:text-darkDropdownOptionsText">
@@ -98,7 +98,7 @@
       <template v-for="item in selectedItems" :key="`afcl-select-${item.value}`">
         <slot name="selected-item" :item="item"></slot>
         <div v-if="!$slots['selected-item']"
-          class="bg-lightDropdownMultipleSelectBackground text-lightDropdownMultipleSelectText text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-darkDropdownMultipleSelectBackground dark:text-darkDropdownMultipleSelectText">
+          class="inline-flex items-center bg-lightDropdownMultipleSelectBackground text-lightDropdownMultipleSelectText text-xs font-medium me-1.5 ps-2 pe-1.5 h-[1.375rem] rounded dark:bg-darkDropdownMultipleSelectBackground dark:text-darkDropdownMultipleSelectText">
           <span>{{ item.label }}</span>
           <button
             type="button"
@@ -123,7 +123,7 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted, watch, nextTick, useId,type PropType, type Ref } from 'vue';
-import { IconCaretDownSolid } from '@iconify-prerendered/vue-flowbite';
+import { IconChevronDown } from '@iconify-prerendered/vue-lucide';
 import { useElementSize } from '@vueuse/core'
 
 type ISingleSelectModelValue = string | number | boolean | null;
@@ -131,7 +131,7 @@ type ISingleSelectModelValue = string | number | boolean | null;
 const props = defineProps({
   options: Array,
   modelValue: {
-    type: Array as PropType<(ISingleSelectModelValue)[] | ISingleSelectModelValue>,
+    type: [Array, String, Number, Boolean] as PropType<(ISingleSelectModelValue)[] | ISingleSelectModelValue>,
     default: () => [],
   },
   multiple: {

package/dist/spa/src/afcl/Skeleton.vue

@@ -17,7 +17,7 @@
     <div 
         v-else-if="type === 'input'" 
         role="input" 
-        :class="['animate-pulse bg-gray-100 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-default', $attrs.class]"
+        :class="['animate-pulse bg-lightSkeletonBackgroundColor dark:bg-darkSkeletonBackgroundColor rounded-default', $attrs.class]"
     ></div>
     <div v-else role="status" class="flex items-center justify-center animate-pulse bg-lightSkeletonIconColor rounded-full dark:bg-darkSkeletonBackgroundColor">
         <span class="sr-only">Loading...</span>

package/dist/spa/src/afcl/Spinner.vue

@@ -1,6 +1,6 @@
 <template>
     <div role="status">
-        <svg aria-hidden="true" class="text-gray-200 animate-spin dark:text-gray-600 fill-lightPrimary dark:fill-darkPrimary" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <svg aria-hidden="true" class="text-lightProgressBarUnfilledColor animate-spin dark:text-darkProgressBarUnfilledColor fill-lightPrimary dark:fill-darkPrimary" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
             <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
         </svg>

package/dist/spa/src/afcl/Table.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="afcl-table-container relative overflow-x-auto overflow-y-auto overscroll-x-contain shadow-md rounded-lg">
-      <table class="afcl-table w-full text-sm text-left rtl:text-right text-lightTableText dark:text-darkTableText overflow-x-auto">
-          <thead class="afcl-table-thread z-40 text-xs text-lightTableHeadingText uppercase bg-lightTableHeadingBackground dark:bg-darkTableHeadingBackground dark:text-darkTableHeadingText" :class="makeHeaderSticky ? 'sticky top-0' : ''">
+  <div class="afcl-table-container relative overflow-x-auto overflow-y-auto overscroll-x-contain border border-lightTableBorder dark:border-darkTableBorder rounded-lg bg-lightTableBackground dark:bg-darkTableBackground">
+      <table class="afcl-table w-full text-[13px] text-left rtl:text-right text-lightTableText dark:text-darkTableText overflow-x-auto">
+          <thead class="afcl-table-thread z-40 text-xs font-medium text-lightTableHeadingText border-b border-lightTableBorder dark:border-darkTableBorder bg-lightTableHeadingBackground dark:bg-darkTableHeadingBackground dark:text-darkTableHeadingText" :class="makeHeaderSticky ? 'sticky top-0' : ''">
             <tr>
               <th
                 scope="col"
-                class="px-6 py-3"
+                class="px-4 py-2.5 font-medium"
                 ref="headerRefs"
                 :key="`header-${column.fieldName}`"
                 v-for="column in columns"
@@ -19,13 +19,13 @@
                   {{ column.label }}
                   <span v-if="isColumnSortable(column)" class="text-lightTableHeadingText dark:text-darkTableHeadingText">
                     <!-- Unsorted -->
-                    <svg v-if="currentSortField !== column.fieldName" class="w-3 h-3 ms-1.5 opacity-30" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M8.574 11.024h6.852a2.075 2.075 0 0 0 1.847-1.086 1.9 1.9 0 0 0-.11-1.986L13.736 2.9a2.122 2.122 0 0 0-3.472 0L6.837 7.952a1.9 1.9 0 0 0-.11 1.986 2.074 2.074 0 0 0 1.847 1.086Zm6.852 1.952H8.574a2.072 2.072 0 0 0-1.847 1.087 1.9 1.9 0 0 0 .11 1.985l3.426 5.05a2.123 2.123 0 0 0 3.472 0l3.427-5.05a1.9 1.9 0 0 0 .11-1.985 2.074 2.074 0 0 0-1.846-1.087Z"/></svg>
+                    <IconChevronsUpDown v-if="currentSortField !== column.fieldName" class="w-3.5 h-3.5 ms-1 opacity-40" aria-hidden="true" />
 
                     <!-- Sorted ascending -->
-                    <svg v-else-if="currentSortDirection === 'asc'" class="w-3 h-3 ms-1.5" fill="currentColor" viewBox="0 0 24 24"><path d="M8.574 11.024h6.852a2.075 2.075 0 0 0 1.847-1.086 1.9 1.9 0 0 0-.11-1.986L13.736 2.9a2.122 2.122 0 0 0-3.472 0L6.837 7.952a1.9 1.9 0 0 0-.11 1.986 2.074 2.074 0 0 0 1.847 0z"/></svg>
+                    <IconArrowUp v-else-if="currentSortDirection === 'asc'" class="w-3.5 h-3.5 ms-1" aria-hidden="true" />
 
                     <!-- Sorted descending -->
-                    <svg v-else class="w-3 h-3 ms-1.5 rotate-180" fill="currentColor" viewBox="0 0 24 24"><path d="M8.574 11.024h6.852a2.075 2.075 0 0 0 1.847-1.086 1.9 1.9 0 0 0-.11-1.986L13.736 2.9a2.122 2.122 0 0 0-3.472 0L6.837 7.952a1.9 1.9 0 0 0-.11 1.986 2.074 2.074 0 0 0 1.847 0z"/></svg>
+                    <IconArrowUp v-else class="w-3.5 h-3.5 ms-1 rotate-180" aria-hidden="true" />
                   </span>
                 </span>
               </th>
@@ -42,8 +42,8 @@
             <tr v-else-if="!isLoading && !props.isLoading && dataPage.length === 0" class="afcl-table-empty-body">
               <td :colspan="columns.length" class="px-6 py-12 text-center">
                 <div class="flex flex-col items-center justify-center text-lightTableText dark:text-darkTableText">
-                  <IconTableRowOutline class="w-10 h-10 mb-4 text-gray-400 dark:text-gray-500" />
-                  <p class="text-md">{{ $t('No data available') }}</p>
+                  <IconRows3 class="w-6 h-6 mb-3 text-lightTablePaginationText dark:text-darkTablePaginationText" />
+                  <p class="text-sm">{{ $t('No data available') }}</p>
                 </div>
               </td>
             </tr>
@@ -58,7 +58,7 @@
               }"
               @click="tableRowClick(item)"
             >
-              <td class="px-6 py-4" :key="`cell-${index}-${column.fieldName}`"
+              <td class="px-4 py-3" :key="`cell-${index}-${column.fieldName}`"
                 v-for="column in props.columns"
               >
                 <slot v-if="$slots[`cell:${column.fieldName}`]" 
@@ -94,17 +94,13 @@
       <div class="inline-flex" :class="blockPagination ? 'pointer-events-none select-none opacity-50' : ''">
           <!-- Buttons -->
           <button
-            class="flex items-center py-1 px-3 gap-1 text-sm font-medium text-lightActivePaginationButtonText bg-lightActivePaginationButtonBackground border-r-0 rounded-s hover:opacity-90 dark:bg-darkActivePaginationButtonBackground dark:text-darkActivePaginationButtonText disabled:opacity-50"
+            class="flex items-center h-7 focus-visible:z-20 focus-visible:ring-[3px] focus-visible:ring-lightFocusRing dark:focus-visible:ring-darkFocusRing px-2.5 gap-1 text-sm font-medium text-lightActivePaginationButtonText focus:outline-none bg-lightActivePaginationButtonBackground border-r-0 rounded-s-default hover:opacity-90 dark:bg-darkActivePaginationButtonBackground dark:text-darkActivePaginationButtonText disabled:opacity-50"
             @click="currentPage--; pageInput = currentPage.toString();" 
             :disabled="currentPage <= 1 || blockPagination">
-            <svg class="w-3.5 h-3.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
-                viewBox="0 0 14 10">
-              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                    d="M13 5H1m0 0 4 4M1 5l4-4"/>
-            </svg>
+            <IconChevronLeft class="w-4 h-4 rtl:rotate-180" aria-hidden="true" />
           </button>
           <button
-            class="flex items-center py-1 px-3 text-sm font-medium text-lightUnactivePaginationButtonText focus:outline-none bg-lightUnactivePaginationButtonBackground border-r-0  border border-lightUnactivePaginationButtonBorder hover:bg-lightUnactivePaginationButtonHoverBackground hover:text-lightUnactivePaginationButtonHoverText dark:bg-darkUnactivePaginationButtonBackground dark:text-darkUnactivePaginationButtonText dark:border-darkUnactivePaginationButtonBorder dark:hover:text-darkUnactivePaginationButtonHoverText dark:hover:bg-darkUnactivePaginationButtonHoverBackground disabled:opacity-50"
+            class="flex items-center h-7 focus-visible:z-20 focus-visible:ring-[3px] focus-visible:ring-lightFocusRing dark:focus-visible:ring-darkFocusRing px-3 text-sm font-medium tabular-nums text-lightUnactivePaginationButtonText focus:outline-none bg-lightUnactivePaginationButtonBackground border-r-0  border border-lightUnactivePaginationButtonBorder hover:bg-lightUnactivePaginationButtonHoverBackground hover:text-lightUnactivePaginationButtonHoverText dark:bg-darkUnactivePaginationButtonBackground dark:text-darkUnactivePaginationButtonText dark:border-darkUnactivePaginationButtonBorder dark:hover:text-darkUnactivePaginationButtonHoverText dark:hover:bg-darkUnactivePaginationButtonHoverBackground disabled:opacity-50"
             @click="switchPage(1); pageInput = currentPage.toString();" 
             :disabled="currentPage <= 1 || blockPagination">
             <!-- <IconChevronDoubleLeftOutline class="w-4 h-4" /> -->
@@ -114,14 +110,14 @@
             type="text"
             v-model="pageInput"
             :style="{ width: `${Math.max(1, pageInput.length+4)}ch` }"
-            class="min-w-10 outline-none inline-block w-auto py-1.5 px-3 text-sm text-center text-lightTablePaginationInputText border border-lightTablePaginationInputBorder bg-lightTablePaginationInputBackground dark:border-darkTablePaginationInputBorder dark:text-darkTablePaginationInputText dark:bg-darkTablePaginationInputBackground z-10"
+            class="min-w-10 outline-none inline-block w-auto h-7 px-3 text-sm font-medium tabular-nums text-center text-lightTablePaginationInputText border border-lightTablePaginationInputBorder bg-lightTablePaginationInputBackground dark:border-darkTablePaginationInputBorder dark:text-darkTablePaginationInputText dark:bg-darkTablePaginationInputBackground z-10"
             @keydown="onPageKeydown($event)"
             @blur="validatePageInput()"
           >
           </input>
 
           <button
-            class="flex items-center py-1 px-3 text-sm font-medium text-lightUnactivePaginationButtonText focus:outline-none bg-lightUnactivePaginationButtonBackground border-l-0  border border-lightUnactivePaginationButtonBorder hover:bg-lightUnactivePaginationButtonHoverBackground hover:text-lightUnactivePaginationButtonHoverText dark:bg-darkUnactivePaginationButtonBackground dark:text-darkUnactivePaginationButtonText dark:border-darkUnactivePaginationButtonBorder dark:hover:text-darkUnactivePaginationButtonHoverText dark:hover:bg-darkUnactivePaginationButtonHoverBackground disabled:opacity-50"
+            class="flex items-center h-7 focus-visible:z-20 focus-visible:ring-[3px] focus-visible:ring-lightFocusRing dark:focus-visible:ring-darkFocusRing px-3 text-sm font-medium tabular-nums text-lightUnactivePaginationButtonText focus:outline-none bg-lightUnactivePaginationButtonBackground border-l-0  border border-lightUnactivePaginationButtonBorder hover:bg-lightUnactivePaginationButtonHoverBackground hover:text-lightUnactivePaginationButtonHoverText dark:bg-darkUnactivePaginationButtonBackground dark:text-darkUnactivePaginationButtonText dark:border-darkUnactivePaginationButtonBorder dark:hover:text-darkUnactivePaginationButtonHoverText dark:hover:bg-darkUnactivePaginationButtonHoverBackground disabled:opacity-50"
             @click="currentPage = totalPages; pageInput = currentPage.toString();" 
             :disabled="currentPage >= totalPages || blockPagination"
           >
@@ -129,15 +125,11 @@
 
           </button>
           <button
-            class="flex items-center py-1 px-3 gap-1 text-sm font-medium text-lightActivePaginationButtonText focus:outline-none bg-lightActivePaginationButtonBackground border-l-0 rounded-e hover:opacity-90 dark:bg-darkActivePaginationButtonBackground dark:text-darkActivePaginationButtonText disabled:opacity-50"
+            class="flex items-center h-7 focus-visible:z-20 focus-visible:ring-[3px] focus-visible:ring-lightFocusRing dark:focus-visible:ring-darkFocusRing px-2.5 gap-1 text-sm font-medium text-lightActivePaginationButtonText focus:outline-none bg-lightActivePaginationButtonBackground border-l-0 rounded-e-default hover:opacity-90 dark:bg-darkActivePaginationButtonBackground dark:text-darkActivePaginationButtonText disabled:opacity-50"
             @click="currentPage++; pageInput = currentPage.toString();" 
             :disabled="currentPage >= totalPages || blockPagination"
           >
-            <svg class="w-3.5 h-3.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
-                viewBox="0 0 14 10">
-              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                    d="M1 5h12m0 0L9 1m4 4L9 9"/>
-            </svg>
+            <IconChevronRight class="w-4 h-4 rtl:rotate-180" aria-hidden="true" />
           </button>
         </div>
       </div>
@@ -148,7 +140,7 @@
 <script setup lang="ts">
   import { ref, computed, useTemplateRef, watch, onMounted } from 'vue';
   import SkeleteLoader from '@/components/SkeleteLoader.vue';
-  import { IconTableRowOutline } from '@iconify-prerendered/vue-flowbite';
+  import { IconRows3, IconChevronLeft, IconChevronRight, IconChevronsUpDown, IconArrowUp } from '@iconify-prerendered/vue-lucide';
 
   defineExpose({
     refreshTable

package/dist/spa/src/afcl/Textarea.vue

@@ -1,7 +1,7 @@
 <template>
   <textarea
     ref="input"
-    class="afcl-textarea bg-lightInputBackground border border-lightInputBorder text-lightInputText placeholder-lightInputPlaceholderText text-sm rounded-default block w-full p-2.5 dark:bg-darkInputBackground dark:border-darkInputBorder dark:placeholder-darkInputPlaceholderText dark:text-darkInputText dark:border-darkInputBorder focus:ring-lightInputFocusRing focus:border-lightInputFocusBorder dark:focus:ring-darkInputFocusRing dark:focus:border-darkInputFocusBorder"
+    class="afcl-textarea bg-lightInputBackground border border-lightInputBorder text-lightInputText placeholder-lightInputPlaceholderText text-sm leading-5 rounded-default block w-full px-2.5 py-2 shadow-customLight hover:border-lightInputBorderHover dark:hover:border-darkInputBorderHover dark:bg-darkInputBackground dark:border-darkInputBorder dark:placeholder-darkInputPlaceholderText dark:text-darkInputText dark:border-darkInputBorder focus:outline-none focus:ring-[3px] focus:ring-lightInputFocusRing focus:border-lightInputFocusBorder dark:focus:ring-darkInputFocusRing dark:focus:border-darkInputFocusBorder transition-colors"
     :class="`${readonly ? 'opacity-50' : ''} ${isIos ? 'text-md' : 'text-sm'}`"
     :placeholder="placeholder"
     :value="modelValue"

package/dist/spa/src/afcl/Toggle.vue

@@ -7,15 +7,15 @@
             :checked="props.modelValue"
             @change="$emit('update:modelValue', ($event.target as HTMLInputElement).checked)"
             > 
-            <div class="afcl-toggle border border-lightToggleBorderUnactive relative min-w-11 min-h-6 bg-lightToggleBgUnactive peer-focus:outline-none peer-focus:ring-4 
-                peer-focus:ring-lightToggleRing dark:peer-focus:ring-darkToggleRing rounded-full peer dark:bg-darkToggleBgUnactive 
+            <div class="afcl-toggle border border-lightToggleBorderUnactive relative min-w-9 min-h-5 bg-lightToggleBgUnactive peer-focus:outline-none peer-focus-visible:ring-[3px] 
+                peer-focus-visible:ring-lightToggleRing dark:peer-focus-visible:ring-darkToggleRing rounded-full peer dark:bg-darkToggleBgUnactive 
                 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:top-[2px] peer-checked:border-none 
                 peer-checked:after:border-lightToggleBorderActive  after:content-[''] after:absolute after:top-[1px] 
                 after:start-[2px] after:bg-lightToggleCircleUnactive peer-checked:after:bg-lightToggleCircleActive dark:after:bg-darkToggleCircleUnactive after:border-lightToggleBgUnactive dark:after:border-darkToggleBgUnactive after:border after:rounded-full 
-                after:h-5 after:w-5 after:transition-all dark:border-darkToggleBorderUnactive peer-checked:bg-lightToggleBgActive 
+                after:h-4 after:w-4 after:shadow-sm after:transition-all dark:border-darkToggleBorderUnactive peer-checked:bg-lightToggleBgActive 
                 dark:peer-checked:bg-darkToggleBgActive dark:peer-checked:after:border-darkToggleBorderActive dark:peer-checked:after:bg-darkToggleCircleActive">
             </div>
-        <label :for="id" class="cursor-pointer ms-3 text-sm font-medium text-lightToggleText dark:text-darkToggleText">
+        <label :for="id" class="cursor-pointer ms-2.5 text-sm text-lightToggleText dark:text-darkToggleText">
             <slot></slot>
         </label>
     </label>

package/dist/spa/src/afcl/Tooltip.vue

@@ -5,7 +5,7 @@
   <teleport to="body" v-if="showTooltip">
     <div
       role="tooltip"
-      class="absolute z-[100] 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"
+      class="absolute z-[100] invisible inline-block px-2.5 py-1.5 text-xs font-medium text-lightTooltipText dark:text-darkTooltipText transition-opacity duration-150 bg-lightTooltipBackground rounded-md shadow-popover opacity-0 tooltip dark:bg-darkTooltipBackground dark:shadow-darkPopover"
       ref="tooltip"
     >
       <slot name="tooltip"></slot>

package/dist/spa/src/afcl/TreeMapChart.vue

@@ -4,8 +4,9 @@
 
 <script setup lang="ts">
 import type ApexCharts from 'apexcharts';
-import { type ApexOptions } from 'apexcharts';
+import type { ApexOptions } from 'apexcharts';
 import { ref, type Ref, watch, computed, onUnmounted } from 'vue';
+import { mergeChartOptions } from './chartUtils';
 type ApexChartsConstructor = new (el: Element, options: ApexOptions) => ApexCharts;
 
 const chart: Ref<HTMLDivElement | null> = ref(null);
@@ -26,7 +27,7 @@ const optionsBase: ApexOptions = {
   chart: {
     height: 350,
     type: 'treemap',
-    fontFamily: 'Inter, sans-serif',
+    fontFamily: "'Geist Variable', ui-sans-serif, sans-serif",
     toolbar: {
       show: false,
     },
@@ -37,7 +38,7 @@ const optionsBase: ApexOptions = {
   dataLabels: {
     enabled: true,
     style: {
-      fontFamily: 'Inter, sans-serif',
+      fontFamily: "'Geist Variable', ui-sans-serif, sans-serif",
       colors: ['#FFFFFF'],
     },
   },
@@ -75,23 +76,7 @@ const options = computed(() => {
     })),
   };
 
-  function mergeOptions(target: any, source: any) {
-    if (!source) {
-      return;
-    }
-    for (const key in source) {
-      if (typeof source[key] === 'object' && !Array.isArray(source[key])) {
-        if (!target[key]) {
-          target[key] = {};
-        }
-        mergeOptions(target[key], source[key]);
-      } else {
-        target[key] = source[key];
-      }
-    }
-  }
-
-  mergeOptions(nextOptions, props.options);
+  mergeChartOptions(nextOptions, props.options);
   return nextOptions;
 });
 

package/dist/spa/src/afcl/VerticalTabs.vue

@@ -1,20 +1,20 @@
 <template>
   <div class="md:flex">
-    <ul class="ps-6 flex-column space-y space-y-4 text-sm font-medium text-lightVerticalTabsText dark:text-darkVerticalTabsText md:me-4 mb-4 md:mb-0 md:mr-0 mr-6">
+    <ul class="flex-column space-y-0.5 text-sm text-lightVerticalTabsText dark:text-darkVerticalTabsText md:me-4 mb-4 md:mb-0 md:mr-0 mr-6 md:min-w-[11rem]">
       <li v-for="tab in tabs" :key="`${tab}-tab-controll`">
         <a 
           v-if="!props.hideTabesWhenSingle || tabs.length > 1"
           href="#"
           @click="setActiveTab(tab)"
-          class="inline-flex items-center px-4 py-3 rounded-lg w-full"
-          :class="tab === activeTab ? 'text-lightVerticalTabsTextActive bg-lightVerticalTabsBackgroundActive active dark:bg-darkVerticalTabsBackgroundActive dark:text-darkVerticalTabsTextActive' : 'text-lightVerticalTabsText dark:text-darkVerticalTabsText hover:text-lightVerticalTabsTextHover bg-lightVerticalTabsBackground hover:bg-lightVerticalTabsBackgroundHover dark:bg-darkVerticalTabsBackground dark:hover:bg-darkVerticalTabsBackgroundHover dark:hover:darkVerticalTabsTextHover'"
+          class="inline-flex items-center gap-2 px-3 py-2 rounded-default w-full transition-colors"
+          :class="tab === activeTab ? 'font-medium text-lightVerticalTabsTextActive bg-lightVerticalTabsBackgroundActive active dark:bg-darkVerticalTabsBackgroundActive dark:text-darkVerticalTabsTextActive' : 'text-lightVerticalTabsText dark:text-darkVerticalTabsText hover:text-lightVerticalTabsTextHover bg-lightVerticalTabsBackground hover:bg-lightVerticalTabsBackgroundHover dark:bg-darkVerticalTabsBackground dark:hover:bg-darkVerticalTabsBackgroundHover dark:hover:darkVerticalTabsTextHover'"
           aria-current="page"
         >
           <slot :name="`tab:${tab}`"></slot>
         </a>
       </li>
     </ul>
-    <div class="ps-6 text-medium text-lightVerticalTabsSlotText dark:text-darkVerticalTabsSlotText  w-full ">
+    <div class="md:ps-6 md:border-s md:border-lightFormBorder dark:md:border-darkFormBorder text-sm text-lightVerticalTabsSlotText dark:text-darkVerticalTabsSlotText  w-full ">
       <slot :name="activeTab"></slot>
     </div>
   </div>