@iankibetsh/shframework 1.4.2 → 1.4.4

package/dist/library.js

@@ -1874,7 +1874,7 @@ const countries = [
   }
 ];
 
-var script$n = {
+var script$o = {
   name: 'PhoneInput',
   props: ['modelValue', 'country_code'],
   data () {
@@ -1936,19 +1936,19 @@ var script$n = {
   }
 };
 
-const _hoisted_1$i = { class: "sh-phone mb-3" };
-const _hoisted_2$c = {
+const _hoisted_1$j = { class: "sh-phone mb-3" };
+const _hoisted_2$d = {
   key: 0,
   style: {"display":"contents"}
 };
-const _hoisted_3$b = ["src"];
-const _hoisted_4$b = ["value"];
+const _hoisted_3$c = ["src"];
+const _hoisted_4$c = ["value"];
 
 function render$7(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [
+  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, [
     ($data.selectedCountry)
-      ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$c, [
-          vue.createElementVNode("img", { src: $data.flag }, null, 8 /* PROPS */, _hoisted_3$b),
+      ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$d, [
+          vue.createElementVNode("img", { src: $data.flag }, null, 8 /* PROPS */, _hoisted_3$c),
           vue.createTextVNode(" " + vue.toDisplayString($data.selectedCountry.dialCode), 1 /* TEXT */)
         ]))
       : vue.createCommentVNode("v-if", true),
@@ -1961,7 +1961,7 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
         return (vue.openBlock(), vue.createElementBlock("option", {
           value: country,
           key: country.dialCode
-        }, vue.toDisplayString(country.name + '(' + country.dialCode + ')'), 9 /* TEXT, PROPS */, _hoisted_4$b))
+        }, vue.toDisplayString(country.name + '(' + country.dialCode + ')'), 9 /* TEXT, PROPS */, _hoisted_4$c))
       }), 128 /* KEYED_FRAGMENT */))
     ], 544 /* HYDRATE_EVENTS, NEED_PATCH */), [
       [vue.vModelSelect, $data.selectedCountry]
@@ -1979,10 +1979,10 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
   ]))
 }
 
-script$n.render = render$7;
-script$n.__file = "src/lib/components/form-components/PhoneInput.vue";
+script$o.render = render$7;
+script$o.__file = "src/lib/components/form-components/PhoneInput.vue";
 
-var script$m = {
+var script$n = {
   name: 'ShEditor',
   props: ['modelValue'],
   components: {
@@ -2021,7 +2021,7 @@ var script$m = {
   }
 };
 
-const _hoisted_1$h = /*#__PURE__*/vue.createElementVNode("textarea", {
+const _hoisted_1$i = /*#__PURE__*/vue.createElementVNode("textarea", {
   id: "tiny",
   style: {"display":"none"},
   "data-cy": "tinymce_editor"
@@ -2031,7 +2031,7 @@ function render$6(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_editor = vue.resolveComponent("editor");
 
   return (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-    _hoisted_1$h,
+    _hoisted_1$i,
     vue.createElementVNode("div", {
       onFocusin: _cache[1] || (_cache[1] = vue.withModifiers(() => {}, ["stop"])),
       class: "sh-editor w-100"
@@ -2056,31 +2056,31 @@ function render$6(_ctx, _cache, $props, $setup, $data, $options) {
   ], 64 /* STABLE_FRAGMENT */))
 }
 
-script$m.render = render$6;
-script$m.__file = "src/lib/components/form-components/ShEditor.vue";
+script$n.render = render$6;
+script$n.__file = "src/lib/components/form-components/ShEditor.vue";
 
-const _hoisted_1$g = {
+const _hoisted_1$h = {
   key: 0,
   class: "dropdown sh-suggest"
 };
-const _hoisted_2$b = ["id"];
-const _hoisted_3$a = { class: "badge bg-secondary m-1 sh-selected-item" };
-const _hoisted_4$a = ["onClick"];
-const _hoisted_5$8 = ["id"];
-const _hoisted_6$7 = ["id", "aria-labelledby"];
-const _hoisted_7$5 = { key: 0 };
-const _hoisted_8$3 = ["onClick"];
-const _hoisted_9$4 = {
+const _hoisted_2$c = ["id"];
+const _hoisted_3$b = { class: "badge bg-secondary m-1 sh-selected-item" };
+const _hoisted_4$b = ["onClick"];
+const _hoisted_5$9 = ["id"];
+const _hoisted_6$8 = ["id", "aria-labelledby"];
+const _hoisted_7$6 = { key: 0 };
+const _hoisted_8$4 = ["onClick"];
+const _hoisted_9$5 = {
   key: 1,
   class: "dropdown-item sh-suggest-no-results"
 };
-const _hoisted_10$3 = {
+const _hoisted_10$4 = {
   key: 2,
   class: "dropdown-item sh-suggest-no-input"
 };
 
 
-var script$l = {
+var script$m = {
   __name: 'ShSuggest',
   props: ['fillSelects','modelValue'],
   emits: ['update:modelValue'],
@@ -2161,7 +2161,7 @@ function filterData(e){
 
 return (_ctx, _cache) => {
   return (vue.unref(id))
-    ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [
+    ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
         vue.createElementVNode("div", {
           id: vue.unref(id),
           "data-bs-toggle": "dropdown",
@@ -2170,14 +2170,14 @@ return (_ctx, _cache) => {
         }, [
           vue.createElementVNode("div", null, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(selectedSuggestions), (sgt) => {
-              return (vue.openBlock(), vue.createElementBlock("h5", _hoisted_3$a, [
+              return (vue.openBlock(), vue.createElementBlock("h5", _hoisted_3$b, [
                 vue.createTextVNode(vue.toDisplayString(sgt.name) + " ", 1 /* TEXT */),
                 vue.createElementVNode("button", {
                   onClick: $event => (removeSuggestion(sgt.id)),
                   type: "button",
                   class: "btn-close border-start border-1 ms-1",
                   "aria-label": "Close"
-                }, null, 8 /* PROPS */, _hoisted_4$a)
+                }, null, 8 /* PROPS */, _hoisted_4$b)
               ]))
             }), 256 /* UNKEYED_FRAGMENT */))
           ]),
@@ -2187,8 +2187,8 @@ return (_ctx, _cache) => {
             onClick: filterData,
             onInput: filterData,
             class: "flex-fill h-100 sh-suggestion-input"
-          }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_5$8)
-        ], 8 /* PROPS */, _hoisted_2$b),
+          }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_5$9)
+        ], 8 /* PROPS */, _hoisted_2$c),
         vue.createElementVNode("ul", {
           class: "dropdown-menu w-100",
           id: 'dropwdown_section' + vue.unref(id),
@@ -2200,20 +2200,20 @@ return (_ctx, _cache) => {
                   key: suggestion.id
                 }, [
                   (suggestion.name)
-                    ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_7$5, [
+                    ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_7$6, [
                         vue.createElementVNode("a", {
                           onClick: $event => (addSuggestion(suggestion)),
                           class: vue.normalizeClass(["dropdown-item", vue.unref(selectedSuggestions).includes(suggestion) ? 'active':'']),
                           href: "#"
-                        }, vue.toDisplayString(suggestion.name ?? suggestion.text), 11 /* TEXT, CLASS, PROPS */, _hoisted_8$3)
+                        }, vue.toDisplayString(suggestion.name ?? suggestion.text), 11 /* TEXT, CLASS, PROPS */, _hoisted_8$4)
                       ]))
                     : vue.createCommentVNode("v-if", true)
                 ], 64 /* STABLE_FRAGMENT */))
               }), 128 /* KEYED_FRAGMENT */))
             : (vue.unref(searchText))
-              ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_9$4, " No results found "))
-              : (vue.openBlock(), vue.createElementBlock("li", _hoisted_10$3, " Type to search... "))
-        ], 8 /* PROPS */, _hoisted_6$7)
+              ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_9$5, " No results found "))
+              : (vue.openBlock(), vue.createElementBlock("li", _hoisted_10$4, " Type to search... "))
+        ], 8 /* PROPS */, _hoisted_6$8)
       ]))
     : vue.createCommentVNode("v-if", true)
 }
@@ -2221,16 +2221,16 @@ return (_ctx, _cache) => {
 
 };
 
-script$l.__scopeId = "data-v-71cc9569";
-script$l.__file = "src/lib/components/form-components/ShSuggest.vue";
+script$m.__scopeId = "data-v-71cc9569";
+script$m.__file = "src/lib/components/form-components/ShSuggest.vue";
 
-var script$k = {
+var script$l = {
   name: 'ShForm',
   components: {
-    PhoneInput: script$n,
-    ShSuggest: script$l,
-    ShEditor: script$m,
-    ShPhone: script$n
+    PhoneInput: script$o,
+    ShSuggest: script$m,
+    ShEditor: script$n,
+    ShPhone: script$o
   },
   props: [
       'action',
@@ -2548,23 +2548,23 @@ var script$k = {
   }
 };
 
-const _hoisted_1$f = /*#__PURE__*/vue.createElementVNode("h5", { class: "d-none" }, null, -1 /* HOISTED */);
-const _hoisted_2$a = {
+const _hoisted_1$g = /*#__PURE__*/vue.createElementVNode("h5", { class: "d-none" }, null, -1 /* HOISTED */);
+const _hoisted_2$b = {
   ref: "ShAutoForm",
   class: "sh-form"
 };
-const _hoisted_3$9 = {
+const _hoisted_3$a = {
   key: 0,
   class: "alert alert-danger alert-dismissible fade show sh-form-submission-error",
   role: "alert"
 };
-const _hoisted_4$9 = /*#__PURE__*/vue.createElementVNode("i", { class: "bi-exclamation-triangle-fill me-1" }, null, -1 /* HOISTED */);
-const _hoisted_5$7 = { key: 0 };
-const _hoisted_6$6 = { key: 1 };
-const _hoisted_7$4 = { class: "row" };
-const _hoisted_8$2 = { class: "fg-label control-label text-capitalize control-bel col-md-12 request-form-label mb-2" };
-const _hoisted_9$3 = { class: "col-md-12" };
-const _hoisted_10$2 = ["data-cy", "placeholder", "name", "onFocus", "onChange"];
+const _hoisted_4$a = /*#__PURE__*/vue.createElementVNode("i", { class: "bi-exclamation-triangle-fill me-1" }, null, -1 /* HOISTED */);
+const _hoisted_5$8 = { key: 0 };
+const _hoisted_6$7 = { key: 1 };
+const _hoisted_7$5 = { class: "row" };
+const _hoisted_8$3 = { class: "fg-label control-label text-capitalize control-bel col-md-12 request-form-label mb-2" };
+const _hoisted_9$4 = { class: "col-md-12" };
+const _hoisted_10$3 = ["data-cy", "placeholder", "name", "onFocus", "onChange"];
 const _hoisted_11$2 = ["data-cy", "placeholder", "name", "onFocus", "onUpdate:modelValue"];
 const _hoisted_12$2 = ["data-cy", "placeholder", "name", "onFocus", "onUpdate:modelValue"];
 const _hoisted_13$2 = ["data-cy", "placeholder", "name", "onFocus", "onUpdate:modelValue"];
@@ -2610,16 +2610,16 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_ShEditor = vue.resolveComponent("ShEditor");
 
   return (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-    _hoisted_1$f,
-    vue.createElementVNode("form", _hoisted_2$a, [
+    _hoisted_1$g,
+    vue.createElementVNode("form", _hoisted_2$b, [
       vue.createCommentVNode("    <div v-if=\"form_status == 1\" class=\"alert alert-info\">Processing...</div>"),
       vue.createCommentVNode("    <div v-if=\"form_status == 2\" class=\"alert alert-success\">Success</div>"),
       (_ctx.form_status == 3)
-        ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$9, [
-            _hoisted_4$9,
+        ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$a, [
+            _hoisted_4$a,
             (_ctx.errorText)
-              ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$7, vue.toDisplayString(_ctx.errorText), 1 /* TEXT */))
-              : (vue.openBlock(), vue.createElementBlock("span", _hoisted_6$6, "Unexpected Error Occurred")),
+              ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$8, vue.toDisplayString(_ctx.errorText), 1 /* TEXT */))
+              : (vue.openBlock(), vue.createElementBlock("span", _hoisted_6$7, "Unexpected Error Occurred")),
             vue.createCommentVNode("      <button @click=\"hideError\" type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button>")
           ]))
         : vue.createCommentVNode("v-if", true),
@@ -2629,14 +2629,14 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
       }, null, 512 /* NEED_PATCH */), [
         [vue.vModelText, _ctx.form_elements['id']]
       ]),
-      vue.createElementVNode("div", _hoisted_7$4, [
+      vue.createElementVNode("div", _hoisted_7$5, [
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.fields, (field) => {
           return (vue.openBlock(), vue.createElementBlock("div", {
             class: vue.normalizeClass(["form-group", 'col-md-' + $options.getColumns()]),
             key: field
           }, [
-            vue.createElementVNode("label", _hoisted_8$2, vue.toDisplayString($options.getLabel(field)), 1 /* TEXT */),
-            vue.createElementVNode("div", _hoisted_9$3, [
+            vue.createElementVNode("label", _hoisted_8$3, vue.toDisplayString($options.getLabel(field)), 1 /* TEXT */),
+            vue.createElementVNode("div", _hoisted_9$4, [
               ($options.getFieldType(field) === 'component')
                 ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.customComponent[field]), {
                     key: 0,
@@ -2661,7 +2661,7 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
                     ref: 'file_'+field,
                     onChange: $event => ($options.handleFileUpload(field)),
                     type: "file"
-                  }, null, 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_10$2))
+                  }, null, 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_10$3))
                 : vue.createCommentVNode("v-if", true),
               ($options.getFieldType(field) === 'numeric')
                 ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
@@ -2827,10 +2827,10 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
   ], 64 /* STABLE_FRAGMENT */))
 }
 
-script$k.render = render$5;
-script$k.__file = "src/lib/components/ShForm.vue";
+script$l.render = render$5;
+script$l.__file = "src/lib/components/ShForm.vue";
 
-var script$j = {
+var script$k = {
   __name: 'EmailInput',
   props: ['modelValue','label'],
   emits: ['update:modelValue','clearValidationErrors'],
@@ -2866,12 +2866,12 @@ return (_ctx, _cache) => {
 
 };
 
-script$j.__file = "src/lib/components/form-components/EmailInput.vue";
+script$k.__file = "src/lib/components/form-components/EmailInput.vue";
 
-const _hoisted_1$e = ["min", "max"];
+const _hoisted_1$f = ["min", "max"];
 
 
-var script$i = {
+var script$j = {
   __name: 'NumberInput',
   props: ['modelValue','label','min','max'],
   emits: ['update:modelValue','clearValidationErrors'],
@@ -2901,7 +2901,7 @@ return (_ctx, _cache) => {
     onChange: modelValueUpdated,
     onKeydown: modelValueUpdated,
     onUpdated: modelValueUpdated
-  }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_1$e)), [
+  }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_1$f)), [
     [vue.vModelText, inputModel.value]
   ])
 }
@@ -2909,9 +2909,9 @@ return (_ctx, _cache) => {
 
 };
 
-script$i.__file = "src/lib/components/form-components/NumberInput.vue";
+script$j.__file = "src/lib/components/form-components/NumberInput.vue";
 
-var script$h = {
+var script$i = {
   __name: 'TextInput',
   props: ['modelValue','label'],
   emits: ['update:modelValue','clearValidationErrors'],
@@ -2947,9 +2947,9 @@ return (_ctx, _cache) => {
 
 };
 
-script$h.__file = "src/lib/components/form-components/TextInput.vue";
+script$i.__file = "src/lib/components/form-components/TextInput.vue";
 
-var script$g = {
+var script$h = {
   __name: 'TextAreaInput',
   props: ['modelValue','label'],
   emits: ['update:modelValue','clearValidationErrors'],
@@ -2985,12 +2985,12 @@ return (_ctx, _cache) => {
 
 };
 
-script$g.__file = "src/lib/components/form-components/TextAreaInput.vue";
+script$h.__file = "src/lib/components/form-components/TextAreaInput.vue";
 
-const _hoisted_1$d = ["value"];
+const _hoisted_1$e = ["value"];
 
 
-var script$f = {
+var script$g = {
   __name: 'SelectInput',
   props: ['modelValue','label','data','dataUrl'],
   emits: ['update:modelValue','clearValidationErrors'],
@@ -3041,7 +3041,7 @@ return (_ctx, _cache) => {
       return (vue.openBlock(), vue.createElementBlock("option", {
         key: option.id,
         value: option.id
-      }, vue.toDisplayString(option.name), 9 /* TEXT, PROPS */, _hoisted_1$d))
+      }, vue.toDisplayString(option.name), 9 /* TEXT, PROPS */, _hoisted_1$e))
     }), 128 /* KEYED_FRAGMENT */))
   ], 544 /* HYDRATE_EVENTS, NEED_PATCH */)), [
     [vue.vModelSelect, inputModel.value]
@@ -3051,9 +3051,9 @@ return (_ctx, _cache) => {
 
 };
 
-script$f.__file = "src/lib/components/form-components/SelectInput.vue";
+script$g.__file = "src/lib/components/form-components/SelectInput.vue";
 
-var script$e = {
+var script$f = {
   __name: 'PasswordInput',
   props: ['modelValue','label'],
   emits: ['update:modelValue','clearValidationErrors'],
@@ -3089,23 +3089,23 @@ return (_ctx, _cache) => {
 
 };
 
-script$e.__file = "src/lib/components/form-components/PasswordInput.vue";
+script$f.__file = "src/lib/components/form-components/PasswordInput.vue";
 
-const _hoisted_1$c = /*#__PURE__*/vue.createElementVNode("div", null, null, -1 /* HOISTED */);
-const _hoisted_2$9 = ["innerHTML"];
-const _hoisted_3$8 = ["innerHTML"];
-const _hoisted_4$8 = ["innerHTML"];
-const _hoisted_5$6 = ["disabled"];
-const _hoisted_6$5 = {
+const _hoisted_1$d = /*#__PURE__*/vue.createElementVNode("div", null, null, -1 /* HOISTED */);
+const _hoisted_2$a = ["innerHTML"];
+const _hoisted_3$9 = ["innerHTML"];
+const _hoisted_4$9 = ["innerHTML"];
+const _hoisted_5$7 = ["disabled"];
+const _hoisted_6$6 = {
   key: 0,
   class: "spinner-border spinner-border-sm",
   role: "status",
   "aria-hidden": "true"
 };
-const _hoisted_7$3 = { key: 1 };
+const _hoisted_7$4 = { key: 1 };
 
 
-var script$d = {
+var script$e = {
   __name: 'ShAutoForm',
   props: [
     'action','successCallback','retainDataAfterSubmission',
@@ -3133,13 +3133,13 @@ const getFieldComponent = (fieldObj)=>{
   const defaultPhones = ['phone'];
   const defaultEmails = ['email'];
   const formComponents = vue.inject('formComponents');
-  const TextComponent = formComponents.text ?? script$h;
-  const TextAreaComponent = formComponents.textArea ?? script$g;
-  const EmailComponent = formComponents.email ?? script$j;
-  const PhoneComponent = formComponents.phone ?? script$n;
-  const NumberComponent = formComponents.number ?? script$i;
-  const SelectComponent = formComponents.select ?? script$f;
-  const PasswordComponent = formComponents.password ?? script$e;
+  const TextComponent = formComponents.text ?? script$i;
+  const TextAreaComponent = formComponents.textArea ?? script$h;
+  const EmailComponent = formComponents.email ?? script$k;
+  const PhoneComponent = formComponents.phone ?? script$o;
+  const NumberComponent = formComponents.number ?? script$j;
+  const SelectComponent = formComponents.select ?? script$g;
+  const PasswordComponent = formComponents.password ?? script$f;
   if(props.customComponents && props.customComponents[field]) {
     return props.customComponents[field]
   }
@@ -3151,16 +3151,16 @@ const getFieldComponent = (fieldObj)=>{
   }
   else
   if((props.textAreas && props.textAreas.includes(field)) || defaultTextareas.includes(field)){
-    return formComponents.textArea ?? script$g
+    return formComponents.textArea ?? script$h
   } else
   if((props.emails && props.emails.includes(field)) || defaultEmails.includes(field)){
-    return formComponents.email ?? script$j
+    return formComponents.email ?? script$k
   } else
   if((props.phones && props.phones.includes(field)) || defaultPhones.includes(field)){
-    return formComponents.phone ?? script$n
+    return formComponents.phone ?? script$o
   } else
   if((props.numbers && props.numbers.includes(field)) || defaultNumbers.includes(field)){
-    return formComponents.number ?? script$i
+    return formComponents.number ?? script$j
   }
   // else
   // if((props.selects && props.selects.includes(field)) || defaultSelects.includes(field)){
@@ -3169,7 +3169,7 @@ const getFieldComponent = (fieldObj)=>{
   // if((props.dates && props.dates.includes(field)) || defaultDates.includes(field)){
   //   return formComponents.date ?? DateInput
   // }
-  return formComponents.text ?? script$h
+  return formComponents.text ?? script$i
 };
 const shFormElementClasses = vue.ref(null);
 shFormElementClasses.value = vue.inject('shFormElementClasses');
@@ -3253,7 +3253,7 @@ vue.onMounted((ev)=>{
 
 return (_ctx, _cache) => {
   return (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-    _hoisted_1$c,
+    _hoisted_1$d,
     vue.createElementVNode("form", {
       ref_key: "shAutoForm",
       ref: shAutoForm,
@@ -3270,7 +3270,7 @@ return (_ctx, _cache) => {
                 key: 0,
                 class: vue.normalizeClass(getElementClass('formLabel')),
                 innerHTML: field.label
-              }, null, 10 /* CLASS, PROPS */, _hoisted_2$9))
+              }, null, 10 /* CLASS, PROPS */, _hoisted_2$a))
             : vue.createCommentVNode("v-if", true),
           (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(getFieldComponent(field)), vue.mergeProps(getComponentProps(field), {
             onClick: $event => (removeValidationError(field.field)),
@@ -3284,14 +3284,14 @@ return (_ctx, _cache) => {
                 key: 1,
                 class: vue.normalizeClass(getElementClass('formLabel')),
                 innerHTML: field.label
-              }, null, 10 /* CLASS, PROPS */, _hoisted_3$8))
+              }, null, 10 /* CLASS, PROPS */, _hoisted_3$9))
             : vue.createCommentVNode("v-if", true),
           (field.helper)
             ? (vue.openBlock(), vue.createElementBlock("div", {
                 key: 2,
                 class: vue.normalizeClass(getElementClass('helperText')),
                 innerHTML: field.helper
-              }, null, 10 /* CLASS, PROPS */, _hoisted_4$8))
+              }, null, 10 /* CLASS, PROPS */, _hoisted_4$9))
             : vue.createCommentVNode("v-if", true),
           (validationErrors.value[field.field])
             ? (vue.openBlock(), vue.createElementBlock("div", {
@@ -3312,12 +3312,12 @@ return (_ctx, _cache) => {
           class: vue.normalizeClass(getElementClass('actionBtn'))
         }, [
           (loading.value)
-            ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_6$5))
+            ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_6$6))
             : vue.createCommentVNode("v-if", true),
           (!loading.value)
-            ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_7$3, "Submit"))
+            ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_7$4, "Submit"))
             : vue.createCommentVNode("v-if", true)
-        ], 14 /* CLASS, STYLE, PROPS */, _hoisted_5$6)
+        ], 14 /* CLASS, STYLE, PROPS */, _hoisted_5$7)
       ], 2 /* CLASS */)
     ], 544 /* HYDRATE_EVENTS, NEED_PATCH */)
   ], 64 /* STABLE_FRAGMENT */))
@@ -3326,12 +3326,12 @@ return (_ctx, _cache) => {
 
 };
 
-script$d.__file = "src/lib/components/ShAutoForm.vue";
+script$e.__file = "src/lib/components/ShAutoForm.vue";
 
-const _hoisted_1$b = /*#__PURE__*/vue.createElementVNode("h5", { class: "d-none" }, "To prevent default class", -1 /* HOISTED */);
-const _hoisted_2$8 = { class: "dropdown" };
+const _hoisted_1$c = /*#__PURE__*/vue.createElementVNode("h5", { class: "d-none" }, "To prevent default class", -1 /* HOISTED */);
+const _hoisted_2$9 = { class: "dropdown" };
 
-var script$c = {
+var script$d = {
   __name: 'ShDropDownForm',
   props: ['action',
   'classes',
@@ -3361,8 +3361,8 @@ const dropdownId = 'rand' + (Math.random() + 1).toString(36).substring(2);
 
 return (_ctx, _cache) => {
   return (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-    _hoisted_1$b,
-    vue.createElementVNode("div", _hoisted_2$8, [
+    _hoisted_1$c,
+    vue.createElementVNode("div", _hoisted_2$9, [
       vue.createElementVNode("a", {
         class: vue.normalizeClass(vue.unref(btnClass)),
         href: "#",
@@ -3378,7 +3378,7 @@ return (_ctx, _cache) => {
         class: "dropdown-menu px-2 py-1",
         "aria-labelledby": dropdownId
       }, [
-        vue.createVNode(script$k, vue.normalizeProps(vue.guardReactiveProps(props)), null, 16 /* FULL_PROPS */)
+        vue.createVNode(script$l, vue.normalizeProps(vue.guardReactiveProps(props)), null, 16 /* FULL_PROPS */)
       ])
     ])
   ], 64 /* STABLE_FRAGMENT */))
@@ -3387,26 +3387,26 @@ return (_ctx, _cache) => {
 
 };
 
-script$c.__file = "src/lib/components/ShDropDownForm.vue";
+script$d.__file = "src/lib/components/ShDropDownForm.vue";
 
-var script$b = {
+var script$c = {
   name: 'ShModal',
   props: ['modalTitle', 'modalId', 'modalSize'],
   components: {
   }
 };
 
-const _hoisted_1$a = ["id"];
-const _hoisted_2$7 = { class: "modal-content" };
-const _hoisted_3$7 = { class: "modal-header" };
-const _hoisted_4$7 = { class: "modal-title" };
-const _hoisted_5$5 = /*#__PURE__*/vue.createElementVNode("button", {
+const _hoisted_1$b = ["id"];
+const _hoisted_2$8 = { class: "modal-content" };
+const _hoisted_3$8 = { class: "modal-header" };
+const _hoisted_4$8 = { class: "modal-title" };
+const _hoisted_5$6 = /*#__PURE__*/vue.createElementVNode("button", {
   class: "btn btn-danger btn-sm",
   "data-bs-dismiss": "modal",
   "data-dismiss": "modal"
 }, "×", -1 /* HOISTED */);
-const _hoisted_6$4 = { class: "modal-body" };
-const _hoisted_7$2 = { class: "section" };
+const _hoisted_6$5 = { class: "modal-body" };
+const _hoisted_7$3 = { class: "section" };
 
 function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   return (vue.openBlock(), vue.createElementBlock("div", {
@@ -3417,27 +3417,27 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
     vue.createElementVNode("div", {
       class: vue.normalizeClass(["modal-dialog", `modal-${$props.modalSize}`])
     }, [
-      vue.createElementVNode("div", _hoisted_2$7, [
-        vue.createElementVNode("div", _hoisted_3$7, [
-          vue.createElementVNode("h3", _hoisted_4$7, vue.toDisplayString($props.modalTitle), 1 /* TEXT */),
-          _hoisted_5$5
+      vue.createElementVNode("div", _hoisted_2$8, [
+        vue.createElementVNode("div", _hoisted_3$8, [
+          vue.createElementVNode("h3", _hoisted_4$8, vue.toDisplayString($props.modalTitle), 1 /* TEXT */),
+          _hoisted_5$6
         ]),
-        vue.createElementVNode("div", _hoisted_6$4, [
-          vue.createElementVNode("div", _hoisted_7$2, [
+        vue.createElementVNode("div", _hoisted_6$5, [
+          vue.createElementVNode("div", _hoisted_7$3, [
             vue.renderSlot(_ctx.$slots, "default")
           ])
         ])
       ])
     ], 2 /* CLASS */)
-  ], 8 /* PROPS */, _hoisted_1$a))
+  ], 8 /* PROPS */, _hoisted_1$b))
 }
 
-script$b.render = render$4;
-script$b.__file = "src/lib/components/ShModal.vue";
+script$c.render = render$4;
+script$c.__file = "src/lib/components/ShModal.vue";
 
-const _hoisted_1$9 = ["href"];
+const _hoisted_1$a = ["href"];
 
-var script$a = {
+var script$b = {
   __name: 'ShModalForm',
   props: ['action',
   'classes',
@@ -3476,13 +3476,13 @@ return (_ctx, _cache) => {
       "data-bs-toggle": "modal"
     }, [
       vue.renderSlot(_ctx.$slots, "default")
-    ], 10 /* CLASS, PROPS */, _hoisted_1$9),
-    vue.createVNode(script$b, {
+    ], 10 /* CLASS, PROPS */, _hoisted_1$a),
+    vue.createVNode(script$c, {
       "modal-id": modalId,
       "modal-title": __props.modalTitle
     }, {
       default: vue.withCtx(() => [
-        vue.createVNode(script$k, vue.mergeProps({ onSuccess: success }, props), null, 16 /* FULL_PROPS */)
+        vue.createVNode(script$l, vue.mergeProps({ onSuccess: success }, props), null, 16 /* FULL_PROPS */)
       ]),
       _: 1 /* STABLE */
     }, 8 /* PROPS */, ["modal-title"])
@@ -3492,9 +3492,9 @@ return (_ctx, _cache) => {
 
 };
 
-script$a.__file = "src/lib/components/ShModalForm.vue";
+script$b.__file = "src/lib/components/ShModalForm.vue";
 
-var script$9 = {
+var script$a = {
   name: 'ShCanvas',
   props: ['canvasTitle', 'canvasId', 'position','canvasSize'],
   components: {
@@ -3511,13 +3511,13 @@ var script$9 = {
   }
 };
 
-const _hoisted_1$8 = ["id"];
-const _hoisted_2$6 = { class: "offcanvas-header" };
-const _hoisted_3$6 = {
+const _hoisted_1$9 = ["id"];
+const _hoisted_2$7 = { class: "offcanvas-header" };
+const _hoisted_3$7 = {
   class: "offcanvas-title",
   id: "offcanvasScrollingLabel"
 };
-const _hoisted_4$6 = { class: "offcanvas-body" };
+const _hoisted_4$7 = { class: "offcanvas-body" };
 
 function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   return (vue.openBlock(), vue.createElementBlock("div", {
@@ -3527,8 +3527,8 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
     id: $props.canvasId,
     "aria-labelledby": "offcanvasScrollingLabel"
   }, [
-    vue.createElementVNode("div", _hoisted_2$6, [
-      vue.createElementVNode("h5", _hoisted_3$6, vue.toDisplayString($props.canvasTitle), 1 /* TEXT */),
+    vue.createElementVNode("div", _hoisted_2$7, [
+      vue.createElementVNode("h5", _hoisted_3$7, vue.toDisplayString($props.canvasTitle), 1 /* TEXT */),
       vue.createElementVNode("button", {
         type: "button",
         ref: "closecanvas",
@@ -3538,16 +3538,16 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
         "aria-label": "Close"
       }, null, 512 /* NEED_PATCH */)
     ]),
-    vue.createElementVNode("div", _hoisted_4$6, [
+    vue.createElementVNode("div", _hoisted_4$7, [
       vue.renderSlot(_ctx.$slots, "default")
     ])
-  ], 10 /* CLASS, PROPS */, _hoisted_1$8))
+  ], 10 /* CLASS, PROPS */, _hoisted_1$9))
 }
 
-script$9.render = render$3;
-script$9.__file = "src/lib/components/ShCanvas.vue";
+script$a.render = render$3;
+script$a.__file = "src/lib/components/ShCanvas.vue";
 
-var script$8 = {
+var script$9 = {
   name: 'Pagination',
   props: ['pagination_data', 'loadMore', 'hideCount', 'hideLoadMore'],
   data () {
@@ -3618,14 +3618,14 @@ var script$8 = {
   }
 };
 
-const _hoisted_1$7 = { key: 0 };
-const _hoisted_2$5 = { class: "record_count_body mb-3" };
-const _hoisted_3$5 = /*#__PURE__*/vue.createElementVNode("span", { class: "per_page_show" }, "Showing", -1 /* HOISTED */);
-const _hoisted_4$5 = /*#__PURE__*/vue.createStaticVNode("<option value=\"10\">10</option><option value=\"25\">25</option><option value=\"50\">50</option><option value=\"100\">100</option><option value=\"200\">200</option>", 5);
-const _hoisted_9$2 = [
-  _hoisted_4$5
+const _hoisted_1$8 = { key: 0 };
+const _hoisted_2$6 = { class: "record_count_body mb-3" };
+const _hoisted_3$6 = /*#__PURE__*/vue.createElementVNode("span", { class: "per_page_show" }, "Showing", -1 /* HOISTED */);
+const _hoisted_4$6 = /*#__PURE__*/vue.createStaticVNode("<option value=\"10\">10</option><option value=\"25\">25</option><option value=\"50\">50</option><option value=\"100\">100</option><option value=\"200\">200</option>", 5);
+const _hoisted_9$3 = [
+  _hoisted_4$6
 ];
-const _hoisted_10$1 = { class: "record_counts" };
+const _hoisted_10$2 = { class: "record_counts" };
 const _hoisted_11$1 = {
   key: 0,
   "aria-label": "Page navigation"
@@ -3664,18 +3664,18 @@ const _hoisted_22$1 = {
 
 function render$2(_ctx, _cache, $props, $setup, $data, $options) {
   return (!$props.loadMore)
-    ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$7, [
-        vue.createElementVNode("div", _hoisted_2$5, [
-          _hoisted_3$5,
+    ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [
+        vue.createElementVNode("div", _hoisted_2$6, [
+          _hoisted_3$6,
           vue.createTextVNode("  "),
           vue.withDirectives(vue.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))
-          }, _hoisted_9$2, 544 /* HYDRATE_EVENTS, NEED_PATCH */), [
+          }, _hoisted_9$3, 544 /* HYDRATE_EVENTS, NEED_PATCH */), [
             [vue.vModelSelect, $data.per_page]
           ]),
-          vue.createElementVNode("span", _hoisted_10$1, " of " + vue.toDisplayString($props.pagination_data.record_count) + " items", 1 /* TEXT */)
+          vue.createElementVNode("span", _hoisted_10$2, " of " + vue.toDisplayString($props.pagination_data.record_count) + " items", 1 /* TEXT */)
         ]),
         ($props.pagination_data != null)
           ? (vue.openBlock(), vue.createElementBlock("nav", _hoisted_11$1, [
@@ -3736,17 +3736,17 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
       ]))
 }
 
-script$8.render = render$2;
-script$8.__file = "src/lib/components/list_templates/Pagination.vue";
+script$9.render = render$2;
+script$9.__file = "src/lib/components/list_templates/Pagination.vue";
 
-const _hoisted_1$6 = /*#__PURE__*/vue.createElementVNode("span", {
+const _hoisted_1$7 = /*#__PURE__*/vue.createElementVNode("span", {
   class: "spinner-border spinner-border-sm me-1",
   role: "status",
   "aria-hidden": "true"
 }, null, -1 /* HOISTED */);
 
 
-var script$7 = {
+var script$8 = {
   __name: 'ShConfirmAction',
   props: {
   data: Object,
@@ -3819,7 +3819,7 @@ return (_ctx, _cache) => {
   }, [
     (processing.value)
       ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-          _hoisted_1$6,
+          _hoisted_1$7,
           vue.createElementVNode("span", null, vue.toDisplayString(__props.loadingMessage), 1 /* TEXT */)
         ], 64 /* STABLE_FRAGMENT */))
       : vue.createCommentVNode("v-if", true),
@@ -3832,15 +3832,15 @@ return (_ctx, _cache) => {
 
 };
 
-script$7.__file = "src/lib/components/ShConfirmAction.vue";
+script$8.__file = "src/lib/components/ShConfirmAction.vue";
 
-const _hoisted_1$5 = /*#__PURE__*/vue.createElementVNode("span", {
+const _hoisted_1$6 = /*#__PURE__*/vue.createElementVNode("span", {
   class: "spinner-border spinner-border-sm me-1",
   role: "status",
   "aria-hidden": "true"
 }, null, -1 /* HOISTED */);
 
-var script$6 = {
+var script$7 = {
   __name: 'ShSilentAction',
   props: {
   data: Object,
@@ -3915,7 +3915,7 @@ return (_ctx, _cache) => {
   }, [
     (processing.value)
       ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-          _hoisted_1$5,
+          _hoisted_1$6,
           vue.createElementVNode("span", null, vue.toDisplayString(__props.loadingMessage), 1 /* TEXT */)
         ], 64 /* STABLE_FRAGMENT */))
       : vue.createCommentVNode("v-if", true),
@@ -3928,9 +3928,9 @@ return (_ctx, _cache) => {
 
 };
 
-script$6.__file = "src/lib/components/ShSilentAction.vue";
+script$7.__file = "src/lib/components/ShSilentAction.vue";
 
-var script$5 = {
+var script$6 = {
   name: 'sh-table',
   props: ['endPoint', 'headers', 'pageCount', 'actions', 'hideCount', 'hideLoadMore', 'links', 'reload', 'hideSearch', 'sharedData', 'searchPlaceholder', 'event', 'displayMore', 'displayMoreBtnClass', 'moreDetailsColumns', 'moreDetailsFields', 'hasDownload', 'downloadFields', 'tableHover', 'hideIds'],
   inject: ['channel'],
@@ -4162,10 +4162,10 @@ var script$5 = {
     this.reloadData();
   },
   components: {
-    ShSilentAction: script$6,
-    ShConfirmAction: script$7,
-    ShCanvas: script$9,
-    pagination: script$8
+    ShSilentAction: script$7,
+    ShConfirmAction: script$8,
+    ShCanvas: script$a,
+    pagination: script$9
   },
   computed: {
     windowWidth: function () {
@@ -4183,26 +4183,26 @@ var script$5 = {
   }
 };
 
-const _hoisted_1$4 = { class: "auto-table mt-2" };
-const _hoisted_2$4 = {
+const _hoisted_1$5 = { class: "auto-table mt-2" };
+const _hoisted_2$5 = {
   key: 0,
   class: "col-md-4 mb-2"
 };
-const _hoisted_3$4 = ["disabled"];
-const _hoisted_4$4 = /*#__PURE__*/vue.createElementVNode("i", { class: "bi-download" }, null, -1 /* HOISTED */);
-const _hoisted_5$4 = /*#__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$5 = /*#__PURE__*/vue.createElementVNode("span", {
   class: "spinner-border spinner-border-sm",
   role: "status",
   "aria-hidden": "true"
 }, null, -1 /* HOISTED */);
-const _hoisted_6$3 = /*#__PURE__*/vue.createElementVNode("span", { class: "visually-hidden" }, "Loading...", -1 /* HOISTED */);
-const _hoisted_7$1 = {
+const _hoisted_6$4 = /*#__PURE__*/vue.createElementVNode("span", { class: "visually-hidden" }, "Loading...", -1 /* HOISTED */);
+const _hoisted_7$2 = {
   key: 1,
   class: "row"
 };
-const _hoisted_8$1 = { class: "col-12 mb-3" };
-const _hoisted_9$1 = { class: "sh-search-bar" };
-const _hoisted_10 = ["placeholder"];
+const _hoisted_8$2 = { class: "col-12 mb-3" };
+const _hoisted_9$2 = { class: "sh-search-bar" };
+const _hoisted_10$1 = ["placeholder"];
 const _hoisted_11 = {
   key: 0,
   class: "text-center"
@@ -4330,13 +4330,14 @@ const _hoisted_57 = {
   key: 2,
   class: "text-primary fw-bold"
 };
-const _hoisted_58 = ["innerHTML"];
+const _hoisted_58 = { key: 3 };
 const _hoisted_59 = ["innerHTML"];
 const _hoisted_60 = ["innerHTML"];
-const _hoisted_61 = /*#__PURE__*/vue.createElementVNode("hr", { class: "my-2" }, null, -1 /* HOISTED */);
-const _hoisted_62 = { key: 0 };
-const _hoisted_63 = ["href"];
-const _hoisted_64 = ["title", "onClick"];
+const _hoisted_61 = ["innerHTML"];
+const _hoisted_62 = /*#__PURE__*/vue.createElementVNode("hr", { class: "my-2" }, null, -1 /* HOISTED */);
+const _hoisted_63 = { key: 0 };
+const _hoisted_64 = ["href"];
+const _hoisted_65 = ["title", "onClick"];
 
 function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_router_link = vue.resolveComponent("router-link");
@@ -4345,9 +4346,9 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_pagination = vue.resolveComponent("pagination");
   const _component_sh_canvas = vue.resolveComponent("sh-canvas");
 
-  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
+  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, [
     ($props.hasDownload)
-      ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$4, [
+      ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$5, [
           vue.createElementVNode("button", {
             disabled: $data.downloading,
             class: "btn btn-warning btn-sm",
@@ -4355,27 +4356,27 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
           }, [
             (!$data.downloading)
               ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-                  _hoisted_4$4,
+                  _hoisted_4$5,
                   vue.createTextVNode(" Export ")
                 ], 64 /* STABLE_FRAGMENT */))
               : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-                  _hoisted_5$4,
-                  _hoisted_6$3
+                  _hoisted_5$5,
+                  _hoisted_6$4
                 ], 64 /* STABLE_FRAGMENT */))
-          ], 8 /* PROPS */, _hoisted_3$4)
+          ], 8 /* PROPS */, _hoisted_3$5)
         ]))
       : vue.createCommentVNode("v-if", true),
     (!$props.hideSearch)
-      ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$1, [
-          vue.createElementVNode("div", _hoisted_8$1, [
-            vue.createElementVNode("div", _hoisted_9$1, [
+      ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$2, [
+          vue.createElementVNode("div", _hoisted_8$2, [
+            vue.createElementVNode("div", _hoisted_9$2, [
               vue.withDirectives(vue.createElementVNode("input", {
                 type: "search",
                 onChange: _cache[1] || (_cache[1] = $event => ($options.reloadData(1))),
                 "onUpdate:modelValue": _cache[2] || (_cache[2] = $event => (($data.filter_value) = $event)),
                 placeholder: $props.searchPlaceholder ? $props.searchPlaceholder : 'Search',
                 class: "form-control sh-search-input"
-              }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_10), [
+              }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_10$1), [
                 [vue.vModelText, $data.filter_value]
               ])
             ])
@@ -4663,26 +4664,28 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                                       ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_56, vue.toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
                                       : ($options.getFieldType(key) === 'money')
                                         ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_57, "KES " + vue.toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
-                                        : (typeof key    === 'string')
-                                          ? (vue.openBlock(), vue.createElementBlock("span", {
-                                              key: 3,
-                                              innerHTML: record[key]
-                                            }, null, 8 /* PROPS */, _hoisted_58))
-                                          : (typeof key === 'function')
+                                        : ($options.getFieldType(key) === 'date')
+                                          ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_58, vue.toDisplayString($options.formatDate(record[key])), 1 /* TEXT */))
+                                          : (typeof key    === 'string')
                                             ? (vue.openBlock(), vue.createElementBlock("span", {
                                                 key: 4,
-                                                innerHTML: key(record, index )
+                                                innerHTML: record[key]
                                               }, null, 8 /* PROPS */, _hoisted_59))
-                                            : (vue.openBlock(), vue.createElementBlock("span", {
-                                                key: 5,
-                                                innerHTML: record[key[0]]
-                                              }, null, 8 /* PROPS */, _hoisted_60))
+                                            : (typeof key === 'function')
+                                              ? (vue.openBlock(), vue.createElementBlock("span", {
+                                                  key: 5,
+                                                  innerHTML: key(record, index )
+                                                }, null, 8 /* PROPS */, _hoisted_60))
+                                              : (vue.openBlock(), vue.createElementBlock("span", {
+                                                  key: 6,
+                                                  innerHTML: record[key[0]]
+                                                }, null, 8 /* PROPS */, _hoisted_61))
                                 ]),
-                                _hoisted_61
+                                _hoisted_62
                               ], 64 /* STABLE_FRAGMENT */))
                             }), 128 /* KEYED_FRAGMENT */)),
                             ($props.actions)
-                              ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_62, [
+                              ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_63, [
                                   (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.actions.actions, (act) => {
                                     return (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
                                       key: act.path
@@ -4705,7 +4708,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                                                             }, null, 2 /* CLASS */))
                                                           : vue.createCommentVNode("v-if", true),
                                                         vue.createTextVNode(" " + vue.toDisplayString(act.label), 1 /* TEXT */)
-                                                      ], 10 /* CLASS, PROPS */, _hoisted_63))
+                                                      ], 10 /* CLASS, PROPS */, _hoisted_64))
                                                     : (act.emits)
                                                       ? (vue.openBlock(), vue.createElementBlock("button", {
                                                           key: 1,
@@ -4720,7 +4723,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                                                               }, null, 2 /* CLASS */))
                                                             : vue.createCommentVNode("v-if", true),
                                                           vue.createTextVNode(" " + vue.toDisplayString(act.label), 1 /* TEXT */)
-                                                        ], 10 /* CLASS, PROPS */, _hoisted_64))
+                                                        ], 10 /* CLASS, PROPS */, _hoisted_65))
                                                       : (!act.emits)
                                                         ? (vue.openBlock(), vue.createBlock(_component_router_link, {
                                                             key: 2,
@@ -4795,10 +4798,10 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   ]))
 }
 
-script$5.render = render$1;
-script$5.__file = "src/lib/components/ShTable.vue";
+script$6.render = render$1;
+script$6.__file = "src/lib/components/ShTable.vue";
 
-var script$4 = {
+var script$5 = {
   name: 'ShTabs',
   props: ['tabs', 'baseUrl', 'sharedData', 'tabCounts', 'responsive','classOne','classTwo','classes'],
   data () {
@@ -4919,23 +4922,23 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   ], 64 /* STABLE_FRAGMENT */))
 }
 
-script$4.render = render;
-script$4.__file = "src/lib/components/ShTabs.vue";
+script$5.render = render;
+script$5.__file = "src/lib/components/ShTabs.vue";
 
-const _hoisted_1$3 = {
+const _hoisted_1$4 = {
   class: "nav nav-tabs",
   role: "tablist"
 };
-const _hoisted_2$3 = {
+const _hoisted_2$4 = {
   class: "nav-item",
   role: "presentation"
 };
-const _hoisted_3$3 = ["onClick"];
-const _hoisted_4$3 = /*#__PURE__*/vue.createElementVNode("i", { class: "d-none" }, null, -1 /* HOISTED */);
-const _hoisted_5$3 = { class: "sh_tab_count" };
-const _hoisted_6$2 = { class: "tab-content" };
+const _hoisted_3$4 = ["onClick"];
+const _hoisted_4$4 = /*#__PURE__*/vue.createElementVNode("i", { class: "d-none" }, null, -1 /* HOISTED */);
+const _hoisted_5$4 = { class: "sh_tab_count" };
+const _hoisted_6$3 = { class: "tab-content" };
 
-var script$3 = {
+var script$4 = {
   __name: 'ShDynamicTabs',
   props: ['tabs','data'],
   setup(__props) {
@@ -4960,9 +4963,9 @@ function setTab(tab){
 
 return (_ctx, _cache) => {
   return (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-    vue.createElementVNode("ul", _hoisted_1$3, [
+    vue.createElementVNode("ul", _hoisted_1$4, [
       (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(tabs), (tab) => {
-        return (vue.openBlock(), vue.createElementBlock("li", _hoisted_2$3, [
+        return (vue.openBlock(), vue.createElementBlock("li", _hoisted_2$4, [
           vue.createElementVNode("button", {
             onClick: $event => (setTab(tab)),
             class: vue.normalizeClass(["nav-link", vue.unref(currentTab) === tab ? 'active':''])
@@ -4970,15 +4973,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_4$3,
-                  vue.createElementVNode("sup", _hoisted_5$3, vue.toDisplayString(tab.count ?? tab.tabCount), 1 /* TEXT */)
+                  _hoisted_4$4,
+                  vue.createElementVNode("sup", _hoisted_5$4, vue.toDisplayString(tab.count ?? tab.tabCount), 1 /* TEXT */)
                 ], 64 /* STABLE_FRAGMENT */))
               : vue.createCommentVNode("v-if", true)
-          ], 10 /* CLASS, PROPS */, _hoisted_3$3)
+          ], 10 /* CLASS, PROPS */, _hoisted_3$4)
         ]))
       }), 256 /* UNKEYED_FRAGMENT */))
     ]),
-    vue.createElementVNode("div", _hoisted_6$2, [
+    vue.createElementVNode("div", _hoisted_6$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)
@@ -4989,7 +4992,7 @@ return (_ctx, _cache) => {
 
 };
 
-script$3.__file = "src/lib/components/ShDynamicTabs.vue";
+script$4.__file = "src/lib/components/ShDynamicTabs.vue";
 
 const useUserStore = pinia.defineStore('user-store', {
   state: () => ({
@@ -5087,19 +5090,19 @@ const useUserStore = pinia.defineStore('user-store', {
   }
 });
 
-const _hoisted_1$2 = /*#__PURE__*/vue.createElementVNode("h5", null, "Departments", -1 /* HOISTED */);
-const _hoisted_2$2 = { class: "card sh-departments-card shadow" };
-const _hoisted_3$2 = { class: "card-body" };
-const _hoisted_4$2 = {
+const _hoisted_1$3 = /*#__PURE__*/vue.createElementVNode("h5", null, "Departments", -1 /* HOISTED */);
+const _hoisted_2$3 = { class: "card sh-departments-card shadow" };
+const _hoisted_3$3 = { class: "card-body" };
+const _hoisted_4$3 = {
   "data-bs-toggle": "modal",
   ref: "addDeptBtn",
   href: "#sh-department_modal",
   class: "btn btn-info btn-sm"
 };
-const _hoisted_5$2 = /*#__PURE__*/vue.createElementVNode("i", { class: "fa fa-plus" }, null, -1 /* HOISTED */);
+const _hoisted_5$3 = /*#__PURE__*/vue.createElementVNode("i", { class: "fa fa-plus" }, null, -1 /* HOISTED */);
 
 
-var script$2 = {
+var script$3 = {
   __name: 'Departments',
   setup(__props) {
 
@@ -5122,14 +5125,14 @@ function departmentAdded (response) {
 
 return (_ctx, _cache) => {
   return (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-    _hoisted_1$2,
-    vue.createElementVNode("div", _hoisted_2$2, [
-      vue.createElementVNode("div", _hoisted_3$2, [
-        vue.createElementVNode("a", _hoisted_4$2, [
-          _hoisted_5$2,
+    _hoisted_1$3,
+    vue.createElementVNode("div", _hoisted_2$3, [
+      vue.createElementVNode("div", _hoisted_3$3, [
+        vue.createElementVNode("a", _hoisted_4$3, [
+          _hoisted_5$3,
           vue.createTextVNode(" ADD DEPARTMENT")
         ], 512 /* NEED_PATCH */),
-        vue.createVNode(script$5, {
+        vue.createVNode(script$6, {
           headers: ['id','name','description', 'created_at'],
           "end-point": "admin/departments/list",
           actions: {
@@ -5143,12 +5146,12 @@ return (_ctx, _cache) => {
       ]
     }
         }),
-        vue.createVNode(script$b, {
+        vue.createVNode(script$c, {
           "modal-id": "sh-department_modal",
           "modal-title": "Department Form"
         }, {
           default: vue.withCtx(() => [
-            vue.createVNode(script$k, {
+            vue.createVNode(script$l, {
               "success-callback": "departmentAdded",
               onDepartmentAdded: departmentAdded,
               action: "admin/departments/store",
@@ -5165,14 +5168,14 @@ return (_ctx, _cache) => {
 
 };
 
-script$2.__file = "src/lib/components/core/Departments/Departments.vue";
+script$3.__file = "src/lib/components/core/Departments/Departments.vue";
 
-const _hoisted_1$1 = {
+const _hoisted_1$2 = {
   key: 0,
   class: "card sh-department-view shadow"
 };
-const _hoisted_2$1 = { class: "card-body" };
-const _hoisted_3$1 = /*#__PURE__*/vue.createElementVNode("a", {
+const _hoisted_2$2 = { class: "card-body" };
+const _hoisted_3$2 = /*#__PURE__*/vue.createElementVNode("a", {
   href: "#addModule",
   class: "btn btn-info btn-sm",
   "data-bs-toggle": "modal"
@@ -5180,11 +5183,11 @@ const _hoisted_3$1 = /*#__PURE__*/vue.createElementVNode("a", {
   /*#__PURE__*/vue.createElementVNode("i", { class: "bi-plus" }),
   /*#__PURE__*/vue.createTextVNode(" ADD Module")
 ], -1 /* HOISTED */);
-const _hoisted_4$1 = { class: "text-primary text-capitalize" };
-const _hoisted_5$1 = ["value"];
-const _hoisted_6$1 = /*#__PURE__*/vue.createElementVNode("i", { class: "fa fa-save" }, null, -1 /* HOISTED */);
+const _hoisted_4$2 = { class: "text-primary text-capitalize" };
+const _hoisted_5$2 = ["value"];
+const _hoisted_6$2 = /*#__PURE__*/vue.createElementVNode("i", { class: "fa fa-save" }, null, -1 /* HOISTED */);
 
-var script$1 = {
+var script$2 = {
   __name: 'Department',
   setup(__props) {
 
@@ -5278,11 +5281,11 @@ function submitPermissions() {
 
 return (_ctx, _cache) => {
   return (vue.unref(department))
-    ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
-        vue.createElementVNode("div", _hoisted_2$1, [
-          _hoisted_3$1,
+    ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
+        vue.createElementVNode("div", _hoisted_2$2, [
+          _hoisted_3$2,
           vue.createElementVNode("h5", null, "Department #" + vue.toDisplayString(vue.unref(department).id) + " - " + vue.toDisplayString(vue.unref(department).name) + " Allowed Modules", 1 /* TEXT */),
-          vue.createVNode(script$5, {
+          vue.createVNode(script$6, {
             actions: {
       label: 'Actions',
       actions: [
@@ -5302,12 +5305,12 @@ return (_ctx, _cache) => {
             headers: ['id',showModule,'created_at'],
             "end-point": 'admin/departments/department/list-modules/' + id.value
           }, null, 8 /* PROPS */, ["actions", "reload", "headers", "end-point"]),
-          vue.createVNode(script$b, {
+          vue.createVNode(script$c, {
             "modal-id": "addModule",
             "modal-title": "Add Module Department"
           }, {
             default: vue.withCtx(() => [
-              vue.createVNode(script$k, {
+              vue.createVNode(script$l, {
                 "reload-select-items": vue.unref(reload),
                 "success-callback": moduleAdded,
                 "fill-selects": {
@@ -5329,7 +5332,7 @@ return (_ctx, _cache) => {
             ref: permissionCanvasBtn,
             "data-bs-toggle": "offcanvas"
           }, null, 512 /* NEED_PATCH */),
-          vue.createVNode(script$9, {
+          vue.createVNode(script$a, {
             "canvas-id": "permissionsCanvas",
             position: "end enlarged",
             "canvas-title": "Module Permissions"
@@ -5337,7 +5340,7 @@ return (_ctx, _cache) => {
             default: vue.withCtx(() => [
               (vue.unref(getModule))
                 ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-                    vue.createElementVNode("h5", _hoisted_4$1, "Permissions for " + vue.toDisplayString(vue.unref(getModule).module), 1 /* TEXT */),
+                    vue.createElementVNode("h5", _hoisted_4$2, "Permissions for " + vue.toDisplayString(vue.unref(getModule).module), 1 /* TEXT */),
                     (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(modulePermissions), (permission) => {
                       return (vue.openBlock(), vue.createElementBlock("div", {
                         key: permission,
@@ -5350,7 +5353,7 @@ return (_ctx, _cache) => {
                             type: "checkbox",
                             "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (vue.isRef(selectedPermissions) ? (selectedPermissions).value = $event : selectedPermissions = $event)),
                             value: permission
-                          }, null, 8 /* PROPS */, _hoisted_5$1), [
+                          }, null, 8 /* PROPS */, _hoisted_5$2), [
                             [vue.vModelCheckbox, vue.unref(selectedPermissions)]
                           ]),
                           vue.createTextVNode(" " + vue.toDisplayString(getPermissionLabel(permission)), 1 /* TEXT */)
@@ -5361,7 +5364,7 @@ return (_ctx, _cache) => {
                       onClick: submitPermissions,
                       class: "btn btn-info"
                     }, [
-                      _hoisted_6$1,
+                      _hoisted_6$2,
                       vue.createTextVNode(" Submit")
                     ])
                   ], 64 /* STABLE_FRAGMENT */))
@@ -5377,7 +5380,123 @@ return (_ctx, _cache) => {
 
 };
 
-script$1.__file = "src/lib/components/core/Departments/department/Department.vue";
+script$2.__file = "src/lib/components/core/Departments/department/Department.vue";
+
+const _hoisted_1$1 = { class: "row permissions-main d-flex" };
+const _hoisted_2$1 = {
+  id: "permissions-nav",
+  class: "col-md-2 shadow d-flex align-items-center"
+};
+const _hoisted_3$1 = /*#__PURE__*/vue.createElementVNode("input", { type: "checkbox" }, null, -1 /* HOISTED */);
+const _hoisted_4$1 = ["onClick"];
+const _hoisted_5$1 = {
+  id: "permissions-content",
+  class: "col-md-10"
+};
+const _hoisted_6$1 = {
+  key: 0,
+  class: "alert alert-info"
+};
+const _hoisted_7$1 = {
+  key: 1,
+  class: "d-flex justify-content-evenly"
+};
+const _hoisted_8$1 = { class: "col-md-3 list-group" };
+const _hoisted_9$1 = { class: "p-2 text-capitalize list-group-item pb-0 text-capitalize" };
+const _hoisted_10 = /*#__PURE__*/vue.createElementVNode("input", { type: "checkbox" }, null, -1 /* HOISTED */);
+
+var script$1 = {
+  __name: 'ManagePermissions',
+  setup(__props) {
+
+const route = vueRouter.useRoute();
+const tabs = vue.ref(null);
+vue.ref(0);
+const modules = vue.ref([]);
+const selectedModule = vue.ref('tasks');
+const modulePermissions = vue.ref(null);
+const setModule = module=>{
+  selectedModule.value = module;
+  getModulePermissions();
+};
+vue.onMounted(() => {
+  console.log(tabs.value.querySelectorAll('li'));
+  getDepartmentModules();
+});
+const getDepartmentModules = ()=>{
+  shApis.doGet(`admin/departments/department/list-modules/${route.params.id}?all=1`).then(res=>{
+    modules.value = res.data.data;
+    selectedModule.value = res.data.data[0];
+    getModulePermissions();
+  });
+};
+const loading = vue.ref(false);
+const getModulePermissions = () => {
+  loading.value = true;
+  modulePermissions.value = null;
+  shApis.doGet(`admin/departments/department/get-module-permissions/${selectedModule.value.module}`).then(res=>{
+    loading.value = false;
+    modulePermissions.value = reformatModulePermissions(res.data.permissions);
+  });
+};
+function reformatModulePermissions(mPs){
+let mpModules = {};
+  mPs.map(mp=>{
+    const arr = mp.split('.');
+    const key = arr[0];
+    if(typeof mpModules[key] == 'undefined'){
+      mpModules[key]=[];
+    }
+    mpModules[key].push(mp);
+  });
+  return mpModules
+}
+
+return (_ctx, _cache) => {
+  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
+    vue.createElementVNode("div", _hoisted_2$1, [
+      vue.createElementVNode("ul", {
+        ref_key: "tabs",
+        ref: tabs,
+        class: "d-flex flex-column w-100"
+      }, [
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(modules.value, (module) => {
+          return (vue.openBlock(), vue.createElementBlock("li", {
+            class: vue.normalizeClass(selectedModule.value.id === module.id && 'active'),
+            key: module.id
+          }, [
+            _hoisted_3$1,
+            vue.createElementVNode("label", {
+              class: "text-capitalize",
+              onClick: $event => (setModule(module))
+            }, vue.toDisplayString(module.module.replaceAll('_',' ')), 9 /* TEXT, PROPS */, _hoisted_4$1)
+          ], 2 /* CLASS */))
+        }), 128 /* KEYED_FRAGMENT */))
+      ], 512 /* NEED_PATCH */)
+    ]),
+    vue.createElementVNode("div", _hoisted_5$1, [
+      (loading.value)
+        ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$1, " loading ... "))
+        : (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$1, [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(modulePermissions.value, (permissions) => {
+              return (vue.openBlock(), vue.createElementBlock("div", _hoisted_8$1, [
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(permissions, (permission) => {
+                  return (vue.openBlock(), vue.createElementBlock("label", _hoisted_9$1, [
+                    _hoisted_10,
+                    vue.createTextVNode(" " + vue.toDisplayString(permission), 1 /* TEXT */)
+                  ]))
+                }), 256 /* UNKEYED_FRAGMENT */))
+              ]))
+            }), 256 /* UNKEYED_FRAGMENT */))
+          ]))
+    ])
+  ]))
+}
+}
+
+};
+
+script$1.__file = "src/lib/components/core/Departments/department/ManagePermissions.vue";
 
 const _withScopeId = n => (vue.pushScopeId("data-v-2911509a"),n=n(),vue.popScopeId(),n);
 const _hoisted_1 = {
@@ -5444,7 +5563,7 @@ return (_ctx, _cache) => {
     : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
         (section.value === 'login')
           ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
-              vue.createVNode(script$k, {
+              vue.createVNode(script$l, {
                 class: "sh-login-form",
                 fields: ['email','password'],
                 "action-label": "Login",
@@ -5469,7 +5588,7 @@ return (_ctx, _cache) => {
               (vue.unref(registerSubTitle))
                 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_8, vue.toDisplayString(vue.unref(registerSubTitle)), 1 /* TEXT */))
                 : vue.createCommentVNode("v-if", true),
-              vue.createVNode(script$k, {
+              vue.createVNode(script$l, {
                 class: "sh-login-form",
                 fields: vue.unref(registrationFields),
                 "action-label": "Sign Up",
@@ -5516,7 +5635,7 @@ const ShFrontend = {
     const registerTitle = options.registerTitle ?? 'Create a new account';
     const registerSubTitle = options.registerSubTitle ?? `It's quick and easy`;
     const logoutApiEndpoint = options.logoutApiEndpoint ?? `auth/logout`;
-    options.formTextInput ?? script$h;
+    options.formTextInput ?? script$i;
     const loginUrl = options.loginUrl ?? `/login`;
     const redirectLogin = options.redirectLogin ?? `/`;
     const redirectRegister = options.redirectRegister ?? `/`;
@@ -5541,10 +5660,14 @@ const ShFrontend = {
       });
       options.router.addRoute({
         path: '/sh-departments',
-        component: script$2
+        component: script$3
       });
       options.router.addRoute({
         path: '/sh-departments/permissions/:id',
+        component: script$2
+      });
+      options.router.addRoute({
+        path: '/sh-departments/manage-permissions/:id',
         component: script$1
       });
     }
@@ -5558,19 +5681,19 @@ const ShFrontend = {
 };
 
 exports.Countries = countries;
-exports.ShAutoForm = script$d;
-exports.ShCanvas = script$9;
-exports.ShConfirmAction = script$7;
-exports.ShDropDownForm = script$c;
-exports.ShDynamicTabs = script$3;
-exports.ShForm = script$k;
+exports.ShAutoForm = script$e;
+exports.ShCanvas = script$a;
+exports.ShConfirmAction = script$8;
+exports.ShDropDownForm = script$d;
+exports.ShDynamicTabs = script$4;
+exports.ShForm = script$l;
 exports.ShFrontend = ShFrontend;
-exports.ShModal = script$b;
-exports.ShModalForm = script$a;
-exports.ShPhone = script$n;
-exports.ShSilentAction = script$6;
-exports.ShTable = script$5;
-exports.ShTabs = script$4;
+exports.ShModal = script$c;
+exports.ShModalForm = script$b;
+exports.ShPhone = script$o;
+exports.ShSilentAction = script$7;
+exports.ShTable = script$6;
+exports.ShTabs = script$5;
 exports.shApis = shApis;
 exports.shRepo = shRepo;
 exports.shStorage = ShStorage;