From de27b59e2b4fc706af165877e9fc6083f3254215 Mon Sep 17 00:00:00 2001
From: John Cardinal <support@ayanova.com>
Date: Wed, 2 Mar 2022 21:06:36 +0000
Subject: [PATCH]

---
 ayanova/devdocs/todo.txt                      |  25 +-
 ayanova/src/api/dash-registry.js              |  54 ++-
 .../dash-work-order-created-count-bar.vue     | 388 +++++++++++++++++
 .../dash-work-order-created-count-line.vue    | 391 ++++++++++++++++++
 ayanova/src/views/home-dashboard.vue          |   7 +-
 5 files changed, 838 insertions(+), 27 deletions(-)
 create mode 100644 ayanova/src/components/dash-work-order-created-count-bar.vue
 create mode 100644 ayanova/src/components/dash-work-order-created-count-line.vue

diff --git a/ayanova/devdocs/todo.txt b/ayanova/devdocs/todo.txt
index ee1ec0da..2e5834c6 100644
--- a/ayanova/devdocs/todo.txt
+++ b/ayanova/devdocs/todo.txt
@@ -50,35 +50,12 @@ https://www.calculator.net/percent-calculator.html
 - Widgets to make for beta in order of priority
 	**MUST HAVE***
 
-		* LIST overdue workorders (booked on, in the past, not a closed status, passed completeby date) for current scheduleable user
-			criteria:
-				tags wo, woitem
-
-SELECT distinct(AWORKORDER.ID),
-	AWORKORDER.SERIAL,
-	AWORKORDER.completebydate,
-	ACUSTOMER.NAME,
-	AWORKORDER.NOTES
-FROM AWORKORDER
-LEFT JOIN AWORKORDERITEM ON AWORKORDER.ID = AWORKORDERITEM.WORKORDERID
-LEFT JOIN AWORKORDERITEMSCHEDULEDUSER ON AWORKORDERITEM.ID = AWORKORDERITEMSCHEDULEDUSER.WORKORDERITEMID
-LEFT JOIN AWORKORDERSTATUS ON (AWORKORDER.LASTSTATUSID = AWORKORDERSTATUS.ID)
-LEFT JOIN ACUSTOMER ON (AWORKORDER.CUSTOMERID = ACUSTOMER.ID)
-WHERE (LASTSTATUSID IS NULL	OR AWORKORDERSTATUS.COMPLETED = FALSE) and aworkorder.completebydate < now()
-	AND AWORKORDERITEMSCHEDULEDUSER.userID = 10
-ORDER BY AWORKORDER.ID ASC
-
-
-
-
-		* LIST overdue workorders list not user centric available to service manager roles
-			criteria:
-				tags wo, woitem
 
 		LINE/BAR Count of work orders created per day over time (from case 1882)
 			criteria: 
 				timespan and INTERVAL
 				tags wo
+				
 		BAR % wo completed status vs not completed by completed date within interval
 			query is 
 				all wo not completed that should be by now within the interval vs all that were completed within the interval, count up each, count up the total and present as a pct for that interval
diff --git a/ayanova/src/api/dash-registry.js b/ayanova/src/api/dash-registry.js
index 6a917b7f..33b8c7e7 100644
--- a/ayanova/src/api/dash-registry.js
+++ b/ayanova/src/api/dash-registry.js
@@ -5,6 +5,54 @@ const role = authorizationroles.AUTHORIZATION_ROLES;
 */
 export default {
   registry: [
+    {
+      roles: [
+        role.BizAdmin,
+        role.BizAdminRestricted,
+        role.ServiceRestricted,
+        role.Service,
+        role.Accounting
+      ],
+      title: "DashboardCountWorkOrdersCreated",
+      icon: "$ayiChartLine",
+      type: "GzDashWorkOrderCreatedCountLine",
+      scheduleableUserOnly: false,
+      singleOnly: false,
+      settings: {
+        customTitle: null,
+        timeSpan: "*thisyear*",
+        interval: "day",
+        wotags: [],
+        wotagsany: true,
+        woitemtags: [],
+        woitemtagsany: true,
+        color: "#00205B"
+      }
+    },
+    {
+      roles: [
+        role.BizAdmin,
+        role.BizAdminRestricted,
+        role.ServiceRestricted,
+        role.Service,
+        role.Accounting
+      ],
+      title: "DashboardCountWorkOrdersCreated",
+      icon: "$ayiChartBar",
+      type: "GzDashWorkOrderCreatedCountBar",
+      scheduleableUserOnly: false,
+      singleOnly: false,
+      settings: {
+        customTitle: null,
+        timeSpan: "*thisyear*",
+        wotags: [],
+        wotagsany: true,
+        woitemtags: [],
+        woitemtagsany: true,
+        interval: "month",
+        color: "#00205B"
+      }
+    },
     {
       roles: [
         role.BizAdmin,
@@ -254,6 +302,10 @@ export default {
   },
   async cacheTranslationsForAvailableItems() {
     const items = this.availableItems();
-    await window.$gz.translation.cacheTranslations(items.map(z => z.title));
+
+    //await window.$gz.translation.cacheTranslations(items.map(z => z.title));
+    await window.$gz.translation.cacheTranslations([
+      ...new Set(items.map(z => z.title))
+    ]);
   }
 };
diff --git a/ayanova/src/components/dash-work-order-created-count-bar.vue b/ayanova/src/components/dash-work-order-created-count-bar.vue
new file mode 100644
index 00000000..5cc61abb
--- /dev/null
+++ b/ayanova/src/components/dash-work-order-created-count-bar.vue
@@ -0,0 +1,388 @@
+<template>
+  <gz-dash
+    icon="$ayiTools"
+    :show-context-button="true"
+    :update-frequency="900000"
+    v-bind="[$props, $attrs]"
+    @dash-refresh="getDataFromApi()"
+    @dash-context="showContext()"
+    v-on="$listeners"
+  >
+    <template slot="main">
+      <v-sheet
+        v-if="obj.length == 0"
+        height="400"
+        class="ml-6 mt-6 text-h4 grey--text text--lighten-1"
+      >
+        {{ $ay.t("NoData") }}
+      </v-sheet>
+      <gz-chart-bar v-else :chart-data="chartData" :options="chartOptions" />
+    </template>
+
+    <template slot="settings">
+      <div></div>
+      <v-col v-if="context" cols="12">
+        <v-dialog
+          v-model="context"
+          scrollable
+          max-width="400px"
+          data-cy="dashSettings"
+          @keydown.esc="cancel"
+        >
+          <v-card elevation="24">
+            <v-card-title class="text-h5 lighten-2" primary-title>
+              <span> {{ $ay.t("Settings") }} </span>
+            </v-card-title>
+
+            <v-card-text>
+              <v-select
+                v-model="localSettings.timeSpan"
+                class="mt-4"
+                :items="selectLists.dateFilterTokens"
+                item-text="name"
+                item-value="id"
+                :label="$ay.t('TimeSpan')"
+              ></v-select>
+
+              <v-select
+                v-model="localSettings.interval"
+                class="mt-4"
+                :items="selectLists.units"
+                item-text="name"
+                item-value="id"
+                :label="$ay.t('Interval')"
+              ></v-select>
+
+              <gz-tag-picker
+                v-model="localSettings.wotags"
+                class="mt-4"
+                :label="$ay.t('Tags') + ' - ' + $ay.t('WorkOrder')"
+              ></gz-tag-picker>
+              <v-radio-group
+                v-if="localSettings.wotags.length > 1"
+                v-model="localSettings.wotagsany"
+                row
+                class="mt-n3"
+              >
+                <v-radio
+                  :label="$ay.t('GridFilterDialogAndRadioText')"
+                  :value="false"
+                ></v-radio>
+                <v-radio
+                  :label="$ay.t('GridFilterDialogOrRadioText')"
+                  :value="true"
+                ></v-radio>
+              </v-radio-group>
+
+              <gz-tag-picker
+                v-model="localSettings.woitemtags"
+                class="mt-4"
+                :label="$ay.t('Tags') + ' - ' + $ay.t('WorkOrderItem')"
+              ></gz-tag-picker>
+              <v-radio-group
+                v-if="localSettings.woitemtags.length > 1"
+                v-model="localSettings.woitemtagsany"
+                row
+                class="mt-n3"
+              >
+                <v-radio
+                  :label="$ay.t('GridFilterDialogAndRadioText')"
+                  :value="false"
+                ></v-radio>
+                <v-radio
+                  :label="$ay.t('GridFilterDialogOrRadioText')"
+                  :value="true"
+                ></v-radio>
+              </v-radio-group>
+
+              <v-text-field
+                v-model="localSettings.customTitle"
+                class="mt-4"
+                :label="$ay.t('Name')"
+              ></v-text-field>
+
+              <v-color-picker
+                v-model="localSettings.color"
+                class="mt-4"
+                hide-mode-switch
+                hide-inputs
+                mode="hexa"
+              ></v-color-picker>
+            </v-card-text>
+
+            <v-divider></v-divider>
+            <v-card-actions>
+              <v-btn color="primary" text @click.native="context = false">{{
+                $ay.t("Cancel")
+              }}</v-btn>
+              <v-spacer></v-spacer>
+              <v-btn
+                color="primary"
+                text
+                class="ml-4"
+                @click="updateSettings"
+                >{{ $ay.t("Save") }}</v-btn
+              >
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
+      </v-col>
+    </template>
+  </gz-dash>
+</template>
+<script>
+import GzDash from "./dash-base.vue";
+export default {
+  components: {
+    GzDash
+  },
+  props: {
+    settings: { type: Object, default: null }
+  },
+  data() {
+    return {
+      obj: {},
+      context: false,
+      localSettings: {},
+      selectLists: {
+        dateFilterTokens: [],
+        units: []
+      },
+      chartOptions: {
+        responsive: true,
+        maintainAspectRatio: false,
+        scales: {
+          xAxes: [
+            {
+              type: "time",
+              time: {
+                unit: "day"
+              },
+              gridLines: {
+                drawOnChartArea: false
+              },
+              offset: true
+            }
+          ],
+          yAxes: [
+            {
+              gridLines: {
+                drawOnChartArea: false
+              },
+              ticks: {
+                beginAtZero: true
+              }
+            }
+          ]
+        }
+      }
+    };
+  },
+  computed: {
+    chartData() {
+      return {
+        datasets: [
+          {
+            label: this.$ay.t("WorkOrderList"),
+            backgroundColor: this.settings.color ?? "#000000",
+            data: this.obj
+          }
+        ]
+      };
+    }
+  },
+  async created() {
+    await initWidget(this);
+  },
+  async mounted() {
+    //must be called from mounted to have refs available
+    //console.log("reminders-mounted");
+    await this.getDataFromApi();
+  },
+  methods: {
+    showContext: function() {
+      this.localSettings = window.$gz.util.deepCopySkip(this.settings);
+      this.context = true;
+    },
+    updateSettings: function() {
+      //copy settings from local to parent settings, need to do it this way or get error about mutating prop directly which is vexing and has no easy solution seemingly
+      this.settings.customTitle = this.localSettings.customTitle;
+      this.settings.timeSpan = this.localSettings.timeSpan;
+      this.settings.interval = this.localSettings.interval;
+      this.settings.color = this.localSettings.color;
+      this.settings.wotags = this.localSettings.wotags;
+      this.settings.wotagsany = this.localSettings.wotagsany;
+      this.settings.woitemtags = this.localSettings.woitemtags;
+      this.settings.woitemtagsany = this.localSettings.woitemtagsany;
+
+      this.$emit("dash-change"); //trigger save to server
+      this.context = false;
+      this.getDataFromApi();
+    },
+
+    async getDataFromApi() {
+      try {
+        this.errorMessage = null;
+        const res = await window.$gz.api.post("kpi", {
+          KPIName: "WorkOrderCreatedCount",
+          criteria: {
+            timeSpan: this.settings.timeSpan,
+            interval: this.settings.interval,
+            wotags: this.settings.wotags,
+            wotagsany: this.settings.wotagsany,
+            woitemtags: this.settings.woitemtags,
+            woitemtagsany: this.settings.woitemtagsany
+          },
+          clientTimeStamp: window.$gz.locale.clientLocalZoneTimeStamp()
+        });
+        if (res.error) {
+          this.errorMessage = res.error;
+        } else {
+          this.chartOptions.scales.xAxes[0].time.unit = this.settings.interval;
+          res.data.forEach(z => {
+            z.x = new Date(z.x) //convert to locale timezone and output in the closest thing to iso-8601 format
+              .toLocaleString("sv-SE", {
+                timeZone: this.timeZoneName
+              });
+          });
+          this.obj = res.data;
+        }
+      } catch (error) {
+        this.errorMessage = error.toString();
+      }
+    }
+  }
+};
+
+/////////////////////////////////
+//
+//
+async function initWidget(vm) {
+  await fetchTranslatedText();
+  populateSelectionLists(vm);
+}
+
+//////////////////////////////////////////////////////////
+//
+// Ensures UI translated text is available
+//
+async function fetchTranslatedText() {
+  await window.$gz.translation.cacheTranslations([
+    "Filter",
+    "DateRangeYesterday",
+    "DateRangeToday",
+    "DateRangeLastWeek",
+    "DateRangeThisWeek",
+    "DateRangeNextWeek",
+    "DateRangeLastMonth",
+    "DateRangeThisMonth",
+    "DateRangeNextMonth",
+    "DateRange14DayWindow",
+    "DateRangePast",
+    "DateRangeLastYear",
+    "DateRangeThisYear",
+    "DateRangeInTheLastThreeMonths",
+    "DateRangeInTheLastSixMonths",
+    "DateRangePastYear",
+    "DateRangePast90Days",
+    "DateRangePast30Days",
+    "DateRangePast7Days",
+    "DateRangePast24Hours",
+    "DateRangePast6Hours",
+    "DateRangeJanuary",
+    "DateRangeFebruary",
+    "DateRangeMarch",
+    "DateRangeApril",
+    "DateRangeMay",
+    "DateRangeJune",
+    "DateRangeJuly",
+    "DateRangeAugust",
+    "DateRangeSeptember",
+    "DateRangeOctober",
+    "DateRangeNovember",
+    "DateRangeDecember",
+    "DateRangePreviousYearThisMonth",
+    "DateRangePreviousYearLastMonth",
+    "DateRangePreviousYearNextMonth",
+    "TimeSpanDays",
+    "TimeSpanMonths",
+    "WorkOrderList",
+    "Name",
+    "TimeSpan",
+    "Interval",
+    "WorkOrder",
+    "WorkOrderItem",
+    "GridFilterDialogAndRadioText",
+    "GridFilterDialogOrRadioText"
+  ]);
+}
+
+/////////////////////////////////
+//
+//
+function populateSelectionLists(vm) {
+  vm.selectLists.dateFilterTokens.push(
+    ...[
+      // { name: vm.$ay.t("DateRangeYesterday"), id: "*yesterday*" },
+      // { name: vm.$ay.t("DateRangeToday"), id: "*today*" },
+      { name: vm.$ay.t("DateRangeThisYear"), id: "*thisyear*" },
+      { name: vm.$ay.t("DateRangeThisMonth"), id: "*thismonth*" },
+      { name: vm.$ay.t("DateRangeThisWeek"), id: "*thisweek*" },
+      { name: vm.$ay.t("DateRangeLastYear"), id: "*lastyear*" }, //prior year from jan to dec
+      { name: vm.$ay.t("DateRangeLastMonth"), id: "*lastmonth*" },
+      { name: vm.$ay.t("DateRangeLastWeek"), id: "*lastweek*" },
+      //-------------------------- rando ones -------------------
+      { name: vm.$ay.t("DateRange14DayWindow"), id: "*14daywindow*" },
+      { name: vm.$ay.t("DateRangePast"), id: "*past*" },
+      {
+        name: vm.$ay.t("DateRangeInTheLastThreeMonths"),
+        id: "*last3months*"
+      },
+      {
+        name: vm.$ay.t("DateRangeInTheLastSixMonths"),
+        id: "*last6months*"
+      },
+      { name: vm.$ay.t("DateRangePastYear"), id: "*pastyear*" }, //last 365 days
+      { name: vm.$ay.t("DateRangePast90Days"), id: "*past90days*" },
+      { name: vm.$ay.t("DateRangePast30Days"), id: "*past30days*" },
+      { name: vm.$ay.t("DateRangePast7Days"), id: "*past7days*" },
+      // { name: vm.$ay.t("DateRangePast24Hours"), id: "*past24hours*" },
+      // { name: vm.$ay.t("DateRangePast6Hours"), id: "*past6hours*" },
+      { name: vm.$ay.t("DateRangeJanuary"), id: "*january*" },
+      { name: vm.$ay.t("DateRangeFebruary"), id: "*february*" },
+      { name: vm.$ay.t("DateRangeMarch"), id: "*march*" },
+      { name: vm.$ay.t("DateRangeApril"), id: "*april*" },
+      { name: vm.$ay.t("DateRangeMay"), id: "*may*" },
+      { name: vm.$ay.t("DateRangeJune"), id: "*june*" },
+      { name: vm.$ay.t("DateRangeJuly"), id: "*july*" },
+      { name: vm.$ay.t("DateRangeAugust"), id: "*august*" },
+      { name: vm.$ay.t("DateRangeSeptember"), id: "*september*" },
+      { name: vm.$ay.t("DateRangeOctober"), id: "*october*" },
+      { name: vm.$ay.t("DateRangeNovember"), id: "*november*" },
+      { name: vm.$ay.t("DateRangeDecember"), id: "*december*" },
+      {
+        name: vm.$ay.t("DateRangePreviousYearThisMonth"),
+        id: "*lastyearthismonth*"
+      },
+      {
+        name: vm.$ay.t("DateRangePreviousYearLastMonth"),
+        id: "*lastyearlastmonth*"
+      },
+      {
+        name: vm.$ay.t("DateRangePreviousYearNextMonth"),
+        id: "*lastyearnextmonth*"
+      }
+    ]
+  );
+
+  vm.selectLists.units.push(
+    ...[
+      { name: vm.$ay.t("TimeSpanDays"), id: "day" },
+      {
+        name: vm.$ay.t("TimeSpanMonths"),
+        id: "month"
+      }
+    ]
+  );
+}
+</script>
diff --git a/ayanova/src/components/dash-work-order-created-count-line.vue b/ayanova/src/components/dash-work-order-created-count-line.vue
new file mode 100644
index 00000000..e39f8f49
--- /dev/null
+++ b/ayanova/src/components/dash-work-order-created-count-line.vue
@@ -0,0 +1,391 @@
+<template>
+  <gz-dash
+    icon="$ayiTools"
+    :show-context-button="true"
+    :update-frequency="900000"
+    v-bind="[$props, $attrs]"
+    @dash-refresh="getDataFromApi()"
+    @dash-context="showContext()"
+    v-on="$listeners"
+  >
+    <template slot="main">
+      <v-sheet
+        v-if="obj.length == 0"
+        height="400"
+        class="ml-6 mt-6 text-h4 grey--text text--lighten-1"
+      >
+        {{ $ay.t("NoData") }}
+      </v-sheet>
+      <gz-chart-line v-else :chart-data="chartData" :options="chartOptions" />
+    </template>
+
+    <template slot="settings">
+      <div></div>
+      <v-col v-if="context" cols="12">
+        <v-dialog
+          v-model="context"
+          scrollable
+          max-width="600px"
+          data-cy="dashSettings"
+          @keydown.esc="cancel"
+        >
+          <v-card elevation="24">
+            <v-card-title class="text-h5 lighten-2" primary-title>
+              <span> {{ $ay.t("Settings") }} </span>
+            </v-card-title>
+
+            <v-card-text>
+              <v-select
+                v-model="localSettings.timeSpan"
+                class="mt-4"
+                :items="selectLists.dateFilterTokens"
+                item-text="name"
+                item-value="id"
+                :label="$ay.t('TimeSpan')"
+              ></v-select>
+
+              <v-select
+                v-model="localSettings.interval"
+                class="mt-4"
+                :items="selectLists.units"
+                item-text="name"
+                item-value="id"
+                :label="$ay.t('Interval')"
+              ></v-select>
+
+              <gz-tag-picker
+                v-model="localSettings.wotags"
+                class="mt-4"
+                :label="$ay.t('Tags') + ' - ' + $ay.t('WorkOrder')"
+              ></gz-tag-picker>
+              <v-radio-group
+                v-if="localSettings.wotags.length > 1"
+                v-model="localSettings.wotagsany"
+                row
+                class="mt-n3"
+              >
+                <v-radio
+                  :label="$ay.t('GridFilterDialogAndRadioText')"
+                  :value="false"
+                ></v-radio>
+                <v-radio
+                  :label="$ay.t('GridFilterDialogOrRadioText')"
+                  :value="true"
+                ></v-radio>
+              </v-radio-group>
+
+              <gz-tag-picker
+                v-model="localSettings.woitemtags"
+                class="mt-4"
+                :label="$ay.t('Tags') + ' - ' + $ay.t('WorkOrderItem')"
+              ></gz-tag-picker>
+              <v-radio-group
+                v-if="localSettings.woitemtags.length > 1"
+                v-model="localSettings.woitemtagsany"
+                row
+                class="mt-n3"
+              >
+                <v-radio
+                  :label="$ay.t('GridFilterDialogAndRadioText')"
+                  :value="false"
+                ></v-radio>
+                <v-radio
+                  :label="$ay.t('GridFilterDialogOrRadioText')"
+                  :value="true"
+                ></v-radio>
+              </v-radio-group>
+
+              <v-text-field
+                v-model="localSettings.customTitle"
+                class="mt-4"
+                :label="$ay.t('Name')"
+              ></v-text-field>
+
+              <v-color-picker
+                v-model="localSettings.color"
+                class="mt-4"
+                hide-mode-switch
+                hide-inputs
+                mode="hexa"
+              ></v-color-picker>
+            </v-card-text>
+
+            <v-divider></v-divider>
+            <v-card-actions>
+              <v-btn color="primary" text @click.native="context = false">{{
+                $ay.t("Cancel")
+              }}</v-btn>
+              <v-spacer></v-spacer>
+              <v-btn
+                color="primary"
+                text
+                class="ml-4"
+                @click="updateSettings"
+                >{{ $ay.t("Save") }}</v-btn
+              >
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
+      </v-col>
+    </template>
+  </gz-dash>
+</template>
+<script>
+import GzDash from "./dash-base.vue";
+export default {
+  components: {
+    GzDash
+  },
+  props: {
+    settings: { type: Object, default: null }
+  },
+  data() {
+    return {
+      obj: {},
+      context: false,
+      localSettings: {},
+      selectLists: {
+        dateFilterTokens: [],
+        units: []
+      },
+      chartOptions: {
+        responsive: true,
+        maintainAspectRatio: false,
+        scales: {
+          xAxes: [
+            {
+              type: "time",
+              time: {
+                unit: "day"
+              },
+              gridLines: {
+                drawOnChartArea: false
+              }
+            }
+          ],
+          yAxes: [
+            {
+              gridLines: {
+                drawOnChartArea: false
+              },
+              ticks: {
+                beginAtZero: true
+              }
+            }
+          ]
+        }
+      }
+    };
+  },
+  computed: {
+    chartData() {
+      return {
+        datasets: [
+          {
+            label: this.$ay.t("WorkOrderList"),
+            borderColor: this.settings.color ?? "#000000",
+            fill: false,
+            pointRadius: 2,
+            pointHoverRadius: 6,
+            pointHitRadius: 3,
+            data: this.obj
+          }
+        ]
+      };
+    }
+  },
+  async created() {
+    await initWidget(this);
+  },
+  async mounted() {
+    //must be called from mounted to have refs available
+    //console.log("reminders-mounted");
+    await this.getDataFromApi();
+  },
+  methods: {
+    showContext: function() {
+      this.localSettings = window.$gz.util.deepCopySkip(this.settings);
+      this.context = true;
+    },
+    updateSettings: function() {
+      //copy settings from local to
+      this.settings.customTitle = this.localSettings.customTitle;
+      this.settings.timeSpan = this.localSettings.timeSpan;
+      this.settings.interval = this.localSettings.interval;
+      this.settings.color = this.localSettings.color;
+      this.settings.wotags = this.localSettings.wotags;
+      this.settings.wotagsany = this.localSettings.wotagsany;
+      this.settings.woitemtags = this.localSettings.woitemtags;
+      this.settings.woitemtagsany = this.localSettings.woitemtagsany;
+
+      this.$emit("dash-change");
+      this.context = false;
+      this.getDataFromApi();
+    },
+
+    async getDataFromApi() {
+      try {
+        this.errorMessage = null;
+        const res = await window.$gz.api.post("kpi", {
+          KPIName: "WorkOrderCreatedCount",
+          criteria: {
+            timeSpan: this.settings.timeSpan,
+            interval: this.settings.interval,
+            wotags: this.settings.wotags,
+            wotagsany: this.settings.wotagsany,
+            woitemtags: this.settings.woitemtags,
+            woitemtagsany: this.settings.woitemtagsany
+          },
+          clientTimeStamp: window.$gz.locale.clientLocalZoneTimeStamp()
+        });
+        if (res.error) {
+          this.errorMessage = res.error;
+        } else {
+          this.chartOptions.scales.xAxes[0].time.unit = this.settings.interval;
+          res.data.forEach(z => {
+            z.x = new Date(z.x) //convert to locale timezone and output in the closest thing to iso-8601 format
+              .toLocaleString("sv-SE", {
+                timeZone: this.timeZoneName
+              });
+          });
+          this.obj = res.data;
+        }
+      } catch (error) {
+        this.errorMessage = error.toString();
+      }
+    }
+  }
+};
+
+/////////////////////////////////
+//
+//
+async function initWidget(vm) {
+  await fetchTranslatedText();
+  populateSelectionLists(vm);
+}
+
+//////////////////////////////////////////////////////////
+//
+// Ensures UI translated text is available
+//
+async function fetchTranslatedText() {
+  await window.$gz.translation.cacheTranslations([
+    "Filter",
+    "DateRangeYesterday",
+    "DateRangeToday",
+    "DateRangeLastWeek",
+    "DateRangeThisWeek",
+    "DateRangeNextWeek",
+    "DateRangeLastMonth",
+    "DateRangeThisMonth",
+    "DateRangeNextMonth",
+    "DateRange14DayWindow",
+    "DateRangePast",
+    "DateRangeLastYear",
+    "DateRangeThisYear",
+    "DateRangeInTheLastThreeMonths",
+    "DateRangeInTheLastSixMonths",
+    "DateRangePastYear",
+    "DateRangePast90Days",
+    "DateRangePast30Days",
+    "DateRangePast7Days",
+    "DateRangePast24Hours",
+    "DateRangePast6Hours",
+    "DateRangeJanuary",
+    "DateRangeFebruary",
+    "DateRangeMarch",
+    "DateRangeApril",
+    "DateRangeMay",
+    "DateRangeJune",
+    "DateRangeJuly",
+    "DateRangeAugust",
+    "DateRangeSeptember",
+    "DateRangeOctober",
+    "DateRangeNovember",
+    "DateRangeDecember",
+    "DateRangePreviousYearThisMonth",
+    "DateRangePreviousYearLastMonth",
+    "DateRangePreviousYearNextMonth",
+    "TimeSpanDays",
+    "TimeSpanMonths",
+    "WorkOrderList",
+    "Name",
+    "TimeSpan",
+    "Interval",
+    "WorkOrder",
+    "WorkOrderItem",
+    "GridFilterDialogAndRadioText",
+    "GridFilterDialogOrRadioText"
+  ]);
+}
+
+/////////////////////////////////
+//
+//
+function populateSelectionLists(vm) {
+  vm.selectLists.dateFilterTokens.push(
+    ...[
+      // { name: vm.$ay.t("DateRangeYesterday"), id: "*yesterday*" },
+      // { name: vm.$ay.t("DateRangeToday"), id: "*today*" },
+      { name: vm.$ay.t("DateRangeThisYear"), id: "*thisyear*" },
+      { name: vm.$ay.t("DateRangeThisMonth"), id: "*thismonth*" },
+      { name: vm.$ay.t("DateRangeThisWeek"), id: "*thisweek*" },
+      { name: vm.$ay.t("DateRangeLastYear"), id: "*lastyear*" }, //prior year from jan to dec
+      { name: vm.$ay.t("DateRangeLastMonth"), id: "*lastmonth*" },
+      { name: vm.$ay.t("DateRangeLastWeek"), id: "*lastweek*" },
+      //-------------------------- rando ones -------------------
+      { name: vm.$ay.t("DateRange14DayWindow"), id: "*14daywindow*" },
+      { name: vm.$ay.t("DateRangePast"), id: "*past*" },
+      {
+        name: vm.$ay.t("DateRangeInTheLastThreeMonths"),
+        id: "*last3months*"
+      },
+      {
+        name: vm.$ay.t("DateRangeInTheLastSixMonths"),
+        id: "*last6months*"
+      },
+      { name: vm.$ay.t("DateRangePastYear"), id: "*pastyear*" }, //last 365 days
+      { name: vm.$ay.t("DateRangePast90Days"), id: "*past90days*" },
+      { name: vm.$ay.t("DateRangePast30Days"), id: "*past30days*" },
+      { name: vm.$ay.t("DateRangePast7Days"), id: "*past7days*" },
+      // { name: vm.$ay.t("DateRangePast24Hours"), id: "*past24hours*" },
+      // { name: vm.$ay.t("DateRangePast6Hours"), id: "*past6hours*" },
+      { name: vm.$ay.t("DateRangeJanuary"), id: "*january*" },
+      { name: vm.$ay.t("DateRangeFebruary"), id: "*february*" },
+      { name: vm.$ay.t("DateRangeMarch"), id: "*march*" },
+      { name: vm.$ay.t("DateRangeApril"), id: "*april*" },
+      { name: vm.$ay.t("DateRangeMay"), id: "*may*" },
+      { name: vm.$ay.t("DateRangeJune"), id: "*june*" },
+      { name: vm.$ay.t("DateRangeJuly"), id: "*july*" },
+      { name: vm.$ay.t("DateRangeAugust"), id: "*august*" },
+      { name: vm.$ay.t("DateRangeSeptember"), id: "*september*" },
+      { name: vm.$ay.t("DateRangeOctober"), id: "*october*" },
+      { name: vm.$ay.t("DateRangeNovember"), id: "*november*" },
+      { name: vm.$ay.t("DateRangeDecember"), id: "*december*" },
+      {
+        name: vm.$ay.t("DateRangePreviousYearThisMonth"),
+        id: "*lastyearthismonth*"
+      },
+      {
+        name: vm.$ay.t("DateRangePreviousYearLastMonth"),
+        id: "*lastyearlastmonth*"
+      },
+      {
+        name: vm.$ay.t("DateRangePreviousYearNextMonth"),
+        id: "*lastyearnextmonth*"
+      }
+    ]
+  );
+
+  vm.selectLists.units.push(
+    ...[
+      { name: vm.$ay.t("TimeSpanDays"), id: "day" },
+      {
+        name: vm.$ay.t("TimeSpanMonths"),
+        id: "month"
+      }
+    ]
+  );
+}
+</script>
diff --git a/ayanova/src/views/home-dashboard.vue b/ayanova/src/views/home-dashboard.vue
index 67b7b12e..c24f3c3a 100644
--- a/ayanova/src/views/home-dashboard.vue
+++ b/ayanova/src/views/home-dashboard.vue
@@ -94,7 +94,8 @@ import GzDashWorkorderUnscheduledOpenList from "../components/dash-workorder-uns
 import GzDashCSROpenList from "../components/dash-csr-open-list.vue";
 import GzDashWorkorderOverduePersonalList from "../components/dash-workorder-overdue-personal-list.vue";
 import GzDashWorkorderOverdueAllList from "../components/dash-workorder-overdue-all-list.vue";
-
+import GzDashWorkOrderCreatedCountLine from "../components/dash-work-order-created-count-line.vue";
+import GzDashWorkOrderCreatedCountBar from "../components/dash-work-order-created-count-bar.vue";
 export default {
   components: {
     GzDashLaborHoursPersonalLine,
@@ -107,7 +108,9 @@ export default {
     GzDashLaborHoursEveryoneLine,
     GzDashLaborHoursEveryoneBar,
     GzDashWorkorderOverduePersonalList,
-    GzDashWorkorderOverdueAllList
+    GzDashWorkorderOverdueAllList,
+    GzDashWorkOrderCreatedCountLine,
+    GzDashWorkOrderCreatedCountBar
   },
   data() {
     return {