@iankibetsh/shframework 5.5.3 → 5.5.4

package/dist/library.mjs

@@ -1,9 +1,9 @@
 import Axios from 'axios';
-import moment from 'moment';
+import { DateTime } from 'luxon';
 import Swal from 'sweetalert2';
 import { Modal, Offcanvas } from 'bootstrap';
 import NProgress from 'nprogress';
-import { openBlock, createElementBlock, createElementVNode, createTextVNode, toDisplayString, createCommentVNode, withDirectives, Fragment, renderList, vModelSelect, vModelText, ref, onMounted, watch, unref, normalizeClass, createBlock, resolveDynamicComponent, resolveComponent, inject, mergeProps, renderSlot, normalizeStyle, computed, Teleport, createVNode, withCtx, vModelCheckbox, resolveDirective, shallowRef, normalizeProps, markRaw, isRef } from 'vue';
+import { openBlock, createElementBlock, createElementVNode, createTextVNode, toDisplayString, createCommentVNode, withDirectives, Fragment, renderList, vModelSelect, vModelText, ref, onMounted, watch, unref, normalizeClass, createBlock, resolveDynamicComponent, resolveComponent, inject, useTemplateRef, mergeProps, renderSlot, normalizeStyle, computed, Teleport, createVNode, withCtx, useSlots, onBeforeUnmount, reactive, vModelCheckbox, resolveDirective, shallowRef, normalizeProps, markRaw, isRef } from 'vue';
 import _ from 'lodash';
 import { defineStore, storeToRefs } from 'pinia';
 import { useRoute, useRouter } from 'vue-router';
@@ -192,7 +192,6 @@ function showToast(message, toastType, config){
     Toast.fire({
         icon: toastType,
         title: message,
-        postion: 'bottom'
     });
 }
 
@@ -248,7 +247,39 @@ function formatDate(date, format){
     if (!format) {
         format = 'lll';
     }
-    return moment(date).format(format)
+    const formatMap = {
+        'lll': "MMM d, yyyy, h:mm a",
+        'LLL': "MMMM d, yyyy, h:mm a",
+        'LL': "MMMM d, yyyy",
+        'L': "MM/dd/yyyy",
+        'YYYY-MM-DD': 'yyyy-MM-dd',
+        'YYYY/MM/DD': 'yyyy/MM/dd',
+        'YYYY': 'yyyy',
+        'MM': 'MM',
+        'DD': 'dd',
+        'HH:mm': 'HH:mm',
+        'hh:mm A': 'hh:mm a',
+        'MMM D, YYYY': 'MMM d, yyyy',
+        'MMMM D, YYYY': 'MMMM d, yyyy',
+        'MMM D, YYYY h:mm A': 'MMM d, yyyy h:mm a',
+        'MMMM D, YYYY h:mm A': 'MMMM d, yyyy h:mm a',
+        // Add more as needed
+    };
+    const luxonFormat = formatMap[format] || format;
+    // Accepts ISO string, JS Date, or Luxon DateTime
+    let dt;
+    if (typeof date === 'string' || date instanceof String) {
+        dt = DateTime.fromISO(date);
+        if (!dt.isValid) dt = DateTime.fromRFC2822(date);
+        if (!dt.isValid) dt = DateTime.fromFormat(date, 'yyyy-MM-dd');
+    } else if (date instanceof Date) {
+        dt = DateTime.fromJSDate(date);
+    } else if (date && typeof date === 'object' && date.isValid !== undefined) {
+        dt = date;
+    } else {
+        return ''
+    }
+    return dt.isValid ? dt.toFormat(luxonFormat) : ''
 }
 
 function formatNumber(amount, decimalPoints = 0){
@@ -330,7 +361,7 @@ function logoutUser(){
 function sessionRestored(){
   const timeout = shStorage.getItem('sessionTimeout') * 60;
   const last_activity = shStorage.getItem('last_activity');
-  const pastSeconds = moment().diff(last_activity, 'seconds');
+  const pastSeconds = DateTime.now().diff(DateTime.fromISO(last_activity), 'seconds').seconds;
   if(!shStorage.getItem('access_token'))
     return false
   return pastSeconds < timeout
@@ -339,8 +370,8 @@ const checkSession = function (isCheking) {
   const timeout = shStorage.getItem('sessionTimeout');
   const last_activity = shStorage.getItem('last_activity');
   if (shStorage.getItem('access_token')) {
-    const pastMinutes = moment().diff(last_activity, 'minutes');
-    const pastSeconds = moment().diff(last_activity, 'seconds');
+    const pastMinutes = DateTime.now().diff(DateTime.fromISO(last_activity), 'minutes').minutes;
+    const pastSeconds = DateTime.now().diff(DateTime.fromISO(last_activity), 'seconds').seconds;
     if(pastMinutes >= timeout) {
       const gracePeriod = pastSeconds - (timeout * 60);
       if (gracePeriod >= 60 ) {
@@ -395,14 +426,14 @@ async function shSwalLogout (seconds = 30) {
     } else {
       window.ShConfirmation = null;
       clearInterval(window.shInterval);
-      const timeNow = moment().toISOString();
+      const timeNow = DateTime.now().toISO();
       shStorage.setItem('last_activity', timeNow);
       startSession();
     }
   })
 }
 function startSession () {
-  const timeNow = moment().toISOString();
+  const timeNow = DateTime.now().toISO();
   const accessToken = shStorage.getItem('access_token');
   if (accessToken) {
     shStorage.setItem('last_activity', timeNow);
@@ -417,7 +448,7 @@ const updateSession = () =>{
   if(!window.shInterval) {
     startSession();
   }
-  const timeNow = moment().toISOString();
+  const timeNow = DateTime.now().toISO();
   shStorage.setItem('last_activity', timeNow);
 };
 
@@ -2102,19 +2133,19 @@ const _hoisted_1$r = {
   class: "sh-phone mb-3",
   style: {"display":"flex"}
 };
-const _hoisted_2$j = {
+const _hoisted_2$i = {
   key: 0,
   style: {"display":"contents"}
 };
-const _hoisted_3$g = ["src"];
+const _hoisted_3$f = ["src"];
 const _hoisted_4$f = ["value"];
 const _hoisted_5$c = ["disabled"];
 
 function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("div", _hoisted_1$r, [
     ($data.selectedCountry)
-      ? (openBlock(), createElementBlock("div", _hoisted_2$j, [
-          createElementVNode("img", { src: $data.flag }, null, 8 /* PROPS */, _hoisted_3$g),
+      ? (openBlock(), createElementBlock("div", _hoisted_2$i, [
+          createElementVNode("img", { src: $data.flag }, null, 8 /* PROPS */, _hoisted_3$f),
           createTextVNode(" " + toDisplayString($data.selectedCountry.dialCode), 1 /* TEXT */)
         ]))
       : createCommentVNode("v-if", true),
@@ -2153,8 +2184,8 @@ const _hoisted_1$q = {
   key: 0,
   class: "dropdown sh-suggest"
 };
-const _hoisted_2$i = ["id"];
-const _hoisted_3$f = { class: "sh-suggestions-holder" };
+const _hoisted_2$h = ["id"];
+const _hoisted_3$e = { class: "sh-suggestions-holder" };
 const _hoisted_4$e = { class: "badge bg-secondary m-1 sh-selected-item" };
 const _hoisted_5$b = ["onClick"];
 const _hoisted_6$9 = ["id"];
@@ -2322,7 +2353,7 @@ return (_ctx, _cache) => {
           class: "p-0 d-flex sh-suggest-control dropdown-toggle",
           "aria-expanded": "false"
         }, [
-          createElementVNode("div", _hoisted_3$f, [
+          createElementVNode("div", _hoisted_3$e, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(unref(selectedSuggestions), (sgt) => {
               return (openBlock(), createElementBlock("h5", _hoisted_4$e, [
                 createTextVNode(toDisplayString(sgt.name) + " ", 1 /* TEXT */),
@@ -2342,7 +2373,7 @@ return (_ctx, _cache) => {
             onChange: filterData,
             class: "flex-fill h-100 sh-suggestion-input"
           }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_6$9)
-        ], 8 /* PROPS */, _hoisted_2$i),
+        ], 8 /* PROPS */, _hoisted_2$h),
         createElementVNode("ul", {
           class: normalizeClass([(!unref(suggestions) || unref(suggestions).length === 0) ? 'no-sh-suggestions':'sh-found-suggestions', "dropdown-menu w-100"]),
           id: 'dropwdown_section' + unref(id),
@@ -2745,12 +2776,12 @@ const _hoisted_1$p = {
   ref: "ShAutoForm",
   class: "sh-form"
 };
-const _hoisted_2$h = {
+const _hoisted_2$g = {
   key: 0,
   class: "alert alert-danger alert-dismissible fade show sh-form-submission-error",
   role: "alert"
 };
-const _hoisted_3$e = { key: 0 };
+const _hoisted_3$d = { key: 0 };
 const _hoisted_4$d = { key: 1 };
 const _hoisted_5$a = { class: "row" };
 const _hoisted_6$8 = { class: "fg-label control-label text-capitalize control-bel col-md-12 request-form-label mb-2" };
@@ -2784,15 +2815,15 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_ShSuggest = resolveComponent("ShSuggest");
 
   return (openBlock(), createElementBlock(Fragment, null, [
-    _cache[5] || (_cache[5] = createElementVNode("h5", { class: "d-none" }, null, -1 /* HOISTED */)),
+    _cache[5] || (_cache[5] = createElementVNode("h5", { class: "d-none" }, null, -1 /* CACHED */)),
     createElementVNode("form", _hoisted_1$p, [
       createCommentVNode("    <div v-if=\"form_status == 1\" class=\"alert alert-info\">Processing...</div>"),
       createCommentVNode("    <div v-if=\"form_status == 2\" class=\"alert alert-success\">Success</div>"),
       (_ctx.form_status == 3)
-        ? (openBlock(), createElementBlock("div", _hoisted_2$h, [
-            _cache[2] || (_cache[2] = createElementVNode("i", { class: "bi-exclamation-triangle-fill me-1" }, null, -1 /* HOISTED */)),
+        ? (openBlock(), createElementBlock("div", _hoisted_2$g, [
+            _cache[2] || (_cache[2] = createElementVNode("i", { class: "bi-exclamation-triangle-fill me-1" }, null, -1 /* CACHED */)),
             (_ctx.errorText)
-              ? (openBlock(), createElementBlock("span", _hoisted_3$e, toDisplayString(_ctx.errorText), 1 /* TEXT */))
+              ? (openBlock(), createElementBlock("span", _hoisted_3$d, toDisplayString(_ctx.errorText), 1 /* TEXT */))
               : (openBlock(), createElementBlock("span", _hoisted_4$d, "Unexpected Error Occurred")),
             createCommentVNode("      <button @click=\"hideError\" type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button>")
           ]))
@@ -3000,8 +3031,8 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
         }), 128 /* KEYED_FRAGMENT */))
       ]),
       ($props.hasTerms)
-        ? (openBlock(), createElementBlock("div", _hoisted_24$1, _cache[3] || (_cache[3] = [
-            createElementVNode("h5", null, "Confirm and Submit", -1 /* HOISTED */),
+        ? (openBlock(), createElementBlock("div", _hoisted_24$1, [...(_cache[3] || (_cache[3] = [
+            createElementVNode("h5", null, "Confirm and Submit", -1 /* CACHED */),
             createElementVNode("p", null, [
               createTextVNode("By clicking submit, you agree to our "),
               createElementVNode("a", {
@@ -3013,8 +3044,8 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
                 target: "_blank",
                 href: "https://hauzisha.co.ke/privacy-policy"
               }, "privacy policy")
-            ], -1 /* HOISTED */)
-          ])))
+            ], -1 /* CACHED */)
+          ]))]))
         : createCommentVNode("v-if", true),
       (_ctx.form_status == 1)
         ? (openBlock(), createElementBlock("button", {
@@ -3022,14 +3053,14 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
             class: normalizeClass(["btn btn-primary", $options.getSubmitBtnClass()]),
             type: "button",
             disabled: ""
-          }, _cache[4] || (_cache[4] = [
+          }, [...(_cache[4] || (_cache[4] = [
             createElementVNode("span", {
               class: "spinner-border spinner-border-sm",
               role: "status",
               "aria-hidden": "true"
-            }, null, -1 /* HOISTED */),
-            createTextVNode(" Processing... ")
-          ]), 2 /* CLASS */))
+            }, null, -1 /* CACHED */),
+            createTextVNode(" Processing... ", -1 /* CACHED */)
+          ]))], 2 /* CLASS */))
         : (openBlock(), createElementBlock("button", {
             key: 3,
             "data-cy": "sh_form_submit",
@@ -3359,8 +3390,8 @@ return (_ctx, _cache) => {
 script$r.__file = "src/lib/components/form-components/DateInput.vue";
 
 const _hoisted_1$m = ["name", "onUpdate:modelValue"];
-const _hoisted_2$g = ["innerHTML"];
-const _hoisted_3$d = {
+const _hoisted_2$f = ["innerHTML"];
+const _hoisted_3$c = {
   key: 0,
   class: "text-danger sh-required"
 };
@@ -3464,7 +3495,7 @@ const getFieldComponent = (fieldObj) => {
 };
 const shFormElementClasses = ref(null);
 shFormElementClasses.value = inject('shFormElementClasses');
-const shAutoForm = ref(null);
+const shAutoForm = useTemplateRef('shAutoForm');
 const closeModal = e => {
   setTimeout(() => {
     if(!shAutoForm.value){
@@ -3626,101 +3657,98 @@ onMounted((ev) => {
 
 
 return (_ctx, _cache) => {
-  return (openBlock(), createElementBlock(Fragment, null, [
-    _cache[2] || (_cache[2] = createElementVNode("div", null, null, -1 /* HOISTED */)),
-    createElementVNode("form", {
-      class: normalizeClass([__props.formClass, "sh-auto-form"]),
-      ref_key: "shAutoForm",
-      ref: shAutoForm,
-      onSubmit: _cache[0] || (_cache[0] = e => submitForm(e))
+  return (openBlock(), createElementBlock("form", {
+    class: normalizeClass([__props.formClass, "sh-auto-form"]),
+    ref_key: "shAutoForm",
+    ref: shAutoForm,
+    onSubmit: _cache[0] || (_cache[0] = e => submitForm(e))
+  }, [
+    (openBlock(true), createElementBlock(Fragment, null, renderList(formFields.value, (field, index) => {
+      return (openBlock(), createElementBlock("div", {
+        key: field,
+        class: normalizeClass(getElementClass('formGroup') + ' sh-field' + field.field)
+      }, [
+        (field.type === 'hidden')
+          ? withDirectives((openBlock(), createElementBlock("input", {
+              key: 0,
+              type: "hidden",
+              name: field.field,
+              "onUpdate:modelValue": $event => ((formFields.value[index].value) = $event)
+            }, null, 8 /* PROPS */, _hoisted_1$m)), [
+              [vModelText, formFields.value[index].value]
+            ])
+          : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+              (!unref(isFloating) && field.label)
+                ? (openBlock(), createElementBlock("label", {
+                    key: 0,
+                    class: normalizeClass(getElementClass('formLabel'))
+                  }, [
+                    createElementVNode("span", {
+                      innerHTML: field.label,
+                      class: "sh-label"
+                    }, null, 8 /* PROPS */, _hoisted_2$f),
+                    (field.required)
+                      ? (openBlock(), createElementBlock("span", _hoisted_3$c, "*"))
+                      : createCommentVNode("v-if", true)
+                  ], 2 /* CLASS */))
+                : createCommentVNode("v-if", true),
+              (openBlock(), createBlock(resolveDynamicComponent(getFieldComponent(field)), mergeProps({ ref_for: true }, getComponentProps(field), {
+                isInvalid: typeof validationErrors.value[field.field] !== 'undefined',
+                onClick: $event => (fieldChanged(field.field)),
+                "onUpdate:modelValue": [$event => (fieldChanged(field.field)), $event => ((formFields.value[index].value) = $event)],
+                modelValue: formFields.value[index].value,
+                class: getComponentClass(field.field)
+              }), null, 16 /* FULL_PROPS */, ["isInvalid", "onClick", "onUpdate:modelValue", "modelValue", "class"])),
+              (unref(isFloating) && field.label)
+                ? (openBlock(), createElementBlock("label", {
+                    key: 1,
+                    class: normalizeClass(getElementClass('formLabel')),
+                    innerHTML: field.label
+                  }, null, 10 /* CLASS, PROPS */, _hoisted_4$c))
+                : createCommentVNode("v-if", true),
+              (unref(isFloating))
+                ? (openBlock(), createElementBlock("div", _hoisted_5$9, [...(_cache[1] || (_cache[1] = [
+                    createElementVNode("div", { class: "form-notch-leading" }, null, -1 /* CACHED */),
+                    createElementVNode("div", { class: "form-notch-middle" }, null, -1 /* CACHED */),
+                    createElementVNode("div", { class: "form-notch-trailing" }, null, -1 /* CACHED */)
+                  ]))]))
+                : createCommentVNode("v-if", true),
+              (field.helper)
+                ? (openBlock(), createElementBlock("div", {
+                    key: 3,
+                    class: normalizeClass(getElementClass('helperText')),
+                    innerHTML: field.helper
+                  }, null, 10 /* CLASS, PROPS */, _hoisted_6$7))
+                : createCommentVNode("v-if", true),
+              (validationErrors.value[field.field])
+                ? (openBlock(), createElementBlock("div", {
+                    key: 4,
+                    class: normalizeClass(getElementClass('invalidFeedback'))
+                  }, toDisplayString(validationErrors.value[field.field]), 3 /* TEXT, CLASS */))
+                : createCommentVNode("v-if", true)
+            ], 64 /* STABLE_FRAGMENT */))
+      ], 2 /* CLASS */))
+    }), 128 /* KEYED_FRAGMENT */)),
+    renderSlot(_ctx.$slots, "default"),
+    createElementVNode("div", {
+      class: normalizeClass(getElementClass('formGroup'))
     }, [
-      (openBlock(true), createElementBlock(Fragment, null, renderList(formFields.value, (field, index) => {
-        return (openBlock(), createElementBlock("div", {
-          key: field,
-          class: normalizeClass(getElementClass('formGroup') + ' sh-field' + field.field)
-        }, [
-          (field.type === 'hidden')
-            ? withDirectives((openBlock(), createElementBlock("input", {
-                key: 0,
-                type: "hidden",
-                name: field.field,
-                "onUpdate:modelValue": $event => ((formFields.value[index].value) = $event)
-              }, null, 8 /* PROPS */, _hoisted_1$m)), [
-                [vModelText, formFields.value[index].value]
-              ])
-            : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                (!unref(isFloating) && field.label)
-                  ? (openBlock(), createElementBlock("label", {
-                      key: 0,
-                      class: normalizeClass(getElementClass('formLabel'))
-                    }, [
-                      createElementVNode("span", {
-                        innerHTML: field.label,
-                        class: "sh-label"
-                      }, null, 8 /* PROPS */, _hoisted_2$g),
-                      (field.required)
-                        ? (openBlock(), createElementBlock("span", _hoisted_3$d, "*"))
-                        : createCommentVNode("v-if", true)
-                    ], 2 /* CLASS */))
-                  : createCommentVNode("v-if", true),
-                (openBlock(), createBlock(resolveDynamicComponent(getFieldComponent(field)), mergeProps({ ref_for: true }, getComponentProps(field), {
-                  isInvalid: typeof validationErrors.value[field.field] !== 'undefined',
-                  onClick: $event => (fieldChanged(field.field)),
-                  "onUpdate:modelValue": [$event => (fieldChanged(field.field)), $event => ((formFields.value[index].value) = $event)],
-                  modelValue: formFields.value[index].value,
-                  class: getComponentClass(field.field)
-                }), null, 16 /* FULL_PROPS */, ["isInvalid", "onClick", "onUpdate:modelValue", "modelValue", "class"])),
-                (unref(isFloating) && field.label)
-                  ? (openBlock(), createElementBlock("label", {
-                      key: 1,
-                      class: normalizeClass(getElementClass('formLabel')),
-                      innerHTML: field.label
-                    }, null, 10 /* CLASS, PROPS */, _hoisted_4$c))
-                  : createCommentVNode("v-if", true),
-                (unref(isFloating))
-                  ? (openBlock(), createElementBlock("div", _hoisted_5$9, [...(_cache[1] || (_cache[1] = [
-                      createElementVNode("div", { class: "form-notch-leading" }, null, -1 /* HOISTED */),
-                      createElementVNode("div", { class: "form-notch-middle" }, null, -1 /* HOISTED */),
-                      createElementVNode("div", { class: "form-notch-trailing" }, null, -1 /* HOISTED */)
-                    ]))]))
-                  : createCommentVNode("v-if", true),
-                (field.helper)
-                  ? (openBlock(), createElementBlock("div", {
-                      key: 3,
-                      class: normalizeClass(getElementClass('helperText')),
-                      innerHTML: field.helper
-                    }, null, 10 /* CLASS, PROPS */, _hoisted_6$7))
-                  : createCommentVNode("v-if", true),
-                (validationErrors.value[field.field])
-                  ? (openBlock(), createElementBlock("div", {
-                      key: 4,
-                      class: normalizeClass(getElementClass('invalidFeedback'))
-                    }, toDisplayString(validationErrors.value[field.field]), 3 /* TEXT, CLASS */))
-                  : createCommentVNode("v-if", true)
-              ], 64 /* STABLE_FRAGMENT */))
-        ], 2 /* CLASS */))
-      }), 128 /* KEYED_FRAGMENT */)),
-      renderSlot(_ctx.$slots, "default"),
-      createElementVNode("div", {
-        class: normalizeClass(getElementClass('formGroup'))
+      createElementVNode("button", {
+        style: normalizeStyle({width: submitBtnWidth.value}),
+        ref_key: "submitBtn",
+        ref: submitBtn,
+        disabled: loading.value,
+        class: normalizeClass(getElementClass('actionBtn'))
       }, [
-        createElementVNode("button", {
-          style: normalizeStyle({width: submitBtnWidth.value}),
-          ref_key: "submitBtn",
-          ref: submitBtn,
-          disabled: loading.value,
-          class: normalizeClass(getElementClass('actionBtn'))
-        }, [
-          (loading.value)
-            ? (openBlock(), createElementBlock("span", _hoisted_8$5))
-            : createCommentVNode("v-if", true),
-          (!loading.value)
-            ? (openBlock(), createElementBlock("span", _hoisted_9$5, "Submit"))
-            : createCommentVNode("v-if", true)
-        ], 14 /* CLASS, STYLE, PROPS */, _hoisted_7$6)
-      ], 2 /* CLASS */)
-    ], 34 /* CLASS, NEED_HYDRATION */)
-  ], 64 /* STABLE_FRAGMENT */))
+        (loading.value)
+          ? (openBlock(), createElementBlock("span", _hoisted_8$5))
+          : createCommentVNode("v-if", true),
+        (!loading.value)
+          ? (openBlock(), createElementBlock("span", _hoisted_9$5, "Submit"))
+          : createCommentVNode("v-if", true)
+      ], 14 /* CLASS, STYLE, PROPS */, _hoisted_7$6)
+    ], 2 /* CLASS */)
+  ], 34 /* CLASS, NEED_HYDRATION */))
 }
 }
 
@@ -3729,8 +3757,8 @@ return (_ctx, _cache) => {
 script$q.__file = "src/lib/components/ShAutoForm.vue";
 
 const _hoisted_1$l = ["id", "data-bs-backdrop"];
-const _hoisted_2$f = { class: "modal-content" };
-const _hoisted_3$c = { class: "modal-header" };
+const _hoisted_2$e = { class: "modal-content" };
+const _hoisted_3$b = { class: "modal-header" };
 const _hoisted_4$b = { class: "modal-title flex-fill" };
 const _hoisted_5$8 = { class: "modal-body" };
 const _hoisted_6$6 = { class: "section" };
@@ -3794,15 +3822,15 @@ return (_ctx, _cache) => {
     createElementVNode("div", {
       class: normalizeClass(["modal-dialog", modalClasses.value])
     }, [
-      createElementVNode("div", _hoisted_2$f, [
-        createElementVNode("div", _hoisted_3$c, [
+      createElementVNode("div", _hoisted_2$e, [
+        createElementVNode("div", _hoisted_3$b, [
           createElementVNode("h3", _hoisted_4$b, toDisplayString(__props.modalTitle), 1 /* TEXT */),
           _cache[0] || (_cache[0] = createElementVNode("button", {
             type: "button",
             class: "btn-close sh-modal-close",
             "data-bs-dismiss": "modal",
             "aria-label": "Close"
-          }, null, -1 /* HOISTED */))
+          }, null, -1 /* CACHED */))
         ]),
         createElementVNode("div", _hoisted_5$8, [
           createElementVNode("div", _hoisted_6$6, [
@@ -3820,8 +3848,6 @@ return (_ctx, _cache) => {
 script$p.__file = "src/lib/components/ShModal.vue";
 
 const _hoisted_1$k = { class: "dropdown sh-dropdown-form" };
-const _hoisted_2$e = ["id"];
-const _hoisted_3$b = ["aria-labelledby"];
 
 var script$o = {
   __name: 'ShDropDownForm',
@@ -3868,25 +3894,26 @@ const formSubmitted = (res)=>{
 const formError = (res)=>{
   emit('formError',res);
 };
+const dropdownId = 'dropdown' + (Math.random() + 1).toString(36).substring(2);
 
 return (_ctx, _cache) => {
   return (openBlock(), createElementBlock(Fragment, null, [
-    _cache[0] || (_cache[0] = createElementVNode("h5", { class: "d-none" }, "To prevent default class", -1 /* HOISTED */)),
+    _cache[0] || (_cache[0] = createElementVNode("h5", { class: "d-none" }, "To prevent default class", -1 /* CACHED */)),
     createElementVNode("div", _hoisted_1$k, [
       createElementVNode("a", {
         class: normalizeClass(unref(btnClass)),
         href: "#",
         role: "button",
-        id: _ctx.dropdownId,
+        id: dropdownId,
         "data-bs-toggle": "dropdown",
         "data-bs-auto-close": "outside",
         "aria-expanded": "false"
       }, [
         renderSlot(_ctx.$slots, "default")
-      ], 10 /* CLASS, PROPS */, _hoisted_2$e),
+      ], 2 /* CLASS */),
       createElementVNode("div", {
         class: "dropdown-menu px-2 py-1",
-        "aria-labelledby": _ctx.dropdownId
+        "aria-labelledby": dropdownId
       }, [
         (openBlock(), createBlock(script$q, mergeProps({
           onSuccess: success,
@@ -3895,7 +3922,7 @@ return (_ctx, _cache) => {
           onFormError: formError,
           key: JSON.stringify(__props.currentData ?? {})
         }, props), null, 16 /* FULL_PROPS */))
-      ], 8 /* PROPS */, _hoisted_3$b)
+      ])
     ])
   ], 64 /* STABLE_FRAGMENT */))
 }
@@ -3958,6 +3985,18 @@ const emitClick = ()=>{
   emit('click');
 };
 
+
+const allProps = ref({});
+
+// make cleaned props computed
+
+const cleanedProp = computed(()=>{
+  const p = {...props};
+  delete p.class;
+  delete p.modalId;
+  return p
+});
+
 return (_ctx, _cache) => {
   return (openBlock(), createElementBlock(Fragment, null, [
     createElementVNode("a", {
@@ -3975,13 +4014,15 @@ return (_ctx, _cache) => {
         "modal-title": __props.modalTitle
       }, {
         default: withCtx(() => [
-          (openBlock(), createBlock(script$q, mergeProps({
-            onSuccess: success,
-            onFieldChanged: fieldChanged,
-            onFormSubmitted: formSubmitted,
-            onFormError: formError,
-            key: JSON.stringify(__props.currentData ?? {})
-          }, props), null, 16 /* FULL_PROPS */))
+          (allProps.value)
+            ? (openBlock(), createBlock(script$q, mergeProps({
+                onSuccess: success,
+                onFieldChanged: fieldChanged,
+                onFormSubmitted: formSubmitted,
+                onFormError: formError,
+                key: JSON.stringify(__props.currentData ?? {})
+              }, cleanedProp.value), null, 16 /* FULL_PROPS */))
+            : createCommentVNode("v-if", true)
         ]),
         _: 1 /* STABLE */
       }, 8 /* PROPS */, ["modal-size", "modal-id", "modal-title"])
@@ -4135,7 +4176,7 @@ const _hoisted_1$g = { class: "callout callout-info" };
 function render$2(_ctx, _cache) {
   return (openBlock(), createElementBlock("div", _hoisted_1$g, [
     renderSlot(_ctx.$slots, "default", {}, () => [
-      _cache[0] || (_cache[0] = createTextVNode(" No records found "))
+      _cache[0] || (_cache[0] = createTextVNode(" No records found ", -1 /* CACHED */))
     ])
   ]))
 }
@@ -4146,108 +4187,6 @@ script$k.render = render$2;
 script$k.__scopeId = "data-v-55cf77fb";
 script$k.__file = "src/lib/components/others/NoRecords.vue";
 
-const useUserStore = defineStore('user-store', {
-  state: () => ({
-    user: null,
-    role: null,
-    permissions: null,
-    menus: [],
-    loggedOut: false
-  }),
-  actions: {
-    setUser (defaultEndpoint) {
-      let user = null;
-      try {
-         user = shStorage.getItem('user') ? shStorage.getItem('user') : null;
-      } catch (error) {
-        user= null;
-      }
-      if(typeof user !== 'object'){
-        user = null;
-      }
-      if (user ) {
-        user.isAllowedTo = function (slug) {
-          if (this.permissions) {
-            let permissions = [];
-            if (typeof this.permissions === 'string') {
-              permissions = this.permissions;
-            } else {
-              permissions = this.permissions;
-            }
-            return permissions.includes(slug)
-          }
-          return false
-        };
-      }
-      this.user = user;
-      const userEndpoint = defaultEndpoint ?? inject('userEndpoint','auth/user') ?? 'auth/user?defaults=1';
-
-      shApis.doGet(userEndpoint).then(res => {
-        let user = res.data.user;
-        if (typeof(user) === 'undefined') {
-           user = res.data;
-        }
-        shStorage.setItem('user',user);
-        user.signOut = this.signOut;
-        user.logout = this.signOut;
-        user.logOut = this.signOut;
-        user.isAllowedTo = function (slug) {
-          if(!slug){
-            return true
-          }
-          if (this.permissions) {
-            let permissions = [];
-            if (typeof this.permissions === 'string') {
-              permissions = this.permissions;
-            } else {
-              permissions = this.permissions;
-            }
-            return permissions.includes(slug)
-          }
-          return false
-        };
-        user.can = user.isAllowedTo;
-        this.user = user;
-      }).catch((reason) => {
-        if (reason.response && reason.response.status) {
-          if(reason.response.status === 401) {
-            shStorage.setItem('user',null);
-            this.user = null;
-          }
-          this.loggedOut = true;
-        }
-      });
-      if (this.user) {
-        if (typeof this.user.permissions === 'string') {
-          this.permissions = this.user.permissions;
-        } else {
-          this.permissions = this.user.permissions;
-        }
-      }
-      const timeNow = moment().toISOString();
-      shStorage.setItem('session_start',timeNow);
-    },
-    signOut () {
-      shRepo.signOutUser();
-    },
-    logOut () {
-      this.signOut();
-    },
-    getUser () {
-      this.setUser();
-    },
-    setAccessToken (accessToken) {
-      shStorage.setItem('access_token', accessToken);
-      this.setUser();
-    }
-  },
-  getters: {
-    userId (state) {
-      return state.user === null ? null:state.user.id
-    }
-  }
-});
-
 var script$j = {
   __name: 'ShConfirmAction',
   props: {
@@ -4328,7 +4267,7 @@ return (_ctx, _cache) => {
             class: "spinner-border spinner-border-sm me-1",
             role: "status",
             "aria-hidden": "true"
-          }, null, -1 /* HOISTED */)),
+          }, null, -1 /* CACHED */)),
           createElementVNode("span", null, toDisplayString(__props.loadingMessage), 1 /* TEXT */)
         ], 64 /* STABLE_FRAGMENT */))
       : createCommentVNode("v-if", true),
@@ -4425,7 +4364,7 @@ return (_ctx, _cache) => {
             class: "spinner-border spinner-border-sm me-1",
             role: "status",
             "aria-hidden": "true"
-          }, null, -1 /* HOISTED */)),
+          }, null, -1 /* CACHED */)),
           createElementVNode("span", null, toDisplayString(__props.loadingMessage), 1 /* TEXT */)
         ], 64 /* STABLE_FRAGMENT */))
       : createCommentVNode("v-if", true),
@@ -4440,6 +4379,108 @@ return (_ctx, _cache) => {
 
 script$i.__file = "src/lib/components/ShSilentAction.vue";
 
+const useUserStore = defineStore('user-store', {
+  state: () => ({
+    user: null,
+    role: null,
+    permissions: null,
+    menus: [],
+    loggedOut: false
+  }),
+  actions: {
+    setUser (defaultEndpoint) {
+      let user = null;
+      try {
+         user = shStorage.getItem('user') ? shStorage.getItem('user') : null;
+      } catch (error) {
+        user= null;
+      }
+      if(typeof user !== 'object'){
+        user = null;
+      }
+      if (user ) {
+        user.isAllowedTo = function (slug) {
+          if (this.permissions) {
+            let permissions = [];
+            if (typeof this.permissions === 'string') {
+              permissions = this.permissions;
+            } else {
+              permissions = this.permissions;
+            }
+            return permissions.includes(slug)
+          }
+          return false
+        };
+      }
+      this.user = user;
+      const userEndpoint = defaultEndpoint ?? inject('userEndpoint','auth/user') ?? 'auth/user?defaults=1';
+
+      shApis.doGet(userEndpoint).then(res => {
+        let user = res.data.user;
+        if (typeof(user) === 'undefined') {
+           user = res.data;
+        }
+        shStorage.setItem('user',user);
+        user.signOut = this.signOut;
+        user.logout = this.signOut;
+        user.logOut = this.signOut;
+        user.isAllowedTo = function (slug) {
+          if(!slug){
+            return true
+          }
+          if (this.permissions) {
+            let permissions = [];
+            if (typeof this.permissions === 'string') {
+              permissions = this.permissions;
+            } else {
+              permissions = this.permissions;
+            }
+            return permissions.includes(slug)
+          }
+          return false
+        };
+        user.can = user.isAllowedTo;
+        this.user = user;
+      }).catch((reason) => {
+        if (reason.response && reason.response.status) {
+          if(reason.response.status === 401) {
+            shStorage.setItem('user',null);
+            this.user = null;
+          }
+          this.loggedOut = true;
+        }
+      });
+      if (this.user) {
+        if (typeof this.user.permissions === 'string') {
+          this.permissions = this.user.permissions;
+        } else {
+          this.permissions = this.user.permissions;
+        }
+      }
+      const timeNow = DateTime.now().toISO();
+      shStorage.setItem('session_start',timeNow);
+    },
+    signOut () {
+      shRepo.signOutUser();
+    },
+    logOut () {
+      this.signOut();
+    },
+    getUser () {
+      this.setUser();
+    },
+    setAccessToken (accessToken) {
+      shStorage.setItem('access_token', accessToken);
+      this.setUser();
+    }
+  },
+  getters: {
+    userId (state) {
+      return state.user === null ? null:state.user.id
+    }
+  }
+});
+
 const _hoisted_1$f = ["href"];
 const _hoisted_2$c = ["title"];
 
@@ -4678,18 +4719,222 @@ return (_ctx, _cache) => {
 
 script$g.__file = "src/lib/components/table/TableActions.vue";
 
-var script$f = {
-  name: 'Pagination',
-  props: ['pagination_data', 'loadMore', 'hideCount', 'hideLoadMore', 'paginationStyle','perPage'],
-  data () {
-    return {
-      current_page: this.pagination_data.current,
-      per_page: this.pagination_data.per_page,
-      loadingMore: 0,
-      pageOptions: [10,25,50,100,200,400]
-    }
-  },
-  mounted(){
+const _hoisted_1$d = { class: "sh-range" };
+const _hoisted_2$a = { class: "dropdown" };
+const _hoisted_3$8 = {
+  class: "form-control dropdown-toggle",
+  href: "#",
+  role: "button",
+  id: "dropdownMenuLink",
+  "data-bs-toggle": "dropdown",
+  "aria-expanded": "false"
+};
+const _hoisted_4$8 = ["innerHTML"];
+const _hoisted_5$5 = {
+  class: "dropdown-menu sh-range-dropdown",
+  "aria-labelledby": "dropdownMenuLink"
+};
+const _hoisted_6$5 = { class: "sh-range-preset" };
+const _hoisted_7$5 = ["onClick"];
+const _hoisted_8$4 = { class: "border-top" };
+const _hoisted_9$4 = { class: "dropdown-item d-flex flex-column" };
+
+
+
+var script$f = {
+  __name: 'ShRange',
+  props: {
+  start: {
+    type: Number,
+    default: 2021
+  },
+  selected: {
+    type: String,
+    default: shRepo.getShConfig('defaultRange', 'This Month')
+  }
+},
+  emits: ['rangeSelected'],
+  setup(__props, { emit: __emit }) {
+
+const props = __props;
+
+const emit = __emit;
+
+const selectedDate = ref(null);
+const rangeLabel = ref(null);
+const customFrom = ref(null);
+const customTo = ref(null);
+
+const applyCustom = () => {
+  const date = [
+    customFrom.value ? DateTime.fromISO(customFrom.value) : DateTime.now(),
+    customTo.value ? DateTime.fromISO(customTo.value) : DateTime.now()
+  ];
+  setDate(date, 'Custom');
+};
+
+const dates = ref([
+  {
+    label: 'Today',
+    value: [DateTime.now().startOf('day'), DateTime.now().endOf('day')]
+  },
+  {
+    label: 'Yesterday',
+    value: [
+      DateTime.now().minus({ days: 1 }).startOf('day'),
+      DateTime.now().minus({ days: 1 }).endOf('day')
+    ]
+  },
+  {
+    label: '7 Days',
+    value: [DateTime.now().minus({ days: 7 }).startOf('day'), DateTime.now().endOf('day')]
+  },
+  {
+    label: 'This week',
+    value: [
+      DateTime.now().startOf('week'),
+      DateTime.now().endOf('week')
+    ]
+  },
+  {
+    label: 'This Month',
+    value: [DateTime.now().startOf('month'), DateTime.now().endOf('day')]
+  },
+  {
+    label: 'Last Month',
+    value: [
+      DateTime.now().minus({ months: 1 }).startOf('month'),
+      DateTime.now().minus({ months: 1 }).endOf('month')
+    ]
+  },
+  {
+    label: 'Last 30 days',
+    value: [DateTime.now().minus({ days: 30 }).startOf('day'), DateTime.now().endOf('day')]
+  },
+  {
+    label: 'Last 60 days',
+    value: [DateTime.now().minus({ days: 60 }).startOf('day'), DateTime.now().endOf('day')]
+  },
+  {
+    label: 'Last 90 days',
+    value: [DateTime.now().minus({ days: 90 }).startOf('day'), DateTime.now().endOf('day')]
+  },
+  {
+    label: 'This Year',
+    value: [DateTime.now().startOf('year'), DateTime.now().endOf('day')]
+  },
+  {
+    label: '1 Year',
+    value: [DateTime.now().minus({ months: 12 }).startOf('day'), DateTime.now().endOf('day')]
+  },
+  {
+    label: 'All Time',
+    value: [DateTime.fromObject({ year: 2021 }).startOf('year'), DateTime.now().endOf('day')]
+  }
+]);
+const  setDate =  (date, label) => {
+  selectedDate.value = date;
+  rangeLabel.value = '<strong>' + label + '</strong><small>(' + date[0].toFormat('MMMM d, yyyy') + ' - ' + date[1].toFormat('MMMM d, yyyy') + ')</small>';
+  const from = date[0];
+  const to = date[1];
+  const period = label.toString().toLowerCase().replaceAll(' ','_');
+  emit('rangeSelected', {
+    from: from,
+    to: to,
+    period: period,
+    query: `from=${from.toFormat('MM/dd/yyyy')}&to=${to.toFormat('MM/dd/yyyy')}&period=${period}`
+  });
+};
+onMounted(() => {
+  let end = parseInt(DateTime.now().toFormat('yyyy'));
+  while (end >= props.start) {
+    dates.value.push({
+      label: end,
+      value: [
+        DateTime.fromObject({ year: end }).startOf('year'),
+        DateTime.fromObject({ year: end }).endOf('year')
+      ]
+    });
+    end--;
+  }
+
+  dates.value.map(date=>{
+    (`${date.label}`.toLowerCase() === props.selected.toLowerCase()) && setDate(date.value, date.label);
+  });
+});
+
+return (_ctx, _cache) => {
+  return (openBlock(), createElementBlock("div", _hoisted_1$d, [
+    createElementVNode("div", _hoisted_2$a, [
+      createElementVNode("div", _hoisted_3$8, [
+        _cache[2] || (_cache[2] = createElementVNode("i", { class: "bi-calendar text-dark" }, null, -1 /* CACHED */)),
+        _cache[3] || (_cache[3] = createTextVNode()),
+        createElementVNode("span", { innerHTML: rangeLabel.value }, null, 8 /* PROPS */, _hoisted_4$8)
+      ]),
+      createElementVNode("div", _hoisted_5$5, [
+        createElementVNode("ul", _hoisted_6$5, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(dates.value, (date) => {
+            return (openBlock(), createElementBlock("li", {
+              key: date.label,
+              onClick: $event => (setDate(date.value, date.label))
+            }, [
+              createElementVNode("a", {
+                class: normalizeClass(["dropdown-item", date.value === selectedDate.value ? 'active' : '']),
+                href: "#"
+              }, toDisplayString(date.label), 3 /* TEXT, CLASS */)
+            ], 8 /* PROPS */, _hoisted_7$5))
+          }), 128 /* KEYED_FRAGMENT */))
+        ]),
+        createElementVNode("ul", null, [
+          createElementVNode("li", _hoisted_8$4, [
+            createElementVNode("div", _hoisted_9$4, [
+              _cache[4] || (_cache[4] = createElementVNode("span", null, "Custom", -1 /* CACHED */)),
+              createElementVNode("div", null, [
+                withDirectives(createElementVNode("input", {
+                  "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((customFrom).value = $event)),
+                  type: "date"
+                }, null, 512 /* NEED_PATCH */), [
+                  [vModelText, customFrom.value]
+                ]),
+                withDirectives(createElementVNode("input", {
+                  "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => ((customTo).value = $event)),
+                  type: "date"
+                }, null, 512 /* NEED_PATCH */), [
+                  [vModelText, customTo.value]
+                ])
+              ]),
+              (customFrom.value && customTo.value)
+                ? (openBlock(), createElementBlock("button", {
+                    key: 0,
+                    class: "btn btn-sm btn-info mt-1",
+                    onClick: applyCustom
+                  }, "Apply"))
+                : createCommentVNode("v-if", true)
+            ])
+          ])
+        ])
+      ])
+    ])
+  ]))
+}
+}
+
+};
+
+script$f.__file = "src/lib/components/ShRange.vue";
+
+var script$e = {
+  name: 'Pagination',
+  props: ['pagination_data', 'loadMore', 'hideCount', 'hideLoadMore', 'paginationStyle','perPage'],
+  data () {
+    return {
+      current_page: this.pagination_data.current,
+      per_page: this.pagination_data.per_page,
+      loadingMore: 0,
+      pageOptions: [10,25,50,100,200,400]
+    }
+  },
+  mounted(){
     if(!this.pageOptions.includes(this.perPage)){
       const recordCount = this.pagination_data.record_count;
       recordCount > 0 && recordCount < this.perPage && this.pageOptions.push(recordCount);
@@ -4757,24 +5002,24 @@ var script$f = {
   }
 };
 
-const _hoisted_1$d = { key: 0 };
-const _hoisted_2$a = { class: "record_count_body mb-3" };
-const _hoisted_3$8 = ["value"];
-const _hoisted_4$8 = { class: "record_counts" };
-const _hoisted_5$5 = {
+const _hoisted_1$c = { key: 0 };
+const _hoisted_2$9 = { class: "record_count_body mb-3" };
+const _hoisted_3$7 = ["value"];
+const _hoisted_4$7 = { class: "record_counts" };
+const _hoisted_5$4 = {
   key: 0,
   "aria-label": "Page navigation"
 };
-const _hoisted_6$5 = { class: "pagination" };
-const _hoisted_7$5 = {
+const _hoisted_6$4 = { class: "pagination" };
+const _hoisted_7$4 = {
   key: 0,
   class: "page-link"
 };
-const _hoisted_8$4 = {
+const _hoisted_8$3 = {
   key: 1,
   class: "page-link"
 };
-const _hoisted_9$4 = ["onClick"];
+const _hoisted_9$3 = ["onClick"];
 const _hoisted_10$3 = { key: 1 };
 const _hoisted_11$2 = {
   key: 0,
@@ -4796,26 +5041,26 @@ const _hoisted_15$2 = {
 
 function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   return ($props.paginationStyle !== 'loadMore')
-    ? (openBlock(), createElementBlock("div", _hoisted_1$d, [
-        createElementVNode("div", _hoisted_2$a, [
-          _cache[5] || (_cache[5] = createElementVNode("span", { class: "per_page_show" }, "Showing", -1 /* HOISTED */)),
-          _cache[6] || (_cache[6] = createTextVNode("  ")),
+    ? (openBlock(), createElementBlock("div", _hoisted_1$c, [
+        createElementVNode("div", _hoisted_2$9, [
+          _cache[5] || (_cache[5] = createElementVNode("span", { class: "per_page_show" }, "Showing", -1 /* CACHED */)),
+          _cache[6] || (_cache[6] = createTextVNode("  ", -1 /* CACHED */)),
           withDirectives(createElementVNode("select", {
             class: "select_per_page",
             onChange: _cache[0] || (_cache[0] = (...args) => ($options.changePerPage && $options.changePerPage(...args))),
             "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => (($data.per_page) = $event))
           }, [
             (openBlock(true), createElementBlock(Fragment, null, renderList($data.pageOptions, (option) => {
-              return (openBlock(), createElementBlock("option", { value: option }, toDisplayString(option), 9 /* TEXT, PROPS */, _hoisted_3$8))
+              return (openBlock(), createElementBlock("option", { value: option }, toDisplayString(option), 9 /* TEXT, PROPS */, _hoisted_3$7))
             }), 256 /* UNKEYED_FRAGMENT */))
           ], 544 /* NEED_HYDRATION, NEED_PATCH */), [
             [vModelSelect, $data.per_page]
           ]),
-          createElementVNode("span", _hoisted_4$8, " of " + toDisplayString($props.pagination_data.record_count) + " items", 1 /* TEXT */)
+          createElementVNode("span", _hoisted_4$7, " of " + toDisplayString($props.pagination_data.record_count) + " items", 1 /* TEXT */)
         ]),
         ($props.pagination_data != null)
-          ? (openBlock(), createElementBlock("nav", _hoisted_5$5, [
-              createElementVNode("ul", _hoisted_6$5, [
+          ? (openBlock(), createElementBlock("nav", _hoisted_5$4, [
+              createElementVNode("ul", _hoisted_6$4, [
                 createElementVNode("li", {
                   class: normalizeClass([$options.getActivePage === 1 ? 'disabled' : '' , "page-item"])
                 }, [
@@ -4830,14 +5075,14 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                     key: page
                   }, [
                     ($options.getActivePage === page)
-                      ? (openBlock(), createElementBlock("a", _hoisted_7$5, toDisplayString(page), 1 /* TEXT */))
+                      ? (openBlock(), createElementBlock("a", _hoisted_7$4, toDisplayString(page), 1 /* TEXT */))
                       : (['..','...'].includes(page))
-                        ? (openBlock(), createElementBlock("a", _hoisted_8$4, toDisplayString(page), 1 /* TEXT */))
+                        ? (openBlock(), createElementBlock("a", _hoisted_8$3, toDisplayString(page), 1 /* TEXT */))
                         : (openBlock(), createElementBlock("a", {
                             key: 2,
                             onClick: $event => ($options.changeTableKey('page',page)),
                             class: "page-link"
-                          }, toDisplayString(page), 9 /* TEXT, PROPS */, _hoisted_9$4))
+                          }, toDisplayString(page), 9 /* TEXT, PROPS */, _hoisted_9$3))
                   ], 2 /* CLASS */))
                 }), 128 /* KEYED_FRAGMENT */)),
                 createElementVNode("li", {
@@ -4854,12 +5099,12 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
       ]))
     : (openBlock(), createElementBlock("div", _hoisted_10$3, [
         (this.pagination_data.loading === 1 && $props.loadMore && $props.hideLoadMore)
-          ? (openBlock(), createElementBlock("div", _hoisted_11$2, _cache[7] || (_cache[7] = [
+          ? (openBlock(), createElementBlock("div", _hoisted_11$2, [...(_cache[7] || (_cache[7] = [
               createElementVNode("div", {
                 class: "spinner-border",
                 role: "status"
-              }, null, -1 /* HOISTED */)
-            ])))
+              }, null, -1 /* CACHED */)
+            ]))]))
           : createCommentVNode("v-if", true),
         (!$props.hideCount)
           ? (openBlock(), createElementBlock("div", _hoisted_12$2, [
@@ -4880,198 +5125,8 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
       ]))
 }
 
-script$f.render = render$1;
-script$f.__file = "src/lib/components/list_templates/Pagination.vue";
-
-const _hoisted_1$c = { class: "sh-range" };
-const _hoisted_2$9 = { class: "dropdown" };
-const _hoisted_3$7 = {
-  class: "form-control dropdown-toggle",
-  href: "#",
-  role: "button",
-  id: "dropdownMenuLink",
-  "data-bs-toggle": "dropdown",
-  "aria-expanded": "false"
-};
-const _hoisted_4$7 = ["innerHTML"];
-const _hoisted_5$4 = {
-  class: "dropdown-menu sh-range-dropdown",
-  "aria-labelledby": "dropdownMenuLink"
-};
-const _hoisted_6$4 = { class: "sh-range-preset" };
-const _hoisted_7$4 = ["onClick"];
-const _hoisted_8$3 = { class: "border-top" };
-const _hoisted_9$3 = { class: "dropdown-item d-flex flex-column" };
-
-
-
-var script$e = {
-  __name: 'ShRange',
-  props: {
-  start: {
-    type: Number,
-    default: 2021
-  },
-  selected: {
-    type: String,
-    default: shRepo.getShConfig('defaultRange', 'This Month')
-  }
-},
-  emits: ['rangeSelected'],
-  setup(__props, { emit: __emit }) {
-
-const props = __props;
-
-const emit = __emit;
-
-const selectedDate = ref(null);
-const rangeLabel = ref(null);
-ref(false);
-const customFrom = ref(null);
-const customTo = ref(null);
-
-const applyCustom = ()=>{
-  const date = [moment(customFrom.value),moment(customTo.value)];
-  setDate(date,'Custom');
-};
-
-const dates = ref([
-  {
-    label: 'Today',
-    value: [moment(), moment()]
-  },
-  {
-    label: 'Yesterday',
-    value: [moment().subtract(1, 'days'), moment()]
-  },
-    {
-    label: '7 Days',
-    value: [moment().subtract(7, 'days'), moment()]
-  },
-  {
-    label: 'This week',
-    value: [moment().subtract(1, 'week').startOf('week'), moment().subtract(1, 'week').endOf('week')]
-  },
-  {
-    label: 'This Month',
-    value: [moment().startOf('month'), moment()]
-  },
-  {
-    label: 'Last Month',
-    value: [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
-  },
-  {
-    label: 'Last 30 days',
-    value: [moment().subtract(30, 'days'), moment()]
-  },
-  {
-    label: 'Last 60 days',
-    value: [moment().subtract(60, 'days'), moment()]
-  },
-  {
-    label: 'Last 90 days',
-    value: [moment().subtract(90, 'days'), moment()]
-  },
-    {
-        label: 'This Year',
-        value: [moment().startOf('year'), moment()]
-    },
-  {
-    label: '1 Year',
-    value: [moment().subtract(12, 'months'), moment()]
-  },
-  {
-    label: 'All Time',
-    value: [moment('@/2021').startOf('year'), moment()]
-  }
-]);
-const  setDate =  (date, label) => {
-  selectedDate.value = date;
-  rangeLabel.value = '<strong>' + label + '</strong><small>(' + date[0].format('MMMM D, YYYY') + ' - ' + date[1].format('MMMM D, YYYY') + ')</small>';
-  const from = date[0];
-  const to = date[1];
-  const period = label.toString().toLowerCase().replaceAll(' ','_');
-  emit('rangeSelected', {
-    from: from,
-    to: to,
-    period: period,
-    query: `from=${from.format('L')}&to=${to.format('L')}&period=${period}`
-  });
-};
-onMounted(() => {
-  let end = parseInt(moment().format('Y'));
-  while (end >= props.start) {
-    dates.value.push({
-      label: end,
-      value: [moment('@/' + end).startOf('year'), moment('@/' + end).endOf('year')]
-    });
-    end--;
-  }
-
-  dates.value.map(date=>{
-    (`${date.label}`.toLowerCase() === props.selected.toLowerCase()) && setDate(date.value, date.label);
-  });
-});
-
-return (_ctx, _cache) => {
-  return (openBlock(), createElementBlock("div", _hoisted_1$c, [
-    createElementVNode("div", _hoisted_2$9, [
-      createElementVNode("div", _hoisted_3$7, [
-        _cache[2] || (_cache[2] = createElementVNode("i", { class: "bi-calendar text-dark" }, null, -1 /* HOISTED */)),
-        _cache[3] || (_cache[3] = createTextVNode()),
-        createElementVNode("span", { innerHTML: rangeLabel.value }, null, 8 /* PROPS */, _hoisted_4$7)
-      ]),
-      createElementVNode("div", _hoisted_5$4, [
-        createElementVNode("ul", _hoisted_6$4, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(dates.value, (date) => {
-            return (openBlock(), createElementBlock("li", {
-              key: date.label,
-              onClick: $event => (setDate(date.value, date.label))
-            }, [
-              createElementVNode("a", {
-                class: normalizeClass(["dropdown-item", date.value === selectedDate.value ? 'active' : '']),
-                href: "#"
-              }, toDisplayString(date.label), 3 /* TEXT, CLASS */)
-            ], 8 /* PROPS */, _hoisted_7$4))
-          }), 128 /* KEYED_FRAGMENT */))
-        ]),
-        createElementVNode("ul", null, [
-          createElementVNode("li", _hoisted_8$3, [
-            createElementVNode("div", _hoisted_9$3, [
-              _cache[4] || (_cache[4] = createElementVNode("span", null, "Custom", -1 /* HOISTED */)),
-              createElementVNode("div", null, [
-                withDirectives(createElementVNode("input", {
-                  "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((customFrom).value = $event)),
-                  type: "date"
-                }, null, 512 /* NEED_PATCH */), [
-                  [vModelText, customFrom.value]
-                ]),
-                withDirectives(createElementVNode("input", {
-                  "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => ((customTo).value = $event)),
-                  type: "date"
-                }, null, 512 /* NEED_PATCH */), [
-                  [vModelText, customTo.value]
-                ])
-              ]),
-              (customFrom.value && customTo.value)
-                ? (openBlock(), createElementBlock("button", {
-                    key: 0,
-                    class: "btn btn-sm btn-info mt-1",
-                    onClick: applyCustom
-                  }, "Apply"))
-                : createCommentVNode("v-if", true)
-            ])
-          ])
-        ])
-      ])
-    ])
-  ]))
-}
-}
-
-};
-
-script$e.__file = "src/lib/components/ShRange.vue";
+script$e.render = render$1;
+script$e.__file = "src/lib/components/list_templates/Pagination.vue";
 
 const _hoisted_1$b = { class: "auto-table mt-2" };
 const _hoisted_2$8 = {
@@ -5194,364 +5249,352 @@ const _hoisted_55 = ["innerHTML"];
 const _hoisted_56 = ["innerHTML"];
 const _hoisted_57 = { key: 0 };
 
-const __default__ = {
-  name: 'sh-table',
-  props: ['endPoint','orderBy','orderMethod', 'headers','disableMobileResponsive', 'cacheKey', 'query', 'pageCount', 'actions', 'hideCount', 'hideLoadMore', 'links', 'reload', 'hideSearch', 'sharedData', 'searchPlaceholder', 'event', 'displayMore', 'displayMoreBtnClass', 'moreDetailsColumns', 'moreDetailsFields', 'hasDownload', 'downloadFields', 'tableHover', 'hideIds', 'paginationStyle', 'hasRange','selectedRange','noRecordsMessage'],
-  data(){
-    return {
-      order_by: this.orderBy,
-      order_method: this.orderMethod,
-      per_page: this.pageCount ?? shRepo.getShConfig('tablePerPage', 10),
-      page: 1,
-      exactMatch: false,
-      filter_value: '',
-      loading: 'loading',
-      loading_error: '',
-      records: null,
-      total: 0,
-      pagination_data: null,
-      moreDetailsId: null,
-      moreDetailsModel: null,
-      downloading: false,
-      appUrl: window.VITE_APP_API_URL,
-      hasCanvas: 0,
-      selectedRecord: null,
-      timeOut: null,
-      tableHeaders: [],
-      pageStyle: this.paginationStyle ?? shRepo.getShConfig('tablePaginationStyle', 'loadMore'),
-      range: null,
-      from: null,
-      to: null,
-      period: null,
-      lastId: null
-    }
-  },
-  mounted(){
-    if (this.headers) {
-      this.tableHeaders = this.headers;
-    }
+// --- Props / Emits
 
-    if (this.actions && this.actions.actions) {
-      this.actions.actions.forEach(action => {
-        if (action.canvasComponent) {
-          this.hasCanvas = true;
-        }
-      });
-    }
-    if (this.cacheKey) {
-      this.setCachedData();
-    }
-    this.reloadData();
-  },
-  methods: {
-    rangeChanged: function (newRange){
-      this.range = newRange;
-      this.from = newRange.from.format('L');
-      this.to = newRange.to.format('L');
-      this.period = newRange.period;
-      this.reloadData();
-    },
-    userTyping: function (){
-      if (this.timeOut) {
-        clearTimeout(this.timeOut);
-      }
-      const self = this;
-      this.timeOut = setTimeout(() => {
-        self.reloadData(1);
-      }, 800);
-    },
-    cleanCanvasProps: function (actions){
-      let replaced = actions;
-      replaced.class = null;
-      return replaced
-    },
-    newRecordAdded: function (ev){
-      const record = ev.log;
-      if (record.user) {
-        record.user = record.user.name;
-      }
-      this.records.unshift(record);
-    },
-    canvasClosed: function (){
-      this.selectedRecord = null;
-    },
-    rowSelected: function (row){
-      this.selectedRecord = null;
-      setTimeout(() => {
-        this.selectedRecord = row;
-        this.$emit('rowSelected', row);
-      }, 100);
-    },
-    changeKey: function (key, value){
-      this[key] = value;
-      if (key === 'order_by') {
-        this.order_method = (this.order_method === 'desc') ? 'asc' : 'desc';
-      }
-      if (key === 'per_page') {
-        this.page = 1;
-      }
-      this.reloadData();
-    },
-    getLinkClass: function (config){
-      if (typeof config === 'object') {
-        return config.class
-      }
-      return ''
-    },
-    reloadNotifications: function (){
-      this.reloadData();
-    },
-    replaceActionUrl: function (path, obj){
-      if (path) {
-        var matches = path.match(/\{(.*?)\}/g);
-        try {
-          matches.forEach(key => {
-            key = key.replace('{', '');
-            key = key.replace('}', '');
-            path = path.replace(`{${key}}`, obj[key]);
-          });
-          return path
-        } catch (e) {
-          return path
-        }
-      }
-      return ''
-    },
-    doEmitAction: function (action, data){
-      if (typeof action === 'function') {
-        action(data);
-      } else {
-        this.$emit(action, data);
-      }
-    },
-    getFieldType: function (field){
-      const numbers = ['age', 'interest_rate_pa'];
-      const moneys = ['amount', 'paid_amount', 'total_paid', 'total', 'monthly_fee', 'share_cost', 'min_contribution', 'min_membership_contribution'];
-      const dates = ['invoice_date', 'free_tier_days', 'updated_at', 'created_at', 'end_time'];
-      if (numbers.includes(field)) {
-        return 'numeric'
-      }
-      if (moneys.includes(field)) {
-        return 'money'
-      }
-      if (dates.includes(field)) {
-        return 'date'
-      }
-      return 'string'
-    },
-    replaceLinkUrl: function (path, obj){
-      if (typeof path === 'object') {
-       // check path,link or url
-        if (path.link) {
-          path = path.link;
-        } else if (path.url) {
-          path = path.url;
-        } else if(path.path){
-          path = path.path;
-        } else {
-          path = '';
-        }
-      }
-      var matches = path.match(/\{(.*?)\}/g);
-      matches && matches.forEach(key => {
-        key = key.replace('{', '');
-        key = key.replace('}', '');
-        path = path.replace(`{${key}}`, obj[key]);
-      });
-      return path
-    },
-    formatDate: function (date){
-      return moment(date).format('lll')
-    },
-    setMoreDetailsModel: function (row){
-      this.moreDetailsModel = null;
-      this.moreDetailsModel = row;
-    },
-    loadMoreRecords: function (){
-      this.reloadData(this.page + 1, 1);
-    },
-    exportData: function (template){
-      this.downloading = true;
-      const headers = [];
-      const fields = this.downloadFields ? this.downloadFields : this.headers;
-      fields.forEach(header => {
-        if (typeof header === 'string') {
-          headers.push(header);
-        }
-      });
+var script$d = {
+  __name: 'ShTable',
+  props: {
+  endPoint: [String, null],
+  orderBy: String,
+  orderMethod: {type: String, default: 'desc'},
+  headers: [Array, null],
+  disableMobileResponsive: {type: Boolean, default: false},
+  cacheKey: [String, null],
+  query: [String, null],
+  pageCount: [Number, null],
+  actions: [Object, null],
+  hideCount: {type: Boolean, default: false},
+  hideLoadMore: {type: Boolean, default: false},
+  links: [Object, null],
+  reload: [Number, Boolean, String, null],
+  hideSearch: {type: Boolean, default: false},
+  sharedData: [Object, null],
+  searchPlaceholder: [String, null],
+  event: [String, null],
+  displayMore: [Boolean, null],
+  displayMoreBtnClass: [String, null],
+  moreDetailsColumns: [Array, null],
+  moreDetailsFields: [Array, null],
+  hasDownload: {type: Boolean, default: false},
+  downloadFields: [Array, null],
+  tableHover: {type: Boolean, default: false},
+  hideIds: {type: Array, default: () => []},
+  paginationStyle: [String, null],
+  hasRange: {type: Boolean, default: false},
+  selectedRange: [Object, null],
+  noRecordsMessage: [String, null]
+},
+  emits: ['rowSelected', 'dataReloaded', 'dataLoaded'],
+  setup(__props, { emit: __emit }) {
 
-      const data = {
-        titles: headers,
-        export: 1,
-        order_by: this.order_by,
-        order_method: this.order_method,
-        filter_value: this.filter_value,
-        from: this.from,
-        to: this.to,
-        period: this.period,
-        lastId: this.lastId,
-      };
-      shApis.doPost(this.endPoint, data).then(res => {
-        this.downloading = false;
-        if (res.data.file) {
-          const url = this.appUrl + 'external-download?file=' + res.data.file + '&name=' + res.data.name;
-          window.location.href = url;
-          // window.open('https://facebook.com')
-          // window.open(this.appUrl + 'external-download?file=' + res.data.file + '&name=' + res.data.name, '_blank').focus()
-        }
-      }).catch(reason => {
-        this.downloading = false;
-        const error = (typeof reason.response === 'undefined') ? 'Error getting data from backend' : `${reason.response.status}:${reason.response.statusText}`;
-        shRepo.swalError('Error', error);
-      });
-    },
-    setCachedData: function (){
-      if (this.cacheKey) {
-        this.records = shStorage.getItem('sh_table_cache_' + this.cacheKey, null);
-      }
-    },
-    reloadData: function (page, append){
-      if (typeof page !== 'undefined') {
-        this.page = page;
-      }
-      if (this.cacheKey && this.records !== null) {
-        this.loading = 'done';
-      } else if (!append) {
-        this.loading = 'loading';
-      }
-      let data = {
-        order_by: this.order_by,
-        order_method: this.order_method,
-        per_page: this.per_page,
-        page: this.page,
-        filter_value: this.filter_value,
-        paginated: true,
-        from: this.from,
-        to: this.to,
-        period: this.period,
-        exact: this.exactMatch,
-        lastId: this.lastId
-      };
-      // remove empty values
-      Object.keys(data).forEach(key => {
-        if (data[key] === null || data[key] === '') {
-          delete data[key];
-        }
-      });
-      if (this.pagination_data) {
-        this.pagination_data.loading = 1;
-      }
-      let endPoint = this.endPoint;
-      if (!this.endPoint && this.query) {
-        //send ql query
-        endPoint = 'sh-ql';
-        data.query = this.query;
-      }
-      shApis.doGet(endPoint, data).then(req => {
-        this.$emit('dataReloaded', this.pagination_data);
-        this.loading = 'done';
-        const response = req.data.data;
-        this.$emit('dataLoaded', response);
-        if (this.page < 2 && this.cacheKey) {
-          shStorage.setItem('sh_table_cache_' + this.cacheKey, response.data);
-        }
+const props = __props;
 
-        this.pagination_data = {
-          current: response.current_page,
-          start: response.from,
-          end: response.last_page,
-          record_count: response.total,
-          per_page: response.per_page,
-          loading: 0,
-          displayCount: response.total > response.per_page ? response.per_page : response.total
-        };
-        if (!this.headers && response.total > 0) {
-          this.tableHeaders = Object.keys(response.data[0]);
-        }
-        // get  id value of the last record
-        this.lastId = response.data.length > 0 ? response.data[response.data.length - 1].id : null;
-        if (append) {
-          this.records.push(...response.data);
-          let totalShown = response.total > response.per_page ? response.per_page * response.current_page : response.total;
-          if (totalShown > response.total) {
-            totalShown = response.total;
-          }
-          this.pagination_data.displayCount = totalShown;
-          const scrollingElement = (document.scrollingElement || document.body);
-          scrollingElement.scrollTop = scrollingElement.scrollHeight;
-        } else {
-          this.records = response.data;
-        }
-      }).catch(reason => {
-        const error = (typeof reason.response === 'undefined') ? 'Error getting data from backend' : `${reason.response.status}:${reason.response.statusText} (${this.endPoint})`;
-        this.loading_error = error;
-        this.loading = 'error';
-      });
-    }
-  },
-  watch: {
-    hideIds: {
-      handler(newValue){
-        this.records = this.records.filter(record => !newValue.includes(record.id) && record);
-      },
-      deep: true
-    },
-    reload(){
-      this.reloadData();
-    },
-    endPoint(){
-      this.reloadData();
-    }
-  },
-  components: {
-    ShRange: script$e,
-    ShSilentAction: script$i,
-    ShConfirmAction: script$j,
-    ShCanvas: script$l,
-    pagination: script$f
-  },
-  computed: {
-    windowWidth: function (){
-      return window.innerWidth
-    },
-    user(){
-      return null
-    },
-    hasDefaultSlot(){
-      return !!this.$slots.default
-    },
-    hasRecordsSlot(){
-      return !!this.$slots.records
-    }
+const emit = __emit;
+
+// --- Injection
+const noRecordsComponent = inject('noRecordsComponent', script$k);
+
+// --- Local State
+const order_by = ref(props.orderBy);
+const order_method = ref(props.orderMethod);
+const per_page = ref(props.pageCount ?? shRepo.getShConfig('tablePerPage', 10));
+const page = ref(1);
+const exactMatch = ref(false);
+const filter_value = ref('');
+const loading = ref('loading'); // 'loading' | 'done' | 'error'
+const loading_error = ref('');
+const records = ref([]);
+ref(0);
+const pagination_data = ref(null);
+ref(null);
+ref(null);
+const downloading = ref(false);
+const appUrl = window?.VITE_APP_API_URL ?? import.meta?.env?.VITE_APP_API_URL ?? '';
+const hasCanvas = ref(0);
+const selectedRecord = ref(null);
+const timeOut = ref(null);
+const tableHeaders = ref([]);
+const pageStyle = ref(props.paginationStyle ?? shRepo.getShConfig('tablePaginationStyle', 'loadMore'));
+const range = ref(null);
+const from = ref(null);
+const to = ref(null);
+const period = ref(null);
+const lastId = ref(null);
+
+// Responsive width
+const windowWidth = ref(typeof window !== 'undefined' ? window.innerWidth : 1024);
+const handleResize = () => (windowWidth.value = window.innerWidth);
+
+// --- Slots helpers
+const slots = useSlots();
+const hasDefaultSlot = computed(() => !!slots.default);
+const hasRecordsSlot = computed(() => !!slots.records);
+
+// --- Lifecycle
+onMounted(() => {
+  if (props.headers) tableHeaders.value = props.headers;
+
+  if (props.actions?.actions) {
+    props.actions.actions.forEach(a => {
+      if (a.canvasComponent) hasCanvas.value = 1;
+    });
   }
-};
 
+  if (props.cacheKey) setCachedData();
 
-var script$d = /*@__PURE__*/Object.assign(__default__, {
-  setup(__props) {
+  reloadData();
 
-const noRecordsComponent = inject('noRecordsComponent', script$k);
+  window.addEventListener('resize', handleResize);
+});
 
-storeToRefs(useUserStore());
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', handleResize);
+  if (timeOut.value) clearTimeout(timeOut.value);
+});
 
-const cleanColumn = col=>{
-  // remove col.component
+// --- Utils used in template
+const cleanColumn = (col) => {
   const newCol = {...col};
   delete newCol.component;
   delete newCol.key;
   return newCol
 };
 
-const showColumn = header=>{
-  if(typeof header === 'string'){
-    return true
+const showColumn = (header) => {
+  if (typeof header === 'string') return true
+  if (typeof header === 'object' && header.validator) return header.validator()
+  return true
+};
+
+const cleanCanvasProps = (actions) => {
+  const replaced = {...actions};
+  replaced.class = null;
+  return replaced
+};
+
+const canvasClosed = () => {
+  selectedRecord.value = null;
+};
+
+const rowSelected = (row) => {
+  selectedRecord.value = null;
+  setTimeout(() => {
+    selectedRecord.value = row;
+    emit('rowSelected', row);
+  }, 100);
+};
+
+const changeKey = (key, value) => {
+  if (key === 'order_by') {
+    order_by.value = value;
+    order_method.value = (order_method.value === 'desc') ? 'asc' : 'desc';
+  } else if (key === 'per_page') {
+    per_page.value = value;
+    page.value = 1;
+  } else {
+    // generic
+    // support pagination component passing keys like 'page'
+    if (key in stateProxy) {
+      stateProxy[key] = value;
+    } else {
+      // fallback direct
+      if (key === 'page') page.value = value;
+    }
   }
-  if(typeof header === 'object' && header.validator) {
-    return header.validator()
+  reloadData();
+};
+
+const getLinkClass = (config) => (typeof config === 'object' ? (config.class || '') : '');
+
+const doEmitAction = (action, data) => {
+  if (typeof action === 'function') action(data);
+  else emit(action, data);
+};
+
+const getFieldType = (field) => {
+  const numbers = ['age', 'interest_rate_pa'];
+  const moneys = ['amount', 'paid_amount', 'total_paid', 'total', 'monthly_fee', 'share_cost', 'min_contribution', 'min_membership_contribution'];
+  const dates = ['invoice_date', 'free_tier_days', 'updated_at', 'created_at', 'end_time'];
+  if (typeof field === 'string' && numbers.includes(field)) return 'numeric'
+  if (typeof field === 'string' && moneys.includes(field)) return 'money'
+  if (typeof field === 'string' && dates.includes(field)) return 'date'
+  return 'string'
+};
+
+const replaceLinkUrl = (p, obj) => {
+  let path = p;
+  if (typeof path === 'object') {
+    if (path.link) path = path.link;
+    else if (path.url) path = path.url;
+    else if (path.path) path = path.path;
+    else path = '';
   }
-  return true
+  const matches = path.match(/\{(.*?)\}/g);
+  matches?.forEach(k => {
+    const key = k.replace('{', '').replace('}', '');
+    path = path.replace(`{${key}}`, obj[key]);
+  });
+  return path
+};
+
+const formatDate = (date) => DateTime.fromISO(date).toLocaleString(DateTime.DATETIME_MED);
+
+const loadMoreRecords = () => reloadData(page.value + 1, 1);
+
+const rangeChanged = (newRange) => {
+  range.value = newRange;
+  from.value = newRange.from.format('L');
+  to.value = newRange.to.format('L');
+  period.value = newRange.period;
+  reloadData();
+};
+
+const userTyping = () => {
+  if (timeOut.value) clearTimeout(timeOut.value);
+  timeOut.value = setTimeout(() => reloadData(1), 800);
+};
+
+const exportData = () => {
+  downloading.value = true;
+  const headers = [];
+  const fields = props.downloadFields ? props.downloadFields : props.headers;
+  fields?.forEach(header => {
+    if (typeof header === 'string') headers.push(header);
+  });
+
+  const data = {
+    titles: headers,
+    export: 1,
+    order_by: order_by.value,
+    order_method: order_method.value,
+    filter_value: filter_value.value,
+    from: from.value,
+    to: to.value,
+    period: period.value,
+    lastId: lastId.value
+  };
+
+  shApis.doPost(props.endPoint, data).then(res => {
+    downloading.value = false;
+    if (res.data.file) {
+      const url = appUrl + 'external-download?file=' + res.data.file + '&name=' + res.data.name;
+      window.location.href = url;
+    }
+  }).catch(reason => {
+    downloading.value = false;
+    const error = (typeof reason.response === 'undefined')
+        ? 'Error getting data from backend'
+        : `${reason.response.status}:${reason.response.statusText}`;
+    shRepo.swalError('Error', error);
+  });
+};
+
+const setCachedData = () => {
+  if (props.cacheKey) {
+    records.value = shStorage.getItem('sh_table_cache_' + props.cacheKey, null);
+  }
+};
+
+// Main loader
+const reloadData = (newPage, append) => {
+  if (typeof newPage !== 'undefined') page.value = newPage;
+
+  if (props.cacheKey && records.value !== null) {
+    loading.value = 'done';
+  } else if (!append) {
+    loading.value = 'loading';
+  }
+
+  let data = {
+    order_by: order_by.value,
+    order_method: order_method.value,
+    per_page: per_page.value,
+    page: page.value,
+    filter_value: filter_value.value,
+    paginated: true,
+    from: from.value,
+    to: to.value,
+    period: period.value,
+    exact: exactMatch.value,
+    lastId: lastId.value
+  };
+
+  // strip empty
+  Object.keys(data).forEach(k => {
+    if (data[k] === null || data[k] === '') delete data[k];
+  });
+
+  if (pagination_data.value) pagination_data.value.loading = 1;
+
+  let endPoint = props.endPoint;
+  if (!props.endPoint && props.query) {
+    endPoint = 'sh-ql';
+    data.query = props.query;
+  }
+
+  shApis.doGet(endPoint, data).then(req => {
+    emit('dataReloaded', pagination_data.value);
+    loading.value = 'done';
+
+    const response = req.data.data;
+    emit('dataLoaded', response);
+
+    if (page.value < 2 && props.cacheKey) {
+      shStorage.setItem('sh_table_cache_' + props.cacheKey, response.data);
+    }
+
+    pagination_data.value = {
+      current: response.current_page,
+      start: response.from,
+      end: response.last_page,
+      record_count: response.total,
+      per_page: response.per_page,
+      loading: 0,
+      displayCount: response.total > response.per_page ? response.per_page : response.total
+    };
+
+    if (!props.headers && response.total > 0) {
+      tableHeaders.value = Object.keys(response.data[0]);
+    }
+
+    lastId.value = response.data.length > 0 ? response.data[response.data.length - 1].id : null;
+
+    if (append) {
+      records.value.push(...response.data);
+      let totalShown = response.total > response.per_page
+          ? response.per_page * response.current_page
+          : response.total;
+      if (totalShown > response.total) totalShown = response.total;
+      pagination_data.value.displayCount = totalShown;
+
+      const scrollingElement = (document.scrollingElement || document.body);
+      scrollingElement.scrollTop = scrollingElement.scrollHeight;
+    } else {
+      records.value = response.data;
+    }
+  }).catch(reason => {
+    const error = (typeof reason.response === 'undefined')
+        ? 'Error getting data from backend'
+        : `${reason.response.status}:${reason.response.statusText} (${props.endPoint})`;
+    loading_error.value = error;
+    loading.value = 'error';
+  });
 };
 
+// --- Watches
+watch(() => props.hideIds, (newVal) => {
+  if (Array.isArray(newVal) && Array.isArray(records.value)) {
+    records.value = records.value.filter(r => !newVal.includes(r.id) && r);
+  }
+}, {deep: true});
+
+watch(() => props.reload, () => reloadData());
+watch(() => props.endPoint, () => reloadData());
+
+// optional proxy (for changeKey generic setter)
+const stateProxy = reactive({
+  page, per_page, order_by, order_method
+});
 
 return (_ctx, _cache) => {
   const _component_router_link = resolveComponent("router-link");
@@ -5560,22 +5603,22 @@ return (_ctx, _cache) => {
     (__props.hasDownload)
       ? (openBlock(), createElementBlock("div", _hoisted_2$8, [
           createElementVNode("button", {
-            disabled: _ctx.downloading,
+            disabled: downloading.value,
             class: "btn btn-warning btn-sm",
-            onClick: _cache[0] || (_cache[0] = $event => (_ctx.exportData()))
+            onClick: _cache[0] || (_cache[0] = $event => (exportData()))
           }, [
-            (!_ctx.downloading)
+            (!downloading.value)
               ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                  _cache[7] || (_cache[7] = createElementVNode("i", { class: "bi-download" }, null, -1 /* HOISTED */)),
-                  _cache[8] || (_cache[8] = createTextVNode(" Export "))
+                  _cache[4] || (_cache[4] = createElementVNode("i", { class: "bi-download" }, null, -1 /* CACHED */)),
+                  _cache[5] || (_cache[5] = createTextVNode(" Export ", -1 /* CACHED */))
                 ], 64 /* STABLE_FRAGMENT */))
               : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                  _cache[9] || (_cache[9] = createElementVNode("span", {
+                  _cache[6] || (_cache[6] = createElementVNode("span", {
                     class: "spinner-border spinner-border-sm",
                     role: "status",
                     "aria-hidden": "true"
-                  }, null, -1 /* HOISTED */)),
-                  _cache[10] || (_cache[10] = createElementVNode("span", { class: "visually-hidden" }, "Loading...", -1 /* HOISTED */))
+                  }, null, -1 /* CACHED */)),
+                  _cache[7] || (_cache[7] = createElementVNode("span", { class: "visually-hidden" }, "Loading...", -1 /* CACHED */))
                 ], 64 /* STABLE_FRAGMENT */))
           ], 8 /* PROPS */, _hoisted_3$6)
         ]))
@@ -5587,59 +5630,59 @@ return (_ctx, _cache) => {
               class: normalizeClass(["sh-search-bar input-group", __props.hasRange ? 'me-2':''])
             }, [
               withDirectives(createElementVNode("input", {
-                onKeydown: _cache[1] || (_cache[1] = (...args) => (_ctx.userTyping && _ctx.userTyping(...args))),
-                onKeyup: _cache[2] || (_cache[2] = (...args) => (_ctx.userTyping && _ctx.userTyping(...args))),
+                onKeydown: userTyping,
+                onKeyup: userTyping,
                 type: "search",
-                onChange: _cache[3] || (_cache[3] = $event => (_ctx.reloadData(1))),
-                "onUpdate:modelValue": _cache[4] || (_cache[4] = $event => ((_ctx.filter_value) = $event)),
+                onChange: _cache[1] || (_cache[1] = $event => (reloadData(1))),
+                "onUpdate:modelValue": _cache[2] || (_cache[2] = $event => ((filter_value).value = $event)),
                 placeholder: __props.searchPlaceholder ? __props.searchPlaceholder : 'Search',
                 class: "form-control sh-search-input"
               }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_6$3), [
-                [vModelText, _ctx.filter_value]
+                [vModelText, filter_value.value]
               ]),
-              (_ctx.filter_value.length > 1)
+              (filter_value.value.length > 1)
                 ? (openBlock(), createElementBlock("span", _hoisted_7$3, [
                     withDirectives(createElementVNode("input", {
-                      onChange: _cache[5] || (_cache[5] = (...args) => (_ctx.reloadData && _ctx.reloadData(...args))),
+                      onChange: reloadData,
                       value: true,
-                      "onUpdate:modelValue": _cache[6] || (_cache[6] = $event => ((_ctx.exactMatch) = $event)),
+                      "onUpdate:modelValue": _cache[3] || (_cache[3] = $event => ((exactMatch).value = $event)),
                       type: "checkbox"
                     }, null, 544 /* NEED_HYDRATION, NEED_PATCH */), [
-                      [vModelCheckbox, _ctx.exactMatch]
+                      [vModelCheckbox, exactMatch.value]
                     ]),
-                    _cache[11] || (_cache[11] = createElementVNode("span", { class: "ms-1" }, "Exact", -1 /* HOISTED */))
+                    _cache[8] || (_cache[8] = createElementVNode("span", { class: "ms-1" }, "Exact", -1 /* CACHED */))
                   ]))
                 : createCommentVNode("v-if", true)
             ], 2 /* CLASS */),
             (__props.hasRange)
               ? (openBlock(), createElementBlock("div", _hoisted_8$2, [
-                  createVNode(script$e, {
-                    onRangeSelected: _ctx.rangeChanged,
+                  createVNode(script$f, {
+                    onRangeSelected: rangeChanged,
                     selected: __props.selectedRange
-                  }, null, 8 /* PROPS */, ["onRangeSelected", "selected"])
+                  }, null, 8 /* PROPS */, ["selected"])
                 ]))
               : createCommentVNode("v-if", true)
           ])
         ]))
       : createCommentVNode("v-if", true),
-    (_ctx.hasDefaultSlot)
+    (hasDefaultSlot.value)
       ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-          (_ctx.loading === 'loading')
-            ? (openBlock(), createElementBlock("div", _hoisted_9$2, _cache[12] || (_cache[12] = [
+          (loading.value === 'loading')
+            ? (openBlock(), createElementBlock("div", _hoisted_9$2, [...(_cache[9] || (_cache[9] = [
                 createElementVNode("div", {
                   class: "spinner-border",
                   role: "status"
                 }, [
                   createElementVNode("span", { class: "visually-hidden" }, "Loading...")
-                ], -1 /* HOISTED */)
-              ])))
-            : (_ctx.loading === 'error')
+                ], -1 /* CACHED */)
+              ]))]))
+            : (loading.value === 'error')
               ? (openBlock(), createElementBlock("div", _hoisted_10$2, [
-                  createElementVNode("span", null, toDisplayString(_ctx.loading_error), 1 /* TEXT */)
+                  createElementVNode("span", null, toDisplayString(loading_error.value), 1 /* TEXT */)
                 ]))
               : createCommentVNode("v-if", true),
-          (_ctx.loading === 'done')
-            ? (openBlock(true), createElementBlock(Fragment, { key: 2 }, renderList(_ctx.records, (record) => {
+          (loading.value === 'done')
+            ? (openBlock(true), createElementBlock(Fragment, { key: 2 }, renderList(records.value, (record) => {
                 return renderSlot(_ctx.$slots, "default", {
                   key: record.id,
                   record: record
@@ -5647,45 +5690,45 @@ return (_ctx, _cache) => {
               }), 128 /* KEYED_FRAGMENT */))
             : createCommentVNode("v-if", true)
         ], 64 /* STABLE_FRAGMENT */))
-      : (_ctx.hasRecordsSlot)
+      : (hasRecordsSlot.value)
         ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [
-            (_ctx.loading === 'loading' && !__props.cacheKey)
-              ? (openBlock(), createElementBlock("div", _hoisted_11$1, _cache[13] || (_cache[13] = [
+            (loading.value === 'loading' && !__props.cacheKey)
+              ? (openBlock(), createElementBlock("div", _hoisted_11$1, [...(_cache[10] || (_cache[10] = [
                   createElementVNode("div", {
                     class: "spinner-border",
                     role: "status"
                   }, [
                     createElementVNode("span", { class: "visually-hidden" }, "Loading...")
-                  ], -1 /* HOISTED */)
-                ])))
-              : (_ctx.loading === 'error' && !__props.cacheKey)
+                  ], -1 /* CACHED */)
+                ]))]))
+              : (loading.value === 'error' && !__props.cacheKey)
                 ? (openBlock(), createElementBlock("div", _hoisted_12$1, [
-                    createElementVNode("span", null, toDisplayString(_ctx.loading_error), 1 /* TEXT */)
+                    createElementVNode("span", null, toDisplayString(loading_error.value), 1 /* TEXT */)
                   ]))
                 : createCommentVNode("v-if", true),
-            (_ctx.loading === 'done' || __props.cacheKey)
+            (loading.value === 'done' || __props.cacheKey)
               ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-                  (!_ctx.records || _ctx.records.length === 0)
+                  (!records.value || records.value.length === 0)
                     ? (openBlock(), createBlock(resolveDynamicComponent(unref(noRecordsComponent)), { key: 0 }, {
                         default: withCtx(() => [
-                          _cache[14] || (_cache[14] = createElementVNode("i", { class: "bi-info-circle" }, null, -1 /* HOISTED */)),
+                          _cache[11] || (_cache[11] = createElementVNode("i", { class: "bi-info-circle" }, null, -1 /* CACHED */)),
                           createTextVNode(" " + toDisplayString(__props.noRecordsMessage ?? 'No records found'), 1 /* TEXT */)
                         ]),
                         _: 1 /* STABLE */
                       }))
                     : createCommentVNode("v-if", true),
-                  renderSlot(_ctx.$slots, "records", { records: _ctx.records })
+                  renderSlot(_ctx.$slots, "records", { records: records.value })
                 ], 64 /* STABLE_FRAGMENT */))
               : createCommentVNode("v-if", true)
           ], 64 /* STABLE_FRAGMENT */))
-        : (_ctx.windowWidth > 700 || __props.disableMobileResponsive)
+        : (windowWidth.value > 700 || __props.disableMobileResponsive)
           ? (openBlock(), createElementBlock("table", {
               key: 4,
               class: normalizeClass(["table sh-table", __props.tableHover ? 'table-hover':''])
             }, [
               createElementVNode("thead", _hoisted_13$1, [
                 createElementVNode("tr", null, [
-                  (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.tableHeaders, (title) => {
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(tableHeaders.value, (title) => {
                     return (openBlock(), createElementBlock(Fragment, { key: title }, [
                       (showColumn(title))
                         ? (openBlock(), createElementBlock("th", _hoisted_14$1, [
@@ -5693,26 +5736,26 @@ return (_ctx, _cache) => {
                               ? (openBlock(), createElementBlock("a", {
                                   key: 0,
                                   class: "text-capitalize",
-                                  onClick: $event => (_ctx.changeKey('order_by',title))
+                                  onClick: $event => (changeKey('order_by', title))
                                 }, toDisplayString(title.replace(/_/g, ' ')), 9 /* TEXT, PROPS */, _hoisted_15$1))
                               : (typeof title === 'object')
                                 ? (openBlock(), createElementBlock("a", {
                                     key: 1,
                                     class: "text-capitalize",
-                                    onClick: $event => (_ctx.changeKey('order_by',title.key))
+                                    onClick: $event => (changeKey('order_by', title.key))
                                   }, toDisplayString(title.label ?? title.key.replace(/_/g, ' ')), 9 /* TEXT, PROPS */, _hoisted_16))
                                 : (typeof title === 'function')
                                   ? (openBlock(), createElementBlock("a", {
                                       key: 2,
                                       class: "text-capitalize",
-                                      onClick: $event => (_ctx.changeKey('order_by',title(null)))
+                                      onClick: $event => (changeKey('order_by', title(null)))
                                     }, toDisplayString(title(null).replace(/_/g, ' ')), 9 /* TEXT, PROPS */, _hoisted_17))
                                   : (typeof title !== 'undefined')
                                     ? (openBlock(), createElementBlock("a", {
                                         key: 3,
                                         class: "text-capitalize",
-                                        onClick: $event => (_ctx.changeKey('order_by',title))
-                                      }, toDisplayString(title.replace(/_/g, ' ')), 9 /* TEXT, PROPS */, _hoisted_18))
+                                        onClick: $event => (changeKey('order_by', title))
+                                      }, toDisplayString(String(title).replace(/_/g, ' ')), 9 /* TEXT, PROPS */, _hoisted_18))
                                     : createCommentVNode("v-if", true)
                           ]))
                         : createCommentVNode("v-if", true)
@@ -5724,11 +5767,11 @@ return (_ctx, _cache) => {
                 ])
               ]),
               createElementVNode("tbody", _hoisted_20, [
-                (_ctx.loading === 'loading')
+                (loading.value === 'loading')
                   ? (openBlock(), createElementBlock("tr", _hoisted_21, [
                       createElementVNode("td", {
-                        colspan: _ctx.tableHeaders.length
-                      }, _cache[15] || (_cache[15] = [
+                        colspan: tableHeaders.value.length
+                      }, [...(_cache[12] || (_cache[12] = [
                         createElementVNode("div", { class: "text-center" }, [
                           createElementVNode("div", {
                             class: "spinner-border",
@@ -5736,34 +5779,34 @@ return (_ctx, _cache) => {
                           }, [
                             createElementVNode("span", { class: "visually-hidden" }, "Loading...")
                           ])
-                        ], -1 /* HOISTED */)
-                      ]), 8 /* PROPS */, _hoisted_22)
+                        ], -1 /* CACHED */)
+                      ]))], 8 /* PROPS */, _hoisted_22)
                     ]))
-                  : (_ctx.loading === 'error')
+                  : (loading.value === 'error')
                     ? (openBlock(), createElementBlock("tr", _hoisted_23, [
                         createElementVNode("td", {
-                          colspan: _ctx.tableHeaders.length
-                        }, toDisplayString(_ctx.loading_error), 9 /* TEXT, PROPS */, _hoisted_24)
+                          colspan: tableHeaders.value.length
+                        }, toDisplayString(loading_error.value), 9 /* TEXT, PROPS */, _hoisted_24)
                       ]))
-                    : (_ctx.records.length === 0)
+                    : (records.value.length === 0)
                       ? (openBlock(), createElementBlock("tr", _hoisted_25, [
                           createElementVNode("td", {
-                            colspan: __props.actions ? _ctx.tableHeaders.length + 1 : _ctx.tableHeaders.length
-                          }, _cache[16] || (_cache[16] = [
+                            colspan: __props.actions ? tableHeaders.value.length + 1 : tableHeaders.value.length
+                          }, [...(_cache[13] || (_cache[13] = [
                             createElementVNode("div", { class: "text-center bg-primary-light px-2 py-1 rounded no_records_div" }, [
                               createElementVNode("i", { class: "bi-info-circle" }),
                               createTextVNode(" No records found ")
-                            ], -1 /* HOISTED */)
-                          ]), 8 /* PROPS */, _hoisted_26)
+                            ], -1 /* CACHED */)
+                          ]))], 8 /* PROPS */, _hoisted_26)
                         ]))
-                      : (_ctx.loading === 'done')
-                        ? (openBlock(true), createElementBlock(Fragment, { key: 3 }, renderList(_ctx.records, (record, index) => {
+                      : (loading.value === 'done')
+                        ? (openBlock(true), createElementBlock(Fragment, { key: 3 }, renderList(records.value, (record, index) => {
                             return (openBlock(), createElementBlock("tr", {
                               key: record.id,
                               class: normalizeClass(record.class),
-                              onClick: $event => (_ctx.rowSelected(record))
+                              onClick: $event => (rowSelected(record))
                             }, [
-                              (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.tableHeaders, (key) => {
+                              (openBlock(true), createElementBlock(Fragment, null, renderList(tableHeaders.value, (key) => {
                                 return (openBlock(), createElementBlock(Fragment, { key: key }, [
                                   (showColumn(key))
                                     ? (openBlock(), createElementBlock("td", _hoisted_28, [
@@ -5771,16 +5814,16 @@ return (_ctx, _cache) => {
                                           ? (openBlock(), createBlock(_component_router_link, {
                                               key: 0,
                                               target: __props.links[key].target ? '_blank':'',
-                                              to: _ctx.replaceLinkUrl(__props.links[key],record),
-                                              class: normalizeClass(_ctx.getLinkClass(__props.links[key])),
+                                              to: replaceLinkUrl(__props.links[key], record),
+                                              class: normalizeClass(getLinkClass(__props.links[key])),
                                               innerHTML: record[key]
                                             }, null, 8 /* PROPS */, ["target", "to", "class", "innerHTML"]))
-                                          : (_ctx.getFieldType(key) === 'numeric')
+                                          : (getFieldType(key) === 'numeric')
                                             ? (openBlock(), createElementBlock("span", _hoisted_29, toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
-                                            : (_ctx.getFieldType(key) === 'money')
+                                            : (getFieldType(key) === 'money')
                                               ? (openBlock(), createElementBlock("span", _hoisted_30, toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
-                                              : (_ctx.getFieldType(key) === 'date')
-                                                ? (openBlock(), createElementBlock("span", _hoisted_31, toDisplayString(_ctx.formatDate(record[key])), 1 /* TEXT */))
+                                              : (getFieldType(key) === 'date')
+                                                ? (openBlock(), createElementBlock("span", _hoisted_31, toDisplayString(formatDate(record[key])), 1 /* TEXT */))
                                                 : (typeof key === 'string')
                                                   ? (openBlock(), createElementBlock("span", {
                                                       key: 4,
@@ -5804,9 +5847,8 @@ return (_ctx, _cache) => {
                                                         : (typeof key === 'object' && key.component)
                                                           ? (openBlock(), createBlock(resolveDynamicComponent(key.component), mergeProps({
                                                               key: 8,
-                                                              item: record,
-                                                              ref_for: true
-                                                            }, cleanColumn(key)), null, 16 /* FULL_PROPS */, ["item"]))
+                                                              item: record
+                                                            }, { ref_for: true }, cleanColumn(key)), null, 16 /* FULL_PROPS */, ["item"]))
                                                           : (typeof key === 'object')
                                                             ? (openBlock(), createElementBlock("span", {
                                                                 key: 9,
@@ -5823,10 +5865,10 @@ return (_ctx, _cache) => {
                               (__props.actions)
                                 ? (openBlock(), createElementBlock("td", _hoisted_38, [
                                     createVNode(script$g, {
-                                      emitAction: _ctx.doEmitAction,
+                                      emitAction: doEmitAction,
                                       actions: __props.actions,
                                       record: record
-                                    }, null, 8 /* PROPS */, ["emitAction", "actions", "record"])
+                                    }, null, 8 /* PROPS */, ["actions", "record"])
                                   ]))
                                 : createCommentVNode("v-if", true)
                             ], 10 /* CLASS, PROPS */, _hoisted_27))
@@ -5835,8 +5877,8 @@ return (_ctx, _cache) => {
               ])
             ], 2 /* CLASS */))
           : (openBlock(), createElementBlock("div", _hoisted_39, [
-              (_ctx.loading === 'loading')
-                ? (openBlock(), createElementBlock("div", _hoisted_40, _cache[17] || (_cache[17] = [
+              (loading.value === 'loading')
+                ? (openBlock(), createElementBlock("div", _hoisted_40, [...(_cache[14] || (_cache[14] = [
                     createElementVNode("div", { class: "text-center" }, [
                       createElementVNode("div", {
                         class: "spinner-border",
@@ -5844,21 +5886,21 @@ return (_ctx, _cache) => {
                       }, [
                         createElementVNode("span", { class: "visually-hidden" }, "Loading...")
                       ])
-                    ], -1 /* HOISTED */)
-                  ])))
-                : (_ctx.loading === 'error')
+                    ], -1 /* CACHED */)
+                  ]))]))
+                : (loading.value === 'error')
                   ? (openBlock(), createElementBlock("div", _hoisted_41, [
-                      createElementVNode("span", null, toDisplayString(_ctx.loading_error), 1 /* TEXT */)
+                      createElementVNode("span", null, toDisplayString(loading_error.value), 1 /* TEXT */)
                     ]))
-                  : (_ctx.loading === 'done')
+                  : (loading.value === 'done')
                     ? (openBlock(), createElementBlock("div", _hoisted_42, [
-                        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.records, (record, index) => {
+                        (openBlock(true), createElementBlock(Fragment, null, renderList(records.value, (record, index) => {
                           return (openBlock(), createElementBlock("div", {
                             key: record.id,
                             class: "single-mobile-req bg-light p-3",
-                            onClick: $event => (_ctx.rowSelected(record))
+                            onClick: $event => (rowSelected(record))
                           }, [
-                            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.tableHeaders, (key) => {
+                            (openBlock(true), createElementBlock(Fragment, null, renderList(tableHeaders.value, (key) => {
                               return (openBlock(), createElementBlock(Fragment, {
                                 key: key[0]
                               }, [
@@ -5875,17 +5917,17 @@ return (_ctx, _cache) => {
                                         (typeof key === 'string' && __props.links && __props.links[key])
                                           ? (openBlock(), createBlock(_component_router_link, {
                                               key: 0,
-                                              to: _ctx.replaceLinkUrl(__props.links[key],record),
-                                              class: normalizeClass(_ctx.getLinkClass(__props.links[key])),
+                                              to: replaceLinkUrl(__props.links[key],record),
+                                              class: normalizeClass(getLinkClass(__props.links[key])),
                                               innerHTML: record[key]
                                             }, null, 8 /* PROPS */, ["to", "class", "innerHTML"]))
-                                          : (_ctx.getFieldType(key) === 'numeric')
+                                          : (getFieldType(key) === 'numeric')
                                             ? (openBlock(), createElementBlock("span", _hoisted_48, toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
-                                            : (_ctx.getFieldType(key) === 'money')
+                                            : (getFieldType(key) === 'money')
                                               ? (openBlock(), createElementBlock("span", _hoisted_49, toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
-                                              : (_ctx.getFieldType(key) === 'date')
-                                                ? (openBlock(), createElementBlock("span", _hoisted_50, toDisplayString(_ctx.formatDate(record[key])), 1 /* TEXT */))
-                                                : (typeof key    === 'string')
+                                              : (getFieldType(key) === 'date')
+                                                ? (openBlock(), createElementBlock("span", _hoisted_50, toDisplayString(formatDate(record[key])), 1 /* TEXT */))
+                                                : (typeof key === 'string')
                                                   ? (openBlock(), createElementBlock("span", {
                                                       key: 4,
                                                       innerHTML: record[key]
@@ -5903,10 +5945,9 @@ return (_ctx, _cache) => {
                                                       : (typeof key === 'object' && key.component)
                                                         ? (openBlock(), createBlock(resolveDynamicComponent(key.component), mergeProps({
                                                             key: 7,
-                                                            item: record,
-                                                            ref_for: true
-                                                          }, cleanColumn(key)), null, 16 /* FULL_PROPS */, ["item"]))
-                                                        : (typeof key    === 'object')
+                                                            item: record
+                                                          }, { ref_for: true }, cleanColumn(key)), null, 16 /* FULL_PROPS */, ["item"]))
+                                                        : (typeof key === 'object')
                                                           ? (openBlock(), createElementBlock("span", {
                                                               key: 8,
                                                               innerHTML: record[key.key ?? key.field]
@@ -5914,7 +5955,7 @@ return (_ctx, _cache) => {
                                                           : (typeof key === 'function')
                                                             ? (openBlock(), createElementBlock("span", {
                                                                 key: 9,
-                                                                innerHTML: key(record, index )
+                                                                innerHTML: key(record, index)
                                                               }, null, 8 /* PROPS */, _hoisted_55))
                                                             : (openBlock(), createElementBlock("span", {
                                                                 key: 10,
@@ -5923,16 +5964,16 @@ return (_ctx, _cache) => {
                                       ])
                                     ], 64 /* STABLE_FRAGMENT */))
                                   : createCommentVNode("v-if", true),
-                                _cache[18] || (_cache[18] = createElementVNode("hr", { class: "my-2" }, null, -1 /* HOISTED */))
+                                _cache[15] || (_cache[15] = createElementVNode("hr", { class: "my-2" }, null, -1 /* CACHED */))
                               ], 64 /* STABLE_FRAGMENT */))
                             }), 128 /* KEYED_FRAGMENT */)),
                             (__props.actions)
                               ? (openBlock(), createElementBlock("div", _hoisted_57, [
                                   createVNode(script$g, {
-                                    emitAction: _ctx.doEmitAction,
+                                    emitAction: doEmitAction,
                                     actions: __props.actions,
                                     record: record
-                                  }, null, 8 /* PROPS */, ["emitAction", "actions", "record"])
+                                  }, null, 8 /* PROPS */, ["actions", "record"])
                                 ]))
                               : createCommentVNode("v-if", true)
                           ], 8 /* PROPS */, _hoisted_43))
@@ -5940,17 +5981,17 @@ return (_ctx, _cache) => {
                       ]))
                     : createCommentVNode("v-if", true)
             ])),
-    (_ctx.pagination_data)
-      ? (openBlock(), createBlock(script$f, {
+    (pagination_data.value)
+      ? (openBlock(), createBlock(script$e, {
           key: 6,
-          onLoadMoreRecords: _ctx.loadMoreRecords,
+          onLoadMoreRecords: loadMoreRecords,
           "hide-load-more": __props.hideLoadMore,
-          "per-page": _ctx.per_page,
+          "per-page": per_page.value,
           "hide-count": __props.hideCount,
-          pagination_data: _ctx.pagination_data,
-          onChangeKey: _ctx.changeKey,
-          "pagination-style": _ctx.pageStyle
-        }, null, 8 /* PROPS */, ["onLoadMoreRecords", "hide-load-more", "per-page", "hide-count", "pagination_data", "onChangeKey", "pagination-style"]))
+          pagination_data: pagination_data.value,
+          onChangeKey: changeKey,
+          "pagination-style": pageStyle.value
+        }, null, 8 /* PROPS */, ["hide-load-more", "per-page", "hide-count", "pagination_data", "pagination-style"]))
       : createCommentVNode("v-if", true),
     (__props.actions)
       ? (openBlock(true), createElementBlock(Fragment, { key: 7 }, renderList(__props.actions.actions, (action) => {
@@ -5960,23 +6001,22 @@ return (_ctx, _cache) => {
             (action.canvasId)
               ? (openBlock(), createBlock(script$l, {
                   key: 0,
-                  onOffcanvasClosed: _ctx.canvasClosed,
+                  onOffcanvasClosed: canvasClosed,
                   position: action.canvasPosition,
                   "canvas-size": action.canvasSize,
                   "canvas-title": action.canvasTitle,
                   "canvas-id": action.canvasId
                 }, {
                   default: withCtx(() => [
-                    (_ctx.selectedRecord)
+                    (selectedRecord.value)
                       ? (openBlock(), createBlock(resolveDynamicComponent(action.canvasComponent), mergeProps({
                           key: 0,
-                          onRecordUpdated: _ctx.reloadData,
-                          ref_for: true
-                        }, _ctx.cleanCanvasProps(action), { record: _ctx.selectedRecord }), null, 16 /* FULL_PROPS */, ["onRecordUpdated", "record"]))
+                          onRecordUpdated: reloadData
+                        }, { ref_for: true }, cleanCanvasProps(action), { record: selectedRecord.value }), null, 16 /* FULL_PROPS */, ["record"]))
                       : createCommentVNode("v-if", true)
                   ]),
                   _: 2 /* DYNAMIC */
-                }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onOffcanvasClosed", "position", "canvas-size", "canvas-title", "canvas-id"]))
+                }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["position", "canvas-size", "canvas-title", "canvas-id"]))
               : createCommentVNode("v-if", true)
           ], 64 /* STABLE_FRAGMENT */))
         }), 128 /* KEYED_FRAGMENT */))
@@ -5985,7 +6025,7 @@ return (_ctx, _cache) => {
 }
 }
 
-});
+};
 
 script$d.__file = "src/lib/components/ShTable.vue";
 
@@ -6259,7 +6299,7 @@ return (_ctx, _cache) => {
             createTextVNode(toDisplayString(tab.label) + " ", 1 /* TEXT */),
             (tab.count || tab.tabCount)
               ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                  _cache[0] || (_cache[0] = createElementVNode("i", { class: "d-none" }, null, -1 /* HOISTED */)),
+                  _cache[0] || (_cache[0] = createElementVNode("i", { class: "d-none" }, null, -1 /* CACHED */)),
                   createElementVNode("sup", _hoisted_3$4, toDisplayString(tab.count ?? tab.tabCount), 1 /* TEXT */)
                 ], 64 /* STABLE_FRAGMENT */))
               : createCommentVNode("v-if", true)
@@ -6475,9 +6515,9 @@ return (_ctx, _cache) => {
   return (openBlock(), createElementBlock("div", _hoisted_1$6, [
     createElementVNode("div", _hoisted_2$5, [
       (loadingModules.value)
-        ? (openBlock(), createElementBlock("div", _hoisted_3$3, _cache[1] || (_cache[1] = [
-            createElementVNode("span", { class: "spinner-grow mx-auto" }, null, -1 /* HOISTED */)
-          ])))
+        ? (openBlock(), createElementBlock("div", _hoisted_3$3, [...(_cache[1] || (_cache[1] = [
+            createElementVNode("span", { class: "spinner-grow mx-auto" }, null, -1 /* CACHED */)
+          ]))]))
         : (openBlock(), createElementBlock("ul", _hoisted_4$3, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(modules.value, (module) => {
               return (openBlock(), createElementBlock("li", {
@@ -6534,10 +6574,10 @@ return (_ctx, _cache) => {
                         data: {permissions: selectedPermissions.value},
                         class: "btn btn-primary d-block"
                       }, {
-                        default: withCtx(() => _cache[2] || (_cache[2] = [
-                          createElementVNode("i", { class: "bi-check" }, null, -1 /* HOISTED */),
-                          createTextVNode(" Save")
-                        ])),
+                        default: withCtx(() => [...(_cache[2] || (_cache[2] = [
+                          createElementVNode("i", { class: "bi-check" }, null, -1 /* CACHED */),
+                          createTextVNode(" Save", -1 /* CACHED */)
+                        ]))]),
                         _: 1 /* STABLE */
                       }, 8 /* PROPS */, ["url", "data"])
                     ])
@@ -6923,7 +6963,7 @@ return (_ctx, _cache) => {
             ? (openBlock(), createElementBlock("div", _hoisted_3$2, [
                 createVNode(script$4, null, {
                   default: withCtx(() => [
-                    _cache[5] || (_cache[5] = createElementVNode("h5", { class: "card-title" }, "Details", -1 /* HOISTED */)),
+                    _cache[5] || (_cache[5] = createElementVNode("h5", { class: "card-title" }, "Details", -1 /* CACHED */)),
                     createElementVNode("table", _hoisted_4$2, [
                       createElementVNode("tbody", null, [
                         (openBlock(), createElementBlock(Fragment, null, renderList(UserdetailsColumns, (column) => {
@@ -6947,10 +6987,10 @@ return (_ctx, _cache) => {
                             onSuccess: _cache[0] || (_cache[0] = $event => (detailsUpdated('details'))),
                             fields: ['name','email','phone']
                           }, {
-                            default: withCtx(() => _cache[3] || (_cache[3] = [
-                              createElementVNode("i", { class: "bi-pen" }, null, -1 /* HOISTED */),
-                              createTextVNode(" Edit Details")
-                            ])),
+                            default: withCtx(() => [...(_cache[3] || (_cache[3] = [
+                              createElementVNode("i", { class: "bi-pen" }, null, -1 /* CACHED */),
+                              createTextVNode(" Edit Details", -1 /* CACHED */)
+                            ]))]),
                             _: 1 /* STABLE */
                           }, 8 /* PROPS */, ["current-data"]))
                         : createCommentVNode("v-if", true),
@@ -6976,10 +7016,10 @@ return (_ctx, _cache) => {
                           }
                     ]
                           }, {
-                            default: withCtx(() => _cache[4] || (_cache[4] = [
-                              createElementVNode("i", { class: "bi-key" }, null, -1 /* HOISTED */),
-                              createTextVNode(" Change Password")
-                            ])),
+                            default: withCtx(() => [...(_cache[4] || (_cache[4] = [
+                              createElementVNode("i", { class: "bi-key" }, null, -1 /* CACHED */),
+                              createTextVNode(" Change Password", -1 /* CACHED */)
+                            ]))]),
                             _: 1 /* STABLE */
                           }))
                         : createCommentVNode("v-if", true)
@@ -7003,13 +7043,13 @@ return (_ctx, _cache) => {
                           type: 'file',
                           }]
                 }, {
-                  default: withCtx(() => _cache[6] || (_cache[6] = [
-                    createElementVNode("i", { class: "bi-pen" }, null, -1 /* HOISTED */)
-                  ])),
+                  default: withCtx(() => [...(_cache[6] || (_cache[6] = [
+                    createElementVNode("i", { class: "bi-pen" }, null, -1 /* CACHED */)
+                  ]))]),
                   _: 1 /* STABLE */
                 }),
                 createElementVNode("div", null, [
-                  _cache[7] || (_cache[7] = createElementVNode("h5", { class: "card-title" }, "Profile Picture", -1 /* HOISTED */)),
+                  _cache[7] || (_cache[7] = createElementVNode("h5", { class: "card-title" }, "Profile Picture", -1 /* CACHED */)),
                   createElementVNode("img", {
                     src: showProfilePicture(unref(user)?.profile_picture),
                     class: "img-fluid",
@@ -7059,7 +7099,7 @@ department.value = dept;
 
 return (_ctx, _cache) => {
   return (openBlock(), createElementBlock(Fragment, null, [
-    _cache[2] || (_cache[2] = createElementVNode("h5", null, "Departments", -1 /* HOISTED */)),
+    _cache[2] || (_cache[2] = createElementVNode("h5", null, "Departments", -1 /* CACHED */)),
     createElementVNode("div", _hoisted_1$2, [
       createElementVNode("div", _hoisted_2$2, [
         createElementVNode("a", {
@@ -7068,10 +7108,10 @@ return (_ctx, _cache) => {
           ref: "addDeptBtn",
           href: "#sh_department_modal",
           class: "btn btn-info btn-sm"
-        }, _cache[1] || (_cache[1] = [
-          createElementVNode("i", { class: "fa fa-plus" }, null, -1 /* HOISTED */),
-          createTextVNode(" ADD DEPARTMENT")
-        ]), 512 /* NEED_PATCH */),
+        }, [...(_cache[1] || (_cache[1] = [
+          createElementVNode("i", { class: "fa fa-plus" }, null, -1 /* CACHED */),
+          createTextVNode(" ADD DEPARTMENT", -1 /* CACHED */)
+        ]))], 512 /* NEED_PATCH */),
         createVNode(script$d, {
           reload: unref(reload),
           headers: ['id','name','description', 'created_at'],
@@ -7228,7 +7268,7 @@ return (_ctx, _cache) => {
           }, [
             createElementVNode("i", { class: "bi-plus" }),
             createTextVNode(" ADD Module")
-          ], -1 /* HOISTED */)),
+          ], -1 /* CACHED */)),
           createElementVNode("h5", null, "Department #" + toDisplayString(unref(department).id) + " - " + toDisplayString(unref(department).name) + " Allowed Modules", 1 /* TEXT */),
           createVNode(script$d, {
             actions: {
@@ -7308,10 +7348,10 @@ return (_ctx, _cache) => {
                     createElementVNode("button", {
                       onClick: submitPermissions,
                       class: "btn btn-info"
-                    }, _cache[1] || (_cache[1] = [
-                      createElementVNode("i", { class: "fa fa-save" }, null, -1 /* HOISTED */),
-                      createTextVNode(" Submit")
-                    ]))
+                    }, [...(_cache[1] || (_cache[1] = [
+                      createElementVNode("i", { class: "fa fa-save" }, null, -1 /* CACHED */),
+                      createTextVNode(" Submit", -1 /* CACHED */)
+                    ]))])
                   ], 64 /* STABLE_FRAGMENT */))
                 : createCommentVNode("v-if", true)
             ]),
@@ -7404,7 +7444,7 @@ const forgotSuccessful = ()=>{
 return (_ctx, _cache) => {
   return (unref(user))
     ? (openBlock(), createElementBlock("div", _hoisted_1, [
-        _cache[4] || (_cache[4] = createTextVNode("You are signed is as ")),
+        _cache[4] || (_cache[4] = createTextVNode("You are signed is as ", -1 /* CACHED */)),
         createElementVNode("strong", null, toDisplayString(unref(user).name), 1 /* TEXT */)
       ]))
     : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
@@ -7421,10 +7461,10 @@ return (_ctx, _cache) => {
                 createElementVNode("strong", {
                   onClick: _cache[0] || (_cache[0] = $event => (goToSection('login'))),
                   class: "sh-register-link text-primary"
-                }, _cache[5] || (_cache[5] = [
-                  createElementVNode("i", { class: "bi bi-arrow-left" }, null, -1 /* HOISTED */),
-                  createTextVNode(" Back to Login ")
-                ]))
+                }, [...(_cache[5] || (_cache[5] = [
+                  createElementVNode("i", { class: "bi bi-arrow-left" }, null, -1 /* CACHED */),
+                  createTextVNode(" Back to Login ", -1 /* CACHED */)
+                ]))])
               ])
             ]))
           : createCommentVNode("v-if", true),
@@ -7445,7 +7485,7 @@ return (_ctx, _cache) => {
                   class: "sh-forgot-link text-primary",
                   onClick: _cache[1] || (_cache[1] = $event => (goToSection('forgot')))
                 }, "Forgotten password?"),
-                _cache[6] || (_cache[6] = createElementVNode("strong", { class: "bi-dot" }, null, -1 /* HOISTED */)),
+                _cache[6] || (_cache[6] = createElementVNode("strong", { class: "bi-dot" }, null, -1 /* CACHED */)),
                 createElementVNode("strong", {
                   onClick: _cache[2] || (_cache[2] = $event => (goToSection('register'))),
                   class: "sh-register-link text-primary"
@@ -7687,4 +7727,4 @@ const useShFetch = (url, path, cacheKey) => {
     }
 };
 
-export { countries as Countries, script$8 as ManagePermissions, script$q as ShAutoForm, script$l as ShCanvas, script$9 as ShCanvasBtn, script$4 as ShCardLayout, script$j as ShConfirmAction, script$o as ShDropDownForm, script$b as ShDynamicTabs, script$y as ShForm, ShFrontend, script$p as ShModal, script$a as ShModalBtn, script$n as ShModalForm, script$m as ShModalFormAuto, script$A as ShPhone, script$5 as ShQueryPopups, script$e as ShRange, script$7 as ShRoutePopups, script$i as ShSilentAction, script$z as ShSuggest, script$d as ShTable, script$c as ShTabs, shApis, shGql, shRepo, shStorage, useAppStore, useShFetch, useUserStore };
+export { countries as Countries, script$8 as ManagePermissions, script$q as ShAutoForm, script$l as ShCanvas, script$9 as ShCanvasBtn, script$4 as ShCardLayout, script$j as ShConfirmAction, script$o as ShDropDownForm, script$b as ShDynamicTabs, script$y as ShForm, ShFrontend, script$p as ShModal, script$a as ShModalBtn, script$n as ShModalForm, script$m as ShModalFormAuto, script$A as ShPhone, script$5 as ShQueryPopups, script$f as ShRange, script$7 as ShRoutePopups, script$i as ShSilentAction, script$z as ShSuggest, script$d as ShTable, script$c as ShTabs, shApis, shGql, shRepo, shStorage, useAppStore, useShFetch, useUserStore };