{"version":3,"sources":["webpack:///./src/views/admin/UsageDashboard.vue?02e5","webpack:///./src/views/admin/UsageDashboard.vue?7ad1","webpack:///src/views/admin/UsageDashboard.vue","webpack:///./src/views/admin/UsageDashboard.vue?084c","webpack:///./src/views/admin/UsageDashboard.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","attrs","isLoading","loaderColor","loaderBackgroundColor","on","$event","_v","_s","totalWorkflows","toLocaleString","style","backgroundColor","totalForms","totalFolders","totalUsers","usedStoragePercentage","_e","storageUsed","storageAllocated","totalDocuments","activeUsersPercentage","activeUsers","model","value","callback","$$v","fromDate","expression","toDate","transactionsData","labels","staticRenderFns","name","components","Loading","data","totalFoldersAndSubfolders","computed","dateData","hasTransactionData","watch","created","stats","methods","changeLabel","getTransactionData","payload","throughDate","searchOnMajorOnly","results","getYesterday","today","setStatDetails","component"],"mappings":"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AAiB,WAAapC,EAAIqC,OAAO,WAAa,MAAM,UAAY,mBAAmB,MAAM,IAC/3IC,EAAkB,G,6GC4KP,GACfC,sBACAC,YACAC,aAEAC,gBACA,OACAf,wBACAC,cACAK,YACAzB,aACA6B,UACA3B,6BACAD,mBACAgB,mBACAD,cACAW,UACAT,iBACAN,eACAuB,4BACAxB,aACAE,aACAN,iBACAqB,oBACAd,0BAGAsB,UACAC,oBAAA,wDACAC,8BAAA,8DAEAC,OACAF,oBAAA,4BAEAG,mBAAA,0JAIA,OAHA,6EACA,4BACA,0BACA,gCAEA,0DAAAC,SACA,8DAPA,IASAC,SACAC,0BACA,6BACA,OACA,mBAGAC,8BAAA,4JAMA,OALA,eACAC,GACApB,oBACAqB,qBACAC,sBACA,SACA,uDAAAC,SACA,mDACA,yDACA,+DAEA,sDACA,sDACA,oDACA,yDACA,wCACA,8EAEA,qBACA,uBAGA,yDAvBA,IAyBAC,wBACA,eACAC,yBAEA,sBACA,yCACA,sCAEA,gDAEAC,2BACA,IACA,+BACA,yCACA,+BACA,qCACA,iCACA,2DACA,6BACA,6BACA,qCAEA,4EACA,sFC/QuW,I,wBCQnWC,EAAY,eACd,EACA7D,EACAuC,GACA,EACA,KACA,WACA,MAIa,aAAAsB,E","file":"js/chunk-2f808836.3778b133.js","sourcesContent":["export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--9-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--9-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./UsageDashboard.vue?vue&type=style&index=0&id=579e369f&prod&lang=scss&scoped=true&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"vasion-main-inner-div flex-center\"},[_c('Loading',{staticClass:\"vasion-loading-indicator\",attrs:{\"active\":_vm.isLoading,\"is-full-page\":false,\"color\":_vm.loaderColor,\"loader\":\"dots\",\"background-color\":_vm.loaderBackgroundColor},on:{\"update:active\":function($event){_vm.isLoading=$event}}}),_c('div',{attrs:{\"id\":\"wrapper\"}},[_c('div',{staticClass:\"md-layout-item vasion-page-title\"},[_vm._v(\" Usage Dashboard \")]),_c('div',{staticClass:\"row\"},[_c('div',{staticClass:\"small-card\"},[_c('div',[_c('span',[_vm._v(_vm._s(_vm.totalWorkflows.toLocaleString()))]),_c('div',{staticClass:\"card-text\"},[_vm._v(\" Total Workflows \")])]),_c('div',{staticClass:\"icon-container\",style:({ backgroundColor : '#ffece5' })},[_c('VasionTotalWorkflowsIcon',{attrs:{\"id\":\"other-workflow-icon\"}})],1)]),_c('div',{staticClass:\"small-card\"},[_c('div',[_c('span',[_vm._v(\" \"+_vm._s(_vm.totalForms.toLocaleString())+\" \")]),_c('div',{staticClass:\"card-text\"},[_vm._v(\" Total Forms \")])]),_c('div',{staticClass:\"icon-container\",style:({ backgroundColor : '#e5f0fc' })},[_c('VasionTotalFormsIcon',{attrs:{\"id\":\"files-labeled-icon\"}})],1)]),_c('div',{staticClass:\"small-card\"},[_c('div',[_c('span',[_vm._v(\" \"+_vm._s(_vm.totalFolders.toLocaleString())+\" \")]),_c('div',{staticClass:\"card-text\"},[_vm._v(\" Total Folders \")])]),_c('div',{staticClass:\"icon-container\",style:({ backgroundColor : '#fff6e5' })},[_c('VasionFoldersStackedIcon',{attrs:{\"id\":\"folders-stacked-icon\"}})],1)]),_c('div',{staticClass:\"small-card\"},[_c('div',[_c('span',[_vm._v(\" \"+_vm._s(_vm.totalUsers.toLocaleString())+\" \")]),_c('div',{staticClass:\"card-text\"},[_vm._v(\" Total Users \")])]),_c('div',{staticClass:\"icon-container\",style:({ backgroundColor : '#ebe7eb' })},[_c('VasionGroupIcon',{attrs:{\"id\":\"group-icon\"}})],1)])]),_c('div',{staticClass:\"row\"},[_c('div',{staticClass:\"medium-card\"},[_c('span',[_vm._v(\"Storage\")]),_c('div',{staticClass:\"chart-and-data\"},[(_vm.usedStoragePercentage > 0)?_c('VasionGaugeChart',{staticClass:\"gauge-chart\",attrs:{\"colorProp\":\"#ffab00\",\"percentProp\":_vm.usedStoragePercentage,\"heightProp\":180,\"labelProp\":\"Used Storage\"}}):_vm._e(),_c('div',{staticClass:\"data\"},[_c('div',{staticClass:\"data-row\"},[_c('div',{staticClass:\"data-item\"},[_c('div',{staticClass:\"card-text\"},[_vm._v(\" Storage Used \")]),_c('span',[_vm._v(\" \"+_vm._s(_vm.storageUsed.toLocaleString())+\" \")])]),_c('div',{staticClass:\"data-item\"},[_c('div',{staticClass:\"card-text\"},[_vm._v(\" Total Folders \")]),_c('span',[_vm._v(\" \"+_vm._s(_vm.totalFolders.toLocaleString())+\" \")])])]),_c('div',{staticClass:\"data-row\"},[_c('div',{staticClass:\"data-item\"},[_c('div',{staticClass:\"card-text\"},[_vm._v(\" Storage Allocated \")]),_c('span',[_vm._v(\" \"+_vm._s(_vm.storageAllocated.toLocaleString())+\" \")])]),_c('div',{staticClass:\"data-item\"},[_c('div',{staticClass:\"card-text\"},[_vm._v(\" Total Documents \")]),_c('span',[_vm._v(\" \"+_vm._s(_vm.totalDocuments.toLocaleString())+\" \")])])])])],1)]),_c('div',{staticClass:\"medium-card\"},[_c('span',[_vm._v(\"Users\")]),_c('div',{staticClass:\"chart-and-data\"},[(_vm.activeUsersPercentage > 0)?_c('VasionGaugeChart',{staticClass:\"gauge-chart\",attrs:{\"colorProp\":\"#400f3f\",\"percentProp\":_vm.activeUsersPercentage,\"heightProp\":180,\"labelProp\":\"Active Users\"}}):_vm._e(),_c('div',{staticClass:\"data\"},[_c('div',{staticClass:\"data-row\"},[_c('div',{staticClass:\"data-item\"},[_c('div',{staticClass:\"card-text\"},[_vm._v(\" Total Users \")]),_c('span',[_vm._v(\" \"+_vm._s(_vm.totalUsers.toLocaleString())+\" \")])])]),_c('div',{staticClass:\"data-row\"},[_c('div',{staticClass:\"data-item\"},[_c('div',{staticClass:\"card-text\"},[_vm._v(\" Logged in Users \")]),_c('span',[_vm._v(\" \"+_vm._s(_vm.activeUsers.toLocaleString())+\" \")])])])])],1)])]),_c('div',{staticClass:\"large-card\"},[_c('table',{staticClass:\"date-range\"},[_c('tr',[_c('td',{staticClass:\"w50\"},[_c('VasionDateTimeField',{attrs:{\"label\":\"From Date\",\"type\":\"date\"},model:{value:(_vm.fromDate),callback:function ($$v) {_vm.fromDate=$$v},expression:\"fromDate\"}})],1),_c('td',{staticClass:\"w50\"},[_c('VasionDateTimeField',{attrs:{\"label\":\"Through Date\",\"type\":\"date\"},model:{value:(_vm.toDate),callback:function ($$v) {_vm.toDate=$$v},expression:\"toDate\"}})],1)])]),_c('VasionColumnChart',{attrs:{\"id\":\"columnChart\",\"colorProp\":\"#006be3\",\"dataProp\":_vm.transactionsData,\"labelsProp\":_vm.labels,\"heightProp\":\"330\",\"titleProp\":\"Transactions\"}})],1)])],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div class=\"vasion-main-inner-div flex-center\">\n    <Loading\n      class=\"vasion-loading-indicator\"\n      :active.sync=\"isLoading\"\n      :is-full-page=\"false\"\n      :color=\"loaderColor\"\n      loader=\"dots\"\n      :background-color=\"loaderBackgroundColor\"\n    />\n    <div id=\"wrapper\">\n      <div class=\"md-layout-item vasion-page-title\">\n        Usage Dashboard\n      </div>\n      <div class=\"row\">\n        <div class=\"small-card\">\n          <div>\n            <span>{{ totalWorkflows.toLocaleString() }}</span>\n            <div class=\"card-text\">\n              Total Workflows\n            </div>\n          </div>\n          <div class=\"icon-container\" :style=\"{ backgroundColor : '#ffece5' }\">\n            <VasionTotalWorkflowsIcon id=\"other-workflow-icon\" />\n          </div>\n        </div>\n        <div class=\"small-card\">\n          <div>\n            <span> {{ totalForms.toLocaleString() }} </span>\n            <div class=\"card-text\">\n              Total Forms\n            </div>\n          </div>\n          <div class=\"icon-container\" :style=\"{ backgroundColor : '#e5f0fc' }\">\n            <VasionTotalFormsIcon id=\"files-labeled-icon\" />\n          </div>\n        </div>\n        <div class=\"small-card\">\n          <div>\n            <span> {{ totalFolders.toLocaleString() }} </span>\n            <div class=\"card-text\">\n              Total Folders\n            </div>\n          </div>\n          <div class=\"icon-container\" :style=\"{ backgroundColor : '#fff6e5' }\">\n            <VasionFoldersStackedIcon id=\"folders-stacked-icon\" />\n          </div>\n        </div>\n        <div class=\"small-card\">\n          <div>\n            <span> {{ totalUsers.toLocaleString() }} </span>\n            <div class=\"card-text\">\n              Total Users\n            </div>\n          </div>\n          <div class=\"icon-container\" :style=\"{ backgroundColor : '#ebe7eb' }\">\n            <VasionGroupIcon id=\"group-icon\" />\n          </div>\n        </div>\n      </div>\n\n      <div class=\"row\">\n        <div class=\"medium-card\">\n          <span>Storage</span>\n          <div class=\"chart-and-data\">\n            <VasionGaugeChart\n              v-if=\"usedStoragePercentage > 0\"\n              colorProp=\"#ffab00\"\n              :percentProp=\"usedStoragePercentage\"\n              :heightProp=\"180\"\n              labelProp=\"Used Storage\"\n              class=\"gauge-chart\"\n            />\n            <div class=\"data\">\n              <div class=\"data-row\">\n                <div class=\"data-item\">\n                  <div class=\"card-text\">\n                    Storage Used\n                  </div>\n                  <span> {{ storageUsed.toLocaleString() }} </span>\n                </div>\n                <div class=\"data-item\">\n                  <div class=\"card-text\">\n                    Total Folders\n                  </div>\n                  <span> {{ totalFolders.toLocaleString() }} </span>\n                </div>\n              </div>\n              <div class=\"data-row\">\n                <div class=\"data-item\">\n                  <div class=\"card-text\">\n                    Storage Allocated\n                  </div>\n                  <span> {{ storageAllocated.toLocaleString() }} </span>\n                </div>\n                <div class=\"data-item\">\n                  <div class=\"card-text\">\n                    Total Documents\n                  </div>\n                  <span> {{ totalDocuments.toLocaleString() }} </span>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"medium-card\">\n          <span>Users</span>\n          <div class=\"chart-and-data\">\n            <VasionGaugeChart\n              v-if=\"activeUsersPercentage > 0\"\n              colorProp=\"#400f3f\"\n              :percentProp=\"activeUsersPercentage\"\n              :heightProp=\"180\"\n              labelProp=\"Active Users\"\n              class=\"gauge-chart\"\n            />\n            <div class=\"data\">\n              <div class=\"data-row\">\n                <div class=\"data-item\">\n                  <div class=\"card-text\">\n                    Total Users\n                  </div>\n                  <span> {{ totalUsers.toLocaleString() }} </span>\n                </div>\n              </div>\n              <div class=\"data-row\">\n                <div class=\"data-item\">\n                  <div class=\"card-text\">\n                    Logged in Users\n                  </div>\n                  <span> {{ activeUsers.toLocaleString() }} </span>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"large-card\">\n        <table class=\"date-range\">\n          <tr>\n            <td class=\"w50\">\n              <VasionDateTimeField\n                v-model=\"fromDate\"\n                label=\"From Date\"\n                type=\"date\"\n              />\n            </td>\n            <td class=\"w50\">\n              <VasionDateTimeField\n                v-model=\"toDate\"\n                label=\"Through Date\"\n                type=\"date\"\n              />\n            </td>\n          </tr>\n        </table>\n        <VasionColumnChart\n          id=\"columnChart\"\n          colorProp=\"#006be3\"\n          :dataProp=\"transactionsData\"\n          :labelsProp=\"labels\"\n          heightProp=\"330\"\n          titleProp=\"Transactions\"\n        />\n      </div>\n    </div>\n  </div>\n</template>\n<script>\nimport Loading from 'vue-loading-overlay';\nimport { loaderBackgroundColor, loaderColor } from '@/assets/js/styleConfig'\n\nexport default {\n  name: 'UsageDashboard',\n  components: {\n    Loading,\n  },\n  data() {\n    return {\n      activeUsersPercentage: 0,\n      activeUsers: 0,\n      fromDate: '',\n      isLoading: false,\n      labels: [],\n      loaderBackgroundColor,\n      loaderColor,\n      storageAllocated: 0,\n      storageUsed: 0.0,\n      toDate: '',\n      totalDocuments: 0,\n      totalFolders: 0,\n      totalFoldersAndSubfolders: 0,\n      totalForms: 0,\n      totalUsers: 0,\n      totalWorkflows: 0,\n      transactionsData: [],\n      usedStoragePercentage: 0,\n    }\n  },\n  computed: {\n    dateData() { return `${this.fromDate}|${this.toDate}` },\n    hasTransactionData() { return this.labels.length > 0 && this.transactionsData.length > 0 },\n  },\n  watch: {\n    dateData() { this.getTransactionData() },\n  },\n  async created() {\n    this.$material.locale.dateFormat = this.$store.state.systemSettings.systemDateFormat\n    this.fromDate = this.getYesterday()\n    this.toDate = this.getYesterday()\n    this.getTransactionData()\n\n    const stats = await this.$store.dispatch('admin/loadDashboardStatistics')\n    this.setStatDetails(stats)\n  },\n  methods: {\n    changeLabel(previousLabel, newLabel) {\n      const index = this.labels.indexOf(previousLabel)\n      if (index >= 0) {\n        this.labels[index] = newLabel\n      }\n    },\n    async getTransactionData() {\n      this.isLoading = true\n      const payload = {\n        fromDate: this.fromDate,\n        throughDate: this.toDate,\n        searchOnMajorOnly: true,\n      }\n      const results = await this.$store.dispatch('admin/getTransactionData', payload)\n      if (results?.Values && results.Values.length > 0) {\n        this.labels = results.Values.map(e => e.majorName)\n        this.transactionsData = results.Values.map(e => e.count)\n\n        this.changeLabel('Automated Action', 'Automated Actions')\n        this.changeLabel('Create Document', 'Documents Uploaded')\n        this.changeLabel('Form Submission', 'Form Submissions')\n        this.changeLabel('Initiate Workflow', 'Workflows Initiated')\n        this.changeLabel('OCR Page', 'Pages OCRed')\n        this.changeLabel('Signature Workflow Started', 'Signature Workflows Initiated')\n      } else {\n        this.labels = ['No Data']\n        this.transactionsData = []\n      }\n\n      this.isLoading = false\n    },\n    getYesterday() {\n      const today = new Date()\n      today.setDate(today.getDate() - 1)\n\n      const year = today.getFullYear()\n      const month = String(today.getMonth() + 1).padStart(2, '0')\n      const day = String(today.getDate()).padStart(2, '0')\n\n      return `${year}-${month}-${day}`\n    },\n    setStatDetails(obj) {\n      if (obj) {\n        this.activeUsers = obj.activeUsers\n        this.storageAllocated = obj.storageAllocated\n        this.storageUsed = obj.storageUsed\n        this.totalDocuments = obj.totalDocuments\n        this.totalFolders = obj.totalFolders\n        this.totalFoldersAndSubfolders = obj.totalFoldersAndSubfolders\n        this.totalForms = obj.totalForms\n        this.totalUsers = obj.totalUsers\n        this.totalWorkflows = obj.totalWorkflows\n\n        this.activeUsersPercentage = Math.round((this.activeUsers / this.totalUsers) * 100)\n        this.usedStoragePercentage = Math.round((this.storageUsed / this.storageAllocated) * 100)\n      }\n    },\n  },\n}\n</script>\n<style lang=\"scss\" scoped>\n  @import '@/assets/css/variables.scss';\n  .vasion-main-inner-div {\n    height: 90vh;\n    overflow-y: auto;\n    overflow-x: hidden;\n  }\n\n  .row {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n  }\n  // The width of the small-card affects if they are all displayed in one row or\n  // wrap into multiple, at 395px the screen Minimum width before the cards start to wrap into other rows\n  // is 1905px\n  .small-card {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    min-width: 392px; // 330px works for screens between 1905px - 1655px width\n    height: 96px;\n    padding: 24px;\n    margin: 10px;\n  }\n  .medium-card {\n    width: 800px; // 680px with 10px of margin works for screens in between 1905px - 1655px\n    height: 298px;\n    margin: 12px;\n    padding: 24px 89px 48px 16px;\n    .chart-and-data {\n      display: flex;\n      flex-direction: row;\n      justify-content: space-between;\n      align-items: center;\n    }\n    .data {\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      height: 150px;\n    }\n    .data-row {\n      display: flex;\n      flex-direction: row;\n      width: 300px;\n      justify-content: space-between;\n    }\n    .data-item {\n      width: 126px;\n    }\n  }\n  .large-card {\n    position: relative;\n    width: 100%;\n    margin-top: 10px;\n    max-width: 1624px;\n    padding: 16px 16px 32px;\n  }\n  #columnChart::v-deep .apexcharts-svg {\n    min-height: 350px !important;\n  }\n  .small-card, .large-card, .medium-card {\n    border-radius: 8px;\n    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.11), 0 4px 8px 0 rgba(0, 0, 0, 0.13);\n    background-color: white;\n  }\n  .gauge-chart {\n    width: 325px;\n  }\n  .icon-container {\n    width: 48px;\n    height: 48px;\n    padding: 12px;\n    border-radius: 24px;\n  }\n  span {\n    width: 72px;\n    height: 22px;\n    margin: 0 6px 24px 0;\n    font-family: Archivo;\n    font-size: 20px;\n    font-weight: 500;\n    font-stretch: normal;\n    font-style: normal;\n    line-height: normal;\n    letter-spacing: normal;\n    color: black;\n  }\n  .card-text {\n    margin: 9px 0;\n    font-family: Archivo;\n    font-size: 16px;\n    font-weight: 500;\n    font-stretch: normal;\n    font-style: normal;\n    line-height: normal;\n    letter-spacing: normal;\n    color: $grey-400;\n  }\n  #other-workflow-icon {\n    fill: $orange-300;\n  }\n  #files-labeled-icon {\n    fill: $blue-300;\n  }\n  #folders-stacked-icon {\n    fill: #ffab00;\n  }\n  #group-icon {\n    fill: $plumb-300;\n  }\n  #wrapper {\n    max-width: 1700px;\n  }\n  .flex-center {\n    display: flex;\n    justify-content: center;\n  }\n  .date-range {\n    position: absolute;\n    z-index: 2;\n    top: 5px;\n    right: 5%;\n  }\n  .w50 {\n    width: 50%;\n    padding-right: 10px;\n  }\n</style>\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./UsageDashboard.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./UsageDashboard.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./UsageDashboard.vue?vue&type=template&id=579e369f&scoped=true&\"\nimport script from \"./UsageDashboard.vue?vue&type=script&lang=js&\"\nexport * from \"./UsageDashboard.vue?vue&type=script&lang=js&\"\nimport style0 from \"./UsageDashboard.vue?vue&type=style&index=0&id=579e369f&prod&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"579e369f\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}