adminforth 2.4.0-next.26 → 2.4.0-next.261

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

@@ -1,21 +1,29 @@
 <template>
-  <div class="afcl-checkbox flex items-center h-5" :class="{'opacity-50' : props.disabled}">
-    <input :id="id" 
-      ref="rememberInput"
-      type="checkbox"
-      :checked="props.modelValue"
-      :disabled="props.disabled"
-      @change="$emit('update:modelValue', $event.target.checked)"
-      class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-lightPrimary cursor-pointer 
-        focus:ring-opacity-50 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 checked:bg-lightPrimary checked:dark:bg-darkPrimary" /> 
+  <div class="afcl-checkbox flex items-center relative h-5" :class="{'opacity-50' : props.disabled}">
+    <div class="flex items-center justify-center">
+      <input :id="id" 
+        ref="rememberInput"
+        type="checkbox"
+        :checked="props.modelValue"
+        :disabled="props.disabled"
+        @change="$emit('update:modelValue', ($event.target as HTMLInputElement).checked)"
+        class="peer appearance-none min-w-4 min-h-4 bg-lightCheckboxBgUnchecked border border-lightCheckboxBorderColor rounded-sm checked:bg-lightCheckboxBgChecked 
+                        focus:ring-lightFocusRing dark:focus:ring-darkFocusRing dark:focus:ring-darkFocusRing
+                        focus:ring-2 dark:bg-darkCheckboxBgUnchecked dark:border-darkCheckboxBorderColor dark:checked:bg-darkCheckboxBgChecked cursor-pointer"
+        >     
+        <div class="pointer-events-none absolute text-lightCheckboxIconColor dark:text-darkCheckboxIconColor leading-none peer-checked:block hidden">
+          <IconCheckOutline class="w-[1.1rem] h-[1.1rem]" />
+        </div> 
+    </div>
+    <label :for="id" class="ms-2 text-sm font-medium text-lightTextLabel dark:text-darkTextLabel">
+      <slot></slot>
+    </label>
+
   </div>
-  <label :for="id" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">
-    <slot></slot>
-  </label>
 </template>
 
 <script setup lang="ts">
-
+import { IconCheckOutline } from '@iconify-prerendered/vue-flowbite';
 const props = defineProps({
   modelValue: Boolean,
   disabled: Boolean,

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

@@ -1,6 +1,8 @@
 <template>
-    <component v-if="getFlagComponent(countryCode)" class="flag-icon rounded-sm" :is="getFlagComponent(countryCode)" />
+  <div class="aspect-[4/3] w-8 h-6 flex items-center justify-center">
+    <component v-if="getFlagComponent(countryCode)" :is="getFlagComponent(countryCode)" class="flag-icon  h-full object-contain rounded-sm"/>
     <span v-else-if="countryCode">{{ countryCode }}</span>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -22,5 +24,6 @@ const getFlagComponent = (countryCode: string) => {
         box-shadow: inset -0.3px -0.3px 0.3px 0px rgba(0 0 0 / 0.2), 
             inset 0.3px 0.3px 0.3px 0px rgba(255 255 255 / 0.2),
             0px 0px 3px #00000030;
+        width: auto;
     }
 </style>

package/dist/spa/src/{components/CustomDatePicker.vue → afcl/DatePicker.vue}

@@ -2,15 +2,15 @@
   <div>
     <div class="grid w-40 gap-4 mb-2">
       <div>
-        <label v-if="label" for="start-time" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ label }}</label>
+        <label v-if="label" for="start-time" class="block mb-2 text-sm font-medium text-lightDatePickerButtonText dark:text-darkDatePickerButtonText">{{ label }}</label>
 
         <div class="relative" :class="{hidden: column.type === 'time'}">
           <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">
-            <IconCalendar class="w-4 h-4 text-gray-500 dark:text-gray-400"/>
+            <IconCalendar class="w-4 h-4 text-lightDatePickerIcon dark:text-darkDatePickerIcon"/>
           </div>
 
           <input ref="datepickerStartEl"  type="text"
-                 class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white focus:ring-lightPrimary focus:border-lightPrimary dark:focus:ring-darkPrimary dark:focus:border-darkPrimary"
+                 class="af-pick-date-button bg-lightDatePickerButtonBackground border border-lightDatePickerButtonBorder text-lightDatePickerButtonText text-sm rounded-lg block w-full p-2.5 dark:bg-darkDatePickerButtonBackground dark:border-darkDatePickerButtonBorder dark:placeholder-darkInputPlaceholderText dark:text-darkDatePickerButtonText focus:ring-lightInputFocusRing focus:border-lightInputFocusBorder dark:focus:ring-darkInputFocusRing dark:focus:border-darkInputFocusBorder"
                 :placeholder="$t('Select date')" :disabled="readonly" />
           
         </div>
@@ -22,18 +22,17 @@
         <div>
           <div class="relative">
             <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">
-              <IconTime class="w-4 h-4 text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-700"/>
+              <IconTime class="w-4 h-4 text-lightDatePickerIcon dark:text-darkDatePickerIcon bg-lightDatePickerButtonBackground dark:bg-darkDatePickerButtonBackground"/>
             </div>
-
-            <input v-model="startTime" type="time" id="start-time" onfocus="this.showPicker()" onclick="this.showPicker()" step="1"
-                   class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white focus:ring-lightPrimary focus:border-lightPrimary dark:focus:ring-darkPrimary dark:focus:border-darkPrimary"
+            <input v-model="startTime" type="time" id="start-time" step="1"
+                   class="af-pick-time-button bg-lightDatePickerButtonBackground border border-lightDatePickerButtonBorder text-lightDatePickerButtonText text-sm rounded-lg block w-full p-2.5 dark:bg-darkInputBackground dark:border-darkInputBorder dark:placeholder-darkInputPlaceholderText dark:text-darkDatePickerButtonText focus:ring-lightInputFocusRing focus:border-lightInputFocusBorder dark:focus:ring-darkInputFocusRing dark:focus:border-darkInputFocusBorder"
                    value="00:00" :disabled="readonly" required/>
           </div>
         </div>
       </div>
 
       <button type="button"
-              class="text-lightPrimary dark:text-darkPrimary text-base font-medium hover:underline p-0 inline-flex items-center mb-2"
+              class="text-lightDatePickerExpandText dark:text-darkDatePickerExpandText text-base font-medium hover:underline p-0 inline-flex items-center mb-2"
               :class="{hidden: column.type !== 'datetime'}"
               @click="toggleTimeInputs">{{ showTimeInputs ? $t('Hide time') : $t('Show time') }}
         <svg class="w-8 h-8 ms-0.5" :class="{'rotate-180': showTimeInputs}" aria-hidden="true"
@@ -197,4 +196,91 @@ function focus() {
 defineExpose({
   focus,
 });
-</script>
+</script>
+
+<style lang="css" scoped>
+
+:global(.datepicker-controls button svg),
+:global(.datepicker-controls button) {
+  @apply text-lightDatePickerCalendarText;
+}
+
+:global( .datepicker-dropdown ),
+:global( .datepicker-picker ) {
+  @apply !bg-lightDatePickerCalendarBackground
+}
+
+:global(.datepicker-controls button:hover) {
+  @apply bg-lightDatePickerCalendarArrowButtonBackgroundHover;    
+}
+
+:global(.datepicker-controls button) {
+  @apply ring-lightDatePickerCalendarArrowButtonFocusRing bg-lightDatePickerCalendarArrowButtonBackground;    
+}
+
+:global(.datepicker-controls button:focus) {
+  @apply ring-lightDatePickerCalendarArrowButtonFocusRing;
+}
+
+:global(.days-of-week span) {
+  @apply text-lightDatePickerCalendarDaysOfWeekText;
+}
+
+:global(.datepicker-grid span) {
+  @apply text-lightDatePickerCalendarDateButtonText; 
+}
+
+:global(.datepicker-grid span:hover:not(.selected)) {
+  @apply bg-lightDatePickerCalendarDateButtonBackgroundHover; 
+}
+
+:global(.datepicker-grid .selected ) {
+  @apply text-lightDatePickerCalendarDateActiveButtonText bg-lightDatePickerCalendarDateActiveButtonBackground; 
+}
+
+
+
+
+
+
+
+
+:global(.dark .datepicker-controls button svg),
+:global(.dark .datepicker-controls button) {
+  @apply text-darkDatePickerCalendarMainText;
+}
+
+:global(.dark .datepicker-dropdown),
+:global(.dark .datepicker-picker) {
+  @apply !bg-darkDatePickerCalendarBackground;
+}
+
+:global(.dark .datepicker-controls button:hover) {
+  @apply bg-darkDatePickerCalendarArrowButtonBackgroundHover;    
+}
+
+:global(.dark .datepicker-controls button) {
+  @apply ring-darkDatePickerCalendarArrowButtonFocusRing bg-darkDatePickerCalendarArrowButtonBackground;    
+}
+
+:global(.dark .datepicker-controls button) {
+  @apply ring-darkDatePickerCalendarArrowButtonFocusRing;    
+}
+
+:global(.dark .days-of-week span) {
+  @apply text-darkDatePickerCalendarDaysOfWeekText;
+}
+
+:global(.dark .datepicker-grid span) {
+  @apply text-darkDatePickerCalendarDateButtonText; 
+}
+
+:global(.dark .datepicker-grid span:hover:not(.selected)) {
+  @apply bg-darkDatePickerCalendarDateButtonBackgroundHover; 
+}
+
+:global(.dark .datepicker-grid .selected) {
+  @apply text-darkDatePickerCalendarDateActiveButtonText 
+         bg-darkDatePickerCalendarDateActiveButtonBackground; 
+}
+</style>

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

@@ -6,22 +6,22 @@
     <slot name="trigger"></slot>
   </div>
   <Teleport to="body">
-    <div ref="modalEl" tabindex="-1" aria-hidden="true" class="hidden 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-full max-h-full">
-      <div v-bind="$attrs" class="relative p-4 max-w-2xl max-h-full" :class="$attrs.class?.includes('w-') ? '' : 'w-full'">
+    <div ref="modalEl" tabindex="-1" aria-hidden="true" class="[scrollbar-gutter:stable] hidden 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-full max-h-full">
+      <div v-bind="$attrs" class="relative p-4 max-w-2xl max-h-full" :class="($attrs.class as string)?.includes('w-') ? '' : 'w-full'">
         <!-- Modal content -->
-        <div class="relative bg-white rounded-lg shadow-sm dark:bg-gray-700">
+        <div class="relative bg-lightDialogBackgorund rounded-lg shadow-sm dark:bg-darkDialogBackgorund">
           <!-- Modal header -->
           <div
             v-if="header"
-            class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600 border-gray-200"
+            class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-darkDialogBreakLine border-lightDialogBreakLine"
           >
-            <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
+            <h3 class="text-xl font-semibold text-lightDialogHeaderText dark:text-darkDialogHeaderText">
               {{ header }}
             </h3>
             <button
               v-if="headerCloseButton"
               type="button"
-              class="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"
+              class="text-lightDialogCloseButton bg-transparent hover:bg-lightDialogCloseButtonHoverBackground hover:text-lightDialogCloseButtonHover rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:text-darkDialogCloseButton dark:hover:bg-darkDialogCloseButtonHoverBackground dark:hover:text-darkDialogCloseButtonHover"
               @click="modal?.hide()"
             >
               <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
@@ -31,13 +31,13 @@
             </button>
           </div>
           <!-- Modal body -->
-          <div class="p-4 md:p-5 space-y-4 text-gray-700 dark:text-gray-400">
+          <div class="p-4 md:p-5 space-y-4 text-lightDialogBodyText dark:text-darkDialogBodyText">
             <slot></slot>
           </div>
           <!-- Modal footer -->
           <div
             v-if="buttons.length"
-            class="flex items-center p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600"
+            class="flex items-center p-4 md:p-5 border-t border-lightDialogBreakLine rounded-b dark:border-darkDialogBreakLine"
           >
             <Button
               v-for="(button, buttonIndex) in buttons"
@@ -63,24 +63,33 @@ import { Modal } from 'flowbite';
 const modalEl = ref(null);
 const modal: Ref<Modal|null> = ref(null);
 
-const props = defineProps({
-  header: {
-    type: String,
-    default: '',
-  },
-  headerCloseButton: {
-    type: Boolean,
-    default: true,
-  },
-  buttons: {
-    type: Array,
-    default: () => [{ label: 'Close', onclick: (dialog) => dialog.hide(), type: '' }],
-  },
-  clickToCloseOutside: {
-    type: Boolean,
-    default: true,
-  },
-});
+interface DialogButton {
+  label: string
+  onclick: (dialog: any) => void
+  options?: Record<string, any> 
+}
+
+interface DialogProps {
+  header?: string
+  headerCloseButton?: boolean
+  buttons?: DialogButton[]
+  clickToCloseOutside?: boolean
+  beforeCloseFunction?: (() => void | Promise<void>) | null
+  beforeOpenFunction?: (() => void | Promise<void>) | null
+  closable?: boolean
+}
+
+const props = withDefaults(defineProps<DialogProps>(), {
+  header: '',
+  headerCloseButton: true,
+  buttons: () => [
+    { label: 'Close', onclick: (dialog: any) => dialog.hide(), type: '' },
+  ],
+  clickToCloseOutside: true,
+  beforeCloseFunction: null,
+  beforeOpenFunction: null,
+  closable: true,
+})
 
 onMounted(async () => {
   //await one tick when all is mounted
@@ -88,8 +97,19 @@ onMounted(async () => {
   modal.value = new Modal(
     modalEl.value,
     {
+      closable: props.closable,
       backdrop: props.clickToCloseOutside ? 'dynamic' : 'static',
-    },
+      onHide: async () => {
+        if (props.beforeCloseFunction) {
+          await props.beforeCloseFunction();
+        }
+      },
+      onShow: async () => {
+        if (props.beforeOpenFunction) {
+          await props.beforeOpenFunction();
+        }
+      },
+    }
   );
 })
 

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

@@ -3,15 +3,15 @@
   <form class="flex items-center justify-center w-full"
     @dragover.prevent="dragging = true"
     @dragleave.prevent="dragging = false"
-    @drop.prevent="dragging = false; doEmit($event.dataTransfer.files)"
+    @drop.prevent="dragging = false; doEmit(($event.dataTransfer as DataTransfer).files)"
   >
-      <label :id="id" class="flex flex-col items-center justify-center w-full border-2 border-dashed rounded-lg cursor-pointer dark:hover:bg-gray-800 
-        hover:bg-gray-100  dark:hover:border-gray-500 dark:hover:bg-gray-600"
+      <label :id="id" class="flex flex-col items-center justify-center w-full border-2 border-dashed rounded-lg cursor-pointer
+        hover:bg-lightDropzoneBackgroundHover hover:border-lightDropzoneBorderHover  dark:hover:border-darkDropzoneBorderHover dark:hover:bg-darkDropzoneBackgroundHover"
         :class="{
-          'border-blue-600 dark:border-blue-400': dragging,
-          'border-gray-300 dark:border-gray-600': !dragging,
-          'bg-blue-50 dark:bg-blue-800': dragging,
-          'bg-gray-50 dark:bg-gray-800': !dragging,
+          'border-lightDropzoneBorderDragging dark:border-darkDropzoneBorderDragging': dragging,
+          'border-lightDropzoneBorder dark:border-darkDropzoneBorder': !dragging,
+          'bg-lightDropzoneBackgroundDragging dark:bg-darkDropzoneBackgroundDragging': dragging,
+          'bg-lightDropzoneBackground dark:bg-darkDropzoneBackground': !dragging,
           'min-h-32 h-full': props.multiple,
           'h-32': !props.multiple,
         }"
@@ -19,12 +19,12 @@
           <div class="flex flex-col items-center justify-center pt-5 pb-6">
               
             
-              <svg v-if="!selectedFiles.length" class="w-8 h-8 mb-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
+              <svg v-if="!selectedFiles.length" class="w-8 h-8 mb-4 text-lightDropzoneIcon dark:text-darkDropzoneIcon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
                   <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"/>
               </svg>
               <div v-else class="flex items-center justify-center flex-wrap gap-1 w-full mt-1 mb-4">
                 <template v-for="file in selectedFiles">
-                  <p class="text-sm text-gray-500 dark:text-gray-400 flex items-center gap-1">
+                  <p class="text-sm text-lightDropzoneIcon dark:text-darkDropzoneIcon flex items-center gap-1">
                     <IconFileSolid class="w-5 h-5" />
                     {{ file.name }} ({{ humanifySize(file.size) }})
                   </p>
@@ -32,8 +32,8 @@
 
               </div>
 
-              <p v-if="!selectedFiles.length" class="mb-2 text-sm text-gray-500 dark:text-gray-400"><span class="font-semibold">{{ $t('Click to upload') }}</span> {{ $t('or drag and drop') }}</p>
-              <p class="text-xs text-gray-500 dark:text-gray-400">
+              <p v-if="!selectedFiles.length" class="mb-2 text-sm text-lightDropzoneText dark:text-darkDropzoneText"><span class="font-semibold">{{ $t('Click to upload') }}</span> {{ $t('or drag and drop') }}</p>
+              <p class="text-xs text-lightDropzoneText dark:text-darkDropzoneText">
                 {{ props.extensions.join(', ').toUpperCase().replace(/\./g, '') }}
                 <template v-if="props.maxSizeBytes">
                  (Max size: {{ humanifySize(props.maxSizeBytes) }})
@@ -42,7 +42,7 @@
           </div>
           <input :id="id" type="file" class="hidden" 
             :accept="props.extensions.join(', ')"
-            @change="doEmit($event.target.files)"
+            @change="$event.target && doEmit(($event.target as HTMLInputElement).files!)"
             :multiple="props.multiple || false"
           />
       </label>

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

@@ -3,7 +3,7 @@
   <div class="afcl-input-wrapper flex z-0 relative" :class="{'opacity-50' : readonly}">
     <span
         v-if="$slots.prefix || prefix"
-        class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border border-s-0 border-gray-300 rounded-s-md dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600">
+        class="inline-flex items-center px-3 text-sm text-lightInputText bg-lightInputBackground border border-s-0 border-lightInputBorder rounded-s-md dark:bg-darkInputBackground dark:text-darkInputText dark:border-darkInputBorder">
       <slot name="prefix">{{ prefix }}</slot>
     </span>
 
@@ -12,11 +12,11 @@
       ref="input"
       v-bind="$attrs"
       :type="type"
-      @input="$emit('update:modelValue', $event.target?.value)"
+      @input="$emit('update:modelValue', type === 'number' ? Number(($event.target as HTMLInputElement)?.value) : ($event.target as HTMLInputElement)?.value)"
       :value="modelValue"
       aria-describedby="helper-text-explanation"
-      class="afcl-input inline-flex bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-0 focus:ring-lightPrimary focus:border-lightPrimary dark:focus:ring-darkPrimary dark:focus:border-darkPrimary 
-      blue-500 focus:border-blue-500 block w-20 p-2.5 dark:bg-gray-700 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 dark:text-white translate-y-0"
+      class="afcl-input inline-flex bg-lightInputBackground border border-lightInputBorder text-lightInputText text-sm rounded-0 focus:ring-lightPrimary focus:border-lightPrimary dark:focus:ring-darkPrimary dark:focus:border-darkPrimary 
+      blue-500 focus:border-blue-500 block w-20 p-2.5 dark:bg-darkInputBackground dark:border-darkInputBorder placeholder-lightInputPlaceholderText dark:placeholder-darkInputPlaceholderText dark:text-darkInputText translate-y-0"
       :class="{'rounded-l-md': !$slots.prefix && !prefix, 'rounded-r-md': !$slots.suffix && !suffix, 'w-full': fullWidth}"
       :disabled="readonly"
     >
@@ -26,7 +26,7 @@
     </div>
     <span
         v-if="$slots.suffix || suffix"
-        class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border border-s-0 border-gray-300 rounded-e-md dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600 ">
+        class="inline-flex items-center px-3 text-sm text-lightInputText bg-lightInputBackground border border-s-0 border-lightInputBorder rounded-e-md dark:bg-darkInputBackground dark:text-darkInputText dark:border-darkInputBorder ">
       <slot name="suffix">{{ suffix }}</slot>
     </span>
     

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

@@ -0,0 +1,25 @@
+<template>
+  <JsonViewer
+    class="afcl-json-viewer min-w-[6rem]"
+    :value="value"
+    :expandDepth="expandDepth"
+    copyable
+    sort
+    :theme="currentTheme"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { JsonViewer } from 'vue3-json-viewer'
+import { useCoreStore } from '@/stores/core'
+
+defineProps<{
+  value: any
+  expandDepth?: number
+}>()
+
+const coreStore = useCoreStore()
+
+const currentTheme = computed(() => (coreStore.theme === 'dark' ? 'dark' : 'light'))
+</script>

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

@@ -3,8 +3,8 @@
     v-bind="$attrs"
     :to="props.to"
     type="submit" 
-    class="afcl-link-button flex items-center justify-center gap-1 text-lightPrimaryContrast bg-lightPrimary dark:bg-darkPrimary hover:brightness-110 
-      focus:ring-4 focus:outline-none focus:ring-lightPrimary focus:ring-opacity-50 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-darkPrimary dark:focus:ring-opacity-50"
+    class="afcl-link-button flex items-center justify-center gap-1 text-lightButtonsText bg-lightButtonsBackground border border-lightButtonsBorder dark:bg-darkButtonsBackground hover:bg-lightButtonsHover hover:border-lightButtonsBorderHover
+      focus:ring-4 focus:outline-none focus:ring-lightButtonFocusRing focus:ring-opacity-50 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-darkButtonFocusRing dark:text-darkButtonsText dark:border-darkButtonsBorder dark:hover:bg-darkButtonsHover dark:hover:border-darkButtonsBorderHover"
     :class="{
       'cursor-default': props.disabled,
       'opacity-50': props.disabled,
@@ -18,7 +18,7 @@
 <script setup lang="ts">
 
 const props = defineProps<{
-  disabled: boolean,
+  disabled?: boolean,
   to: string,
 }>();
 

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

@@ -63,8 +63,8 @@ const optionsBase = {
               show: false,
               fontFamily: "Inter, sans-serif",
               label: "",
-              formatter: function (w) {
-                const sum = w.globals.seriesTotals.reduce((a, b) => {
+              formatter: function (w: any) {
+                const sum = w.globals.seriesTotals.reduce((a: any, b: any) => {
                   return a + b
                 }, 0)
                 return sum 
@@ -74,7 +74,7 @@ const optionsBase = {
               show: true,
               fontFamily: "Inter, sans-serif",
               offsetY: -20,
-              formatter: function (value) {
+              formatter: function (value: any) {
                 return value + "k"
               },
             },
@@ -100,14 +100,14 @@ const optionsBase = {
     },
     yaxis: {
       labels: {
-        formatter: function (value) {
+        formatter: function (value: any) {
           return value;
         },
       },
     },
     xaxis: {
       labels: {
-        formatter: function (value) {
+        formatter: function (value: any) {
           return value;
         },
       },

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

@@ -1,14 +1,14 @@
 <template>
-  <div class="relative mt-4 lg:mt-10 w-full max-w-[700px] bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
-    <span class="absolute -top-6 left-0 text-sm text-gray-500">{{ leftLabel }}</span>
-    <span class="absolute -top-6 right-0 text-sm text-gray-500">{{ rightLabel }}</span>
+  <div class="relative mt-4 lg:mt-10 w-full max-w-[700px] bg-lightProgressBarUnfilledColor rounded-full h-2.5 dark:bg-darkProgressBarUnfilledColor">
+    <span class="absolute -top-6 left-0 text-sm text-lightProgressBarText dark:text-darkProgressBarText">{{ leftLabel }}</span>
+    <span class="absolute -top-6 right-0 text-sm text-lightProgressBarText dark:text-darkProgressBarText">{{ rightLabel }}</span>
     <div 
-      class="bg-lightPrimary dark:bg-darkPrimary h-2.5 rounded-full transition-all duration-300 ease-in-out"
+      class="bg-lightProgressBarFilledColor dark:bg-darkProgressBarFilledColor h-2.5 rounded-full transition-all duration-300 ease-in-out"
       :style="{ width: `${percentage}%` }"
     ></div>
-    <span v-if="showValues" class="absolute top-4 left-0 text-sm text-gray-500">{{ formatValue(minValue) }}</span>
-    <span v-if="showProgress" class="absolute top-4 right-1/2 translate-x-1/2 text-sm text-gray-500">{{ progressText }}</span>
-    <span v-if="showValues" class="absolute top-4 right-0 text-sm text-gray-500">{{ formatValue(maxValue) }}</span>
+    <span v-if="showValues" class="absolute top-4 left-0 text-sm text-lightProgressBarText dark:text-darkProgressBarText">{{ formatValue(minValue) }}</span>
+    <span v-if="showProgress" class="absolute top-4 right-1/2 translate-x-1/2 text-sm text-lightProgressBarText dark:text-darkProgressBarText">{{ progressText }}</span>
+    <span v-if="showValues" class="absolute top-4 right-0 text-sm text-lightProgressBarText dark:text-darkProgressBarText">{{ formatValue(maxValue) }}</span>
   </div>
 </template>