@iankibetsh/shframework 2.0.4 → 2.0.6

package/dist/library.js

@@ -1993,7 +1993,7 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
       [vue.vModelSelect, $data.selectedCountry]
     ]),
     vue.withDirectives(vue.createElementVNode("input", {
-      type: "text",
+      type: "number",
       class: "phone-number",
       "data-cy": "phone_input",
       onInput: _cache[2] || (_cache[2] = (...args) => ($options.updateValue && $options.updateValue(...args))),
@@ -2517,7 +2517,7 @@ const _hoisted_7$6 = { class: "row" };
 const _hoisted_8$5 = { class: "fg-label control-label text-capitalize control-bel col-md-12 request-form-label mb-2" };
 const _hoisted_9$5 = { class: "col-md-12" };
 const _hoisted_10$4 = ["data-cy", "placeholder", "name", "onFocus", "onChange"];
-const _hoisted_11$3 = ["data-cy", "placeholder", "name", "onFocus", "onUpdate:modelValue"];
+const _hoisted_11$4 = ["data-cy", "placeholder", "name", "onFocus", "onUpdate:modelValue"];
 const _hoisted_12$3 = ["data-cy", "placeholder", "name", "onFocus", "onUpdate:modelValue"];
 const _hoisted_13$3 = ["data-cy", "placeholder", "name", "onFocus", "onUpdate:modelValue"];
 const _hoisted_14$3 = ["data-cy", "name", "onFocus", "onUpdate:modelValue"];
@@ -2624,7 +2624,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
                     class: vue.normalizeClass([_ctx.form_errors[field] == null ? ' field_' + field:'is-invalid ' + field, "form-control"]),
                     "onUpdate:modelValue": $event => ((_ctx.form_elements[field]) = $event),
                     type: "number"
-                  }, null, 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_11$3)), [
+                  }, null, 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_11$4)), [
                     [vue.vModelText, _ctx.form_elements[field]]
                   ])
                 : vue.createCommentVNode("v-if", true),
@@ -3082,7 +3082,7 @@ var script$l = {
     'emails',
     'phones','numbers','selects','dates','gqlMutation'
 ],
-  emits: ['success'],
+  emits: ['success','fieldChanged','formSubmitted','formError'],
   setup(__props, { emit }) {
 
 const props = __props;
@@ -3156,7 +3156,10 @@ const getComponentClass = field => validationErrors.value[field] ? getElementCla
 const getHelperText = field => (props.helperTexts && props.helperTexts[field]) ? props.helperTexts[field]:false;
 const getElementClass = section => (props.formClasses && props.formClasses[section]) ? props.formClasses[section]:shFormElementClasses.value[section] ?? ___default["default"].snakeCase(section).replace(/_/gi,'-');
 const getPlaceholder = field => (props.placeHolders && props.placeHolders[field]) && props.placeHolders[field];
-const removeValidationError = field => delete validationErrors.value[field];
+const fieldChanged = field => {
+    delete validationErrors.value[field];
+    emit('fieldChanged', field, formFields.value.filter(f=>f.field === field)[0].value);
+};
 const getComponentProps = field => {
   const newField = {...field};
   delete newField.component;
@@ -3305,8 +3308,8 @@ return (_ctx, _cache) => {
                   : vue.createCommentVNode("v-if", true),
                 (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(getFieldComponent(field)), vue.mergeProps(getComponentProps(field), {
                   isInvalid: typeof validationErrors.value[field.field] !== 'undefined',
-                  onClick: $event => (removeValidationError(field.field)),
-                  "onUpdate:modelValue": [$event => (removeValidationError(field.field)), $event => ((formFields.value[index].value) = $event)],
+                  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"])),
@@ -3433,19 +3436,28 @@ const _hoisted_5$6 = /*#__PURE__*/vue.createElementVNode("button", {
 const _hoisted_6$5 = { class: "modal-body" };
 const _hoisted_7$4 = { class: "section" };
 
+
 var script$j = {
   __name: 'ShModal',
   props: {
-  modalId: {
-    required: true,
-    type: String
-  },
-  modalTitle: {
-    type: String
-  },
-  modalSize: {
-    type: String
-  }
+    modalId: {
+        required: true,
+        type: String
+    },
+    modalTitle: {
+        type: String
+    },
+    modalSize: {
+        type: String
+    },
+    Static: {
+        type: Boolean,
+        default: false
+    },
+    bsKeyboard: {
+        type: Boolean,
+        default: true
+    }
 },
   emits: ['modalClosed'],
   setup(__props, { emit }) {
@@ -3454,11 +3466,11 @@ const props = __props;
 
 
 
-vue.onMounted(()=>{
-  const modal = document.getElementById(props.modalId);
-  modal.addEventListener('hidden.bs.modal', event => {
-    event.target.id == props.modalId && emit('modalClosed');
-  });
+vue.onMounted(() => {
+    const modal = document.getElementById(props.modalId);
+    modal.addEventListener('hidden.bs.modal', event => {
+        event.target.id == props.modalId && emit('modalClosed');
+    });
 });
 
 return (_ctx, _cache) => {
@@ -3763,7 +3775,7 @@ const _hoisted_9$4 = [
   _hoisted_4$7
 ];
 const _hoisted_10$3 = { class: "record_counts" };
-const _hoisted_11$2 = {
+const _hoisted_11$3 = {
   key: 0,
   "aria-label": "Page navigation"
 };
@@ -3819,7 +3831,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
           vue.createElementVNode("span", _hoisted_10$3, " of " + vue.toDisplayString($props.pagination_data.record_count) + " items", 1 /* TEXT */)
         ]),
         ($props.pagination_data != null)
-          ? (vue.openBlock(), vue.createElementBlock("nav", _hoisted_11$2, [
+          ? (vue.openBlock(), vue.createElementBlock("nav", _hoisted_11$3, [
               vue.createElementVNode("ul", _hoisted_12$2, [
                 vue.createElementVNode("li", {
                   class: vue.normalizeClass([$options.getActivePage === 1 ? 'disabled' : '' , "page-item"])
@@ -4079,302 +4091,515 @@ return (_ctx, _cache) => {
 
 script$d.__file = "src/lib/components/ShSilentAction.vue";
 
+const _hoisted_1$9 = { class: "sh-range" };
+const _hoisted_2$6 = { class: "dropdown" };
+const _hoisted_3$6 = {
+  class: "form-control dropdown-toggle",
+  href: "#",
+  role: "button",
+  id: "dropdownMenuLink",
+  "data-bs-toggle": "dropdown",
+  "aria-expanded": "false"
+};
+const _hoisted_4$6 = /*#__PURE__*/vue.createElementVNode("i", { class: "bi-calendar text-dark" }, null, -1 /* HOISTED */);
+const _hoisted_5$5 = ["innerHTML"];
+const _hoisted_6$4 = {
+  class: "dropdown-menu sh-range-dropdown",
+  "aria-labelledby": "dropdownMenuLink"
+};
+const _hoisted_7$3 = { class: "sh-range-preset" };
+const _hoisted_8$3 = ["onClick"];
+const _hoisted_9$3 = { class: "border-top" };
+const _hoisted_10$2 = { class: "dropdown-item d-flex flex-column" };
+const _hoisted_11$2 = /*#__PURE__*/vue.createElementVNode("span", null, "Custom", -1 /* HOISTED */);
+
+
+
 var script$c = {
-  name: 'sh-table',
-  props: ['endPoint', 'headers','query', 'pageCount', 'actions', 'hideCount', 'hideLoadMore', 'links', 'reload', 'hideSearch', 'sharedData', 'searchPlaceholder', 'event', 'displayMore', 'displayMoreBtnClass', 'moreDetailsColumns', 'moreDetailsFields', 'hasDownload', 'downloadFields', 'tableHover', 'hideIds', 'paginationStyle'],
-  inject: ['channel'],
-  data () {
-    return {
-      order_by: '',
-      order_method: '',
-      per_page: shRepo.getShConfig('tablePerPage',10),
-      page: 1,
-      filter_value: '',
-      loading: 'loading',
-      loading_error: '',
-      records: [],
-      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')
-    }
+  __name: 'ShRange',
+  props: {
+  start: {
+    type: Number,
+    default: 2021
   },
-  mounted () {
-    if(this.headers){
-      this.tableHeaders = this.headers;
-    }
-    if (this.event) ;
-    if (this.actions && this.actions.actions) {
-      this.actions.actions.forEach(action => {
-        if (action.canvasComponent) {
-          this.hasCanvas = true;
-        }
-      });
-    }
+  selected: {
+    type: String,
+    default: shRepo.getShConfig('defaultRange', 'This Month')
+  }
+},
+  emits: ['rangeSelected'],
+  setup(__props, { emit }) {
+
+const props = __props;
+
+
+
+
+
+const selectedDate = vue.ref(null);
+const rangeLabel = vue.ref(null);
+vue.ref(false);
+const customFrom = vue.ref(null);
+const customTo = vue.ref(null);
+
+const applyCustom = ()=>{
+  const date = [moment__default["default"](customFrom.value),moment__default["default"](customTo.value)];
+  setDate(date,'Custom');
+};
+
+const dates = vue.ref([
+  {
+    label: 'Today',
+    value: [moment__default["default"](), moment__default["default"]()]
   },
-  methods: {
-    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();
+  {
+    label: 'Yesterday',
+    value: [moment__default["default"]().subtract(1, 'days'), moment__default["default"]()]
+  },
+    {
+    label: '7 Days',
+    value: [moment__default["default"]().subtract(7, 'days'), moment__default["default"]()]
+  },
+  {
+    label: 'This week',
+    value: [moment__default["default"]().subtract(1, 'week').startOf('week'), moment__default["default"]().subtract(1, 'week').endOf('week')]
+  },
+  {
+    label: 'This Month',
+    value: [moment__default["default"]().startOf('month'), moment__default["default"]()]
+  },
+  {
+    label: 'Last Month',
+    value: [moment__default["default"]().subtract(1, 'month').startOf('month'), moment__default["default"]().subtract(1, 'month').endOf('month')]
+  },
+  {
+    label: 'Last 30 days',
+    value: [moment__default["default"]().subtract(30, 'days'), moment__default["default"]()]
+  },
+  {
+    label: 'Last 60 days',
+    value: [moment__default["default"]().subtract(60, 'days'), moment__default["default"]()]
+  },
+  {
+    label: 'Last 90 days',
+    value: [moment__default["default"]().subtract(90, 'days'), moment__default["default"]()]
+  },
+    {
+        label: 'This Year',
+        value: [moment__default["default"]().startOf('year'), moment__default["default"]()]
     },
-    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
+  {
+    label: '1 Year',
+    value: [moment__default["default"]().subtract(12, 'months'), moment__default["default"]()]
+  },
+  {
+    label: 'All Time',
+    value: [moment__default["default"]('@/2021').startOf('year'), moment__default["default"]()]
+  }
+]);
+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}`
+  });
+};
+vue.onMounted(() => {
+  let end = parseInt(moment__default["default"]().format('Y'));
+  while (end >= props.start) {
+    dates.value.push({
+      label: end,
+      value: [moment__default["default"]('@/' + end).startOf('year'), moment__default["default"]('@/' + end).endOf('year')]
+    });
+    end--;
+  }
+
+  dates.value.map(date=>{
+    (`${date.label}`.toLowerCase() === props.selected.toLowerCase()) && setDate(date.value, date.label);
+  });
+});
+
+return (_ctx, _cache) => {
+  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
+    vue.createElementVNode("div", _hoisted_2$6, [
+      vue.createElementVNode("div", _hoisted_3$6, [
+        _hoisted_4$6,
+        vue.createTextVNode(),
+        vue.createElementVNode("span", { innerHTML: rangeLabel.value }, null, 8 /* PROPS */, _hoisted_5$5)
+      ]),
+      vue.createElementVNode("div", _hoisted_6$4, [
+        vue.createElementVNode("ul", _hoisted_7$3, [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(dates.value, (date) => {
+            return (vue.openBlock(), vue.createElementBlock("li", {
+              key: date.label,
+              onClick: $event => (setDate(date.value, date.label))
+            }, [
+              vue.createElementVNode("a", {
+                class: vue.normalizeClass(["dropdown-item", date.value === selectedDate.value ? 'active' : '']),
+                href: "#"
+              }, vue.toDisplayString(date.label), 3 /* TEXT, CLASS */)
+            ], 8 /* PROPS */, _hoisted_8$3))
+          }), 128 /* KEYED_FRAGMENT */))
+        ]),
+        vue.createElementVNode("ul", null, [
+          vue.createElementVNode("li", _hoisted_9$3, [
+            vue.createElementVNode("div", _hoisted_10$2, [
+              _hoisted_11$2,
+              vue.createElementVNode("div", null, [
+                vue.withDirectives(vue.createElementVNode("input", {
+                  "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((customFrom).value = $event)),
+                  type: "date"
+                }, null, 512 /* NEED_PATCH */), [
+                  [vue.vModelText, customFrom.value]
+                ]),
+                vue.withDirectives(vue.createElementVNode("input", {
+                  "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => ((customTo).value = $event)),
+                  type: "date"
+                }, null, 512 /* NEED_PATCH */), [
+                  [vue.vModelText, customTo.value]
+                ])
+              ]),
+              (customFrom.value && customTo.value)
+                ? (vue.openBlock(), vue.createElementBlock("button", {
+                    key: 0,
+                    class: "btn btn-sm btn-info mt-1",
+                    onClick: applyCustom
+                  }, "Apply"))
+                : vue.createCommentVNode("v-if", true)
+            ])
+          ])
+        ])
+      ])
+    ])
+  ]))
+}
+}
+
+};
+
+script$c.__file = "src/lib/components/ShRange.vue";
+
+var script$b = {
+    name: 'sh-table',
+    props: ['endPoint', 'headers', 'query', 'pageCount', 'actions', 'hideCount', 'hideLoadMore', 'links', 'reload', 'hideSearch', 'sharedData', 'searchPlaceholder', 'event', 'displayMore', 'displayMoreBtnClass', 'moreDetailsColumns', 'moreDetailsFields', 'hasDownload', 'downloadFields', 'tableHover', 'hideIds', 'paginationStyle', 'hasRange'],
+    inject: ['channel'],
+    data() {
+        return {
+            order_by: '',
+            order_method: '',
+            per_page: shRepo.getShConfig('tablePerPage', 10),
+            page: 1,
+            filter_value: '',
+            loading: 'loading',
+            loading_error: '',
+            records: [],
+            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
         }
-      }
-      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') {
-        path = path.link ?? path.url;
-      }
-      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__default["default"](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);
+    mounted() {
+        if (this.headers) {
+            this.tableHeaders = this.headers;
         }
-      });
-      const data = {
-        titles: headers,
-        export: 1
-      };
-      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()
+        if (this.event) ;
+        if (this.actions && this.actions.actions) {
+            this.actions.actions.forEach(action => {
+                if (action.canvasComponent) {
+                    this.hasCanvas = true;
+                }
+            });
         }
-      }).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);
-      });
     },
-    reloadData: function (page, append) {
-      if (typeof page !== 'undefined') {
-        this.page = page;
-      }
-      if (!append) {
-        this.loading = 'loading';
-      }
-      const 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
-      };
-      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.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]);
-        }
-        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;
+    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') {
+                path = path.link ?? path.url;
+            }
+            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__default["default"](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);
+                }
+            });
+            const data = {
+                titles: headers,
+                export: 1
+            };
+            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);
+            });
+        },
+        reloadData: function (page, append) {
+            if (typeof page !== 'undefined') {
+                this.page = page;
+            }
+            if (!append) {
+                this.loading = 'loading';
+            }
+            const 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
+            };
+            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;
+            }
+            console.log(endPoint, this.range);
+            shApis.doGet(endPoint, data).then(req => {
+                this.$emit('dataReloaded', this.pagination_data);
+                this.loading = 'done';
+                const response = req.data.data;
+                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]);
+                }
+                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';
+            });
         }
-      }).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();
-    }
-  },
-  created () {
-    this.reloadData();
-  },
-  components: {
-    ShSilentAction: script$d,
-    ShConfirmAction: script$e,
-    ShCanvas: script$g,
-    pagination: script$f
-  },
-  computed: {
-    windowWidth: function () {
-      return window.innerWidth
+    watch: {
+        hideIds: {
+            handler(newValue) {
+                this.records = this.records.filter(record => !newValue.includes(record.id) && record);
+            },
+            deep: true
+        },
+        reload() {
+            this.reloadData();
+        },
+        endPoint() {
+            this.reloadData();
+        }
     },
-    user () {
-      return null
+    created() {
+        this.reloadData();
     },
-    hasDefaultSlot () {
-      return !!this.$slots.default
+    components: {
+        ShRange: script$c,
+        ShSilentAction: script$d,
+        ShConfirmAction: script$e,
+        ShCanvas: script$g,
+        pagination: script$f
     },
-    hasRecordsSlot () {
-      return !!this.$slots.records
+    computed: {
+        windowWidth: function () {
+            return window.innerWidth
+        },
+        user() {
+            return null
+        },
+        hasDefaultSlot() {
+            return !!this.$slots.default
+        },
+        hasRecordsSlot() {
+            return !!this.$slots.records
+        }
     }
-  }
 };
 
-const _hoisted_1$9 = { class: "auto-table mt-2" };
-const _hoisted_2$6 = {
+const _hoisted_1$8 = { class: "auto-table mt-2" };
+const _hoisted_2$5 = {
   key: 0,
   class: "col-md-4 mb-2"
 };
-const _hoisted_3$6 = ["disabled"];
-const _hoisted_4$6 = /*#__PURE__*/vue.createElementVNode("i", { class: "bi-download" }, null, -1 /* HOISTED */);
-const _hoisted_5$5 = /*#__PURE__*/vue.createElementVNode("span", {
+const _hoisted_3$5 = ["disabled"];
+const _hoisted_4$5 = /*#__PURE__*/vue.createElementVNode("i", { class: "bi-download" }, null, -1 /* HOISTED */);
+const _hoisted_5$4 = /*#__PURE__*/vue.createElementVNode("span", {
   class: "spinner-border spinner-border-sm",
   role: "status",
   "aria-hidden": "true"
 }, null, -1 /* HOISTED */);
-const _hoisted_6$4 = /*#__PURE__*/vue.createElementVNode("span", { class: "visually-hidden" }, "Loading...", -1 /* HOISTED */);
-const _hoisted_7$3 = {
+const _hoisted_6$3 = /*#__PURE__*/vue.createElementVNode("span", { class: "visually-hidden" }, "Loading...", -1 /* HOISTED */);
+const _hoisted_7$2 = {
   key: 1,
   class: "row"
 };
-const _hoisted_8$3 = { class: "col-12 mb-3" };
-const _hoisted_9$3 = { class: "sh-search-bar" };
-const _hoisted_10$2 = ["placeholder"];
+const _hoisted_8$2 = { class: "col-12 mb-3 d-flex justify-content-start" };
+const _hoisted_9$2 = {
+  key: 0,
+  class: "sh-range-selector"
+};
+const _hoisted_10$1 = ["placeholder"];
 const _hoisted_11$1 = {
   key: 0,
   class: "text-center"
@@ -4512,15 +4737,16 @@ const _hoisted_64 = ["href"];
 const _hoisted_65 = ["title", "onClick"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_sh_range = vue.resolveComponent("sh-range");
   const _component_router_link = vue.resolveComponent("router-link");
   const _component_sh_confirm_action = vue.resolveComponent("sh-confirm-action");
   const _component_sh_silent_action = vue.resolveComponent("sh-silent-action");
   const _component_pagination = vue.resolveComponent("pagination");
   const _component_sh_canvas = vue.resolveComponent("sh-canvas");
 
-  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
+  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [
     ($props.hasDownload)
-      ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$6, [
+      ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$5, [
           vue.createElementVNode("button", {
             disabled: $data.downloading,
             class: "btn btn-warning btn-sm",
@@ -4528,20 +4754,27 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           }, [
             (!$data.downloading)
               ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-                  _hoisted_4$6,
+                  _hoisted_4$5,
                   vue.createTextVNode(" Export ")
                 ], 64 /* STABLE_FRAGMENT */))
               : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-                  _hoisted_5$5,
-                  _hoisted_6$4
+                  _hoisted_5$4,
+                  _hoisted_6$3
                 ], 64 /* STABLE_FRAGMENT */))
-          ], 8 /* PROPS */, _hoisted_3$6)
+          ], 8 /* PROPS */, _hoisted_3$5)
         ]))
       : vue.createCommentVNode("v-if", true),
     (!$props.hideSearch)
-      ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$3, [
-          vue.createElementVNode("div", _hoisted_8$3, [
-            vue.createElementVNode("div", _hoisted_9$3, [
+      ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$2, [
+          vue.createElementVNode("div", _hoisted_8$2, [
+            ($props.hasRange)
+              ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9$2, [
+                  vue.createVNode(_component_sh_range, { onRangeSelected: $options.rangeChanged }, null, 8 /* PROPS */, ["onRangeSelected"])
+                ]))
+              : vue.createCommentVNode("v-if", true),
+            vue.createElementVNode("div", {
+              class: vue.normalizeClass(["sh-search-bar", $props.hasRange ? 'ms-2':''])
+            }, [
               vue.withDirectives(vue.createElementVNode("input", {
                 onKeydown: _cache[1] || (_cache[1] = (...args) => ($options.userTyping && $options.userTyping(...args))),
                 onKeyup: _cache[2] || (_cache[2] = (...args) => ($options.userTyping && $options.userTyping(...args))),
@@ -4550,10 +4783,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                 "onUpdate:modelValue": _cache[4] || (_cache[4] = $event => (($data.filter_value) = $event)),
                 placeholder: $props.searchPlaceholder ? $props.searchPlaceholder : 'Search',
                 class: "form-control sh-search-input"
-              }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_10$2), [
+              }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_10$1), [
                 [vue.vModelText, $data.filter_value]
               ])
-            ])
+            ], 2 /* CLASS */)
           ])
         ]))
       : vue.createCommentVNode("v-if", true),
@@ -4971,10 +5204,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   ]))
 }
 
-script$c.render = render;
-script$c.__file = "src/lib/components/ShTable.vue";
+script$b.render = render;
+script$b.__file = "src/lib/components/ShTable.vue";
 
-var script$b = {
+var script$a = {
   __name: 'ShTabs',
   props: {
   tabs: {
@@ -5119,18 +5352,18 @@ return (_ctx, _cache) => {
 
 };
 
-script$b.__file = "src/lib/components/ShTabs.vue";
+script$a.__file = "src/lib/components/ShTabs.vue";
 
-const _hoisted_1$8 = {
+const _hoisted_1$7 = {
   class: "nav-item",
   role: "presentation"
 };
-const _hoisted_2$5 = ["onClick"];
-const _hoisted_3$5 = /*#__PURE__*/vue.createElementVNode("i", { class: "d-none" }, null, -1 /* HOISTED */);
-const _hoisted_4$5 = { class: "sh_tab_count" };
-const _hoisted_5$4 = { class: "tab-content" };
+const _hoisted_2$4 = ["onClick"];
+const _hoisted_3$4 = /*#__PURE__*/vue.createElementVNode("i", { class: "d-none" }, null, -1 /* HOISTED */);
+const _hoisted_4$4 = { class: "sh_tab_count" };
+const _hoisted_5$3 = { class: "tab-content" };
 
-var script$a = {
+var script$9 = {
   __name: 'ShDynamicTabs',
   props: ['tabs','data','classes'],
   setup(__props) {
@@ -5160,7 +5393,7 @@ return (_ctx, _cache) => {
       role: "tablist"
     }, [
       (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(tabs), (tab) => {
-        return (vue.openBlock(), vue.createElementBlock("li", _hoisted_1$8, [
+        return (vue.openBlock(), vue.createElementBlock("li", _hoisted_1$7, [
           vue.createElementVNode("button", {
             onClick: $event => (setTab(tab)),
             class: vue.normalizeClass(["nav-link", vue.unref(currentTab) === tab ? 'active':''])
@@ -5168,15 +5401,15 @@ return (_ctx, _cache) => {
             vue.createTextVNode(vue.toDisplayString(tab.label) + " ", 1 /* TEXT */),
             (tab.count || tab.tabCount)
               ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-                  _hoisted_3$5,
-                  vue.createElementVNode("sup", _hoisted_4$5, vue.toDisplayString(tab.count ?? tab.tabCount), 1 /* TEXT */)
+                  _hoisted_3$4,
+                  vue.createElementVNode("sup", _hoisted_4$4, vue.toDisplayString(tab.count ?? tab.tabCount), 1 /* TEXT */)
                 ], 64 /* STABLE_FRAGMENT */))
               : vue.createCommentVNode("v-if", true)
-          ], 10 /* CLASS, PROPS */, _hoisted_2$5)
+          ], 10 /* CLASS, PROPS */, _hoisted_2$4)
         ]))
       }), 256 /* UNKEYED_FRAGMENT */))
     ], 2 /* CLASS */),
-    vue.createElementVNode("div", _hoisted_5$4, [
+    vue.createElementVNode("div", _hoisted_5$3, [
       (vue.unref(currentTab))
         ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(currentTab).component), vue.normalizeProps(vue.mergeProps({ key: 0 }, vue.unref(currentTab))), null, 16 /* FULL_PROPS */))
         : vue.createCommentVNode("v-if", true)
@@ -5187,12 +5420,12 @@ return (_ctx, _cache) => {
 
 };
 
-script$a.__file = "src/lib/components/ShDynamicTabs.vue";
+script$9.__file = "src/lib/components/ShDynamicTabs.vue";
 
-const _hoisted_1$7 = ["href"];
+const _hoisted_1$6 = ["href"];
 
 
-var script$9 = {
+var script$8 = {
   __name: 'ShModalBtn',
   props: {
   modalId: {
@@ -5209,18 +5442,18 @@ return (_ctx, _cache) => {
     "data-bs-toggle": "modal"
   }, [
     vue.renderSlot(_ctx.$slots, "default")
-  ], 8 /* PROPS */, _hoisted_1$7))
+  ], 8 /* PROPS */, _hoisted_1$6))
 }
 }
 
 };
 
-script$9.__file = "src/lib/components/ShModalBtn.vue";
+script$8.__file = "src/lib/components/ShModalBtn.vue";
 
-const _hoisted_1$6 = ["href"];
+const _hoisted_1$5 = ["href"];
 
 
-var script$8 = {
+var script$7 = {
   __name: 'ShCanvasBtn',
   props: {
   canvasId: {
@@ -5238,13 +5471,13 @@ return (_ctx, _cache) => {
     "data-bs-toggle": "offcanvas"
   }, [
     vue.renderSlot(_ctx.$slots, "default")
-  ], 8 /* PROPS */, _hoisted_1$6))
+  ], 8 /* PROPS */, _hoisted_1$5))
 }
 }
 
 };
 
-script$8.__file = "src/lib/components/ShCanvasBtn.vue";
+script$7.__file = "src/lib/components/ShCanvasBtn.vue";
 
 const useUserStore = pinia.defineStore('user-store', {
   state: () => ({
@@ -5343,30 +5576,30 @@ const useUserStore = pinia.defineStore('user-store', {
 });
 
 const _withScopeId$1 = n => (vue.pushScopeId("data-v-0d4fa0ac"),n=n(),vue.popScopeId(),n);
-const _hoisted_1$5 = { class: "row permissions-main d-flex" };
-const _hoisted_2$4 = {
+const _hoisted_1$4 = { class: "row permissions-main d-flex" };
+const _hoisted_2$3 = {
   id: "permissions-nav",
   class: "col-md-3 d-flex align-items-center py-4"
 };
-const _hoisted_3$4 = {
+const _hoisted_3$3 = {
   key: 0,
   class: "mx-auto"
 };
-const _hoisted_4$4 = /*#__PURE__*/ _withScopeId$1(() => /*#__PURE__*/vue.createElementVNode("span", { class: "spinner-grow mx-auto" }, null, -1 /* HOISTED */));
-const _hoisted_5$3 = [
-  _hoisted_4$4
+const _hoisted_4$3 = /*#__PURE__*/ _withScopeId$1(() => /*#__PURE__*/vue.createElementVNode("span", { class: "spinner-grow mx-auto" }, null, -1 /* HOISTED */));
+const _hoisted_5$2 = [
+  _hoisted_4$3
 ];
-const _hoisted_6$3 = {
+const _hoisted_6$2 = {
   key: 1,
   class: "d-flex flex-column w-100 px-2"
 };
-const _hoisted_7$2 = ["checked", "onClick", "disabled"];
-const _hoisted_8$2 = ["onClick"];
-const _hoisted_9$2 = {
+const _hoisted_7$1 = ["checked", "onClick", "disabled"];
+const _hoisted_8$1 = ["onClick"];
+const _hoisted_9$1 = {
   id: "permissions-content",
   class: "col-md-9 py-4 px-4"
 };
-const _hoisted_10$1 = { class: "p-2 rounded-2 bg-white h-100" };
+const _hoisted_10 = { class: "p-2 rounded-2 bg-white h-100" };
 const _hoisted_11 = {
   key: 0,
   class: "alert alert-info"
@@ -5383,7 +5616,7 @@ const _hoisted_17 = { class: "col-md-3" };
 const _hoisted_18 = /*#__PURE__*/ _withScopeId$1(() => /*#__PURE__*/vue.createElementVNode("i", { class: "bi-check" }, null, -1 /* HOISTED */));
 
 
-var script$7 = {
+var script$6 = {
   __name: 'ManagePermissions',
   emits: ['success'],
   setup(__props, { emit }) {
@@ -5487,11 +5720,11 @@ const getPermissionStyle = permission => {
 };
 
 return (_ctx, _cache) => {
-  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, [
-    vue.createElementVNode("div", _hoisted_2$4, [
+  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
+    vue.createElementVNode("div", _hoisted_2$3, [
       (loadingModules.value)
-        ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$4, _hoisted_5$3))
-        : (vue.openBlock(), vue.createElementBlock("ul", _hoisted_6$3, [
+        ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$3, _hoisted_5$2))
+        : (vue.openBlock(), vue.createElementBlock("ul", _hoisted_6$2, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(modules.value, (module) => {
               return (vue.openBlock(), vue.createElementBlock("li", {
                 class: vue.normalizeClass(selectedModule.value === module && 'active'),
@@ -5502,17 +5735,17 @@ return (_ctx, _cache) => {
                   onClick: $event => (checkAllPermissions(module)),
                   disabled: selectedModule.value !== module,
                   type: "checkbox"
-                }, null, 8 /* PROPS */, _hoisted_7$2),
+                }, null, 8 /* PROPS */, _hoisted_7$1),
                 vue.createElementVNode("label", {
                   class: "text-capitalize",
                   onClick: $event => (setModule(module))
-                }, vue.toDisplayString(module.replaceAll('_',' ')), 9 /* TEXT, PROPS */, _hoisted_8$2)
+                }, vue.toDisplayString(module.replaceAll('_',' ')), 9 /* TEXT, PROPS */, _hoisted_8$1)
               ], 2 /* CLASS */))
             }), 128 /* KEYED_FRAGMENT */))
           ]))
     ]),
-    vue.createElementVNode("div", _hoisted_9$2, [
-      vue.createElementVNode("div", _hoisted_10$1, [
+    vue.createElementVNode("div", _hoisted_9$1, [
+      vue.createElementVNode("div", _hoisted_10, [
         (loading.value)
           ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11, " loading ... "))
           : (vue.openBlock(), vue.createElementBlock("div", _hoisted_12, [
@@ -5565,13 +5798,13 @@ return (_ctx, _cache) => {
 
 };
 
-script$7.__scopeId = "data-v-0d4fa0ac";
-script$7.__file = "src/lib/components/core/Departments/department/ManagePermissions.vue";
+script$6.__scopeId = "data-v-0d4fa0ac";
+script$6.__file = "src/lib/components/core/Departments/department/ManagePermissions.vue";
 
-const _hoisted_1$4 = ["href"];
+const _hoisted_1$3 = ["href"];
 
 
-var script$6 = {
+var script$5 = {
   __name: 'ShRoutePopups',
   setup(__props) {
 
@@ -5652,13 +5885,15 @@ return (_ctx, _cache) => {
       href: '#' + vue.unref(canvasId),
       shallowRef: "canvasButton",
       class: "d-none"
-    }, "Open Modal", 8 /* PROPS */, _hoisted_1$4),
+    }, "Open Modal", 8 /* PROPS */, _hoisted_1$3),
     (popUp.value === 'modal')
       ? (vue.openBlock(), vue.createBlock(script$j, {
           key: 0,
           "modal-title": title.value,
           "modal-id": vue.unref(modalId),
-          "modal-size": size.value
+          "modal-size": size.value,
+          "data-bs-backdrop": "static",
+          "data-bs-keyboard": "false"
         }, {
           default: vue.withCtx(() => [
             (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(componentView.value)))
@@ -5686,9 +5921,9 @@ return (_ctx, _cache) => {
 
 };
 
-script$6.__file = "src/lib/components/popups/ShRoutePopups.vue";
+script$5.__file = "src/lib/components/popups/ShRoutePopups.vue";
 
-var script$5 = {
+var script$4 = {
   __name: 'ShQueryForm',
   setup(__props) {
 
@@ -5707,9 +5942,9 @@ return (_ctx, _cache) => {
 
 };
 
-script$5.__file = "src/lib/components/ShQueryForm.vue";
+script$4.__file = "src/lib/components/ShQueryForm.vue";
 
-var script$4 = {
+var script$3 = {
   __name: 'ShQueryPopups',
   setup(__props) {
 
@@ -5732,7 +5967,7 @@ vue.watch(() => route.query.popup, pop => {
   title.value = route.query.title;
   let queryComponent = route.query.comp ?? route.query.component;
   if(queryComponent && ['shqueryform','queryform'].includes(queryComponent.toLowerCase())) {
-    queryComponent = script$5;
+    queryComponent = script$4;
   }
   popupComponent.value = queryComponent;
   if (popUp.value) {
@@ -5782,9 +6017,17 @@ const initPopup = () => {
 const goBack = () => {
   if (route.matched.length) {
     let backUrl = route.path;
-    // const params = route.params
-    // Object.keys(params).map(key => backUrl = backUrl.replace(`:${key}`,params[key]))
-    router.push(backUrl);
+    const params = route.query;
+      let query = '?';
+      // console.log(params)
+    Object.keys(params).map(key => {
+        const removeKeys = ['popup','comp','component'];
+        if(!removeKeys.includes(key)) {
+            query += `${key}=${params[key]}&`;
+        }
+    });
+      console.log(query);
+    router.push(backUrl + query);
   }
 };
 
@@ -5794,6 +6037,8 @@ return (_ctx, _cache) => {
       ? (vue.openBlock(), vue.createBlock(script$j, {
           key: 0,
           "modal-title": title.value,
+          "data-bs-backdrop": "static",
+          "data-bs-keyboard": "false",
           "modal-id": vue.unref(modalId),
           "modal-size": size.value
         }, {
@@ -5823,188 +6068,7 @@ return (_ctx, _cache) => {
 
 };
 
-script$4.__file = "src/lib/components/popups/ShQueryPopups.vue";
-
-const _hoisted_1$3 = { class: "sh-range" };
-const _hoisted_2$3 = { class: "dropdown" };
-const _hoisted_3$3 = {
-  class: "form-control dropdown-toggle",
-  href: "#",
-  role: "button",
-  id: "dropdownMenuLink",
-  "data-bs-toggle": "dropdown",
-  "aria-expanded": "false"
-};
-const _hoisted_4$3 = /*#__PURE__*/vue.createElementVNode("i", { class: "bi-calendar text-dark" }, null, -1 /* HOISTED */);
-const _hoisted_5$2 = ["innerHTML"];
-const _hoisted_6$2 = {
-  class: "dropdown-menu",
-  "aria-labelledby": "dropdownMenuLink"
-};
-const _hoisted_7$1 = ["onClick"];
-const _hoisted_8$1 = { class: "border-top" };
-const _hoisted_9$1 = { class: "dropdown-item d-flex flex-column" };
-const _hoisted_10 = /*#__PURE__*/vue.createElementVNode("span", null, "Custom", -1 /* HOISTED */);
-
-
-
-var script$3 = {
-  __name: 'ShRange',
-  props: {
-  start: {
-    type: Number,
-    default: 2021
-  },
-  selected: {
-    type: String,
-    default: shRepo.getShConfig('defaultRange', 'This Month')
-  }
-},
-  emits: ['rangeSelected'],
-  setup(__props, { emit }) {
-
-const props = __props;
-
-
-
-
-
-const selectedDate = vue.ref(null);
-const rangeLabel = vue.ref(null);
-vue.ref(false);
-const customFrom = vue.ref(null);
-const customTo = vue.ref(null);
-
-const applyCustom = ()=>{
-  const date = [moment__default["default"](customFrom.value),moment__default["default"](customTo.value)];
-  setDate(date,'Custom');
-};
-
-const dates = vue.ref([
-  {
-    label: 'Today',
-    value: [moment__default["default"](), moment__default["default"]()]
-  },
-  {
-    label: '7 Days',
-    value: [moment__default["default"]().subtract(7, 'days'), moment__default["default"]()]
-  },
-  {
-    label: 'This week',
-    value: [moment__default["default"]().subtract(1, 'week').startOf('week'), moment__default["default"]().subtract(1, 'week').endOf('week')]
-  },
-  {
-    label: 'This Month',
-    value: [moment__default["default"]().startOf('month'), moment__default["default"]()]
-  },
-  {
-    label: 'Last Month',
-    value: [moment__default["default"]().subtract(1, 'month').startOf('month'), moment__default["default"]().subtract(1, 'month').endOf('month')]
-  },
-  {
-    label: 'Last 30 days',
-    value: [moment__default["default"]().subtract(30, 'days'), moment__default["default"]()]
-  },
-  {
-    label: 'Last 60 days',
-    value: [moment__default["default"]().subtract(60, 'days'), moment__default["default"]()]
-  },
-  {
-    label: 'Last 90 days',
-    value: [moment__default["default"]().subtract(90, 'days'), moment__default["default"]()]
-  },
-  {
-    label: '1 Year',
-    value: [moment__default["default"]().subtract(12, 'months'), moment__default["default"]()]
-  },
-  {
-    label: 'All Time',
-    value: [moment__default["default"]('@/2021').startOf('year'), moment__default["default"]()]
-  }
-]);
-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}`
-  });
-};
-vue.onMounted(() => {
-  let end = parseInt(moment__default["default"]().format('Y'));
-  while (end >= props.start) {
-    dates.value.push({
-      label: end,
-      value: [moment__default["default"]('@/' + end).startOf('year'), moment__default["default"]('@/' + end).endOf('year')]
-    });
-    end--;
-  }
-
-  dates.value.map(date=>{
-    (`${date.label}`.toLowerCase() === props.selected.toLowerCase()) && setDate(date.value, date.label);
-  });
-});
-
-return (_ctx, _cache) => {
-  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
-    vue.createElementVNode("div", _hoisted_2$3, [
-      vue.createElementVNode("div", _hoisted_3$3, [
-        _hoisted_4$3,
-        vue.createTextVNode(),
-        vue.createElementVNode("span", { innerHTML: rangeLabel.value }, null, 8 /* PROPS */, _hoisted_5$2)
-      ]),
-      vue.createElementVNode("ul", _hoisted_6$2, [
-        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(dates.value, (date) => {
-          return (vue.openBlock(), vue.createElementBlock("li", {
-            key: date.label,
-            onClick: $event => (setDate(date.value, date.label))
-          }, [
-            vue.createElementVNode("a", {
-              class: vue.normalizeClass(["dropdown-item", date.value === selectedDate.value ? 'active' : '']),
-              href: "#"
-            }, vue.toDisplayString(date.label), 3 /* TEXT, CLASS */)
-          ], 8 /* PROPS */, _hoisted_7$1))
-        }), 128 /* KEYED_FRAGMENT */)),
-        vue.createElementVNode("li", _hoisted_8$1, [
-          vue.createElementVNode("div", _hoisted_9$1, [
-            _hoisted_10,
-            vue.createElementVNode("div", null, [
-              vue.withDirectives(vue.createElementVNode("input", {
-                "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((customFrom).value = $event)),
-                type: "date"
-              }, null, 512 /* NEED_PATCH */), [
-                [vue.vModelText, customFrom.value]
-              ]),
-              vue.withDirectives(vue.createElementVNode("input", {
-                "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => ((customTo).value = $event)),
-                type: "date"
-              }, null, 512 /* NEED_PATCH */), [
-                [vue.vModelText, customTo.value]
-              ])
-            ]),
-            (customFrom.value && customTo.value)
-              ? (vue.openBlock(), vue.createElementBlock("button", {
-                  key: 0,
-                  class: "btn btn-sm btn-info mt-1",
-                  onClick: applyCustom
-                }, "Apply"))
-              : vue.createCommentVNode("v-if", true)
-          ])
-        ])
-      ])
-    ])
-  ]))
-}
-}
-
-};
-
-script$3.__file = "src/lib/components/ShRange.vue";
+script$3.__file = "src/lib/components/popups/ShQueryPopups.vue";
 
 const useAppStore = pinia.defineStore('sh-app',{
     state: ()=>{
@@ -6070,7 +6134,7 @@ return (_ctx, _cache) => {
           _hoisted_4$2,
           vue.createTextVNode(" ADD DEPARTMENT")
         ], 512 /* NEED_PATCH */),
-        vue.createVNode(script$c, {
+        vue.createVNode(script$b, {
           reload: vue.unref(reload),
           headers: ['id','name','description', 'created_at'],
           "end-point": "sh-departments/list",
@@ -6230,7 +6294,7 @@ return (_ctx, _cache) => {
         vue.createElementVNode("div", _hoisted_2$1, [
           _hoisted_3$1,
           vue.createElementVNode("h5", null, "Department #" + vue.toDisplayString(vue.unref(department).id) + " - " + vue.toDisplayString(vue.unref(department).name) + " Allowed Modules", 1 /* TEXT */),
-          vue.createVNode(script$c, {
+          vue.createVNode(script$b, {
             actions: {
       label: 'Actions',
       actions: [
@@ -6497,7 +6561,7 @@ const ShFrontend = {
       });
       options.router.addRoute({
         path: '/sh-departments/manage-permissions/:id',
-        component: script$7
+        component: script$6
       });
     }
     //filter unwanted config items from options to be put in local storage
@@ -6523,26 +6587,26 @@ var shGql = {
 };
 
 exports.Countries = countries;
-exports.ManagePermissions = script$7;
+exports.ManagePermissions = script$6;
 exports.ShAutoForm = script$l;
 exports.ShCanvas = script$g;
-exports.ShCanvasBtn = script$8;
+exports.ShCanvasBtn = script$7;
 exports.ShConfirmAction = script$e;
 exports.ShDropDownForm = script$k;
-exports.ShDynamicTabs = script$a;
+exports.ShDynamicTabs = script$9;
 exports.ShForm = script$s;
 exports.ShFrontend = ShFrontend;
 exports.ShModal = script$j;
-exports.ShModalBtn = script$9;
+exports.ShModalBtn = script$8;
 exports.ShModalForm = script$i;
 exports.ShModalFormAuto = script$h;
 exports.ShPhone = script$u;
-exports.ShQueryPopups = script$4;
-exports.ShRange = script$3;
-exports.ShRoutePopups = script$6;
+exports.ShQueryPopups = script$3;
+exports.ShRange = script$c;
+exports.ShRoutePopups = script$5;
 exports.ShSilentAction = script$d;
-exports.ShTable = script$c;
-exports.ShTabs = script$b;
+exports.ShTable = script$b;
+exports.ShTabs = script$a;
 exports.shApis = shApis;
 exports.shGql = shGql;
 exports.shRepo = shRepo;