@iankibetsh/shframework 0.7.7 → 0.7.9

package/dist/library.js

@@ -1766,15 +1766,15 @@ const _hoisted_1$a = {
 const _hoisted_2$a = ["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_5$6 = ["id"];
 const _hoisted_6$5 = ["id", "aria-labelledby"];
 const _hoisted_7$4 = { key: 0 };
 const _hoisted_8$3 = ["onClick"];
-const _hoisted_9$3 = {
+const _hoisted_9$4 = {
   key: 1,
   class: "dropdown-item sh-suggest-no-results"
 };
-const _hoisted_10$4 = {
+const _hoisted_10$3 = {
   key: 2,
   class: "dropdown-item sh-suggest-no-input"
 };
@@ -1887,7 +1887,7 @@ return (_ctx, _cache) => {
             onClick: filterData,
             onInput: filterData,
             class: "flex-fill h-100 sh-suggestion-input"
-          }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_5$8)
+          }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_5$6)
         ], 8 /* PROPS */, _hoisted_2$a),
         vue.createElementVNode("ul", {
           class: "dropdown-menu w-100",
@@ -1911,8 +1911,8 @@ return (_ctx, _cache) => {
                 ], 64 /* STABLE_FRAGMENT */))
               }), 128 /* KEYED_FRAGMENT */))
             : (vue.unref(searchText))
-              ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_9$3, " No results found "))
-              : (vue.openBlock(), vue.createElementBlock("li", _hoisted_10$4, " Type to search... "))
+              ? (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$5)
       ]))
     : vue.createCommentVNode("v-if", true)
@@ -1945,7 +1945,8 @@ var script$9 = {
       'textAreas',
       'files',
       'phones',
-      'numbers'
+      'numbers',
+      'customComponent'
   ],
   data: function () {
     return {
@@ -1987,6 +1988,9 @@ var script$9 = {
       }
     },
     getFieldType: function (field) {
+      if(this.customComponent && this.customComponent[field]){
+        return 'component'
+      }
       if(this.suggests && this.suggests.includes(field)){
         return 'suggest'
       }
@@ -2247,12 +2251,12 @@ const _hoisted_2$9 = {
 };
 const _hoisted_3$9 = /*#__PURE__*/vue.createElementVNode("i", { class: "bi-exclamation-triangle-fill me-1" }, null, -1 /* HOISTED */);
 const _hoisted_4$9 = { key: 0 };
-const _hoisted_5$7 = { key: 1 };
+const _hoisted_5$5 = { key: 1 };
 const _hoisted_6$4 = { class: "row" };
 const _hoisted_7$3 = { class: "fg-label control-label text-capitalize control-bel col-md-12 request-form-label mb-2" };
 const _hoisted_8$2 = { class: "col-md-12" };
-const _hoisted_9$2 = ["data-cy", "placeholder", "name", "onFocus", "onChange"];
-const _hoisted_10$3 = ["data-cy", "placeholder", "name", "onFocus", "onUpdate:modelValue"];
+const _hoisted_9$3 = ["data-cy", "placeholder", "name", "onFocus", "onChange"];
+const _hoisted_10$2 = ["data-cy", "placeholder", "name", "onFocus", "onUpdate:modelValue"];
 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", "name", "onFocus", "onUpdate:modelValue"];
@@ -2261,7 +2265,7 @@ const _hoisted_15$2 = ["name", "onFocus", "onUpdate:modelValue"];
 const _hoisted_16$2 = ["name", "onFocus", "onUpdate:modelValue"];
 const _hoisted_17$2 = ["value"];
 const _hoisted_18$2 = {
-  key: 11,
+  key: 12,
   class: "invalid-feedback"
 };
 const _hoisted_19$2 = {
@@ -2285,16 +2289,11 @@ const _hoisted_22$2 = [
   _hoisted_20$2,
   _hoisted_21$2
 ];
-const _hoisted_23$2 = /*#__PURE__*/vue.createElementVNode("span", {
+const _hoisted_23$1 = /*#__PURE__*/vue.createElementVNode("span", {
   class: "spinner-border spinner-border-sm",
   role: "status",
   "aria-hidden": "true"
 }, null, -1 /* HOISTED */);
-const _hoisted_24$1 = /*#__PURE__*/vue.createTextVNode(" Processing... ");
-const _hoisted_25$1 = [
-  _hoisted_23$2,
-  _hoisted_24$1
-];
 
 function render$5(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_ShPhone = vue.resolveComponent("ShPhone");
@@ -2309,18 +2308,13 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
           _hoisted_3$9,
           (_ctx.errorText)
             ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$9, vue.toDisplayString(_ctx.errorText), 1 /* TEXT */))
-            : (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$7, "Unexpected Error Occurred")),
-          vue.createElementVNode("button", {
-            onClick: _cache[0] || (_cache[0] = (...args) => ($options.hideError && $options.hideError(...args))),
-            type: "button",
-            class: "btn-close",
-            "aria-label": "Close"
-          })
+            : (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$5, "Unexpected Error Occurred")),
+          vue.createCommentVNode("      <button @click=\"hideError\" type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button>")
         ]))
       : vue.createCommentVNode("v-if", true),
     vue.withDirectives(vue.createElementVNode("input", {
       type: "hidden",
-      "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => ((_ctx.form_elements['id']) = $event))
+      "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((_ctx.form_elements['id']) = $event))
     }, null, 512 /* NEED_PATCH */), [
       [vue.vModelText, _ctx.form_elements['id']]
     ]),
@@ -2332,9 +2326,21 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
         }, [
           vue.createElementVNode("label", _hoisted_7$3, vue.toDisplayString($options.getLabel(field)), 1 /* TEXT */),
           vue.createElementVNode("div", _hoisted_8$2, [
+            ($options.getFieldType(field) === 'component')
+              ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.customComponent[field]), {
+                  key: 0,
+                  "data-cy": field,
+                  placeholder: _ctx.allPlaceHolders[field] ? _ctx.allPlaceHolders[field] : '',
+                  name: field,
+                  onFocus: $event => ($options.removeErrors(field)),
+                  class: vue.normalizeClass([_ctx.form_errors[field] == null ? ' field_' + field:'is-invalid ' + field, "form-control"]),
+                  modelValue: _ctx.form_elements[field],
+                  "onUpdate:modelValue": $event => ((_ctx.form_elements[field]) = $event)
+                }, null, 40 /* PROPS, HYDRATE_EVENTS */, ["data-cy", "placeholder", "name", "onFocus", "class", "modelValue", "onUpdate:modelValue"]))
+              : vue.createCommentVNode("v-if", true),
             ($options.getFieldType(field) === 'file')
               ? (vue.openBlock(), vue.createElementBlock("input", {
-                  key: 0,
+                  key: 1,
                   "data-cy": field,
                   placeholder: _ctx.allPlaceHolders[field] ? _ctx.allPlaceHolders[field] : '',
                   name: field,
@@ -2344,11 +2350,11 @@ 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_9$2))
+                }, null, 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_9$3))
               : vue.createCommentVNode("v-if", true),
             ($options.getFieldType(field) === 'numeric')
               ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
-                  key: 1,
+                  key: 2,
                   "data-cy": field,
                   placeholder: _ctx.allPlaceHolders[field] ? _ctx.allPlaceHolders[field] : '',
                   name: field,
@@ -2356,13 +2362,13 @@ function render$5(_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_10$3)), [
+                }, null, 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_10$2)), [
                   [vue.vModelText, _ctx.form_elements[field]]
                 ])
               : vue.createCommentVNode("v-if", true),
             ($options.getFieldType(field) === 'password')
               ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
-                  key: 2,
+                  key: 3,
                   "data-cy": field,
                   placeholder: _ctx.allPlaceHolders[field] ? _ctx.allPlaceHolders[field] : '',
                   name: field,
@@ -2376,7 +2382,7 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
               : vue.createCommentVNode("v-if", true),
             ($options.getFieldType(field) === 'email')
               ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
-                  key: 3,
+                  key: 4,
                   "data-cy": field,
                   placeholder: _ctx.allPlaceHolders[field] ? _ctx.allPlaceHolders[field] : '',
                   name: field,
@@ -2391,7 +2397,7 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
               : vue.createCommentVNode("v-if", true),
             ($options.getFieldType(field) === 'datepicker' && $options.isDisabled(field) === false)
               ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
-                  key: 4,
+                  key: 5,
                   "data-cy": field,
                   type: "datetime-local",
                   name: field,
@@ -2404,7 +2410,7 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
               : vue.createCommentVNode("v-if", true),
             ($options.getFieldType(field) === 'phone')
               ? (vue.openBlock(), vue.createBlock(_component_ShPhone, {
-                  key: 5,
+                  key: 6,
                   country_code: $props.country_code,
                   placeholder: _ctx.allPlaceHolders[field] ? _ctx.allPlaceHolders[field] : '',
                   name: field,
@@ -2417,7 +2423,7 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
               : vue.createCommentVNode("v-if", true),
             ($options.getFieldType(field) === 'suggest')
               ? (vue.openBlock(), vue.createBlock(_component_ShSuggest, {
-                  key: 6,
+                  key: 7,
                   "select-data": _ctx.selectData[field],
                   "fill-selects": $props.fillSelects[field],
                   class: vue.normalizeClass(_ctx.form_errors[field] == null ? ' field_' + field:'is-invalid ' + field),
@@ -2427,7 +2433,7 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
               : vue.createCommentVNode("v-if", true),
             ($options.getFieldType(field) === 'editor')
               ? (vue.openBlock(), vue.createBlock(_component_ShEditor, {
-                  key: 7,
+                  key: 8,
                   placeholder: _ctx.allPlaceHolders[field] ? _ctx.allPlaceHolders[field] : '',
                   name: field,
                   onFocus: $event => ($options.removeErrors(field)),
@@ -2438,7 +2444,7 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
               : vue.createCommentVNode("v-if", true),
             ($options.getFieldType(field) === 'text')
               ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
-                  key: 8,
+                  key: 9,
                   disabled: $options.isDisabled(field),
                   placeholder: field === 'phone_number' ? 'e.g 0712 345 678':'',
                   name: field,
@@ -2452,7 +2458,7 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
               : vue.createCommentVNode("v-if", true),
             ($options.getFieldType(field) === 'textarea')
               ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("textarea", {
-                  key: 9,
+                  key: 10,
                   name: field,
                   onFocus: $event => ($options.removeErrors(field)),
                   class: vue.normalizeClass([_ctx.form_errors[field] == null ? ' field_' + field:'is-invalid ' + field, "form-control"]),
@@ -2463,7 +2469,7 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
               : vue.createCommentVNode("v-if", true),
             ($options.getFieldType(field) === 'select' && _ctx.selectData[field] != null)
               ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("select", {
-                  key: 10,
+                  key: 11,
                   name: field,
                   onFocus: $event => ($options.removeErrors(field)),
                   class: vue.normalizeClass([_ctx.form_errors[field] == null ? ' field_' + field:'is-invalid ' + field, "form-control"]),
@@ -2495,13 +2501,16 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
           class: vue.normalizeClass(["btn btn-primary", $options.getSubmitBtnClass()]),
           type: "button",
           disabled: ""
-        }, _hoisted_25$1, 2 /* CLASS */))
+        }, [
+          _hoisted_23$1,
+          vue.createTextVNode(" Processing... ")
+        ], 2 /* CLASS */))
       : (vue.openBlock(), vue.createElementBlock("button", {
           key: 3,
           "data-cy": "sh_form_submit",
           class: vue.normalizeClass(["mb-2 form-submit-btn", $options.getSubmitBtnClass()]),
           type: "button",
-          onClick: _cache[2] || (_cache[2] = (...args) => ($options.submitForm && $options.submitForm(...args)))
+          onClick: _cache[1] || (_cache[1] = (...args) => ($options.submitForm && $options.submitForm(...args)))
         }, vue.toDisplayString($props.actionLabel ? $props.actionLabel:'Submit'), 3 /* TEXT, CLASS */))
   ], 512 /* NEED_PATCH */))
 }
@@ -2573,7 +2582,7 @@ const _hoisted_1$7 = ["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$6 = /*#__PURE__*/vue.createElementVNode("button", {
+const _hoisted_5$4 = /*#__PURE__*/vue.createElementVNode("button", {
   class: "btn btn-danger btn-sm",
   "data-bs-dismiss": "modal",
   "data-dismiss": "modal"
@@ -2593,7 +2602,7 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
       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$6
+          _hoisted_5$4
         ]),
         vue.createElementVNode("div", _hoisted_6$3, [
           vue.createElementVNode("div", _hoisted_7$2, [
@@ -2682,44 +2691,43 @@ var script$6 = {
 const _hoisted_1$6 = { 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.createTextVNode("  ");
-const _hoisted_5$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_10$2 = [
-  _hoisted_5$5
+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$2 = [
+  _hoisted_4$6
 ];
-const _hoisted_11$1 = { class: "record_counts" };
-const _hoisted_12$1 = {
+const _hoisted_10$1 = { class: "record_counts" };
+const _hoisted_11$1 = {
   key: 0,
   "aria-label": "Page navigation"
 };
-const _hoisted_13$1 = { class: "pagination" };
-const _hoisted_14$1 = {
+const _hoisted_12$1 = { class: "pagination" };
+const _hoisted_13$1 = {
   key: 0,
   class: "page-link"
 };
-const _hoisted_15$1 = {
+const _hoisted_14$1 = {
   key: 1,
   class: "page-link"
 };
-const _hoisted_16$1 = ["onClick"];
-const _hoisted_17$1 = { key: 1 };
-const _hoisted_18$1 = {
+const _hoisted_15$1 = ["onClick"];
+const _hoisted_16$1 = { key: 1 };
+const _hoisted_17$1 = {
   key: 0,
   class: "text-center"
 };
-const _hoisted_19$1 = /*#__PURE__*/vue.createElementVNode("div", {
+const _hoisted_18$1 = /*#__PURE__*/vue.createElementVNode("div", {
   class: "spinner-border",
   role: "status"
 }, null, -1 /* HOISTED */);
-const _hoisted_20$1 = [
-  _hoisted_19$1
+const _hoisted_19$1 = [
+  _hoisted_18$1
 ];
-const _hoisted_21$1 = {
+const _hoisted_20$1 = {
   key: 1,
   class: "text-center"
 };
-const _hoisted_22$1 = { class: "per_page_show" };
-const _hoisted_23$1 = {
+const _hoisted_21$1 = { class: "per_page_show" };
+const _hoisted_22$1 = {
   key: 2,
   class: "text-center"
 };
@@ -2729,19 +2737,19 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
     ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, [
         vue.createElementVNode("div", _hoisted_2$6, [
           _hoisted_3$6,
-          _hoisted_4$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_10$2, 544 /* HYDRATE_EVENTS, NEED_PATCH */), [
+          }, _hoisted_9$2, 544 /* HYDRATE_EVENTS, NEED_PATCH */), [
             [vue.vModelSelect, $data.per_page]
           ]),
-          vue.createElementVNode("span", _hoisted_11$1, " of " + vue.toDisplayString($props.pagination_data.record_count) + " items", 1 /* TEXT */)
+          vue.createElementVNode("span", _hoisted_10$1, " of " + vue.toDisplayString($props.pagination_data.record_count) + " items", 1 /* TEXT */)
         ]),
         ($props.pagination_data != null)
-          ? (vue.openBlock(), vue.createElementBlock("nav", _hoisted_12$1, [
-              vue.createElementVNode("ul", _hoisted_13$1, [
+          ? (vue.openBlock(), vue.createElementBlock("nav", _hoisted_11$1, [
+              vue.createElementVNode("ul", _hoisted_12$1, [
                 vue.createElementVNode("li", {
                   class: vue.normalizeClass([$options.getActivePage === 1 ? 'disabled' : '' , "page-item"])
                 }, [
@@ -2756,14 +2764,14 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
                     key: page
                   }, [
                     ($options.getActivePage === page)
-                      ? (vue.openBlock(), vue.createElementBlock("a", _hoisted_14$1, vue.toDisplayString(page), 1 /* TEXT */))
+                      ? (vue.openBlock(), vue.createElementBlock("a", _hoisted_13$1, vue.toDisplayString(page), 1 /* TEXT */))
                       : (['..','...'].includes(page))
-                        ? (vue.openBlock(), vue.createElementBlock("a", _hoisted_15$1, vue.toDisplayString(page), 1 /* TEXT */))
+                        ? (vue.openBlock(), vue.createElementBlock("a", _hoisted_14$1, vue.toDisplayString(page), 1 /* TEXT */))
                         : (vue.openBlock(), vue.createElementBlock("a", {
                             key: 2,
                             onClick: $event => ($options.changeTableKey('page',page)),
                             class: "page-link"
-                          }, vue.toDisplayString(page), 9 /* TEXT, PROPS */, _hoisted_16$1))
+                          }, vue.toDisplayString(page), 9 /* TEXT, PROPS */, _hoisted_15$1))
                   ], 2 /* CLASS */))
                 }), 128 /* KEYED_FRAGMENT */)),
                 vue.createElementVNode("li", {
@@ -2778,17 +2786,17 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
             ]))
           : vue.createCommentVNode("v-if", true)
       ]))
-    : (vue.openBlock(), vue.createElementBlock("div", _hoisted_17$1, [
+    : (vue.openBlock(), vue.createElementBlock("div", _hoisted_16$1, [
         (this.pagination_data.loading === 1)
-          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_18$1, _hoisted_20$1))
+          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_17$1, _hoisted_19$1))
           : vue.createCommentVNode("v-if", true),
         (!$props.hideCount)
-          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_21$1, [
-              vue.createElementVNode("span", _hoisted_22$1, "Showing " + vue.toDisplayString($props.pagination_data.displayCount) + " of " + vue.toDisplayString($props.pagination_data.record_count) + " items", 1 /* TEXT */)
+          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_20$1, [
+              vue.createElementVNode("span", _hoisted_21$1, "Showing " + vue.toDisplayString($props.pagination_data.displayCount) + " of " + vue.toDisplayString($props.pagination_data.record_count) + " items", 1 /* TEXT */)
             ]))
           : vue.createCommentVNode("v-if", true),
         (this.pagination_data.loading !== 1 && $props.pagination_data.displayCount < $props.pagination_data.record_count && !$props.hideLoadMore)
-          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_23$1, [
+          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_22$1, [
               vue.createElementVNode("button", {
                 class: "btn btn-sm btn-primary mt-1",
                 onClick: _cache[4] || (_cache[4] = (...args) => ($options.loadMoreRecords && $options.loadMoreRecords(...args)))
@@ -3215,71 +3223,70 @@ const _hoisted_2$5 = {
 };
 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.createTextVNode(" Export ");
-const _hoisted_6$2 = /*#__PURE__*/vue.createElementVNode("span", {
+const _hoisted_5$3 = /*#__PURE__*/vue.createElementVNode("span", {
   class: "spinner-border spinner-border-sm",
   role: "status",
   "aria-hidden": "true"
 }, null, -1 /* HOISTED */);
-const _hoisted_7$1 = /*#__PURE__*/vue.createElementVNode("span", { class: "visually-hidden" }, "Loading...", -1 /* HOISTED */);
-const _hoisted_8$1 = {
+const _hoisted_6$2 = /*#__PURE__*/vue.createElementVNode("span", { class: "visually-hidden" }, "Loading...", -1 /* HOISTED */);
+const _hoisted_7$1 = {
   key: 1,
   class: "row"
 };
-const _hoisted_9$1 = { class: "col-12 mb-3" };
-const _hoisted_10$1 = { class: "sh-search-bar" };
-const _hoisted_11 = ["placeholder"];
-const _hoisted_12 = {
+const _hoisted_8$1 = { class: "col-12 mb-3" };
+const _hoisted_9$1 = { class: "sh-search-bar" };
+const _hoisted_10 = ["placeholder"];
+const _hoisted_11 = {
   key: 0,
   class: "text-center"
 };
-const _hoisted_13 = /*#__PURE__*/vue.createElementVNode("div", {
+const _hoisted_12 = /*#__PURE__*/vue.createElementVNode("div", {
   class: "spinner-border",
   role: "status"
 }, [
   /*#__PURE__*/vue.createElementVNode("span", { class: "visually-hidden" }, "Loading...")
 ], -1 /* HOISTED */);
-const _hoisted_14 = [
-  _hoisted_13
+const _hoisted_13 = [
+  _hoisted_12
 ];
-const _hoisted_15 = {
+const _hoisted_14 = {
   key: 1,
   class: "alert alert-danger"
 };
-const _hoisted_16 = { colspan: 2 };
-const _hoisted_17 = {
+const _hoisted_15 = { colspan: 2 };
+const _hoisted_16 = {
   key: 0,
   class: "text-center"
 };
-const _hoisted_18 = /*#__PURE__*/vue.createElementVNode("div", {
+const _hoisted_17 = /*#__PURE__*/vue.createElementVNode("div", {
   class: "spinner-border",
   role: "status"
 }, [
   /*#__PURE__*/vue.createElementVNode("span", { class: "visually-hidden" }, "Loading...")
 ], -1 /* HOISTED */);
-const _hoisted_19 = [
-  _hoisted_18
+const _hoisted_18 = [
+  _hoisted_17
 ];
-const _hoisted_20 = {
+const _hoisted_19 = {
   key: 1,
   class: "alert alert-danger"
 };
-const _hoisted_21 = { colspan: 2 };
-const _hoisted_22 = { class: "sh-thead" };
+const _hoisted_20 = { colspan: 2 };
+const _hoisted_21 = { class: "sh-thead" };
+const _hoisted_22 = ["onClick"];
 const _hoisted_23 = ["onClick"];
 const _hoisted_24 = ["onClick"];
-const _hoisted_25 = ["onClick"];
-const _hoisted_26 = {
+const _hoisted_25 = {
   key: 0,
   class: "text-capitalize"
 };
-const _hoisted_27 = { class: "sh-tbody" };
-const _hoisted_28 = {
+const _hoisted_26 = { class: "sh-tbody" };
+const _hoisted_27 = {
   key: 0,
   class: "text-center"
 };
-const _hoisted_29 = ["colspan"];
-const _hoisted_30 = /*#__PURE__*/vue.createElementVNode("div", { class: "text-center" }, [
+const _hoisted_28 = ["colspan"];
+const _hoisted_29 = /*#__PURE__*/vue.createElementVNode("div", { class: "text-center" }, [
   /*#__PURE__*/vue.createElementVNode("div", {
     class: "spinner-border",
     role: "status"
@@ -3287,47 +3294,42 @@ const _hoisted_30 = /*#__PURE__*/vue.createElementVNode("div", { class: "text-ce
     /*#__PURE__*/vue.createElementVNode("span", { class: "visually-hidden" }, "Loading...")
   ])
 ], -1 /* HOISTED */);
-const _hoisted_31 = [
-  _hoisted_30
+const _hoisted_30 = [
+  _hoisted_29
 ];
-const _hoisted_32 = {
+const _hoisted_31 = {
   key: 1,
   class: "text-center alert alert-danger"
 };
-const _hoisted_33 = ["colspan"];
-const _hoisted_34 = {
+const _hoisted_32 = ["colspan"];
+const _hoisted_33 = {
   key: 2,
   class: "text-center alert alert-info no_records"
 };
-const _hoisted_35 = ["colspan"];
-const _hoisted_36 = /*#__PURE__*/vue.createElementVNode("i", { class: "bi-info-circle" }, null, -1 /* HOISTED */);
-const _hoisted_37 = /*#__PURE__*/vue.createTextVNode(" No records found ");
-const _hoisted_38 = [
-  _hoisted_36,
-  _hoisted_37
-];
-const _hoisted_39 = ["onClick"];
-const _hoisted_40 = { key: 1 };
-const _hoisted_41 = {
+const _hoisted_34 = ["colspan"];
+const _hoisted_35 = /*#__PURE__*/vue.createElementVNode("i", { class: "bi-info-circle" }, null, -1 /* HOISTED */);
+const _hoisted_36 = ["onClick"];
+const _hoisted_37 = { key: 1 };
+const _hoisted_38 = {
   key: 2,
   class: "text-success fw-bold"
 };
-const _hoisted_42 = { key: 3 };
-const _hoisted_43 = ["innerHTML"];
-const _hoisted_44 = ["innerHTML"];
-const _hoisted_45 = ["innerHTML"];
-const _hoisted_46 = {
+const _hoisted_39 = { key: 3 };
+const _hoisted_40 = ["innerHTML"];
+const _hoisted_41 = ["innerHTML"];
+const _hoisted_42 = ["innerHTML"];
+const _hoisted_43 = {
   key: 0,
   style: {"white-space":"nowrap"}
 };
-const _hoisted_47 = ["href"];
-const _hoisted_48 = ["title", "onClick"];
-const _hoisted_49 = { key: 5 };
-const _hoisted_50 = {
+const _hoisted_44 = ["href"];
+const _hoisted_45 = ["title", "onClick"];
+const _hoisted_46 = { key: 5 };
+const _hoisted_47 = {
   key: 0,
   class: "text-center"
 };
-const _hoisted_51 = /*#__PURE__*/vue.createElementVNode("div", { class: "text-center" }, [
+const _hoisted_48 = /*#__PURE__*/vue.createElementVNode("div", { class: "text-center" }, [
   /*#__PURE__*/vue.createElementVNode("div", {
     class: "spinner-border",
     role: "status"
@@ -3335,39 +3337,39 @@ const _hoisted_51 = /*#__PURE__*/vue.createElementVNode("div", { class: "text-ce
     /*#__PURE__*/vue.createElementVNode("span", { class: "visually-hidden" }, "Loading...")
   ])
 ], -1 /* HOISTED */);
-const _hoisted_52 = [
-  _hoisted_51
+const _hoisted_49 = [
+  _hoisted_48
 ];
-const _hoisted_53 = { key: 1 };
-const _hoisted_54 = {
+const _hoisted_50 = { key: 1 };
+const _hoisted_51 = {
   key: 2,
   class: "mobile-list-items"
 };
-const _hoisted_55 = ["onClick"];
-const _hoisted_56 = {
+const _hoisted_52 = ["onClick"];
+const _hoisted_53 = {
   key: 0,
   class: "mb-1 font-weight-bold text-capitalize profile-form-title"
 };
-const _hoisted_57 = {
+const _hoisted_54 = {
   key: 1,
   class: "mb-1 font-weight-bold text-capitalize profile-form-title"
 };
-const _hoisted_58 = {
+const _hoisted_55 = {
   key: 2,
   class: "mb-1 font-weight-bold text-capitalize profile-form-title"
 };
-const _hoisted_59 = { key: 1 };
-const _hoisted_60 = {
+const _hoisted_56 = { key: 1 };
+const _hoisted_57 = {
   key: 2,
   class: "text-primary fw-bold"
 };
-const _hoisted_61 = ["innerHTML"];
-const _hoisted_62 = ["innerHTML"];
-const _hoisted_63 = ["innerHTML"];
-const _hoisted_64 = /*#__PURE__*/vue.createElementVNode("hr", { class: "my-2" }, null, -1 /* HOISTED */);
-const _hoisted_65 = { key: 0 };
-const _hoisted_66 = ["href"];
-const _hoisted_67 = ["title", "onClick"];
+const _hoisted_58 = ["innerHTML"];
+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"];
 
 function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_router_link = vue.resolveComponent("router-link");
@@ -3385,26 +3387,26 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
             (!$data.downloading)
               ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
                   _hoisted_4$5,
-                  _hoisted_5$4
+                  vue.createTextVNode(" Export ")
                 ], 64 /* STABLE_FRAGMENT */))
               : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-                  _hoisted_6$2,
-                  _hoisted_7$1
+                  _hoisted_5$3,
+                  _hoisted_6$2
                 ], 64 /* STABLE_FRAGMENT */))
           ], 8 /* PROPS */, _hoisted_3$5)
         ]))
       : vue.createCommentVNode("v-if", true),
     (!$props.hideSearch)
-      ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8$1, [
-          vue.createElementVNode("div", _hoisted_9$1, [
-            vue.createElementVNode("div", _hoisted_10$1, [
+      ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$1, [
+          vue.createElementVNode("div", _hoisted_8$1, [
+            vue.createElementVNode("div", _hoisted_9$1, [
               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_11), [
+              }, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_10), [
                 [vue.vModelText, $data.filter_value]
               ])
             ])
@@ -3414,10 +3416,10 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
     ($options.hasDefaultSlot)
       ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
           ($data.loading === 'loading')
-            ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_12, _hoisted_14))
+            ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11, _hoisted_13))
             : ($data.loading === 'error')
-              ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_15, [
-                  vue.createElementVNode("span", _hoisted_16, vue.toDisplayString($data.loading_error), 1 /* TEXT */)
+              ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_14, [
+                  vue.createElementVNode("span", _hoisted_15, vue.toDisplayString($data.loading_error), 1 /* TEXT */)
                 ]))
               : vue.createCommentVNode("v-if", true),
           ($data.loading === 'done')
@@ -3433,10 +3435,10 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
     ($options.hasRecordsSlot)
       ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 3 }, [
           ($data.loading === 'loading')
-            ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_17, _hoisted_19))
+            ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_16, _hoisted_18))
             : ($data.loading === 'error')
-              ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_20, [
-                  vue.createElementVNode("span", _hoisted_21, vue.toDisplayString($data.loading_error), 1 /* TEXT */)
+              ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_19, [
+                  vue.createElementVNode("span", _hoisted_20, vue.toDisplayString($data.loading_error), 1 /* TEXT */)
                 ]))
               : vue.createCommentVNode("v-if", true),
           ($data.loading === 'done')
@@ -3451,7 +3453,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
             key: 4,
             class: vue.normalizeClass(["table sh-table", $props.tableHover ? 'table-hover':''])
           }, [
-            vue.createElementVNode("thead", _hoisted_22, [
+            vue.createElementVNode("thead", _hoisted_21, [
               vue.createElementVNode("tr", null, [
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.headers, (title) => {
                   return (vue.openBlock(), vue.createElementBlock("th", {
@@ -3462,43 +3464,46 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                           key: 0,
                           class: "text-capitalize",
                           onClick: $event => ($options.changeKey('order_by',title))
-                        }, vue.toDisplayString(title.replace(/_/g, ' ')), 9 /* TEXT, PROPS */, _hoisted_23))
+                        }, vue.toDisplayString(title.replace(/_/g, ' ')), 9 /* TEXT, PROPS */, _hoisted_22))
                       : (typeof title === 'function')
                         ? (vue.openBlock(), vue.createElementBlock("a", {
                             key: 1,
                             class: "text-capitalize",
                             onClick: $event => ($options.changeKey('order_by',title))
-                          }, vue.toDisplayString(title(null).replace(/_/g, ' ')), 9 /* TEXT, PROPS */, _hoisted_24))
+                          }, vue.toDisplayString(title(null).replace(/_/g, ' ')), 9 /* TEXT, PROPS */, _hoisted_23))
                         : (vue.openBlock(), vue.createElementBlock("a", {
                             key: 2,
                             class: "text-capitalize",
                             onClick: $event => ($options.changeKey('order_by',title[0]))
-                          }, vue.toDisplayString(title[1].replace(/_/g, ' ')), 9 /* TEXT, PROPS */, _hoisted_25))
+                          }, vue.toDisplayString(title[1].replace(/_/g, ' ')), 9 /* TEXT, PROPS */, _hoisted_24))
                   ]))
                 }), 128 /* KEYED_FRAGMENT */)),
                 ($props.actions)
-                  ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_26, vue.toDisplayString($props.actions.label), 1 /* TEXT */))
+                  ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_25, vue.toDisplayString($props.actions.label), 1 /* TEXT */))
                   : vue.createCommentVNode("v-if", true)
               ])
             ]),
-            vue.createElementVNode("tbody", _hoisted_27, [
+            vue.createElementVNode("tbody", _hoisted_26, [
               ($data.loading === 'loading')
-                ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_28, [
+                ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_27, [
                     vue.createElementVNode("td", {
                       colspan: $props.headers.length
-                    }, _hoisted_31, 8 /* PROPS */, _hoisted_29)
+                    }, _hoisted_30, 8 /* PROPS */, _hoisted_28)
                   ]))
                 : ($data.loading === 'error')
-                  ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_32, [
+                  ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_31, [
                       vue.createElementVNode("td", {
                         colspan: $props.headers.length
-                      }, vue.toDisplayString($data.loading_error), 9 /* TEXT, PROPS */, _hoisted_33)
+                      }, vue.toDisplayString($data.loading_error), 9 /* TEXT, PROPS */, _hoisted_32)
                     ]))
                   : ($data.records.length === 0)
-                    ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_34, [
+                    ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_33, [
                         vue.createElementVNode("td", {
                           colspan: $props.actions ? $props.headers.length + 1 : $props.headers.length
-                        }, _hoisted_38, 8 /* PROPS */, _hoisted_35)
+                        }, [
+                          _hoisted_35,
+                          vue.createTextVNode(" No records found ")
+                        ], 8 /* PROPS */, _hoisted_34)
                       ]))
                     : ($data.loading === 'done')
                       ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 3 }, vue.renderList($data.records, (record, index) => {
@@ -3519,29 +3524,29 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                                       innerHTML: record[key]
                                     }, null, 8 /* PROPS */, ["to", "class", "innerHTML"]))
                                   : ($options.getFieldType(key) === 'numeric')
-                                    ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_40, vue.toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
+                                    ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_37, vue.toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
                                     : ($options.getFieldType(key) === 'money')
-                                      ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_41, vue.toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
+                                      ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_38, vue.toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
                                       : ($options.getFieldType(key) === 'date')
-                                        ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_42, vue.toDisplayString($options.formatDate(record[key])), 1 /* TEXT */))
+                                        ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_39, vue.toDisplayString($options.formatDate(record[key])), 1 /* TEXT */))
                                         : (typeof key === 'string')
                                           ? (vue.openBlock(), vue.createElementBlock("span", {
                                               key: 4,
                                               innerHTML: record[key]
-                                            }, null, 8 /* PROPS */, _hoisted_43))
+                                            }, null, 8 /* PROPS */, _hoisted_40))
                                           : (typeof key === 'function')
                                             ? (vue.openBlock(), vue.createElementBlock("span", {
                                                 key: 5,
                                                 innerHTML: key(record, index)
-                                              }, null, 8 /* PROPS */, _hoisted_44))
+                                              }, null, 8 /* PROPS */, _hoisted_41))
                                             : (vue.openBlock(), vue.createElementBlock("span", {
                                                 key: 6,
                                                 innerHTML: record[key[0]]
-                                              }, null, 8 /* PROPS */, _hoisted_45))
+                                              }, null, 8 /* PROPS */, _hoisted_42))
                               ]))
                             }), 128 /* KEYED_FRAGMENT */)),
                             ($props.actions)
-                              ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_46, [
+                              ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_43, [
                                   (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.actions.actions, (act) => {
                                     return (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
                                       key: act.path
@@ -3564,7 +3569,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_47))
+                                                      ], 10 /* CLASS, PROPS */, _hoisted_44))
                                                     : (act.emits)
                                                       ? (vue.openBlock(), vue.createElementBlock("button", {
                                                           key: 1,
@@ -3579,7 +3584,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_48))
+                                                        ], 10 /* CLASS, PROPS */, _hoisted_45))
                                                       : (!act.emits)
                                                         ? (vue.openBlock(), vue.createBlock(_component_router_link, {
                                                             key: 2,
@@ -3607,20 +3612,20 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                                   }), 128 /* KEYED_FRAGMENT */))
                                 ]))
                               : vue.createCommentVNode("v-if", true)
-                          ], 10 /* CLASS, PROPS */, _hoisted_39))
+                          ], 10 /* CLASS, PROPS */, _hoisted_36))
                         }), 128 /* KEYED_FRAGMENT */))
                       : vue.createCommentVNode("v-if", true)
             ])
           ], 2 /* CLASS */))
-        : (vue.openBlock(), vue.createElementBlock("div", _hoisted_49, [
+        : (vue.openBlock(), vue.createElementBlock("div", _hoisted_46, [
             ($data.loading === 'loading')
-              ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_50, _hoisted_52))
+              ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_47, _hoisted_49))
               : ($data.loading === 'error')
-                ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_53, [
+                ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_50, [
                     vue.createElementVNode("span", null, vue.toDisplayString($data.loading_error), 1 /* TEXT */)
                   ]))
                 : ($data.loading === 'done')
-                  ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_54, [
+                  ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_51, [
                       (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($data.records, (record, index) => {
                         return (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
                           key: record.id
@@ -3635,10 +3640,10 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                                 key: key[0]
                               }, [
                                 (typeof key === 'string' )
-                                  ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_56, vue.toDisplayString(key.replace(/_/g, ' ')), 1 /* TEXT */))
+                                  ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_53, vue.toDisplayString(key.replace(/_/g, ' ')), 1 /* TEXT */))
                                   : (typeof key === 'function')
-                                    ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_57, vue.toDisplayString(key(null).replace(/_/g, ' ')), 1 /* TEXT */))
-                                    : (vue.openBlock(), vue.createElementBlock("p", _hoisted_58, vue.toDisplayString(key[1].replace(/_/g, ' ')), 1 /* TEXT */)),
+                                    ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_54, vue.toDisplayString(key(null).replace(/_/g, ' ')), 1 /* TEXT */))
+                                    : (vue.openBlock(), vue.createElementBlock("p", _hoisted_55, vue.toDisplayString(key[1].replace(/_/g, ' ')), 1 /* TEXT */)),
                                 vue.createElementVNode("span", null, [
                                   (typeof key === 'string' && $props.links && $props.links[key])
                                     ? (vue.openBlock(), vue.createBlock(_component_router_link, {
@@ -3648,29 +3653,29 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                                         innerHTML: record[key]
                                       }, null, 8 /* PROPS */, ["to", "class", "innerHTML"]))
                                     : ($options.getFieldType(key) === 'numeric')
-                                      ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_59, vue.toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
+                                      ? (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_60, "KES " + vue.toDisplayString(Intl.NumberFormat().format(record[key])), 1 /* TEXT */))
+                                        ? (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_61))
+                                            }, null, 8 /* PROPS */, _hoisted_58))
                                           : (typeof key === 'function')
                                             ? (vue.openBlock(), vue.createElementBlock("span", {
                                                 key: 4,
                                                 innerHTML: key(record, index )
-                                              }, null, 8 /* PROPS */, _hoisted_62))
+                                              }, null, 8 /* PROPS */, _hoisted_59))
                                             : (vue.openBlock(), vue.createElementBlock("span", {
                                                 key: 5,
                                                 innerHTML: record[key[0]]
-                                              }, null, 8 /* PROPS */, _hoisted_63))
+                                              }, null, 8 /* PROPS */, _hoisted_60))
                                 ]),
-                                _hoisted_64
+                                _hoisted_61
                               ], 64 /* STABLE_FRAGMENT */))
                             }), 128 /* KEYED_FRAGMENT */)),
                             ($props.actions)
-                              ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_65, [
+                              ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_62, [
                                   (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.actions.actions, (act) => {
                                     return (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
                                       key: act.path
@@ -3693,7 +3698,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_66))
+                                                      ], 10 /* CLASS, PROPS */, _hoisted_63))
                                                     : (act.emits)
                                                       ? (vue.openBlock(), vue.createElementBlock("button", {
                                                           key: 1,
@@ -3708,7 +3713,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_67))
+                                                        ], 10 /* CLASS, PROPS */, _hoisted_64))
                                                       : (!act.emits)
                                                         ? (vue.openBlock(), vue.createBlock(_component_router_link, {
                                                             key: 2,
@@ -3736,7 +3741,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                                   }), 128 /* KEYED_FRAGMENT */))
                                 ]))
                               : vue.createCommentVNode("v-if", true)
-                          ], 8 /* PROPS */, _hoisted_55)
+                          ], 8 /* PROPS */, _hoisted_52)
                         ], 64 /* STABLE_FRAGMENT */))
                       }), 128 /* KEYED_FRAGMENT */))
                     ]))
@@ -3875,7 +3880,7 @@ const _hoisted_1$4 = {
 const _hoisted_2$4 = ["data-bs-target"];
 const _hoisted_3$4 = /*#__PURE__*/vue.createElementVNode("i", { class: "bi-chevron-right float-end" }, null, -1 /* HOISTED */);
 const _hoisted_4$4 = ["id"];
-const _hoisted_5$3 = { class: "tab-content" };
+const _hoisted_5$2 = { class: "tab-content" };
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_router_link = vue.resolveComponent("router-link");
@@ -3929,7 +3934,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           ], 10 /* CLASS, PROPS */, _hoisted_4$4)
         ]))
       : vue.createCommentVNode("v-if", true),
-    vue.createElementVNode("div", _hoisted_5$3, [
+    vue.createElementVNode("div", _hoisted_5$2, [
       vue.createVNode(_component_router_view, {
         currentTab: $data.currentTab,
         sharedData: $props.sharedData,
@@ -4085,19 +4090,15 @@ const useUserStore = pinia.defineStore('user-store', {
   }
 });
 
-const _hoisted_1$2 = /*#__PURE__*/vue.createElementVNode("h5", null, "Departments", -1 /* HOISTED */);
-const _hoisted_2$2 = {
+const _hoisted_1$2 = { class: "card sh-departments-card shadow" };
+const _hoisted_2$2 = { class: "card-body" };
+const _hoisted_3$2 = {
   "data-bs-toggle": "modal",
   ref: "addDeptBtn",
   href: "#sh-department_modal",
   class: "btn btn-info btn-sm"
 };
-const _hoisted_3$2 = /*#__PURE__*/vue.createElementVNode("i", { class: "fa fa-plus" }, null, -1 /* HOISTED */);
-const _hoisted_4$2 = /*#__PURE__*/vue.createTextVNode(" ADD DEPARTMENT");
-const _hoisted_5$2 = [
-  _hoisted_3$2,
-  _hoisted_4$2
-];
+const _hoisted_4$2 = /*#__PURE__*/vue.createElementVNode("i", { class: "fa fa-plus" }, null, -1 /* HOISTED */);
 
 
 var script$2 = {
@@ -4123,12 +4124,19 @@ function departmentAdded (response) {
 
 return (_ctx, _cache) => {
   return (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-    _hoisted_1$2,
-    vue.createElementVNode("a", _hoisted_2$2, _hoisted_5$2, 512 /* NEED_PATCH */),
-    vue.createVNode(script$5, {
-      headers: ['id','name','description', 'created_at'],
-      "end-point": "admin/departments/list",
-      actions: {
+    (vue.openBlock(), vue.createBlock(vue.Teleport, { to: ".system-title" }, [
+      vue.createTextVNode("Departments")
+    ])),
+    vue.createElementVNode("div", _hoisted_1$2, [
+      vue.createElementVNode("div", _hoisted_2$2, [
+        vue.createElementVNode("a", _hoisted_3$2, [
+          _hoisted_4$2,
+          vue.createTextVNode(" ADD DEPARTMENT")
+        ], 512 /* NEED_PATCH */),
+        vue.createVNode(script$5, {
+          headers: ['id','name','description', 'created_at'],
+          "end-point": "admin/departments/list",
+          actions: {
       label: 'Action',
       actions: [
         {
@@ -4138,21 +4146,23 @@ return (_ctx, _cache) => {
         }
       ]
     }
-    }),
-    vue.createVNode(script$7, {
-      "modal-id": "sh-department_modal",
-      "modal-title": "Department Form"
-    }, {
-      default: vue.withCtx(() => [
-        vue.createVNode(script$9, {
-          "success-callback": "departmentAdded",
-          onDepartmentAdded: departmentAdded,
-          action: "admin/departments/store",
-          fields: ['name','description']
+        }),
+        vue.createVNode(script$7, {
+          "modal-id": "sh-department_modal",
+          "modal-title": "Department Form"
+        }, {
+          default: vue.withCtx(() => [
+            vue.createVNode(script$9, {
+              "success-callback": "departmentAdded",
+              onDepartmentAdded: departmentAdded,
+              action: "admin/departments/store",
+              fields: ['name','description']
+            })
+          ]),
+          _: 1 /* STABLE */
         })
-      ]),
-      _: 1 /* STABLE */
-    })
+      ])
+    ])
   ], 64 /* STABLE_FRAGMENT */))
 }
 }
@@ -4161,7 +4171,12 @@ return (_ctx, _cache) => {
 
 script$2.__file = "src/lib/components/core/Departments/Departments.vue";
 
-const _hoisted_1$1 = /*#__PURE__*/vue.createElementVNode("a", {
+const _hoisted_1$1 = {
+  key: 0,
+  class: "card sh-department-view shadow"
+};
+const _hoisted_2$1 = { class: "card-body" };
+const _hoisted_3$1 = /*#__PURE__*/vue.createElementVNode("a", {
   href: "#addModule",
   class: "btn btn-info btn-sm",
   "data-bs-toggle": "modal"
@@ -4169,14 +4184,9 @@ const _hoisted_1$1 = /*#__PURE__*/vue.createElementVNode("a", {
   /*#__PURE__*/vue.createElementVNode("i", { class: "bi-plus" }),
   /*#__PURE__*/vue.createTextVNode(" ADD Module")
 ], -1 /* HOISTED */);
-const _hoisted_2$1 = { class: "text-primary text-capitalize" };
-const _hoisted_3$1 = ["value"];
-const _hoisted_4$1 = /*#__PURE__*/vue.createElementVNode("i", { class: "fa fa-save" }, null, -1 /* HOISTED */);
-const _hoisted_5$1 = /*#__PURE__*/vue.createTextVNode(" Submit");
-const _hoisted_6$1 = [
-  _hoisted_4$1,
-  _hoisted_5$1
-];
+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 */);
 
 var script$1 = {
   __name: 'Department',
@@ -4270,11 +4280,14 @@ function submitPermissions() {
 
 return (_ctx, _cache) => {
   return (vue.unref(department))
-    ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-        _hoisted_1$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$5, {
-          actions: {
+    ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
+        vue.createElementVNode("div", _hoisted_2$1, [
+          _hoisted_3$1,
+          (vue.openBlock(), vue.createBlock(vue.Teleport, { to: ".system-title" }, [
+            vue.createTextVNode("Department #" + vue.toDisplayString(vue.unref(department).id) + " - " + vue.toDisplayString(vue.unref(department).name) + " Allowed Modules", 1 /* TEXT */)
+          ])),
+          vue.createVNode(script$5, {
+            actions: {
       label: 'Actions',
       actions: [
         {
@@ -4289,75 +4302,79 @@ return (_ctx, _cache) => {
         }
       ]
     },
-          reload: vue.unref(reload),
-          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$7, {
-          "modal-id": "addModule",
-          "modal-title": "Add Module Department"
-        }, {
-          default: vue.withCtx(() => [
-            vue.createVNode(script$9, {
-              "reload-select-items": vue.unref(reload),
-              "success-callback": moduleAdded,
-              "fill-selects": {
+            reload: vue.unref(reload),
+            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$7, {
+            "modal-id": "addModule",
+            "modal-title": "Add Module Department"
+          }, {
+            default: vue.withCtx(() => [
+              vue.createVNode(script$9, {
+                "reload-select-items": vue.unref(reload),
+                "success-callback": moduleAdded,
+                "fill-selects": {
         permission_module: {
           url: 'admin/departments/department/list-pending-modules/' + id.value,
           suggests: true
         }
       },
-              fields: ['permission_module'],
-              action: 'admin/departments/department/add-module/' + id.value
-            }, null, 8 /* PROPS */, ["reload-select-items", "fill-selects", "action"])
-          ]),
-          _: 1 /* STABLE */
-        }),
-        vue.createElementVNode("a", {
-          href: "#permissionsCanvas",
-          class: "d-none",
-          ref_key: "permissionCanvasBtn",
-          ref: permissionCanvasBtn,
-          "data-bs-toggle": "offcanvas"
-        }, null, 512 /* NEED_PATCH */),
-        vue.createVNode(script$8, {
-          "canvas-id": "permissionsCanvas",
-          position: "end enlarged",
-          "canvas-title": "Module Permissions"
-        }, {
-          default: vue.withCtx(() => [
-            (vue.unref(getModule))
-              ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-                  vue.createElementVNode("h5", _hoisted_2$1, "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,
-                      class: "list-group p-0"
-                    }, [
-                      vue.createElementVNode("label", {
-                        class: vue.normalizeClass(["list-group-item pb-0 text-capitalize", 'ms-' + getPermissionLeft(permission)])
+                fields: ['permission_module'],
+                action: 'admin/departments/department/add-module/' + id.value
+              }, null, 8 /* PROPS */, ["reload-select-items", "fill-selects", "action"])
+            ]),
+            _: 1 /* STABLE */
+          }),
+          vue.createElementVNode("a", {
+            href: "#permissionsCanvas",
+            class: "d-none",
+            ref_key: "permissionCanvasBtn",
+            ref: permissionCanvasBtn,
+            "data-bs-toggle": "offcanvas"
+          }, null, 512 /* NEED_PATCH */),
+          vue.createVNode(script$8, {
+            "canvas-id": "permissionsCanvas",
+            position: "end enlarged",
+            "canvas-title": "Module Permissions"
+          }, {
+            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.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(modulePermissions), (permission) => {
+                      return (vue.openBlock(), vue.createElementBlock("div", {
+                        key: permission,
+                        class: "list-group p-0"
                       }, [
-                        vue.withDirectives(vue.createElementVNode("input", {
-                          type: "checkbox",
-                          "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (vue.isRef(selectedPermissions) ? (selectedPermissions).value = $event : selectedPermissions = $event)),
-                          value: permission
-                        }, null, 8 /* PROPS */, _hoisted_3$1), [
-                          [vue.vModelCheckbox, vue.unref(selectedPermissions)]
-                        ]),
-                        vue.createTextVNode(" " + vue.toDisplayString(getPermissionLabel(permission)), 1 /* TEXT */)
-                      ], 2 /* CLASS */)
-                    ]))
-                  }), 128 /* KEYED_FRAGMENT */)),
-                  vue.createElementVNode("button", {
-                    onClick: submitPermissions,
-                    class: "btn btn-info"
-                  }, _hoisted_6$1)
-                ], 64 /* STABLE_FRAGMENT */))
-              : vue.createCommentVNode("v-if", true)
-          ]),
-          _: 1 /* STABLE */
-        })
-      ], 64 /* STABLE_FRAGMENT */))
+                        vue.createElementVNode("label", {
+                          class: vue.normalizeClass(["list-group-item pb-0 text-capitalize", 'ms-' + getPermissionLeft(permission)])
+                        }, [
+                          vue.withDirectives(vue.createElementVNode("input", {
+                            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), [
+                            [vue.vModelCheckbox, vue.unref(selectedPermissions)]
+                          ]),
+                          vue.createTextVNode(" " + vue.toDisplayString(getPermissionLabel(permission)), 1 /* TEXT */)
+                        ], 2 /* CLASS */)
+                      ]))
+                    }), 128 /* KEYED_FRAGMENT */)),
+                    vue.createElementVNode("button", {
+                      onClick: submitPermissions,
+                      class: "btn btn-info"
+                    }, [
+                      _hoisted_6$1,
+                      vue.createTextVNode(" Submit")
+                    ])
+                  ], 64 /* STABLE_FRAGMENT */))
+                : vue.createCommentVNode("v-if", true)
+            ]),
+            _: 1 /* STABLE */
+          })
+        ])
+      ]))
     : vue.createCommentVNode("v-if", true)
 }
 }
@@ -4371,27 +4388,26 @@ const _hoisted_1 = {
   key: 0,
   class: "alert alert-info"
 };
-const _hoisted_2 = /*#__PURE__*/vue.createTextVNode("You are signed is as ");
-const _hoisted_3 = {
+const _hoisted_2 = {
   key: 0,
   class: "sh-login-section"
 };
-const _hoisted_4 = { class: "sh-auth-footer" };
-const _hoisted_5 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/vue.createElementVNode("strong", { class: "sh-forgot-link text-primary" }, "Forgotten password?", -1 /* HOISTED */));
-const _hoisted_6 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/vue.createElementVNode("strong", { class: "bi-dot" }, null, -1 /* HOISTED */));
-const _hoisted_7 = {
+const _hoisted_3 = { class: "sh-auth-footer" };
+const _hoisted_4 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/vue.createElementVNode("strong", { class: "sh-forgot-link text-primary" }, "Forgotten password?", -1 /* HOISTED */));
+const _hoisted_5 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/vue.createElementVNode("strong", { class: "bi-dot" }, null, -1 /* HOISTED */));
+const _hoisted_6 = {
   key: 1,
   class: "sh-register-section"
 };
-const _hoisted_8 = {
+const _hoisted_7 = {
   key: 0,
   class: "sh-register-title"
 };
-const _hoisted_9 = {
+const _hoisted_8 = {
   key: 1,
   class: "sh-register-link"
 };
-const _hoisted_10 = { class: "sh-auth-footer" };
+const _hoisted_9 = { class: "sh-auth-footer" };
 
 var script = {
   __name: 'ShAuth',
@@ -4426,12 +4442,12 @@ function loginSuccessful(res){
 return (_ctx, _cache) => {
   return (vue.unref(user))
     ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-        _hoisted_2,
+        vue.createTextVNode("You are signed is as "),
         vue.createElementVNode("strong", null, vue.toDisplayString(vue.unref(user).name), 1 /* TEXT */)
       ]))
     : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
         (section.value === 'login')
-          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
+          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
               vue.createVNode(script$9, {
                 class: "sh-login-form",
                 fields: ['email','password'],
@@ -4439,9 +4455,9 @@ return (_ctx, _cache) => {
                 action: vue.unref(loginEndpoint),
                 "success-callback": loginSuccessful
               }, null, 8 /* PROPS */, ["action"]),
-              vue.createElementVNode("div", _hoisted_4, [
+              vue.createElementVNode("div", _hoisted_3, [
+                _hoisted_4,
                 _hoisted_5,
-                _hoisted_6,
                 vue.createElementVNode("strong", {
                   onClick: _cache[0] || (_cache[0] = $event => (goToSection('register'))),
                   class: "sh-register-link text-primary"
@@ -4450,12 +4466,12 @@ return (_ctx, _cache) => {
             ]))
           : vue.createCommentVNode("v-if", true),
         (section.value === 'register')
-          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [
+          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [
               (vue.unref(registerTitle))
-                ? (vue.openBlock(), vue.createElementBlock("h3", _hoisted_8, vue.toDisplayString(vue.unref(registerTitle)), 1 /* TEXT */))
+                ? (vue.openBlock(), vue.createElementBlock("h3", _hoisted_7, vue.toDisplayString(vue.unref(registerTitle)), 1 /* TEXT */))
                 : vue.createCommentVNode("v-if", true),
               (vue.unref(registerSubTitle))
-                ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_9, vue.toDisplayString(vue.unref(registerSubTitle)), 1 /* TEXT */))
+                ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_8, vue.toDisplayString(vue.unref(registerSubTitle)), 1 /* TEXT */))
                 : vue.createCommentVNode("v-if", true),
               vue.createVNode(script$9, {
                 class: "sh-login-form",
@@ -4464,7 +4480,7 @@ return (_ctx, _cache) => {
                 action: vue.unref(registerEndpoint),
                 "success-callback": loginSuccessful
               }, null, 8 /* PROPS */, ["fields", "action"]),
-              vue.createElementVNode("div", _hoisted_10, [
+              vue.createElementVNode("div", _hoisted_9, [
                 vue.createElementVNode("strong", {
                   onClick: _cache[1] || (_cache[1] = $event => (goToSection('login'))),
                   class: "sh-register-link text-primary"